记录一些前端开发中，实际用到的 mcp 工具
Browser MCP
🔗 插件地址：
chromewebstore.google.com/detail/brow…
核心功能：
- 通过 MCP 协议直接控制浏览器
- 快速打开指定网站
- 供大模型自动化调用，实现“说话即操作页面”
适用场景：
- 快速定位 Ant Design、Element Plus、Vue / React 官方文档
- 自动化测试前的页面快速准备
- 作为 AI 开发助手的“浏览器执行器”
优势：相比于
chrome-devtools-mcp，优势是它是在已有的浏览器窗口中进行，不会创建新的浏览器实例，也就是说能够保持登录状态。那种创建新实例的在访问文档时，经常被重定向到登录页。
不足：比如在访问产品文档时，是通过模拟用户点击或者下划，通过截图去获取内容的，这就导致如果有折叠的文字会被漏掉，而且整个读取内容比较慢，不稳定。
chrome-devtools-mcp应该是通过解析 html 文档来获取内容，更快更准确。
chrome-devtools-mcp
🔗 插件地址：
github.com/ChromeDevTo…
最新插件，开发模式下，拖到 chrome 插件拓展中。
npm install -g mcp-chrome-bridge
Context7
🔗 官方文档：
context7.com/
核心功能：
- 为大模型提供实时更新的代码文档与示例
- 解决 LLM 训练数据滞后的问题
- 避免“API 已废弃但模型仍在使用”的风险
适用场景：
- 查询最新 Vue / React / Node / 三方库用法
- 自动生成基于“当前版本”的代码示例
- 作为 AI 编程助手的“实时知识源”
接入步骤：
-
创建 Key：登录 Context7 官网，生成 API Key。
-
配置 MCP
其他
了解下面配置前，推荐看一下 MCP 连接方式，至少知道 Stdio(标准输入输出，本地进程之间通信) 和 Http（远程服务） 2种形式。比如下面的 context7 属于 http 连接，剩余的属于 stdio 方式。
{
"mcpServers": {
"browsermcp": {
"command": "npx",
"args": ["@browsermcp/mcp@latest"]
},
"context7": {
"url": "https://mcp.context7.com/mcp",
"headers": {
"CONTEXT7_API_KEY": "xxxxxxx"
}
},
"chrome-mcp-stdio": {
"command": "npx",
"args": [
"node",
"/Users/用户名/.nvm/versions/node/v22.17.0/lib/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"
]
}
}
}
MCP 本质上就是返回一组 tools 的服务。
FAQ
MCP 有的需要浏览器插件、有的不需要为什么？
- 因为大部分MCP是直接在 Node.js 进程中控制浏览器；
- 还有一些 Chrome Extension + 桥接方案（chrome-mcp-stdio）,优势就是可以复用正在使用的浏览器、登录状态等。
┌─────────┐ stdio ┌────────────────┐ HTTP ┌───────────────┐ Chrome API ┌─────────────┐
│ │ ◄──────── │ │ ◄─────── │ │ ◄────────────► │ │
│ Agent │ │ Bridge Server │ │ Chrome Ext │ │ Chrome Tab │
│ │ ────────► │ (Node.js) │ ───────► │ (插件进程) │ ──────────────► │ (用户页面) │
└─────────┘ └────────────────┘ └───────────────┘ └─────────────┘
