AI 编程助手再强，本质上也是在「有限上下文里推理」。一旦问题牵涉到你这台机器上的真实环境（浏览器里到底长什么样、某依赖在你项目里到底是哪一版、内部系统里有什么字段），纯靠模型脑补就很容易把细节编错。

MCP（模型上下文协议）做的，就是把这类信息从「猜」变成「查」与「做」：它给助手一套统一的对接方式，让它可以调用你启用的外部服务——例如调试页面、拉文档、跑检索、操作你允许的工具链。模型把问题拆成可执行步骤，由工具返回可核验的结果，再把结果写回对话。

因此，它不是简单多装几个功能按钮，而是改写了信息来源：用真实输出约束模型，让回答贴着你当前工程与实际运行态走，从源头压降那种「看起来像代码、事实上并不存在」的幻觉风险。

一、Chrome DevTools 前端开发的“眼睛”

这是一款让AI 编程助手直接驱动并观测 Chrome 的集成能力：AI 能访问真实页面上的 DOM、交互与渲染结果，相当于在实时环境里「看见」网页，而不是只看静态代码片段。

为何需要它： 传统做法要靠你手动截图、复制控制台与网络面板信息再喂给模型，链路长、信息还容易不全。接上该工具后，Claude Code 可直连浏览器上下文拉取关键现场数据，把排查与改 UI 的往返成本压下来，前端调试与验收效率会明显高一截。

1、Claude安装：

• 打开终端
• 输入如下命令后回车

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Cursor安装：

• 打开设置-Toos&MCP-New MCP Server，
• 输入如下代码

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

二、Context7 解决版本问题的“文档库”

这是一款面向 AI 编程助手的 MCP 工具，用来拉取与当前依赖一致的最新官方文档。模型在写代码时能对照你项目里真实在用的库与版本，减少因训练数据过时导致的 API 误用和版本不兼容。

为何需要它： 大模型的知识往往落后于生态迭代，容易按「旧版写法」生成代码；Context7 用实时文档补上这一环，从信息源头上对齐你当下的技术栈，而不是事后靠猜和试错修补丁。

1、Claude安装：

• 访问Context7官网：https://context7.com/dashboard 注册账号并获取API Key。
• 打开终端，输入如下命令后回车。
• 注意替换 CONTEXT7_API_KEY 为你的API key

claude mcp add --transport http context7 https://mcp.context7.com/mcp --header "CONTEXT7_API_KEY: YOUR_API_KEY"

2、Cursor安装

• 打开设置-Toos&MCP-New MCP Server，
• 输入如下代码
• 把YOUR_API_KEY替换为你的API Key

{
  "mcpServers": {
    "context7": {
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "YOUR_API_KEY"     
      }
    }
  }
}

如果你在Cursor上面同时装上面两个MCP，应该如下配置。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    },
    "context7": {
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "YOUR_API_KEY"     
      }
    }

  }
}