MCP Server开发使用Pixabay网址搜索图片
MCP 本质上是为 AI 大模型提供调用外部工具的能力,MCP Server 就是这个能力的具体实现——你可以通过它,把你已有的 API、脚本、服务包装成 AI 能理解和调用的 MCP 工具。我们就以获取图片为例来创建一个 MCP Server,让 AI 根据自然语言来获取图片网站上的图片,比如 Pixabay 图片网站,它就提供了 API 可以让外界来搜索图片。注意这里args一定要配置正确的M
MCP 本质上是为 AI 大模型提供调用外部工具的能力,MCP Server 就是这个能力的具体实现——你可以通过它,把你已有的 API、脚本、服务包装成 AI 能理解和调用的 MCP 工具。
我们就以获取图片为例来创建一个 MCP Server,让 AI 根据自然语言来获取图片网站上的图片,比如 Pixabay 图片网站,它就提供了 API 可以让外界来搜索图片
本次开发使用windows环境
1.安装 Node 环境
node --version
npm --version
2.开发MCP Server准备工作,在一个文件夹下面创建pixabay目录
mkdir pixabay
cd pixabay

3.初始化一个新的npm项目
npm init -y
4.安装相关依赖
npm install @modelcontextprotocol/sdk zod
npm install -D @types/node typescript
5.创建主要目录和空文件index.ts
mkdir src
mkdir src 2> nul || echo "" > src\index.ts
6.更新 package.json 文件
{
"name": "pixabay",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc",
"postbuild": "node scripts/set-permissions.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"@modelcontextprotocol/sdk": "^1.11.0",
"zod": "^3.24.4"
},
"devDependencies": {
"@types/node": "^22.15.14",
"typescript": "^5.8.3"
},
"type": "module",
"bin": {
"pixabay": "./build/index.js"
},
"files": [
"build"
]
}
7.在根目录下生成script目录,创建set-permissions.js文件,内容如下
import fs from 'fs';
import path from 'path';
const filePath = path.join(process.cwd(), 'build', 'index.js');
try {
// Windows 不需要权限设置,仅打印信息
if (process.platform === 'win32') {
console.log('Windows system detected. Skipping chmod.');
} else {
fs.chmodSync(filePath, 0o755); // 等同于 chmod 755
console.log('Permissions set to 755 for build/index.js');
}
} catch (err) {
console.error('Error setting permissions:', err);
}
8.根目录创建 tsconfig.json 文件,内容如下
{
"compilerOptions": {
"target": "ES2022",
"module": "Node16",
"moduleResolution": "Node16",
"outDir": "./build",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
9.在项目 index.ts 文件中添加 MCP Server,内容如下
// MCP - NODE SDK
import { McpServer } from"@modelcontextprotocol/sdk/server/mcp.js";
// 导入 StdioServerTransport 类,用于处理服务器的输入输出通信
import { StdioServerTransport } from"@modelcontextprotocol/sdk/server/stdio.js";
// 导入用于验证输入参数的库
import { z } from"zod";
// Pixabay API URL
const baseUrl = "https://pixabay.com/api/";
/**
* 定义了 MCP Server 实例。
*/
const server = new McpServer({
name: "pixabay",
version: "1.0.0",
capabilities: {
resources: {},
tools: {},
},
});
/**
* 定义了一个名为 "pixabay-image-search" 的工具。
* 该工具接受一个查询字符串和一个图像类型作为输入参数,
* 并返回一个包含图像信息的 JSON 字符串。
*/
server.tool(
'pixabay-image-search',
{
query: z.string(),
type: z.string()
},
async ({ query, type = 'all' }) => {
try {
// 检查是否设置了 PIXABAY_KEY 环境变量
if (!process.env.PIXABAY_KEY) {
console.error("PIXABAY_KEY environment variable is not set");
process.exit(1);
}
console.log("PIXABAY_KEY", process.env.PIXABAY_KEY);
// 构建 Pixabay API 请求 URL
const requestUrl = `${baseUrl}?key=${process.env.PIXABAY_KEY}&q=${query}&image_type=${type}&per_page=3`;
// 发送请求并获取响应
const response = await fetch(requestUrl);
// 检查响应状态
const json = await response.json();
// 返回响应结果
return {
content: [{
type: 'text',
text: JSON.stringify({
images: json.hits || [],
total_results: json.total,
query,
}, null, 2)
}]
}
} catch (e) {
return {
content: [{
type: 'text',
text: `Error: ${e instanceof Error ? e.message : 'Unknown error'}`
}],
isError: true
};
}
}
)
/**
* 启动服务器并建立与传输层的连接。
* 该函数创建一个标准输入输出的服务器传输实例,
* 并使用该实例将服务器连接到传输层。
*/
async function startServer() {
// 创建一个标准输入输出的服务器传输实例,用于处理服务器的输入输出通信
const transport = new StdioServerTransport();
// 等待服务器通过指定的传输实例建立连接
await server.connect(transport);
}
// 启动服务器
startServer();
10.整体目录结构如下

11.命令进行构建
npm run build

12.启动调试参考命令
npx @modelcontextprotocol/inspector node build/index.js

13.MCP Server启动成功
14.MCP Server启动成功
因为支持MCP协议的官方客户端Claude App对中国区禁用,由于Cline是开源免费的,本次学习继续使用Cline工具进行调用如上图片搜索MCP Server
15.在VS CODE 中配置当前图片搜索MCP Server
{
"mcpServers": {
"weather-mcp": {
"autoApprove": [],
"disabled": true,
"timeout": 60,
"command": "node",
"args": [
"C:\\ai\\weather-mcp-server\\weather-server.js"
],
"env": {},
"transportType": "stdio"
},
"image-mcp": {
"autoApprove": [],
"disabled": false,
"timeout": 60,
"command": "node",
"args": [
"C:\\ai\\mcp\\pixabay\\build\\index.js"
],
"env": {},
"transportType": "stdio"
}
}
}

注意这里args一定要配置正确的MCP Server开发的node.js的本地路径

16.服务配置成功,下面开始调用MCP Server进行图片搜索
测试:输入“来一张猫咪图片”
选择act执行,MCP Server生成了图片image的地址

点击地址https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg进行访问
火山引擎开发者社区是火山引擎打造的AI技术生态平台,聚焦Agent与大模型开发,提供豆包系列模型(图像/视频/视觉)、智能分析与会话工具,并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长,新用户可领50万Tokens权益,助力构建智能应用。
更多推荐
所有评论(0)