Cursor IDE实战:从MCP Server到黄金价格预测项目开发

本文介绍了如何使用Cursor IDE结合MCP等功能进行项目开发,并通过实战案例展示了Cursor的应用和技巧,强调开发者仍需具备一定的基础。

原文标题:Cursor入门:MCP开发调用和项目实战

原文作者:阿里云开发者

冷月清谈:

本文介绍了如何使用Cursor IDE结合MCP(模型上下文协议)、Docs和Rules等功能进行项目开发。文章首先解释了MCP的概念和工作原理,然后通过两个实战案例,展示了Cursor在MCP Server开发和黄金价格预测项目中的应用。作者分享了使用Cursor的一些技巧和感受,例如描述好产品功能、先出技术方案、接口测试先行、添加日志、活用Docs和Project Rules以及使用Git进行版本管理。文章强调,虽然Cursor能显著提高开发效率,但使用者仍需具备一定的开发基础才能更好地利用其功能。

怜星夜思:

1、在文章中,作者提到Cursor可以直接读取项目文件、浏览网页、读取图片、运行命令等功能,你认为这些功能在多大程度上提升了开发效率,又在哪些方面存在局限性?
2、文章中提到,作者认为零基础小白通过Cursor开发app上线或许有点夸大其词,你是否赞同这个观点?如果让你用Cursor开发一个简单的app,你会选择开发什么?并简述你的思路。
3、文章中,作者提到API调试花费了大量时间,你认为应该如何更有效地利用AI工具进行API调试?

原文内容

最近刷了几篇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)的本地通信和基于SSEServer-Sent Events)的远程通信。

  • 本地通信:通过 stdio 传输数据,适用于在同一台机器上运行的客户端和服务器之间的通信,最常见的是命令行调用Command。

  • 远程通信:利用 SSE 与 HTTP 结合,实现跨网络的实时数据传输,适用于需要访问远程资源或分布式部署的场景。现在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: 未找到城市&nbsp;${city}&nbsp;的天气数据
        }],
        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: 城市&nbsp;${city}&nbsp;的天气数据不存在 
        }],
        isError: true
      };
    }

    const weather = weatherDatabase[city];
    return {
      content: [{ 
        type: “text”, 
        text: ${city}天气预报:\n当前温度:&nbsp;${weather.temperature}°C, 天气状况:&nbsp;${weather.condition}\n未来三天预报:\n${ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; weather.forecast.map(day =&gt;&nbsp;${day.date}: ${day.condition}, ${day.low}°C - ${day.high}°C).join('\n') &nbsp; &nbsp; &nbsp; &nbsp; }\n最后更新时间:&nbsp;${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}的天气数据: 温度&nbsp;${temperature}°C, 天气状况&nbsp;${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玩法:

高效构建移动 App


本方案使用移动研发平台 EMAS 和研发协同平台云效来提供一站式 App 的开发、测试、运维、运营等应用全生命周期的管理能力,提升开发效率,降低运维成本。


点击阅读原文查看详情。

我是觉得吧,零基础也能“上线”,但可能只是个非常非常基础的demo,离真正的app还差很远。毕竟,app上线还涉及到很多审核、发布的问题,不是光靠Cursor就能解决的。

如果让我用Cursor,我可能会试试做一个“笑话大全”app,每天随机推送一个笑话。思路很简单,找个免费的笑话API,用Cursor写代码调用,然后把结果显示出来。这样,每天都能给自己带来一点快乐,岂不美哉?

API调试确实是个头疼的问题,尤其是在接口文档不完善的情况下。我觉得可以尝试让AI先根据文档生成测试用例,然后用这些测试用例去验证API的返回值是否符合预期。如果AI能自动分析接口文档,生成mock数据,那就更好了。

我觉得这些功能确实大大提升了效率,尤其是对于需要频繁查阅文档和调试代码的场景。但是,完全依赖这些功能也可能导致开发者对底层原理理解不够深入,遇到复杂问题时容易束手无策。毕竟工具再强大,也只是辅助,核心还是得靠自己。

同意楼上的观点!生成测试用例是个好主意。另外,我觉得还可以让AI根据API的请求参数和返回值,自动生成代码片段,方便我们快速调用API。如果AI能监控API的调用情况,及时发现错误,那就更完美了。

我觉得最重要的是要给AI提供尽可能详细的信息,包括API文档、请求示例、错误码等等。然后,可以尝试让AI生成不同场景下的请求,模拟各种边界情况。另外,使用AI进行API调试时,一定要仔细检查AI生成的代码,确保其正确性。

同意楼上的观点!这些功能就像是有了个智能助手,能帮你快速找到信息、执行命令,省去了很多重复性工作。但话说回来,如果AI给出的方案是错误的,或者不符合最佳实践,开发者没有足够的技术储备,可能就直接采纳了,反而埋下隐患。所以说,用好AI工具的前提是自己得先是大佬。

我也觉得“零基础”有点绝对了。开发app涉及到很多方面,比如UI设计、数据存储、服务器部署等等,完全不懂这些概念,光靠Cursor是搞不定的。但如果只是想快速搭建一个demo或者验证想法,Cursor还是很有帮助的。

如果让我用Cursor开发一个app,我会做一个简单的“每日一句”app。思路是这样的:用Cursor快速生成UI界面,然后调用一个免费的API获取每日一句的内容,最后把内容显示在app上。这样可以学习Cursor的UI设计和API调用功能。

赞同!零基础是不可能的,至少得了解基本的编程概念和开发流程。但话说回来,Cursor确实降低了开发的门槛,让更多人可以参与到开发中来。

我想开发一个“TODO List”app,用Cursor生成基本的增删改查功能,然后加上一些个性化定制,比如主题切换、提醒功能等等。这样可以学习Cursor在实际项目中的应用,也能锻炼自己的问题解决能力。

Embrace AI,但不要过度依赖!Cursor提供的功能确实方便,但我觉得更重要的是培养自己的问题解决能力。遇到bug,别光指望AI,自己也要学会debug,这样才能更好地掌控整个开发过程。而且,了解底层原理才能更好地利用AI工具,让它真正成为你的帮手,而不是负担。