各人好,我是R哥。
之前分享了一篇 MCP 的先容及使用:
最近热火朝天的 MCP 是什么鬼?如何使用MCP?一文给你讲清楚!
这篇文章得到了各人的广泛阅读,让各人对 MCP 的概念和使用也有了一个基础的认知,也先容了如何使用 MCP Server,这篇再来先容下如何从 0 开辟一个本身的 MCP Server。
MCP 本质上是为 AI 大模型提供调用外部工具的本领,MCP Server 就是这个本领的具体实现——你可以通过它,把你已有的 API、脚本、服务包装成 AI 能理解和调用的 MCP 工具。
这篇我们就以获取图片为例来创建一个 MCP Server,让 AI 根据自然语言来获取图片网站上的图片,好比 Pixabay 图片网站,它就提供了 API 可以让外界来搜索图片。
Pixabay API 文档:
https://pixabay.com/api/docs/
MCP 官方提供了 Python、Node、Java、Kotlin 等 SDK 接入,我们为了方便测试使用,本文以 Node 为例进行演示,请确保你安装了最新版本的 Node。
安装 Node 环境
如果你还没有安装 Node.js 和 npm,你可以从 nodejs.org 下载并安装,然后验证 Node.js 是否正确安装:
node --version
npm --version
安装过程,略。
创建 MCP Server 项目
创建一个 MCP Server 项目:
mkdir pixabay
cd pixabay
初始化一个新的 npm 项目:
npm init -y
安装相关依赖:
npm install @modelcontextprotocol/sdk zod
npm install -D @types/node typescript
创建主要目录和文件:
mkdir src
touch src/index.ts
更新 package.json 文件,添加以下主要设置项:- {
- "type": "module",
- "bin": {
- "pixabay": "./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"]
- }
复制代码 到此,项目初始化完成,现在让我们开始构建一个图片搜索的 MCP 服务器吧。
构建 MCP Server
在项目 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();
复制代码 这里主要定义了一个 McpServer,然后添加了一个名为 pixabay-image-search 的 MCP Tool 工具,用来从 Pixabay 根据关键字和类型搜索图片。
最后使用以下命令进行构建:
npm run build
根据之前的项目定义,最终会在 build 目录中构建为 index.js 文件。
调试 MCP Server
官方提供了一个 Inspector 调试工具,它是一款用于测试和调试 MCP 服务器的交互式开辟者工具,详细先容和使用方法如下:
https://modelcontextprotocol.io/docs/tools/inspector
启动调试参考命令:
sudo npx @modelcontextprotocol/inspector node build/index.js
启动成功后,访问以下地点:
http://127.0.0.1:6274/
这个界面主要分为三个区域:
- 左侧进行环境变量设置、MCP Server 连接/重启等操纵;
- 中间选择要调试的 MCP 工具;
- 右侧对选择的 MCP 工具进行调试。
如图,测试成功。
在工具中使用 MCP Server
在 Claude for Desktop 中使用
首先需要安装 Claude 桌面版,安装地点如下:
https://claude.ai/download
然后打开以下设置文件:
~/Library/Application Support/Claude/claude_desktop_config.json
添加 MCP Server 设置:- {
- "mcpServers": {
- "pixabay": {
- "command": "node",
- "args": [
- "../pixabay/build/index.js"
- ],
- "env": {
- "PIXABAY_KEY": "..."
- }
- }
- }
- }
复制代码 注意,请更换成本身的 index.js 文件全路径和 PIXABAY_KEY。
然后再重启 Claude 桌面软件,可以看到有一个 MCP 工具可用:
然后我们发起测试一下:
成功通过自然语言获取到了猫吃饭的图片,通过 Claude for Desktop 测试自定义的 MCP Server 调用成功。
在 VS Code 中使用
在 VS Code 中只需要安装一个 ROO CODE 插件,不懂的请先看这篇:
DeepSeek 装进 VSCode,编程非常丝滑!
然后添加 MCP 图标设置 MCP Server:- {
- "mcpServers": {
- "pixabay": {
- "command": "node",
- "args": [
- "../pixabay/build/index.js"
- ],
- "env": {
- "PIXABAY_KEY": "..."
- }
- }
- }
- }
复制代码 设置成功后如图所示:
然后同样发起测试:
成功通过自然语言获取到了猫吃饭的图片,通过 VS Code 测试自定义的 MCP Server 调用成功。
在其他 AI 编程中使用 MCP Server 也是一样的道理,好比 Cursor,具体用法请参考这篇:
最近热火朝天的 MCP 是什么鬼?如何使用 MCP?一文给你讲清楚!
测试没问题后,我们就可以把代码发布到 npm 仓库供其他人使用了。
总结
本文从 MCP Server 开辟实战出发,完整演示了从零搭建一个 MCP Server 的流程。你不但掌握了 MCP Server 的构建方式,也能体验到了 MCP 工具在开辟者一样平常工作中带来的提效邪术。
重点回顾如下:
- MCP Server 是大模型调用外部服务的桥梁;
- 通过 Node.js 和官方 SDK 快速开辟 MCP Server;
- 使用 Inspector 工具调试,所见即所得;
- 轻松集成到 Claude、VS Code、Cursor 等 AI 工具中;
这不但是一次 MCP 技术实战,也是一种新的编程范式的探索,让 AI 通过 MCP 调用我们的代码,把人类的创意和机器的执行力联合起来。
你也可以尝试把更多的业务本领封装成 MCP 工具,好比:商品推荐、新闻择要、天气预报,甚至接入本身的数据库或私有体系等等,让 AI 真正成为我们一样平常工作中的得力助手。
未完待续,下篇我继续研究和分享更风趣的 AI + MCP 应用场景和实战,关注「AI技术宅」公众号和R哥一起学 AI。
版权声明: 本文系公众号 "AI技术宅" 原创,转载、引用本文内容请注明出处,抄袭、洗稿一律投诉侵权,结果自负,并保留追究其法律责任的权利。
更多文章推荐:
1.Spring Boot 3.x 教程,太全了!
2.3,000+ 道 Java面试题及答案整理(最新版)
3.免费获取 IDEA 激活码的 7 种方式(最新版)
4.Java & DeepSeek & AI 学习资料分享
5.步伐员精美简历模板分享
觉得不错,别忘了随手点赞+转发哦!
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |