Vibe Coding 正在成为当下一种流行的程序员之人机协作模式，当下的 Coder 或多或少都在用各种 AI 编辑器，无论是 Cursor 还是 Windsurf 抑或 Trae，如果你还没有开始下载这些客户端，那也一定试过 Vscode 的插件如 Github Copilot。

当与 AI 对话的时候，我发现自己经常更换 AI 模型（比如突然发布的 Gemini）和客户端（Cursor、Windsurf，又换回 Cursor！）。

最让我感觉不爽的是上下文的丢失。我总是要不断向 AI 解释它需要了解的关于我问题的信息，还得让它按照 “我的要求” 来处理事情。

但要是这些上下文可以移植会怎样呢？要是你能在 Claude Desktop 里提出一个问题并得到答案，之后在使用 Cursor 编码时还能调出这段对话，又会怎样呢？

在本文中，我们就将通过几个简单步骤搭建这样的工具。

为何要关注 MCP?

要是你已经对 MCP 了如指掌，想直接开始搭建，那就直接跳到 “快速上手” 部分。否则，准备好秒表，下面是 3 分钟的入门介绍。

1. MCP 为何存在？

如果你想要自主 AI 智能体，那就需要一些工具，让它们能够感知周围世界并与之交互。遗憾的是，将 AI 助手直接连接到工具上，集成效果往往不尽人意；一旦 AI 模型或工具两端的 API 更新，代码就会出错。

那么，我们如何构建更强大、可复用的 AI 功能呢？

其中一条途径就是通过 Anthropic 的模型上下文协议（MCP）。这是一个基于 JSON-RPC 的标准化通信层，它能让 AI 客户端（比如 Cursor）发现并使用 MCP 服务器提供的外部功能。

这些功能包括访问持久化数据（资源）、在外部世界执行各种操作（工具），以及接收关于如何使用这些资源和工具的具体指令（提示）。

2. 为何要使用 MCP 服务器？

像 Cursor 和 Windsurf 这样的客户端，即便没有 MCP 也已经拥有出色的 AI 智能体。那么，我们为什么还需要更多工具呢？

简单来说，客户端开发者无法打造所有功能。他们不想把所有开发时间都花在为每个新模型调整网络搜索上，而且他们肯定也不想自己去开发 Jira 集成功能。

MCP 让像 GitHub 和 Notion 这样的服务提供商能够维护自己的 AI 集成，这意味着更高质量的交互，还能减少重复工作。

所以，当你选择使用 MCP 服务器时，主要能获得前瞻性和可移植性这两大优势。你将拥有一个庞大的即插即用工具生态系统，可以在任何支持该标准的聊天窗口中使用。

3. 为何要自己搭建 MCP 服务器？

即便你不是那种需要将自己的服务 API 接入 MCP 的开发者，掌握相关知识也有很多好处。

对我来说，我发现花在搭建服务器上的时间越多，就越少感觉自己的工作只是在输入框之间复制粘贴大段文本。我在实现上下文自动化，这让 AI 模型对我个人来说更有用。

此外，在不断变化的 AI 领域，这感觉像是一种立足的方式。即便未来出现新的模型、客户端和服务，我现在构建的工具也应该能继续使用。

闲话少说，是时候动手了。下面将以 css mcp server 作为示例：

快速上手：让代码动起来？

我们通过以下三个步骤准备好代码库。目前先不用考虑 API 密钥或客户端设置的问题。

1. 1. 克隆代码库：将示例代码（https://github.com/3mdistal/css-mcp-server）下载到本地计算机。
2. 2. 安装依赖项：我们需要 MCP 软件开发工具包（SDK）和其他一些库。
3. 3. 构建代码：将 TypeScript 源代码编译为可运行的 JavaScript 代码。
   现在，编译好的代码就在build/目录下。

运行你的第一个 Mcp Server

核心执行逻辑（src/index.ts）

打开主服务器文件src/index.ts ，你会看到以下关键部分：

1. 1. 导入核心依赖 ：从@modelcontextprotocol/sdk中引入McpServer（核心服务器类）和StdioServerTransport（用于通信）。

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";

1. 2. 导入注册依赖：从src/目录下的其他文件中导入registerPrompts、registerResources和registerTools 。稍后会深入探讨这些函数，它们负责告知服务器我们想要赋予它的具体功能。

import { registerPrompts } from "./prompts/index.js";
import { registerResources } from "./resources/index.js";
import { registerTools } from "./tools/index.js";

1. 3. 服务器实例化：创建服务器实例，设置服务器的名称和版本，并为其功能初始化空占位符。

export const server = new McpServer({
    name: "css-tutor", // Unique name for this server
    version: "0.0.1", // Server version
    // Declare the types of capabilities the server will offer
    capabilities: {
        prompts: {},  // Will be populated by registerPrompts
        resources: {},// Will be populated by registerResources
        tools: {},    // Will be populated by registerTools
    }
});

1. 4. 调用注册函数：调用导入的register*函数，这些调用会用在其他地方定义的实际工具、资源和提示来填充服务器实例。

registerPrompts();
registerResources();
registerTools();

1. 5. main函数：这个异步函数设置通信传输并连接服务器。

async function main(): Promise<void> {
    // Use StdioServerTransport to communicate over standard input/output
    // This is common for MCP servers launched as child processes by clients.
    const transport = new StdioServerTransport();
    // Connect the server logic to the transport layer
    await server.connect(transport);
}

1. 6. 执行：最后，调用main() ，并进行基本的错误处理。

main().catch((error: Error) => {
    console.error("Server startup failed:", error); // Log errors to stderr
    process.exit(1);
});

这个结构是服务器的核心，它完成初始化、注册功能，并建立通信连接。

创建一个最简服务器，临时修改版本（用来测试）

为确保这个核心循环在无需任何外部 API 或复杂逻辑的情况下也能正常工作，我们暂时修改src/index.ts：

1. 1. 注释掉功能注册调用。
2. 2. 在main函数定义之前添加一个简单的 “hello” 函数。
3. 3. 重新构建代码。

对src/index.ts进行这些修改后，我们现在就有了一个可运行的 MCP 服务器，它只提供一个基本工具。目前这个工具没什么实际作用，但它证明了核心结构和通信设置是有效的。

使用 MCP Inspector 进行调试

现在我们有了一个最简且可运行的服务器，那如何检查它是否正确遵循 MCP 协议呢？我们使用 Anthropic 的 MCP Inspector。

这个命令行工具就像是一个基本的 MCP 客户端。它启动你的服务器进程，通过标准输入输出（就像 Claude Desktop 或 Cursor 那样）连接到服务器，并显示正在交换的 JSON-RPC 消息。

运行 Inspector

npx @modelcontextprotocol/inspector node ./build/index.js

检查器启动并连接到你的服务器后，如果你访问本地主机的 URL，就可以与之交互：

1. 1. 连接：你会看到initialize消息，确认连接成功。
2. 2. 列出工具：使用检查器界面询问服务器提供哪些工具，你应该只会看到我们的hello_world工具。
3. 3. 列出资源 / 提示：如果你尝试访问资源或提示选项卡，它们应该是不可点击的，因为我们注释掉了它们的注册。
4. 4. 调用工具：使用检查器调用hello_world工具，你应该会看到服务器用我们的自定义消息进行响应。

MCP Inspector 是你开发过程中的得力助手。在你添加或修改任何功能（工具、资源或提示）之后，都要用它来验证服务器是否正确注册了该功能，并且响应是否符合预期。使用检查器，你无需完整的 AI 客户端就能测试服务器功能。

记住，无论你进行到哪一步，都要使用 MCP Inspector。