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

简介: 本文介绍了Cursor结合MCP(Model Context Protocol)开发项目的实践与技巧。首先概述了MCP的概念及工作流程,包括MCP Hosts、Clients、Servers等组件的定义和通信方式(如stdio本地通信与SSE远程通信)。接着详细描述了如何利用Cursor开发一个查询天气信息的MCP Server,涵盖项目初始化、规则设置、代码生成到最终测试的全过程。此外,还展示了使用Cursor开发黄金价格预测项目的实例,分析了其优缺点,并总结了一些使用技巧,如技术方案先行、接口调试时提供demo代码、活用Docs和Rules工具等。

最近刷了几篇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),每次卖出都恨自己卖早了,如果能结合大模型分析未来几天的黄金趋势,是不是可以一定程度上提高短期投资收益🐶。

说干就干,先看当前实现的效果:

image.png

黄金价格预测的数据来源基于三部分:黄金的日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玩法:



来源  |  阿里云开发者公众号

作者  |  鬼怪

相关文章
|
运维 开发者 UED
告别拍脑袋排期|通义灵码 MCP 助力项目经理科学制定软件开发计划
今天我们精选了与开发者息息相关和比较热门的 MCP 服务,总结了这些技术服务在实际开发的最佳实践,涵盖了从前端开发、后端开发、DevOps、测试、运维等关键环节,及非研发领域中的热度较高的 MCP 服务。我们通过直播、图文等形式带你了解和学习!
290 20
|
30天前
|
人工智能 Java API
MCP客户端调用看这一篇就够了(Java版)
本文详细介绍了MCP(Model Context Protocol)客户端的开发方法,包括在没有MCP时的痛点、MCP的作用以及如何通过Spring-AI框架和原生SDK调用MCP服务。文章首先分析了MCP协议的必要性,接着分别讲解了Spring-AI框架和自研SDK的使用方式,涵盖配置LLM接口、工具注入、动态封装工具等步骤,并提供了代码示例。此外,还记录了开发过程中遇到的问题及解决办法,如版本冲突、服务连接超时等。最后,文章探讨了框架与原生SDK的选择,认为框架适合快速构建应用,而原生SDK更适合平台级开发,强调了两者结合使用的价值。
1772 27
MCP客户端调用看这一篇就够了(Java版)
|
16天前
|
机器学习/深度学习 人工智能 PyTorch
200行python代码实现从Bigram模型到LLM
本文从零基础出发,逐步实现了一个类似GPT的Transformer模型。首先通过Bigram模型生成诗词,接着加入Positional Encoding实现位置信息编码,再引入Single Head Self-Attention机制计算token间的关系,并扩展到Multi-Head Self-Attention以增强表现力。随后添加FeedForward、Block结构、残差连接(Residual Connection)、投影(Projection)、层归一化(Layer Normalization)及Dropout等组件,最终调整超参数完成一个6层、6头、384维度的“0.0155B”模型
200行python代码实现从Bigram模型到LLM
|
1月前
|
人工智能 监控 安全
面对MCP"工具投毒",我们该如何应对
本文探讨了MCP(Model Context Protocol)的安全风险与防护措施。MCP作为AI系统与外部工具交互的标准框架,虽提升了插件兼容性,但也带来了“工具投毒”等安全威胁。攻击者可通过篡改工具描述,诱导模型执行非授权操作,如读取敏感文件。文章详细分析了攻击原理,并通过复刻实验展示了如何利用MCP客户端/服务器代码实现此类攻击。为应对风险,提出了基于大模型智能评估和eBPF技术的两种安全可观测方案:前者通过内置评估模板检测潜在威胁,后者实时监控系统运行时行为,结合两者可有效提升MCP系统的安全性。
717 93
面对MCP"工具投毒",我们该如何应对
|
15天前
|
机器学习/深度学习 人工智能 搜索推荐
Deep Search 如何理解业务仓库代码?
本文系统地介绍了 Deep Search 和 Deep Research 的概念、与传统 RAG 的区别、当前主流的商业产品与开源方案、在代码领域的应用(如 Deep Search for 仓库问答)以及未来的发展规划。
158 20
Deep Search 如何理解业务仓库代码?
|
27天前
|
人工智能 Kubernetes Java
回归开源,两位 Java 和 Go 程序员分享的开源贡献指引
Higress是一个基于Istio和Envoy的云原生API网关,支持AI功能扩展。它通过Go/Rust/JS编写的Wasm插件提供可扩展架构,并包含Node和Java的console模块。Higress起源于阿里巴巴,解决了Tengine配置重载及gRPC/Dubbo负载均衡问题,现已成为阿里云API网关的基础。本文介绍Higress的基本架构、功能(如AI网关、API管理、Ingress流量网关等)、部署方式以及如何参与开源贡献。此外,还提供了有效的开源贡献指南和社区交流信息。
321 35
|
16天前
|
人工智能 安全 API
Agent 工程师绕不开的必修课:API 网关 vs API 管理
本文探讨了“API管理”与“API网关”的起源、发展及差异,二者分别服务于API生命周期的不同阶段。API网关从流量网关演进至AI网关,承担运行时请求控制;API管理则从接口文档化发展到商业化平台,关注全生命周期治理。两者在实际应用中协同工作,通过分层架构和策略联动实现高效运营。未来,随着大模型应用的兴起,AI网关和MCP Server管理将成为新趋势,推动API技术迈入智能化和服务化的新阶段。
Agent 工程师绕不开的必修课:API 网关 vs API 管理
|
18天前
|
自然语言处理 API 开发工具
端午出游高定:通义灵码+高德 MCP 10 分钟定制出游攻略
本文介绍了如何使用通义灵码编程智能体与高德 MCP 2.0 制作北京端午3天旅行攻略页面。首先需下载通义灵码 AI IDE 并获取高德申请的 key,接着通过添加 MCP 服务生成 travel_tips.html 文件,最终在手机端查看已发布上线的攻略。此外还详细说明了利用通义灵码打造专属 MCP 服务的过程,包括开发计划、代码编写、部署及连接服务等步骤,并提供了自由探索的方向及相关资料链接。
392 96
|
1月前
|
人工智能 JavaScript Devops
云效 MCP Server:AI 驱动的研发协作新范式
云效MCP Server是阿里云云效平台推出的模型上下文协议(Model Context Protocol)标准化接口系统,作为AI助手与DevOps平台的核心桥梁。通过该协议,AI大模型可无缝集成云效DevOps平台,直接访问和操作包括项目管理、代码仓库、工作项等关键研发资产,实现智能化全生命周期管理。其功能涵盖代码仓库管理、代码评审、项目管理和组织管理等多个方面,支持如创建分支、合并请求、查询工作项等具体操作。用户可通过通义灵码内置的MCP市场安装云效MCP服务,并配置个人访问令牌完成集成。实际场景中,AI助手可自动分析需求、生成代码、创建功能分支并提交合并请求,极大提升研发效率。

热门文章

最新文章