1. 理解Vibe Coding与上下文丢失问题

Vibe Coding是当下流行的程序员人机协作模式。无论你使用的是Cursor、Windsurf还是Trae等AI编辑器，或是Vscode插件如Github Copilot，都可能遇到一个痛点：频繁更换AI模型（如突然发布的Gemini）和客户端时，上下文会丢失。每次都要向AI解释它需要了解的背景信息，还得让它按“你的要求”处理事情。

如果这些上下文可以移植呢？比如在Claude Desktop中提出一个问题得到答案，之后在Cursor编码时能直接调出这段对话。MCP就是解决这个问题的关键技术。

2. 为何要关注MCP？

2.1 MCP为何存在？

要实现自主AI智能体，需要让AI感知世界并与之交互的工具。但直接将AI助手连接到工具上，集成效果往往不尽人意——一旦AI模型或工具API更新，代码就会出错。模型上下文协议（MCP） 是基于JSON-RPC的标准化通信层，它能让AI客户端（如Cursor）发现并使用MCP服务器提供的外部功能，包括：持久化数据（资源）、外部操作（工具）以及使用指导（提示）。

2.2 为何要使用MCP服务器？

即使Cursor、Windsurf等客户端已拥有出色的AI智能体，MCP仍能带来两大核心优势：前瞻性和可移植性。服务提供商（如GitHub、Notion）可以维护自己的AI集成，减少重复工作；你则拥有一个即插即用的工具生态系统，可在任何支持MCP的客户端中使用。

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

即使你不是需要接入API的开发者，自建MCP服务器也能让你实现上下文自动化，让AI模型对个人更有用。在AI领域日新月异的今天，自己构建的工具能跨越模型和客户端的变化持续生效。下面将以css mcp server作为示例，带你动手实践。

3. 快速上手：准备代码库

通过以下三个步骤准备好代码库（暂不考虑API密钥或客户端设置）：

• 1. 克隆代码库：将示例代码下载到本地。仓库地址：https://github.com/3mdistal/css-mcp-server
• 2. 安装依赖项：需要MCP SDK和其他一些库。
• 3. 构建代码：将TypeScript源代码编译为可运行的Ja vaScript代码。编译好的代码位于 build/ 目录下。

4. 运行你的第一个MCP Server

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

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

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

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

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

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

3. 服务器实例化：创建服务器实例，设置名称、版本，并初始化功能占位符。

   export const server = new McpServer({
       name: "css-tutor", // Unique name for this server
       version: "0.0.1", // Server version
       capabilities: {
           prompts: {},
           resources: {},
           tools: {}
       }
   });

4. 调用注册函数：用实际功能填充服务器。

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

5. main函数：设置通信传输并连接服务器。

   async function main(): Promise {
       const transport = new StdioServerTransport();
       await server.connect(transport);
   }

6. 执行：调用main()并进行错误处理。

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

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

4.2 创建最简服务器（临时测试版本）

为确保核心循环正常工作，暂时修改 src/index.ts：

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

修改后，你就拥有一个只提供基本工具的可运行MCP服务器。虽然目前没什么实际作用，但证明了核心结构和通信设置有效。

4.3 使用MCP Inspector进行调试

MCP Inspector是Anthropic提供的命令行工具，像一个基本MCP客户端，能启动你的服务器进程，通过标准输入输出连接并显示交换的JSON-RPC消息。

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

检查器启动连接后，访问本地主机的URL即可交互：

• 连接：看到initialize消息，确认连接成功。
• 列出工具：询问服务器提供的工具，应只看到hello_world工具。
• 列出资源/提示：若注释掉注册，相关选项卡不可点击。
• 调用工具：用检查器调用hello_world，服务器应返回自定义消息。

记住：无论你进行到哪一步，都要使用MCP Inspector验证服务器是否正确注册和响应。

5. 小提示与常见问题

小提示：构建前确保Node.js版本 >= 18，TypeScript编译器已全局安装。若遇到依赖安装失败，可尝试使用 npm install --legacy-peer-deps。

常见问题

• Q：MCP服务器只能用于CSS相关功能吗？
  A：不。本教程以css mcp server为例，但MCP协议是通用标准。你可以根据业务需求搭建任何类型的服务器，比如文件操作、数据库查询、API调用等。
• Q：为什么不能用现有的MCP服务器而一定要自己搭建？
  A：自建服务器能实现个性化的上下文自动化，比如将你常用的代码片段、项目知识库、工作流等封装为MCP资源，让AI客户端直接调用，减少重复上下文输入。
• Q：MCP Inspector连接失败怎么办？
  A：检查构建输出路径是否正确（./build/index.js）；确认server端口未被占用；如果使用袋里，请关闭或配置Inspector的袋里设置。
• Q：修改代码后需要重新构建吗？
  A：是的。TypeScript源文件修改后，需要执行 npm run build（或 tsc）重新编译为Ja vaScript，然后重新启动Inspector或客户端才能生效。

通过以上步骤，你已经掌握了搭建MCP服务器的基本流程。接下来，你可以逐步恢复注册函数，添加实际工具（如CSS查询、文件访问等），让你的AI编码助手更智能、更懂你。