MCP 介绍:

最返cursor 0.46 更新了MCP 的功能，我先简单介绍下 MCP 是什么，MCP 的全文是# Model Context Protocol，也就是模型上下文协议 （MCP） 是一种开放协议，可在 LLM 应用程序与外部数据源和工具之间实现无缝集成。无论您是构建 AI 驱动的 IDE、增强聊天界面还是创建自定义 AI 工作流，MCP 都提供了一种标准化的方式来将 LLM 与它们所需的上下文连接起来。简单的说，就是你可以编写代码，让你在 AI 编辑的时候自动触发你的代码逻辑，如触发某一个命令，或者主动去获取数据，能让 AI 更好的了解你的需求。

让 AI 能动态资源获取

先说下我的需求，我的需求是让 AI 可以主动去获取我的 MOCK 数据，或者浏览器最返请求过的数据，然后我在AI 编辑的时候提到某一个 URL的时候，能主动去获取数据并分析数据，帮我分析代码，并解决问题。所以这里说的动态资源获到是指可以通过动态的 URL 去匹配返回不同的内容。

通过 mocxykit 数据及代理管理工具，二行代码让 AI 懂你的数据

通过 mocxykit 数据及代理管理工具实现获取数据的功能，可以直接用mocxykit的这个库，这个库支持可视化的管理代理，mock 数据，并且能保存浏览最近请求的数据，让 AI 能读取到你浏览的请求数据。

首先先安装这个插件

npm install mocxykit --save-dev

然后以 vite 为例，改变vite.config.js(如果没有这个文件，可以在根目录创建下) 的配制，添加这个插件

import { defineConfig } from 'vite'
import { viteProxyMockPlugin } from 'mocxykit'

export default defineConfig({
  plugins: [
    viteProxyMockPlugin()
  ]
})

启动项目，在浏览启上访问项目，这个时候就会看到项目的右下角多了一个(proxy&mock 配制)按钮

添加mock数据，或者设置代理并项目中访问数据，这个工具会把最近访问数据存下来，AI 编辑可以直接读取到这个数据

实例演示

我们先来实现一个简单的todo list示例，只写一个展示及增加一条的逻辑

首先我们先在我写的 MCP Server 的工具中定义一个列表的 mock 数据(也可以是浏览最返请求过的数据)，及增加的接口：

然后对应的数据如下:


点击右上角的设置按钮，启用 MCP 服务就可以了

最后在 cursor 的配制里检查下是否打开，如果没有打开点下红框的位置

最后我们开始 AI 编程：

这里我写的 AI 提示语是：

“在@todoList.tsx一个文件中实现一个 todoList 的功能，有展示列表及增加列表的功能，请求 mcpData api/todo-list获取列表数据结构，请求mcpData api/add-do-list,添加列表，”

可以看到 AI 请求去请求的 MOCK 数据，并分析出了我们的数据结构，如在/api/add-do-list中，也知道必须是 code是 200 并且 data 是 ture 才是 true;

以下是这个工具 github 的地址：https://github.com/shunseven/mocxykit

如何自已实现一个 MCP server

如果你不想通过工具，想自已实现一个MCP server，那么该如何实现一个动态资源数据获取的 MCP server

首先我们应该装一个 MCP server 的库

npm install @modelcontextprotocol/sdk

然后我们通过 express 来连接这个库

import express from "express";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";

const server = new McpServer({
  name: "example-server",
  version: "1.0.0"
});

// 定义资源
server.resource(
  "mcpData",
  new ResourceTemplate("data://{path}", { list: undefined }),
  async (uri, { userId }) => ({
    // 在这里处理所有MCP请求
    const hostname = decodeURIComponent(uri.hostname);
    const data = await getMcpData(hostname);
    
    return {
      contents: [{
        uri: hostname,
        type: 'application/json',
        text: JSON.stringify(data)
      }]
    }
  })
);

const app = express();

app.get("/sse", async (req, res) => {
  const transport = new SSEServerTransport("/messages", res);
  await server.connect(transport);
});

app.post("/messages", async (req, res) => {
  await transport.handlePostMessage(req, res);
});

app.listen(3001);

如何实现动态

如何实现动态，比上面的代码我们可以看到在定义资源的时候，用的代码是

server.resource(
  "mcpData",
  new ResourceTemplate("data://{path}", { list: undefined }),
  async (uri, { userId }) => ({
    // 这里是成功匹配的回调
    contents: [{
      uri: uri.href,
      text: `Profile data for user ${path}`
    }]
  })
);

其中mcpData为关键的提示语，用于让 api 知道这个时候你想要用 MCP 去请求数据，然后第二个参数是动态 url 的定义, 以下是最终实现的方法。通过{path}可以动态的匹配所有 URL，然后在回调中再去匹配对就原资源。（这里需要注意的是[xxx]😕/xxxx, 必须是这种格式，不然会匹配不了）