你想让 AI 不仅能回答问题,还能帮你执行具体任务吗?比如,直接通过对话让 AI 搜索并返回图片?MCP(Model Context Protocol)正是实现这一目标的关键技术,而 MCP Server 则是具体实现这一能力的桥梁。
MCP 的作用是让 AI 大模型能够安全、可控地调用外部工具和服务。我们可以把自己已有的 api、脚本或服务包装成一个 MCP 工具,AI 就能理解并使用它们。本文将以构建一个 Pixabay 图片搜索 MCP 服务器为例,带你一步步实现属于自己的工具服务器。
在开始之前,你需要准备以下几样:
如果你还没有安装 Node.js,请访问 nodejs.org 下载安装包。安装完成后,打开终端,输入以下命令检查是否安装成功:
node --version
npm --version
如果显示了版本号,就说明安装成功。
首先创建一个项目目录,进入并初始化 npm 项目:
mkdir pixabay-mcp-server
cd pixabay-mcp-server
npm init -y
接着安装必要的依赖包:
npm install @modelcontextprotocol/sdk zod
npm install -D @types/node typescript
创建源代码目录和入口文件:
mkdir src
touch src/index.ts
然后,我们需要配置 package.json 文件。请将其更新为以下内容:
{
"name": "pixabay-mcp-server",
"version": "1.0.0",
"type": "module",
"bin": {
"pixabay-mcp": "./build/index.js"
},
"scripts": {
"build": "tsc && chmod 755 build/index.js"
},
"files": [
"build"
]
}
在项目根目录下创建 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"]
}
现在我们来编写核心代码。打开 src/index.ts,写入以下内容:
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";
const baseUrl = "https://pixabay.com/api/";
const server = new McpServer({
name: "pixabay",
version: "1.0.0"
});
server.tool(
"pixabay-image-search",
{
query: z.string().describe("搜索图片的关键词"),
imageType: z.enum(["all", "photo", "illustration", "vector"]).default("all")
},
async ({ query, imageType }) => {
const apiKey = process.env.PIXABAY_KEY;
if (!apiKey) {
throw new Error("请设置 PIXABAY_KEY 环境变量");
}
const url = `${baseUrl}?key=${apiKey}&q=${encodeURIComponent(query)}&image_type=${imageType}&per_page=5`;
const response = await fetch(url);
if (!response.ok) {
throw new Error(`请求失败: ${response.status}`);
}
const data = await response.json();
return {
content: [
{
type: "text",
text: JSON.stringify(
{
images: data.hits,
total: data.total,
query: query
},
null,
2
)
}
]
};
}
);
async function startServer() {
const transport = new StdioServerTransport();
await server.connect(transport);
}
startServer();
这段代码做了以下几件事:
引入必要的依赖模块
创建 MCP 服务器实例
定义了一个图片搜索工具,接收查询关键词和图片类型参数
调用 Pixabay API 获取图片数据
返回格式化后的结果
现在我们可以构建项目了:
npm run build
构建完成后,会在 build 目录下生成 index.js 文件。
官方提供了 MCP Inspector 工具帮助我们调试服务器。首先安装 Inspector:
sudo npm install -g @modelcontextprotocol/inspector
然后使用以下命令启动调试:
PIXABAY_KEY=你的API密钥 npx @modelcontextprotocol/inspector node build/index.js
在浏览器中打开 http://127.0.0.1:6274/,你会看到一个调试界面。在这里你可以测试工具是否正常工作。
若想在 Claude Desktop 中使用这个 MCP 服务器,需要编辑 Claude 的配置文件。文件位置通常在:
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
在配置文件中添加:
{
"mcpServers": {
"pixabay": {
"command": "node",
"args": ["/绝对路径/pixabay-mcp-server/build/index.js"],
"env": {
"PIXABAY_KEY": "你的API密钥"
}
}
}
}
重启 Claude 后,你就可以直接让 Claude 帮你搜索图片了。
在 VS Code 中,需要安装 Continue 或 ROO CODE 插件。然后在设置中添加 MCP 服务器配置,内容与 Claude 配置类似。
配置完成后,你就可以在 VS Code 中直接通过 AI 助手使用图片搜索功能了。
如果你希望分享这个工具,可以发布到 npm。首先登录 npm:
npm login
然后更新 package.json 中的信息,最后发布:
npm publish
这个示例展示了如何集成图片搜索 API,你可以用相同的方法集成其他服务,比如:
天气预报 API
数据库查询工具
企业内部系统
电商平台商品搜索
MCP 技术的真正价值在于让 AI 能够安全、可控地使用现有系统和数据,而无需重新训练模型。
本文带你完整实现了一个 MCP 服务器,从环境搭建、代码编写、调试到实际应用。你学会了:
MCP 服务器的基本结构和工作原理
如何包装现有 API 为 AI 可用的工具
调试和测试 MCP 服务器的方法
如何集成到常用 AI 工具中
MCP 技术仍处于早期阶段,但现在正是学习和尝试的好时机。试着将你的业务能力或常用工具包装成 MCP 工具,让 AI 真正成为你的得力助手。
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!
MCP Server 是一种新兴的开发工具,全称是 Model Context Protocol Server。对于前端开发者来说,它能够帮助我们更高效地管理和集成人工智能模型到我们的项目中。
MCP Server 是一种帮助前端开发者更容易集成AI功能的工具。它的全称是 Model Context Protocol Server,你可以把它看作连接你的代码和AI模型之间的桥梁。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!