Cursor配置MCP及实践

清寒_
290 阅读7分钟

前言

在现代前端开发中，AI 助手已经成为提升开发效率的重要工具。Cursor 提供了 MCP 机制，让 AI Agent 可以接入不同的数据源和工具，实现自动化任务、知识查询、调试辅助等功能。

MCP 可以理解为 AI Agent 的“插件” ，每个 MCP 提供不同的能力，例如访问内部知识库、操作浏览器、管理上下文任务等。下面将介绍几个在开发中使用的 MCP：

  • Context7
  • Chrome DevTools MCP
  • Sequential Thinking

帮助我们快速了解并应用这些工具。

想要了解其他MCP，可以通过 Smithery.ai 查找有哪些热门的MCP，Smithery 是一个 MCP 服务器注册中心 / 平台，聚合和托管各种 MCP 服务（让 LLM / Agent 调用的工具/服务）。

Context7:

大语言模型依赖于过时的训练数据。当你提问一些库或框架的最新版本时，如果没有找到，它们常常会产生幻觉：

❌ 来自旧版本的废弃的代码

❌ 虚构的API，从未存在过

❌ 模糊不清、毫无帮助的回答

对于像Next.js、Tailwind或React Query这样快速迭代的库或框架，仅依靠大语言模型（LLM）本身并不奏效。

我们可以在cursor中配置DOCS，添加库的最新文档，当搜索某个库时，@docs去查询，不过需要自己手动添加文档地址，而且地址发生改变时，还要手动更新。

使用Context7：

  • 文档最新
  • 数量多，无需手动维护
  • 高质量索引
  • 带缓存，响应快
  • 使用简单且免费

使用：

要求：

  • Node.js >= v18.0.0
  • Cursor, 或其他 MCP客户端

Cursor中安装：

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"]
    }
  }
}

Cursor 启动时，会根据这个配置去运行：

npx -y @upstash/context7-mcp

image.png

Tools:

1. resolve-library-id

识别并定位一个库（library）在 Context7 系统中的唯一 ID，

不同人输入库名的方式不同，比如：

  • “React Query”
  • “@tanstack/react-query”
  • “tanstack query”
  • “react query hooks”

这些其实都是指向同一个库。
所以 Context7 必须先识别出用户指的是哪个库，
然后才能查它的文档、示例等信息。

2. get-library-docs

通过resolve-library-id获得了具体库名，在通过这个tool，去获取库的文档和代码示例

提示词：

最新的Next.js中，after函数时如何工作的？use context7

参考：

context7.com/

upstash.com/blog/contex…

github.com/upstash/con…

Chrome DevTools MCP

Google在2025年9月23号发布的 Chrome 开发者工具MCP。

chrome-devtools-mcp让编码工具（例如 Gemini、Claude、Cursor 或 Copilot）控制并检查Chrome 浏览器。它做为MCP服务器，让 AI 编码助手能够充分利用 Chrome DevTools 的强大功能，实现可靠的自动化、深入的调试和性能分析。

使用：

要求：

1、以远程调试模式启动Chrome:

chrome-devtools-mcp 本质上是一个 DevTools Protocol 客户端。
它并不是通过“操作系统层面”去控制 Chrome，而是通过 Chrome 官方提供的调试协议（Chrome DevTools Protocol, CDP）。要使用这个协议，浏览器必须打开调试模式（WebSocket 连接）

macOS：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Windows：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

这会让 Chrome 开一个 WebSocket 端口（默认 9222），允许外部程序（如 MCP 服务）用 CDP 连接它。

这样就可以通过 API 操作浏览器了，比如：

  • 获取当前标签页
  • 执行 document.querySelector
  • 截屏
  • 打印 console.log 输出
  • 注入 JavaScript 代码

2、cursor中安装：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

这样配置会让 Cursor 启动一个 MCP 服务：

  • 名字叫 chrome-devtools
  • 用 npx 启动 chrome-devtools-mcp 包
  • MCP 会尝试连接 ws://localhost:9222（默认调试端口） ，如果启动调试模式chrome浏览器时，端口改动了，需要和cursor中配置的端口一致，比如启动时，端口是：9333
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9333"
      ]
    }
  }
}

image.png

Tools:

截止2025年10月15日，Chrome Devtools Mcp提供了26个tools，这里列举几个常用到的

1. navigate_page

导航到某个 URL。

2. take_snapshot

截取页面快照 / 屏幕截图

3. performance_start_trace

启动性能追踪（trace）

4. get_network_request

获取某个具体网络请求的详细信息

5. list_console_messages

获取控制台日志 / 错误

6. fill_form

填充表单字段、输入文本

功能：

1. 分析性能

指示 chrome-devtools 操控浏览器，运行performance分析性能的操作，分析结果，并调查存在的性能问题，给出优化方法。

提示词：

使用chrome-devtools计算 http://localhost:5173/home 页面的LCP，并给出优化建议

2. 调试实时样式和布局问题

让代理连接到实时网页，检查 DOM 和 CSS，并根据浏览器中的实时数据获取具体建议，以解决存在的布局问题，例如元素溢出。

提示词：

使用chrome-devtools查看，http://localhost:5173/home 页面仪表盘卡片样式有点奇怪，我想要数字超出显示省略号

3. 使用AI实现功能后，进行本地测试，确认功能是否完善

在实现功能后，开发人员通常会进行自测或者使用自动化测试工具。chrome-devtools-mcp可以直接在 Chrome 中调试网页，确保功能的完善。

提示词：

请帮我在当前项目中实现“亮色主题”和“暗色主题”的切换，要求点击header右上角的一个icon来切换模式，实现后使用chrome-devtools进行功能的调试，确保正确。

4. 模拟用户行为，进行调试

导航、填写表单和点击按钮，以重现 bug 并测试复杂的用户流程，同时检查运行时环境。

5. 诊断网络和控制台错误

能够分析网络请求以发现 CORS 问题，或检查控制台日志以了解某项功能未按预期运行的原因。

随着Chrome-Devtools-Mcp的出现，AI开发能力又上了一个台阶，他不只会思考我们的代码是什么样的，在开发出他认为的正确代码后，还可以进行调试去判断代码对不对，而不是凭空想象去写代码，却不知道运行结果是否符合预期。

Chrome-Devtools-Mcp目前提供了26个tools，并且才刚刚发布，后续可能会有更多的tools。这里只涉及了几个tools的运用，可以使用的场景还有很多，比如做一些自动化测试、自动校验表单填写....，值得我们去慢慢探索，运用在开发中去提高我们开发效率，改变我们常规的开发流程。

参考：

developer.chrome.com/blog/chrome…

github.com/ChromeDevTo…

Sequential Thinking

“Sequential Thinking MCP”，提供一种结构化、分阶段、可反思的思维流程，帮助 AI Agent 或 LLM 在面对复杂问题时，以更有条理的方式进行推理、决策、修正和验证，将问题拆解为可管理的步骤，每个步骤都可以建立在先前的见解之上，或对其进行质疑和修正，从而逐步深化对问题的理解，最终形成全面的解决方案。

使用：

cursor中安装：

使用的是 Smithery 平台 提供的 CLI 启动 MCP 服务 server-sequential-thinking

"mcpServers": {
  "sequential-thinking": {
    "command": "npx",
    "args": [
      "-y",
      "@smithery/cli@latest",
      "run",
      "@smithery-ai/server-sequential-thinking",
      "--key",
      "a03fba51-469e-4d7d-a046-c3f4e414f21a",
      "--profile",
      "incredible-giraffe-9Il3ee"
    ]
  }
}

image.png

Tools:

1. sequentialthinking:

让 AI 按「逐步推理」的模式来回答复杂问题，而不是一次性生成答案。

在 Cursor 中，这个 MCP不会自动生效，需要你在Agent 工作流中显式触发使用。

提示词：

用 Sequential Thinking 的方式一步步分析一下为什么 React 18 的 useTransition 能优化 UI 卡顿问题。

何时使用此工具：

  • 将复杂问题分解为步骤
  • 规划和设计，有修改空间
  • 可能需要修正航向的分析
  • 最初可能不清楚全部范围的问题
  • 需要多步骤解决方案的问题
  • 需要过滤掉无关信息的情况

参考：

smithery.ai/server/@smi…

avatar
文章
阅读
粉丝