Cursor入门：MCP开发调用和项目实战

最近刷了几篇cursor的文章，看到其中一篇文章介绍了几个cursor项目开发案例，突然有种睁眼看世界的感觉。之前对AI Coding的认知还停留在tab补全、自动生成单元测试上，没想到现在已经发展到直接能开发项目了，某种意义上做到了“有嘴就行”。于是试玩了下cursor，并结合了MCP、Rules、Docs等新功能，帮助对cursor不熟的同学快速入门。

小马不会过河

721人浏览 · 2025-06-27 20:33:18

小马不会过河 · 2025-06-27 20:33:18 发布

一、概念

1.1 MCP

Model Context Protocol，模型上下文协议。官网：https://modelcontextprotocol.io/introduction

功能：MCP provides a standardized way to connect AI models to different data sources and tools.（类比电子设备现在通用的USB-C口，MCP提供了一种开放标准，能让AI应用安全地访问和操作本地及远程数据，为AI应用提供了连接万物的接口）

从官方拷贝的架构图，几个组件介绍下：

MCP Hosts（发起连接大模型的应用程序）: Programs like Claude Desktop，通义千文APP， IDEs, or AI tools that want to access data through MCP
MCP Clients（运行在Host内部的一个组件）: Protocol clients that maintain 1:1 connections with servers。Client负责实现Host与Server之间的通信，与MCP Server保持一对一的连接（Host:Client=1:n，Clinet:Server=1:1）。
MCP Servers（提供特定能力和数据访问的核心组件）: Lightweight programs that each expose specific capabilities through the standardized Model Context Protocol。Server提供上下文和工具，负责处理来自Client的请求并返回相应的响应
Local Data Sources（本地资源）: Your computer’s files, databases, and services that MCP servers can securely access
Remote Services（远程资源）: External systems available over the internet (e.g., through APIs) that MCP servers can connect to

MCP Server 的通信方式有多种，下面介绍两种主要的：基于标准输入输出（stdio）的本地通信和基于SSE（Server-Sent Events）的远程通信。

本地通信：通过 stdio 传输数据，适用于在同一台机器上运行的客户端和服务器之间的通信，最常见的是命令行调用Command。
远程通信：利用 SSE 与 HTTP 结合，实现跨网络的实时数据传输，适用于需要访问远程资源或分布式部署的场景。现在hsf服务就支持通过这种方式快速转MCP Server，详见行词老师的《一行代码不用改！搞定 HSF 转 MCP Server》。

最后看下MCP的基本工作流程：

工具描述与上下文注入：MCP Server 会预先定义工具的名称、描述、通信方式，并将这些信息以结构化文本形式注入大模型的上下文；
选择工具：大模型通过分析用户指令和工具描述，推理出需调用哪种工具。当然也可以选择不调用，如上图的Case2；
MCP Client发起工具调用：大模型结合用户输入和实时上下文，生成符合工具要求的 JSON-RPC 请求，包含工具名称和参数；
MCP Server执行工具：Server 解析请求，调用对应的工具处理函数，并将结果封装为 JSON-RPC 响应；
结果返回与模型整合：大模型可根据工具返回的结果动态更新上下文，生成最终回答。

1.2 Cursor

官方文档：https://docs.cursor.com/get-started/introduction

IDE侧边栏的Chat面板大家都很熟悉了，之前使用起来总觉得差点意思。这两天试玩了Cusor，直呼“真香”。

因为下面Cursor实战的时候会用到Docs、Rules、MCP这几个功能。MCP前面介绍过了，下面看下Cursor中关于Docs和Rules的介绍：

1.2.1 Docs

Docs：通过对第三方文档索引后插入到上下文。

比如上图我在Docs插入了MCP的文档，在Chat中就可以通过@Docs选择文档添加到上下文。

1.2.2 Rules

官方文档：https://docs.cursor.com/context/rules-for-ai

Rules：规则，可以简单理解为提示词，有全局User Rules（应用于所有项目）和项目Project Rules

项目规则如何匹配，有以下几种方式：

常用的就是Agent Requested，提供相关规则描述后，在使用Agent对话时会自动根据上下文内容选择规则应用。

二、实战

2.1 cursor开发MCP Server

1.先创建一个文件夹，然后终端输入cursor .根据当前目录打开cursor。

2.创建两个Project Rule：

提示词当然不需要我们写，直接将参考的内容丢给cursor：

有了上面两个项目得力助手，下面正式开发一个查询天气信息的mcp server。

执行pnpm init命令建立typeScript初始环境，然后在src目录下创建一个index.ts文件，基于该文件开启Agent Chat（两个github仓库分别是官方的typeScript SDK和quickStart demo）：

main文件即index.ts有了，还需要对这个项目执行打包。从下图可以看到，他会自动帮我们完善package.json引入相关依赖和创建tsconfig.json。更令人惊喜的是，像执行npm run build等命令时，他能结合命令报错信息修改优化代码，直到项目能顺利构建（想起以前构建项目各种报错只能谷歌，一个个翻历史帖子，现在真的太幸福了bushi）。

下面贴出cursor生成的index.ts文件：

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";import { z } from "zod";
interface WeatherData {  city: string;  temperature: number;  condition: string;  forecast: {    date: string;    condition: string;    high: number;    low: number;  }[];  lastUpdated: string;}
// 模拟天气数据存储const weatherDatabase: Record<string, WeatherData> = {  "北京": {    city: "北京",    temperature: 22,    condition: "晴朗",    forecast: [      { date: "2025-04-08", condition: "晴朗", high: 24, low: 15 },      { date: "2025-04-09", condition: "大雪", high: 23, low: 14 },      { date: "2025-04-10", condition: "大风", high: 20, low: 12 }    ],    lastUpdated: new Date().toISOString()  },  "上海": {    city: "上海",    temperature: 24,    condition: "多云",    forecast: [      { date: "2025-04-08", condition: "多云", high: 25, low: 17 },      { date: "2025-04-09", condition: "阴天", high: 24, low: 16 },      { date: "2025-04-10", condition: "小雨", high: 22, low: 15 }    ],    lastUpdated: new Date().toISOString()  },  "广州": {    city: "广州",    temperature: 28,    condition: "晴朗",    forecast: [      { date: "2025-04-08", condition: "晴朗", high: 30, low: 21 },      { date: "2025-04-09", condition: "晴朗", high: 29, low: 21 },      { date: "2025-04-10", condition: "多云", high: 28, low: 20 }    ],    lastUpdated: new Date().toISOString()  }};
// 创建 MCP 服务器const server = new McpServer({  name: "天气服务",  version: "1.0.0",  description: "提供城市天气信息的MCP服务"});
// 定义资源：获取城市天气数据server.resource(  "weatherData",  "weather://{city}",  async (uri) => {    // 从URI中提取城市名称    const city = uri.pathname.split('/').pop() || "";        if (!weatherDatabase[city]) {      return {        contents: [{          uri: uri.href,          text: `未找到城市 ${city} 的天气数据`        }],        isError: true      };    }
    return {      contents: [{        uri: uri.href,        text: JSON.stringify(weatherDatabase[city], null, 2)      }]    };  });
// 定义资源：获取所有支持的城市列表server.resource(  "cityList",  "weather://cities",  async (uri) => {    return {      contents: [{        uri: uri.href,        text: JSON.stringify(Object.keys(weatherDatabase), null, 2)      }]    };  });
// 定义工具：获取天气预报server.tool(  "getWeatherForecast",  { city: z.string().describe("要查询天气预报的城市名") },  async ({ city }) => {    if (!weatherDatabase[city]) {      return {        content: [{           type: "text",           text: `城市 ${city} 的天气数据不存在`         }],        isError: true      };    }
    const weather = weatherDatabase[city];    return {      content: [{         type: "text",         text: `${city}天气预报:\n当前温度: ${weather.temperature}°C, 天气状况: ${weather.condition}\n未来三天预报:\n${          weather.forecast.map(day => `${day.date}: ${day.condition}, ${day.low}°C - ${day.high}°C`).join('\n')        }\n最后更新时间: ${weather.lastUpdated}`      }]    };  });
// 定义工具：更新城市天气server.tool(  "updateWeather",  {     city: z.string().describe("要更新天气的城市名"),    temperature: z.number().describe("当前温度(°C)"),    condition: z.string().describe("天气状况描述")  },  async ({ city, temperature, condition }) => {    if (!weatherDatabase[city]) {      // 如果城市不存在，则创建新记录      weatherDatabase[city] = {        city,        temperature,        condition,        forecast: [          { date: "2025-04-08", condition: condition, high: temperature + 2, low: temperature - 5 },          { date: "2025-04-09", condition: condition, high: temperature + 1, low: temperature - 6 },          { date: "2025-04-10", condition: condition, high: temperature, low: temperature - 7 }        ],        lastUpdated: new Date().toISOString()      };    } else {      // 更新现有记录      weatherDatabase[city].temperature = temperature;      weatherDatabase[city].condition = condition;      weatherDatabase[city].lastUpdated = new Date().toISOString();    }
    return {      content: [{         type: "text",         text: `已成功更新${city}的天气数据: 温度 ${temperature}°C, 天气状况 ${condition}`       }]    };  });
// 定义提示词：天气查询server.prompt(  "weatherQuery",  { city: z.string().describe("城市名称") },  ({ city }) => ({    messages: [{      role: "user",      content: {        type: "text",        text: `请提供${city}的详细天气信息，包括温度、天气状况和未来几天的预报。`      }    }]  }));
// 定义提示词：天气建议server.prompt(  "weatherAdvice",  {     city: z.string().describe("城市名称"),    activity: z.string().describe("计划的活动")  },  ({ city, activity }) => ({    messages: [{      role: "user",      content: {        type: "text",        text: `请根据${city}的天气情况，给我关于${activity}的建议。考虑温度、天气状况等因素。`      }    }]  }));
// 启动服务器async function main(){  const transport = new StdioServerTransport();  console.log("天气服务启动中...");    try {    await server.connect(transport);    console.log("天气服务已连接");  } catch (error) {    console.error("服务器连接失败:", error);  }}
main().catch(console.error);

项目构建完成后，会在build目录下生成一个index.js，下面通过命令的方式调用这个天气mcp server。

Cursor添加MCP路径在Cursor Settings->MCP->Add new global MCP Server：

{  "mcpServers": {    "weather-mcp-server": {      "type": "command",      "command": "node /Users/jayzx/CursorProjects/cursor-mcp-demo/quickstart-resources/weather-mcp-server/build/index.js"    }  }}

让我们测试一下：

2.2 cursor开发黄金价格预测项目

上面使用cursor开发MCP的练习似乎简单了，怀着对cursor开发可用项目能力的质疑，下面动手做点复杂的东西。联想到关注大黄近两个月来的疯狂涨势（670到820），每次卖出都恨自己卖早了，如果能结合大模型分析未来几天的黄金趋势，是不是可以一定程度上提高短期投资收益🐶。

黄金价格预测的数据来源基于三部分：黄金的日K线、当前黄金最新价格、有关黄金和美国的市场快讯。

2.2.1 开发

这个项目总共花费了十几个小时，真正我做的内容其实就是上图标黄的部分。其余耗时比较长的部分罗列如下：

API调试（40%）。这部分工作理想情况是上下文丢给他api官方文档，然后改下自己的密钥即可。但使用claude-3.7-sonnet测试下来，代码质量严格依赖于文档的水平，很难一次性运行调用成功。解决方案：让大模型阅读文档的demo代码，让其先编写测试文件，api测试调通再应用到项目代码中，否则api开发修改数据结构，项目代码要跟着修改，耗时且容易运行不起来。
前后端联调（40%）：前端请求能正确路由到后端服务，部署排查，比如我在这过程中就遇到了CORS等。比较好的一点是遇到错误可以直接截图丢给cursor修复。tips：前后端都增加日志，查看数据流。
细节完善（20%）：剩下就是一些动嘴的体力活了，对功能进行完善、页面细节补充（虽然现在这个UI没咋优化哈哈）。

2.2.2 优缺点

优点：

除了MCP、Docs、Rules这些工具，cursor相对于常规IDE的Chat面板，可以直接阅读整个项目文件、浏览网页、读取图片、运行命令，这几个功能十分好用。比如命令执行失败，能根据命令返回的报错内容去做调整，大大提高了代码生成能力；读取图片，报错了直接丢报错截图 or 优化页面直接扔页面组件截图；
响应速度快；
Chat交互简单；

缺点：

长会话，比如token超了，会一直卡住显示Generating。现在优化后可以选择另起一个New Chat让cursor总结上通会话内容，继续对话；
代码debug能力：一些极小的代码bug不容易发现。比如在开发黄金K线图功能时，鼠标hover提示会展示时间、开盘价、收盘价等，api接口返回的是个二维数组，大概长这样[[open,close,high,low,change,changeRate,volume,tick_at],[],,,]，其实每个点就是二维数组中的一个数组元素，根据索引解析到对应字段就好。cursor开发完成后hover字段对应不上，我截图给他修复并让他打日志分析，动了嘴皮子两三次都没修好，最后自己看代码发现就是简单的索引没有对上。

三、一些感受和技巧

简单几天cursor体验下来，感觉网传的零基础小白上手开发app上线或许多少有点夸大其词，稍微复杂点的项目，比如涉及前后端、部署上线等，还是需要使用者具备一定的开发基础的（常用的node、python、linux、git命令）。因为你只有能看懂前后端大概在干什么，才能在出现问题的时候辅助cursor修复优化。

但是cursor的作用也是不能让人忽略的，尤其对于前端or后端开发走向全栈提供了一个简单有效的捷径。

文章前面已经提到些cursor使用技巧，最后简单补充总结下：

描述好你的产品功能：主要功能一定要讲清楚，细节描述可以后面补充。
技术选项：不要一上来写代码，先让cursor出一版技术方案出来，对其修改后再开始写代码。
接口开发：除了官方文档的quickStart，最好能给出demo代码，然后测试好接口再应用到项目代码中。
添加日志：能帮助更快地定位问题。
活用Docs和Project Rules：这两个工具能显著提高代码质量，让代码按照你预期的方向发展。
Git管理：一定要使用git，实现一个功能后及时commit。由于cursor每次生成代码不一定符合预期，配合git能快速回滚。

如何学习大模型 AI ？

由于新岗位的生产效率，要优于被取代岗位的生产效率，所以实际上整个社会的生产效率是提升的。

但是具体到个人，只能说是：

“最先掌握AI的人，将会比较晚掌握AI的人有竞争优势”。

这句话，放在计算机、互联网、移动互联网的开局时期，都是一样的道理。

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

在这里插入图片描述