Cursor 系列(3):关于MCP

MCP(Model Context Protocol,模型上下文协议)Anthropic202411 月推出的开放标准,用来让 AI 助手与外部工具和数据源安全、统一地交互。

说人话,它的概念有点像USB接口------我们可以将不同品牌、类型的设备(鼠标、键盘、U盘)通过同一个USB接口连接到电脑,我们也可以将不同的工具和数据源(数据库、文件系统、API、搜索引擎)通过统一的 MCP 协议连接到 AI 助手。在Cursor中,可以将它理解为一个插件系统,可以扩展Cursor使用AI的能力。

Cursor相关的MCP越来越多了,我经常使用的只有下面这三个,如果朋友们有啥好用的,也欢迎评论区留言。

deepwiki MCP

deepwiki 简介

deepwiki MCP 先放一边,我们先来了解下 deepwiki

deepwiki 是一个 GitHub 代码仓库智能 AI 阅读助手,这个工具可以自动将任何 GitHub 仓库转换为详细且易于阅读的知识库文档,并提供交互式图表和对话式 AI 助手。通过它,我们可以轻松理解仓库的技术细节、架构设计和使用方法。

它的网站为是deepwiki

使用方法也很简单,直接在搜索栏搜索一个我们想要查找的 github 项目,比如我们想要查找 vxe-table 的文档:

看下哪个是我们想要查找的库,看哪个星多就完了,一般都是第一个,点进去:

可以看到,deepwikivxe-table 这个 github 项目重新进行了整理归纳,形成了一个包含简介、架构、构建与脚本、单文件组件、服务端渲染、集成与兼容的一个综合性知识库文档。文档中除了文字还包含大量的图表信息,如架构图、流程图等,我们不仅可以清晰的了解项目的整体结构,还可以详细查看及某一部分的具体使用文档。

到这里还没完,deepwiki 的一个很重要功能是,它可以通过内置的对话型 AI 助手,让用户自己与 AI 交互,去理解仓库的仓库的技术细节、架构设计或使用方法。比如,如果我想深入了解一下 vex-table 中,分页功能的具体实现细节,我们可以直接在网页下面的搜索工具里面输入:

就可以看到查询到的细节:

如果我们想继续提问,可以在底部对话框中继续输入问题,它会根据上下文继续返回文档,属实厉害!

deepwiki MCP 简介

Devin 官方后来也推出了 deepwiki MCP 服务,这对某些使用开源项目的开发者来说可谓是一个重大利好,相当于免费拥有一个比官方文档更智能,更详细的项目文档。

它可以从 GitHub 仓库或Deepwiki 网站获取最新的文档或代码库内容,通过 MCP 协议将爬取的内容转换为 Markdown 格式,供 Cursor 使用,特别适合需要查看 GitHub 仓库文档的场景。

DeepWiki MCP 提供三种主要工具:

  • read_wiki_structure:获取仓库文档的结构和主题
  • read_wiki_contents:获取仓库文档的详细内容
  • ask_question:对指定仓库提出问题,获取基于仓库文档和代码的 AI 回复

接入

点开Cursor Settings => Tools & MCP => Add a Custom MCP Server,在mcp.json文件中,添加如下:

json 复制代码
{
  "mcpServers": {
    "deepwiki": {
      "url": "https://mcp.deepwiki.com/sse"
    }
  }
}

如何使用

使用方法也很简单,直接在 chat 里加上 use deepwiki 和 你想查找的代码库这俩关键字就可以了。比如,如果我想通过 deepwiki 优化 vex-table 中的分页:

它能够直接分析 vex-table 的官方文档中相关的文档和源码,从而对你的代码做出相应的更改,不用来回切换线上文档和编辑器,大幅度提高编码的准确性和效率。而且由于官方文档一直是最新的,能够有效避免 AI 幻觉问题(目前还是不能完全避免)。相比较之前我们通过@Docs 引入官方文档的做法,Deepwiki MCP 显然更方便和全面。

使用场景

我通常会在这几个方面使用它

  • 快速查询、使用代码库文档的API
  • 解决开发过程中遇到的代码库、npm 包相关问题。
  • 快速了解代码库的文档结构

context7

简介

Context7 MCPupstash 开发的 MCP 工具,它解决了 AI 知识过时造成的AI幻觉问题(AI助手的训练数据可能过时,生成错误或已弃用的代码)。Context7会提供实时、准确的文档,有效减少这类问题。

官方网址:context7.com/

它提供了两个工具:

  1. resolve_library_id: 根据提示词查找库名 ID
  2. get_library_docs: 根据库名 ID 获取库对应的文档内容。

接入

点开Cursor Settings => Tools & MCP => Add a Custom MCP Server,在mcp.json文件中,添加如下:

json 复制代码
{
  "mcpServers": {
    "context7": {
      "url": "https://mcp.context7.com/mcp"
    }
  }
}

如何使用

使用方法与 deepwiki 类似,直接在 chat 提示词中加上 use context7 关键字即可。Context7 会自动识别你提到的库或框架,并获取最新的文档和代码示例。

例如,当你想使用最新的 React 18 特性时,可以这样提问:

"使用 React 18 的新特性创建一个组件,use context7"

或者想了解某个库的最新 API

"如何使用 Next.js 15 的服务器组件?use context7"

Context7 会自动解析你的需求,查找相关的库文档,并获取最新版本的文档内容,确保生成的代码符合最新的 API 和最佳实践。

使用场景

我通常会在以下场景使用 Context7

  • 学习新框架或库 :当需要学习新的框架、库或工具时,Context7 可以提供最新的官方文档和代码示例,帮助快速上手
  • 使用新版本特性 :当框架或库发布了新版本,想使用新 API 或特性时,Context7 可以确保获取的是最新版本的文档,避免使用已废弃的 API
  • 调试和问题排查 :遇到问题时,Context7 可以获取最新的文档和示例,帮助理解正确的用法和最佳实践
  • 代码重构和优化 :需要重构代码或优化实现时,Context7 可以提供当前版本的最佳实践和推荐模式

DeepwikiContext7 有什么区别

Context7Deepwiki 很像,不过还是有点区别的,根据我对这两个 MCP 的使用过程来看:

如果单论防止 AI 幻觉,Context7 要比 Deepwiki 好点,而且 Context7 可以从不同版本解析代码库。但是如果要论项目的理解深度来说, Deepwiki 要比 Context7 好的多,因为 Deepwiki 是从代码 + 文档角度分析项目的,而 Context7 是从文档角度分析项目。

但是这俩 MCP 都有同一个缺点:搜索的库要么不全,要么特定版本没有。在 Deepwiki 中,一些冷门的库搜索不到, context7 中搜索库,版本可能又不全,比如在context7中搜索 VXE-Table,查到的版本只有两个:

遇见这种情况,要么等有人将库传到 Deepwiki 或者 context7 中,要么自己手动去传,我尝试了一下自己去传,速度还是挺快的。

MCP-Feedback-Enhanced

简介

MCP-feedback-enhanced 是一个面向开发者的反馈驱动型工作流工具,核心目标是通过用户反馈优化 AI 操作,减少平台成本并提升开发效率。

地址:github.com/Minidoracat...

直观的说就是,这个工具会让 AI 在完成阶段性任务后,不直接退出,而是先征求开发者意见,根据开发者的反馈,再决定退出还是继续一下步操作。当这个 mcp 被触发时,它会唤起一个基于 Qt GUI 开发的新界面,并提供更为丰富的反馈选项,具体有:

  • AI summary:先让 AI 梳理总结一下已经完成的工作,然后用户可以基于此给出反馈。
  • 图像上传:支持 PNG/JPG 等多种格式,并且自动压缩至 1MB 以内,支持拖放和粘贴(Ctrl+V)。
  • 多语言切换:英语、繁简中文,根据系统语言自动切换,支持界面内实时切换。

接入

点开Cursor Settings => Tools & MCP => Add a Custom MCP Server,在mcp.json文件中,添加如下:

json 复制代码
{
  "mcp-feedback-enhanced": {
    "command": "uvx",
    "args": ["mcp-feedback-enhanced@latest"],
    "timeout": 600,
    "autoApprove": ["interactive_feedback"]
  }
}

如何使用

与前几个 mcp 一样,直接在 chat 里你的语句加入 use mcp-feedback-enhanced 就行了。 比如,如果我想查询一下这个项目的目录结构:

允许 mcp 调用后,会打开一个 GUI 窗口,可以输入文字。

比如我们可以输入:只查询 md 文档,

之后提交反馈,他会根据你的反馈再进行解答,解答完后会刷新这个窗口,我们可以再输入反馈,再获得解答....如此循环往复...

注意 : 2024 年的 7 月份,Cursor 的收费方式发生了更改。如果按照之前的依据请求次数收费,我们可以通过调用 mcp-feedback-enhanced 压缩请求次数,通过不断询问用户是否问题已经解决,尽可能将所有更改压缩到一次请求中以减少请求次数。但是由于 Cursor 的收费方式变为现在请求额度收费(其实就是按照输入、输出总的 token 量收费),我们通过延长会话来减少计费次数的想法已经失效。

在新计费模式下,mcp-feedback-enhanced 的主要价值------节省请求次数以节省费用,已经失效。我认为它现在最大的价值应该是:通过交互反馈提高任务完成质量,减少返工,也可以通过这种方式确保 AI 理解需求后再继续,避免方向性错误。

使用场景

我通常会在以下场景中使用 MCP-Feedback-Enhanced

  1. 复杂任务的分步确认
  2. 需求不明确时的迭代澄清
  3. 需要视觉参考的任务(需要大量上传图片、设计稿或者参考图例)
  4. 多伦迭代优化

简而言之,复杂点的任务用它,简单明确的的任务不用它。

总结

其实好用的MCP还有很多,只不过我最喜欢用的是这三个而已,在某些特殊的业务场景下,选用合适的MCP是真能够给你带来事半功倍的效果,比如:

  1. 如果产品给你的UI是用Figma设计的,那么使用Figma-Context-MCP能够帮你快速的将Figma设计稿又快又好的转化为代码。
  2. 如果你在开发独立项目,不太会设计,那么magic-mcp会根据你的提示,帮你设计出很好看的UI
  3. itermgiteegithub等官方也都有自己的MCP
  4. ...

感兴趣的朋友可以去这个网站这个网站找找看,看哪些MCP对自己的开发有帮助,也可以关注一下这个 MCP 资源项目

相关推荐
sheji34162 小时前
【开题答辩全过程】以 基于web的拍卖系统设计与实现为例,包含答辩的问题和答案
前端
明月_清风2 小时前
模仿 create-vite / create-vue 风格写一个现代脚手架
前端·后端
aou2 小时前
让表格式录入像 Excel 一样顺滑
前端·ai编程
前端付豪2 小时前
必知 Express和 MVC
前端·node.js·全栈
重铸码农荣光2 小时前
CSS 也能“私有化”?揭秘模块化 CSS 的防坑指南(附 Vue & React 实战)
前端·css·vue.js
南囝coding2 小时前
CSS终于能做瀑布流了!三行代码搞定,告别JavaScript布局
前端·后端·面试
ccnocare2 小时前
git 创建远程分支
前端
全栈王校长2 小时前
Vue.js 3 项目构建神器:Webpack 全攻略
前端
1024小神2 小时前
cloudflare+hono使用worker实现api接口和r2文件存储和下载
前端