cursor MCP server 如何AI 编程中实现动态数据获取

MCP 介绍:

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

什么动态资源获取

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

这篇文章的主要内容讲的是MCP"动态资源获取" 的方法。关于我是如何实现保存MOCK 数据和浏览器最返请求过的数据我会在之后的文章中介绍。

流程

graph TD cursor --> 访问MCPserver --> 根据URL获取资源

最终实现的效果

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

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

然后对应的数据如下:

然后我们在cursor 中配制一个上 MCP Server

最后我们开始 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;

如何实现一个 MCP server

下面我详细介绍下，该如何实现一个动态资源数据获取的 MCP server

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

js 复制代码

npm install @modelcontextprotocol/sdk

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

ts 复制代码

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);

如何实现动态

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

js 复制代码

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, 必须是这种格式，不然会匹配不了）

最后如果你不想自己这现一个MCP server来实现获取数据的功能，可以直接用我写的这个库，这个库支持可视化的管理代码，mock 数据，并且能保存浏览最近请求的数据，让 AI 能读取到你浏览的请求数据。

我会在下一篇文章的详细介绍下这个工具以下是这个工具 github 的地址：github.com/shunseven/m...