最近刷了几篇cursor的文章,看到其中一篇文章介绍了几个cursor项目开发案例,突然有种睁眼看世界的感觉。之前对AI Coding的认知还停留在tab补全、自动生成单元测试上,没想到现在已经发展到直接能开发项目了,某种意义上做到了“有嘴就行”。于是试玩了下cursor,并结合了MCP、Rules、Docs等新功能,帮助对cursor不熟的同学快速入门。
一、概念
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的基本工作流程:
图片来自https://zhuanlan.zhihu.com/p/29001189476
1. 工具描述与上下文注入:MCP Server 会预先定义工具的 名称、描述、通信方式 ,并将这些信息以结构化文本形式注入大模型的上下文;
2. 选择工具:大模型通过分析用户指令和工具描述,推理出需调用哪种工具。当然也可以选择不调用,如上图的Case2;
3. MCP Client发起工具调用:大模型结合用户输入和实时上下文,生成符合工具要求的 JSON-RPC 请求 ,包含工具名称和参数;
4. MCP Server执行工具:Server 解析请求,调用对应的工具处理函数,并将结果封装为 JSON-RPC 响应;
5. 结果返回与模型整合:大模型可根据工具返回的结果动态更新上下文,生成最终回答。
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。
3. 执行pnpm init
命令建立typeScript初始环境,然后在src目录下创建一个index.ts文件,基于该文件开启Agent Chat(两个github仓库分别是官方的typeScript SDK和quickStart demo):
4. 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能快速回滚。
最后给出Prajwal Tomar总结的10条cursor玩法:
来源 | 阿里云开发者公众号
作者 | 鬼怪