从零开始开发一个 MCP Server！保姆级教程！ --知识铺

关注公众号，AI 技术干货及时送达_↓_

学习资料：DeepSeek 从入门到精通（免费领取）

大家好，我是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 文件，添加以下主要配置项：

<span data-cacheurl="" data-remoteid="" data-lazy-bgimg="https://mmbiz.qpic.cn/mmbiz_svg/5K48YNcpF3bf3RicmjPNbKAOib4RO9CfiazZC7S2mXKc2xicSNXAUfB4ibL07MusCpoopz63WmqEjL9OIR3ZJh3XTjg0JW4Qq10icc/640?wx_fmt=svg&amp;from=appmsg" data-fail="0"><span leaf="">{<span leaf="">  
<span leaf="">  <span leaf="">"type"<span leaf="">: <span leaf="">"module"<span leaf="">,<span leaf="">  
<span leaf="">"bin"<span leaf="">: {<span leaf="">  
<span leaf="">    <span leaf="">"pixabay"<span leaf="">: <span leaf="">"./build/index.js"<span leaf="">  
<span leaf="">  },<span leaf="">  
<span leaf="">"scripts"<span leaf="">: {<span leaf="">  
<span leaf="">    <span leaf="">"build"<span leaf="">: <span leaf="">"tsc &amp;&amp; chmod 755 build/index.js"<span leaf="">  
<span leaf="">  },<span leaf="">  
<span leaf="">"files"<span leaf="">: [<span leaf="">  
<span leaf="">    <span leaf="">"build"<span leaf="">  
<span leaf="">  ],<span leaf="">  
<span leaf="">}<span leaf="">

在根目录创建 tsconfig.json 文件，内容如下：

<span data-cacheurl="" data-remoteid="" data-lazy-bgimg="https://mmbiz.qpic.cn/mmbiz_svg/5K48YNcpF3bf3RicmjPNbKAOib4RO9CfiazZC7S2mXKc2xicSNXAUfB4ibL07MusCpoopz63WmqEjL9OIR3ZJh3XTjg0JW4Qq10icc/640?wx_fmt=svg&amp;from=appmsg" data-fail="0"><span leaf="">{<span leaf="">  
<span leaf="">  <span leaf="">"compilerOptions"<span leaf="">: {<span leaf="">  
<span leaf="">    <span leaf="">"target"<span leaf="">: <span leaf="">"ES2022"<span leaf="">,<span leaf="">  
<span leaf="">    <span leaf="">"module"<span leaf="">: <span leaf="">"Node16"<span leaf="">,<span leaf="">  
<span leaf="">    <span leaf="">"moduleResolution"<span leaf="">: <span leaf="">"Node16"<span leaf="">,<span leaf="">  
<span leaf="">    <span leaf="">"outDir"<span leaf="">: <span leaf="">"./build"<span leaf="">,<span leaf="">  
<span leaf="">    <span leaf="">"rootDir"<span leaf="">: <span leaf="">"./src"<span leaf="">,<span leaf="">  
<span leaf="">    <span leaf="">"strict"<span leaf="">: <span leaf="">true<span leaf="">,<span leaf="">  
<span leaf="">    <span leaf="">"esModuleInterop"<span leaf="">: <span leaf="">true<span leaf="">,<span leaf="">  
<span leaf="">    <span leaf="">"skipLibCheck"<span leaf="">: <span leaf="">true<span leaf="">,<span leaf="">  
<span leaf="">    <span leaf="">"forceConsistentCasingInFileNames"<span leaf="">: <span leaf="">true<span leaf="">  
<span leaf="">  },<span leaf="">  
<span leaf="">"include"<span leaf="">: [<span leaf="">"src/**/*"<span leaf="">],<span leaf="">  
<span leaf="">"exclude"<span leaf="">: [<span leaf="">"node_modules"<span leaf="">]<span leaf="">  
<span leaf="">}<span leaf="">

到此，项目初始化完成，现在让我们开始构建一个图片搜索的 MCP 服务器吧。

构建 MCP Server

在项目 index.ts 文件中添加 MCP Server：

<span data-cacheurl="" data-remoteid="" data-lazy-bgimg="https://mmbiz.qpic.cn/mmbiz_svg/5K48YNcpF3bf3RicmjPNbKAOib4RO9CfiazZC7S2mXKc2xicSNXAUfB4ibL07MusCpoopz63WmqEjL9OIR3ZJh3XTjg0JW4Qq10icc/640?wx_fmt=svg&amp;from=appmsg" data-fail="0"><span leaf="">// MCP - NODE SDK<span leaf="">  
<span leaf="">import<span leaf=""> { McpServer } <span leaf="">from<span leaf="">"@modelcontextprotocol/sdk/server/mcp.js"<span leaf="">;<span leaf="">  
<span leaf="">  
<span leaf="">// 导入 StdioServerTransport 类，用于处理服务器的输入输出通信<span leaf="">  
<span leaf="">import<span leaf=""> { StdioServerTransport } <span leaf="">from<span leaf="">"@modelcontextprotocol/sdk/server/stdio.js"<span leaf="">;<span leaf="">  
<span leaf="">  
<span leaf="">// 导入用于验证输入参数的库<span leaf="">  
<span leaf="">import<span leaf=""> { z } <span leaf="">from<span leaf="">"zod"<span leaf="">;<span leaf="">  
<span leaf="">  
<span leaf="">// Pixabay API URL<span leaf="">  
<span leaf="">const<span leaf=""> baseUrl = <span leaf="">"https://pixabay.com/api/"<span leaf="">;<span leaf="">  
<span leaf="">  
<span leaf="">/**<span leaf="">  
<span leaf=""> * 定义了 MCP Server 实例。<span leaf="">  
<span leaf=""> */<span leaf="">  
<span leaf="">const<span leaf=""> server = <span leaf="">new<span leaf=""> McpServer({<span leaf="">  
<span leaf="">    name: <span leaf="">"pixabay"<span leaf="">,<span leaf="">  
<span leaf="">    version: <span leaf="">"1.0.0"<span leaf="">,<span leaf="">  
<span leaf="">    capabilities: {<span leaf="">  
<span leaf="">        resources: {},<span leaf="">  
<span leaf="">        tools: {},<span leaf="">  
<span leaf="">    },<span leaf="">  
<span leaf="">});<span leaf="">  
<span leaf="">  
<span leaf="">/**<span leaf="">  
<span leaf=""> * 定义了一个名为 "pixabay-image-search" 的工具。<span leaf="">  
<span leaf=""> * 该工具接受一个查询字符串和一个图像类型作为输入参数，<span leaf="">  
<span leaf=""> * 并返回一个包含图像信息的 JSON 字符串。<span leaf="">  
<span leaf=""> */<span leaf="">  
<span leaf="">server.tool(<span leaf="">  
<span leaf="">    <span leaf="">'pixabay-image-search'<span leaf="">,<span leaf="">  
<span leaf="">    {<span leaf="">  
<span leaf="">        query: z.string(),<span leaf="">  
<span leaf="">        <span leaf="">type<span leaf="">: z.string()<span leaf="">  
<span leaf="">    },<span leaf="">  
<span leaf="">    <span leaf="">async<span leaf=""> ({ query, <span leaf="">type<span leaf=""> = <span leaf="">'all'<span leaf=""> }) =&gt; {<span leaf="">  
<span leaf="">        <span leaf="">try<span leaf=""> {<span leaf="">  
<span leaf="">            <span leaf="">// 检查是否设置了 PIXABAY_KEY 环境变量<span leaf="">  
<span leaf="">            <span leaf="">if<span leaf=""> (!process.env.PIXABAY_KEY) {<span leaf="">  
<span leaf="">                <span leaf="">console<span leaf="">.error(<span leaf="">"PIXABAY_KEY environment variable is not set"<span leaf="">);<span leaf="">  
<span leaf="">                process.exit(<span leaf="">1<span leaf="">);<span leaf="">  
<span leaf="">            }<span leaf="">  
<span leaf="">            <span leaf="">console<span leaf="">.log(<span leaf="">"PIXABAY_KEY"<span leaf="">, process.env.PIXABAY_KEY);<span leaf="">  
<span leaf="">  
<span leaf="">            <span leaf="">// 构建 Pixabay API 请求 URL<span leaf="">  
<span leaf="">            <span leaf="">const<span leaf=""> requestUrl = <span leaf="">`<span leaf="">${baseUrl}<span leaf="">?key=<span leaf="">${process.env.PIXABAY_KEY}<span leaf="">&amp;q=<span leaf="">${query}<span leaf="">&amp;image_type=<span leaf="">${<span leaf="">type<span leaf="">}<span leaf="">&amp;per_page=3`<span leaf="">;<span leaf="">  
<span leaf="">  
<span leaf="">            <span leaf="">// 发送请求并获取响应<span leaf="">  
<span leaf="">            <span leaf="">const<span leaf=""> response = <span leaf="">await<span leaf=""> fetch(requestUrl);<span leaf="">  
<span leaf="">  
<span leaf="">            <span leaf="">//  检查响应状态<span leaf="">  
<span leaf="">            <span leaf="">const<span leaf=""> json = <span leaf="">await<span leaf=""> response.json();<span leaf="">  
<span leaf="">  
<span leaf="">            <span leaf="">// 返回响应结果<span leaf="">  
<span leaf="">            <span leaf="">return<span leaf=""> {<span leaf="">  
<span leaf="">                content: [{<span leaf="">  
<span leaf="">                    <span leaf="">type<span leaf="">: <span leaf="">'text'<span leaf="">,<span leaf="">  
<span leaf="">                    text: <span leaf="">JSON<span leaf="">.stringify({<span leaf="">  
<span leaf="">                        images: json.hits || [],<span leaf="">  
<span leaf="">                        total_results: json.total,<span leaf="">  
<span leaf="">                        query,<span leaf="">  
<span leaf="">                    }, <span leaf="">null<span leaf="">, <span leaf="">2<span leaf="">)<span leaf="">  
<span leaf="">                }]<span leaf="">  
<span leaf="">            }<span leaf="">  
<span leaf="">        } <span leaf="">catch<span leaf=""> (e) {<span leaf="">  
<span leaf="">            <span leaf="">return<span leaf=""> {<span leaf="">  
<span leaf="">                content: [{<span leaf="">  
<span leaf="">                    <span leaf="">type<span leaf="">: <span leaf="">'text'<span leaf="">,<span leaf="">  
<span leaf="">                    text: <span leaf="">`Error: <span leaf="">${e <span leaf="">instanceof<span leaf=""> <span leaf="">Error<span leaf=""> ? e.message : <span leaf="">'Unknown error'<span leaf="">}<span leaf="">`<span leaf="">  
<span leaf="">                }],<span leaf="">  
<span leaf="">                isError: <span leaf="">true<span leaf="">  
<span leaf="">            };<span leaf="">  
<span leaf="">        }<span leaf="">  
<span leaf="">    }<span leaf="">  
<span leaf="">)<span leaf="">  
<span leaf="">  
<span leaf="">/**<span leaf="">  
<span leaf=""> * 启动服务器并建立与传输层的连接。<span leaf="">  
<span leaf=""> * 该函数创建一个标准输入输出的服务器传输实例，<span leaf="">  
<span leaf=""> * 并使用该实例将服务器连接到传输层。<span leaf="">  
<span leaf=""> */<span leaf="">  
<span leaf="">async<span leaf="">function<span leaf=""> <span leaf="">startServer<span leaf="">(<span leaf="">) <span leaf="">{<span leaf="">  
<span leaf="">    <span leaf="">// 创建一个标准输入输出的服务器传输实例，用于处理服务器的输入输出通信<span leaf="">  
<span leaf="">    <span leaf="">const<span leaf=""> transport = <span leaf="">new<span leaf=""> StdioServerTransport();<span leaf="">  
<span leaf="">  
<span leaf="">    <span leaf="">// 等待服务器通过指定的传输实例建立连接<span leaf="">  
<span leaf="">    <span leaf="">await<span leaf=""> server.connect(transport);<span leaf="">  
<span leaf="">}<span leaf="">  
<span leaf="">  
<span leaf="">// 启动服务器<span leaf="">  
<span leaf="">startServer();<span leaf="">

这里主要定义了一个 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 配置：

<span data-cacheurl="" data-remoteid="" data-lazy-bgimg="https://mmbiz.qpic.cn/mmbiz_svg/5K48YNcpF3bf3RicmjPNbKAOib4RO9CfiazZC7S2mXKc2xicSNXAUfB4ibL07MusCpoopz63WmqEjL9OIR3ZJh3XTjg0JW4Qq10icc/640?wx_fmt=svg&amp;from=appmsg" data-fail="0"><span leaf="">{<span leaf="">  
<span leaf="">    <span leaf="">"mcpServers"<span leaf="">: {<span leaf="">  
<span leaf="">        <span leaf="">"pixabay"<span leaf="">: {<span leaf="">  
<span leaf="">            <span leaf="">"command"<span leaf="">: <span leaf="">"node"<span leaf="">,<span leaf="">  
<span leaf="">            <span leaf="">"args"<span leaf="">: [<span leaf="">  
<span leaf="">                <span leaf="">"../pixabay/build/index.js"<span leaf="">  
<span leaf="">            ],<span leaf="">  
<span leaf="">            <span leaf="">"env"<span leaf="">: {<span leaf="">  
<span leaf="">                <span leaf="">"PIXABAY_KEY"<span leaf="">: <span leaf="">"..."<span leaf="">  
<span leaf="">            }<span leaf="">  
<span leaf="">        }<span leaf="">  
<span leaf="">    }<span leaf="">  
<span leaf="">}<span leaf="">

注意，请替换成自己的 index.js 文件全路径和 PIXABAY_KEY。

然后再重启 Claude 桌面软件，可以看到有一个 MCP 工具可用：

然后我们发起测试一下：

成功通过自然语言获取到了猫吃饭的图片，通过 Claude for Desktop 测试自定义的 MCP Server 调用成功。

在 VS Code 中使用

在 VS Code 中只需要安装一个 ROO CODE 插件，不懂的请先看这篇：

DeepSeek 装进 VSCode，编程非常丝滑！

然后添加 MCP 图标配置 MCP Server：

<span data-cacheurl="" data-remoteid="" data-lazy-bgimg="https://mmbiz.qpic.cn/mmbiz_svg/5K48YNcpF3bf3RicmjPNbKAOib4RO9CfiazZC7S2mXKc2xicSNXAUfB4ibL07MusCpoopz63WmqEjL9OIR3ZJh3XTjg0JW4Qq10icc/640?wx_fmt=svg&amp;from=appmsg" data-fail="0"><span leaf="">{<span leaf="">  
<span leaf="">  <span leaf="">"mcpServers"<span leaf="">: {<span leaf="">  
<span leaf="">    <span leaf="">"pixabay"<span leaf="">: {<span leaf="">  
<span leaf="">      <span leaf="">"command"<span leaf="">: <span leaf="">"node"<span leaf="">,<span leaf="">  
<span leaf="">      <span leaf="">"args"<span leaf="">: [<span leaf="">  
<span leaf="">        <span leaf="">"../pixabay/build/index.js"<span leaf="">  
<span leaf="">      ],<span leaf="">  
<span leaf="">      <span leaf="">"env"<span leaf="">: {<span leaf="">  
<span leaf="">        <span leaf="">"PIXABAY_KEY"<span leaf="">: <span leaf="">"..."<span leaf="">  
<span leaf="">      }<span leaf="">  
<span leaf="">    }<span leaf="">  
<span leaf="">  }<span leaf="">  
<span leaf="">}<span leaf="">

配置成功后如图所示：

然后同样发起测试：

成功通过自然语言获取到了猫吃饭的图片，通过 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技术宅” 原创，转载、引用本文内容请注明出处，抄袭、洗稿一律投诉侵权，后果自负，并保留追究其法律责任的权利。

< END >

文章目录

从零开始开发一个 MCP Server！保姆级教程！ --知识铺

安装 Node 环境

创建 MCP Server 项目

构建 MCP Server

调试 MCP Server

在工具中使用 MCP Server

在 Claude for Desktop 中使用

在 VS Code 中使用

总结

See Also

最近文章

福利派送

分类

标签

友情链接

其它