当前位置：首页 > news >正文

MCP Server开发使用Pixabay网址搜索图片

news 来源：原创 2025/5/22 10:47:57

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 755console.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 请求 URLconst 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"}}
}