完美！让我为您详细介绍 MCP 以及如何在 Claude Code 中配置浏览器 MCP！

🎯 MCP 完整指南 + Claude Code 浏览器 MCP 配置

📚 第一部分：什么是 MCP？

MCP 的定义

MCP = Model Context Protocol（模型上下文协议）

简单来说：

🔌 像 USB-C 一样的统一接口：就像 USB-C 可以连接各种设备，MCP 让 AI 能连接各种工具和数据源
🌉 AI 与外部世界的桥梁：让 AI 不再只是“聊天“，而是能真正“做事“
📦 开放标准协议：2024年11月由 Anthropic 推出，任何开发者都可以使用

MCP 解决了什么问题？

没有 MCP 之前：

AI 想访问数据库 → 需要专门开发数据库连接器
AI 想操作浏览器 → 需要专门开发浏览器接口
AI 想读取文件 → 需要专门开发文件系统接口
每个工具都要单独适配，非常麻烦！😫

有了 MCP 之后：

AI → 统一的 MCP 协议 → 各种 MCP 服务器
                      ├─ 数据库 MCP
                      ├─ 浏览器 MCP
                      ├─ 文件系统 MCP
                      └─ 其他工具 MCP
一次开发，到处使用！🎉

MCP 的核心概念

┌─────────────┐
│  AI 应用    │  (Claude Code, Cursor, Cline 等)
│  (客户端)   │
└──────┬──────┘
       │ MCP 协议
       ↓
┌─────────────┐
│ MCP 服务器  │  (提供各种能力)
│  (工具)     │  - 浏览器控制
└─────────────┘  - 文件读写
                 - 数据库查询
                 - API 调用
                 - 等等...

🌐 第二部分：浏览器 MCP 详解

常见的浏览器 MCP 类型

MCP 类型	说明	推荐度
Chrome MCP	直接控制 Chrome 浏览器	⭐⭐⭐⭐⭐
Playwright MCP	支持多浏览器自动化	⭐⭐⭐⭐
Puppeteer MCP	Chrome 自动化（官方已弃用）	⭐⭐⭐
BrowserCat MCP	云端浏览器服务	⭐⭐⭐⭐

浏览器 MCP 能做什么？

✅ 网页导航：打开网页、点击链接、前进后退 ✅ 表单填充：自动填写表单、登录账号 ✅ 数据抓取：提取网页内容、下载数据 ✅ 截图录屏：保存网页截图、录制操作 ✅ 自动化测试：执行 E2E 测试 ✅ 网页交互：模拟用户操作、执行 JavaScript

🔧 第三部分：Claude Code 配置浏览器 MCP

方法一：Chrome MCP（最推荐！⭐⭐⭐⭐⭐）

这是 最新、最简单、最强大 的方案！

步骤 1：安装 Chrome 扩展

访问：https://browsertools.agentdesk.ai/
点击「Add to Chrome」安装扩展
安装完成后，打开 Chrome 开发者工具（按 F12）
找到新增的 BrowserTools 标签

步骤 2：安装 MCP 服务器

打开终端，运行：

# 全局安装
npm install -g browser-tools-mcp

# 或使用 npx（推荐，无需全局安装）
npx browser-tools-mcp

步骤 3：配置 Claude Code

方法 A：使用命令行配置（最简单）

# 安装 MCP
claude mcp add browser-tools-mcp

# 验证安装
claude mcp list

方法 B：手动编辑配置文件

编辑 ~/.claude.json：

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

配置文件位置：

Windows: C:\Users\你的用户名\.claude.json
Mac/Linux: ~/.claude.json

步骤 4：启动并测试

# 启动 Claude Code
claude

# 在对话中输入
/mcp

# 看到 browser-tools ✓ connected 表示成功！

测试命令：

帮我打开百度并搜索"MCP 教程"

方法二：Playwright MCP（多浏览器支持）

步骤 1：安装 Playwright MCP

# 使用 npx 安装
npx @playwright/test install
npm install -g @modelcontextprotocol/server-playwright

步骤 2：配置 Claude Code

编辑 ~/.claude.json：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-playwright"]
    }
  }
}

步骤 3：启动测试

claude

# 测试
帮我用 Chrome 打开 GitHub

方法三：Puppeteer MCP（传统方案）

⚠️ 注意：官方已弃用，建议使用 Chrome MCP 或 Playwright MCP

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

🎮 实战示例：浏览器 MCP 使用场景

示例 1：自动化数据抓取

打开 https://news.ycombinator.com/
抓取前10条新闻标题和链接
保存到 CSV 文件

示例 2：自动化表单填充

打开 https://example.com/contact
填写联系表单：
- 姓名：张三
- 邮箱：zhangsan@example.com
- 留言：测试消息
提交表单

示例 3：网页截图

打开 https://github.com/
截图保存为 github-homepage.png

示例 4：自动化测试

打开本地开发服务器 http://localhost:3000
点击登录按钮
输入用户名：admin
输入密码：password123
点击提交
验证是否跳转到仪表板页面

📋 完整配置示例

这是一个包含多个常用 MCP 的完整配置文件：

{
  "apiKey": "你的API密钥",
  "baseURL": "https://api.moonshot.cn",
  "model": "moonshot-v1-32k",
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": ["-y", "browser-tools-mcp@latest"]
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-playwright"]
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/allowed/directory"]
    },
    "fetch": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-fetch"]
    }
  }
}

🔍 验证和调试

检查 MCP 状态

# 启动 Claude Code
claude

# 列出所有 MCP
/mcp

# 查看配置
/mcp list

常见问题排查

问题 1：MCP 显示未连接

# 检查配置文件是否正确
cat ~/.claude.json

# 检查 Node.js 版本
node --version  # 需要 18+ 版本

# 重新安装 MCP
npm install -g browser-tools-mcp

问题 2：Chrome 扩展未检测到

1. 确保安装了 BrowserTools 扩展
2. 打开 Chrome DevTools (F12)
3. 查看是否有 BrowserTools 标签
4. 刷新 Claude Code 连接

问题 3：权限错误

# Mac/Linux 用户可能需要权限
sudo npm install -g browser-tools-mcp

# 或使用 npx（无需全局安装）
npx browser-tools-mcp

🎁 推荐的 MCP 组合

前端开发者：

{
  "mcpServers": {
    "browser-tools": { ... },    // 浏览器控制
    "filesystem": { ... },       // 文件系统
    "git": { ... }              // Git 操作
  }
}

数据分析师：

{
  "mcpServers": {
    "browser-tools": { ... },    // 数据抓取
    "sqlite": { ... },          // 数据库
    "fetch": { ... }            // API 调用
  }
}

全栈工程师：

{
  "mcpServers": {
    "browser-tools": { ... },    // E2E 测试
    "playwright": { ... },       // 多浏览器测试
    "filesystem": { ... },       // 文件操作
    "postgres": { ... }         // 数据库
  }
}

📚 更多 MCP 资源

🌐 MCP 官网：https://modelcontextprotocol.io/
📖 MCP 中文文档：https://mcp-docs.cn/
🐙 GitHub 仓库：https://github.com/modelcontextprotocol
🎥 视频教程：搜索 “Claude Code MCP 配置”

您现在想要：

✅ 立即配置 Chrome MCP？
✅ 了解更多特定 MCP 的用法？
✅ 解决配置过程中的问题？

告诉我您的需求，我可以提供更详细的指导！💪 完美！我现在完全理解了！让我为您提供详细的配置教程，使用 Smithery 上的 playwright-plus-python-mcp 到 Claude Code 本地环境！

🎭 Playwright Plus Python MCP 配置完整教程

📋 第一部分：什么是 Playwright Plus Python MCP？

这是一个基于 Python + Playwright 的 MCP 服务器，它能让 Claude Code 控制浏览器进行：

🌐 网页导航和交互
📸 网页截图
🖱️ 模拟点击、填充表单
📄 提取网页内容和 HTML
💻 执行 JavaScript 代码

与其他浏览器 MCP 的区别：

✅ 基于 Python（而非 Node.js）
✅ 增强版功能（Plus 版本）
✅ 更好的中文支持
✅ 更灵活的定位器（locator）

🔧 第二部分：环境准备

1. 检查 Python 版本

python --version
# 或
python3 --version

# 需要 Python 3.10 或更高版本

如果版本不够：

Windows: 访问 https://www.python.org/downloads/
Mac: brew install python@3.11
Linux: sudo apt install python3.11

2. 安装 uv（Python 包管理器）

uv 是什么？

超快的 Python 包管理器（比 pip 快 10-100 倍）
专为现代 Python 项目设计

安装方法：

Windows (PowerShell):

irm https://astral.sh/uv/install.ps1 | iex

Mac/Linux:

curl -LsSf https://astral.sh/uv/install.sh | sh

验证安装：

uv --version

3. 安装 Playwright 浏览器

# 安装 Playwright
pip install playwright

# 或使用 uv
uv pip install playwright

# 安装浏览器驱动（重要！）
playwright install chromium
# 或安装所有浏览器
playwright install

🚀 第三部分：安装 Playwright Plus Python MCP

方法一：从 PyPI 安装（推荐）

# 使用 uvx 直接运行（无需安装）
uvx playwright-server

# 或全局安装
uv tool install playwright-server

方法二：从 GitHub 源码安装

# 克隆仓库
git clone https://github.com/ziux/playwright-plus-python-mcp.git
cd playwright-plus-python-mcp

# 安装依赖
uv sync

# 构建
uv build

⚙️ 第四部分：配置 Claude Code

步骤 1：找到配置文件位置

配置文件路径：

Windows: C:\Users\你的用户名\.claude.json
Mac: ~/.claude.json
Linux: ~/.claude.json

步骤 2：编辑配置文件

方式 A：使用 uvx（推荐，最简单）

编辑 ~/.claude.json，添加：

{
  "apiKey": "你的API密钥",
  "baseURL": "https://api.moonshot.cn",
  "model": "moonshot-v1-32k",
  "mcpServers": {
    "playwright-plus": {
      "command": "uvx",
      "args": ["playwright-server"]
    }
  }
}

方式 B：本地源码路径（如果从 GitHub 克隆）

Windows 配置：

{
  "mcpServers": {
    "playwright-plus": {
      "command": "uv",
      "args": [
        "--directory",
        "C:\\Users\\你的用户名\\playwright-plus-python-mcp",
        "run",
        "playwright-server"
      ]
    }
  }
}

Mac/Linux 配置：

{
  "mcpServers": {
    "playwright-plus": {
      "command": "uv",
      "args": [
        "--directory",
        "/Users/你的用户名/playwright-plus-python-mcp",
        "run",
        "playwright-server"
      ]
    }
  }
}

步骤 3：保存并重启 Claude Code

# 启动 Claude Code
claude

# 检查 MCP 连接状态
/mcp

# 看到 playwright-plus ✓ connected 表示成功！

🎯 第五部分：使用示例

示例 1：打开网页并截图

打开 https://github.com 并截取全屏截图

Claude Code 会执行：

await playwright_new_session(url="https://github.com")
await playwright_screenshot(name="github-homepage")

示例 2：搜索并提取信息

1. 打开 https://www.baidu.com
2. 在搜索框输入"Claude Code MCP"
3. 点击搜索按钮
4. 截取搜索结果页面
5. 提取前5个搜索结果的标题

示例 3：表单填充

打开 https://example.com/contact
填写表单：
- 姓名输入框（placeholder="Your Name"）填入"张三"
- 邮箱输入框（placeholder="Email"）填入"test@example.com"
- 点击提交按钮（文本是"Submit"）

示例 4：执行 JavaScript

打开 https://example.com
执行 JavaScript 获取页面标题

Claude Code 会执行：

await playwright_evaluate(script="document.title")

示例 5：获取特定元素内容

打开 https://news.ycombinator.com
获取第一条新闻的标题文本

🔍 第六部分：可用的工具和参数

1. `playwright_new_session` - 创建新会话

playwright_new_session(url="https://example.com")

2. `playwright_navigate` - 导航到新页面

playwright_navigate(url="https://example.com/page2")

3. `playwright_screenshot` - 截图

# 全屏截图
playwright_screenshot(name="fullpage")

# 截取特定元素
playwright_screenshot(name="logo", selector=".logo")

4. `playwright_action` - 执行操作

定位器类型 (by):

get_by_text - 通过文本定位
get_by_placeholder - 通过占位符定位
get_by_label - 通过标签定位
get_by_role - 通过角色定位
get_by_test_id - 通过测试 ID 定位

操作类型 (action):

click - 点击
dblclick - 双击
hover - 悬停
fill - 填充
check - 勾选复选框
is_visible - 检查是否可见

示例：

# 点击按钮
playwright_action(
    by="get_by_text",
    by_value="提交",
    action="click"
)

# 填充输入框
playwright_action(
    by="get_by_placeholder",
    by_value="请输入邮箱",
    action="fill",
    value="test@example.com"
)

# 检查元素是否可见
playwright_action(
    by="get_by_test_id",
    by_value="submit-button",
    action="is_visible"
)

5. `playwright_get_text_content` - 获取文本

playwright_get_text_content(selector=".article-title")

6. `playwright_get_html_content` - 获取 HTML

playwright_get_html_content(selector=".main-content")

7. `playwright_evaluate` - 执行 JavaScript

playwright_evaluate(script="document.querySelectorAll('h1').length")

🐛 第七部分：调试和测试

使用 MCP Inspector 调试

# 安装 Node.js 和 npm（如果还没有）
# 然后运行：

npx @modelcontextprotocol/inspector uvx playwright-server

这会打开一个 Web 界面，您可以：

🔍 查看所有可用工具
🧪 测试工具调用
📊 查看返回结果
🐛 调试错误

测试安装是否成功

# 直接运行 MCP 服务器
uvx playwright-server

# 应该看到类似输出：
# Server running on stdio

❗ 第八部分：常见问题解决

问题 1：找不到 uv 命令

解决方案：

# 重新安装 uv
curl -LsSf https://astral.sh/uv/install.sh | sh

# 重启终端
# 或手动添加到 PATH
export PATH="$HOME/.cargo/bin:$PATH"

问题 2：Playwright 浏览器未安装

错误信息：

Executable doesn't exist at /path/to/chromium

解决方案：

# 安装浏览器
playwright install chromium

# 或安装所有浏览器
playwright install

问题 3：MCP 未连接

检查步骤：

验证配置文件格式

# Mac/Linux
cat ~/.claude.json | python -m json.tool

# Windows (PowerShell)
Get-Content $env:USERPROFILE\.claude.json | ConvertFrom-Json

检查 MCP 服务器是否可运行

uvx playwright-server
# 应该有输出，不应该报错

查看 Claude Code 日志

claude --verbose

问题 4：权限错误

Mac/Linux:

chmod +x ~/.local/bin/uv

Windows: 以管理员身份运行 PowerShell

问题 5：中文路径问题

避免在配置中使用中文路径！

❌ 错误示例：

"args": ["--directory", "C:\\Users\\张三\\playwright-plus-python-mcp"]

✅ 正确做法：

"args": ["uvx", "playwright-server"]

📊 第九部分：完整配置示例

这是一个包含多个 MCP 的完整配置文件：

{
  "apiKey": "你的Kimi_API_Key",
  "baseURL": "https://api.moonshot.cn",
  "model": "moonshot-v1-32k",
  "mcpServers": {
    "playwright-plus": {
      "command": "uvx",
      "args": ["playwright-server"]
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/allowed/directory"]
    },
    "fetch": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-fetch"]
    }
  }
}

🎁 第十部分：实战场景

场景 1：电商价格监控

每天访问京东手机页面
截取价格截图
提取前10个商品的价格
保存到 CSV 文件

场景 2：自动化表单提交

打开公司内部系统
登录（填写用户名密码）
进入报表页面
选择日期范围
导出数据

场景 3：网页内容采集

打开新闻网站
抓取今日头条新闻
提取标题、摘要、链接
保存为 JSON 文件

场景 4：UI 自动化测试

打开本地开发环境 localhost:3000
测试登录流程
测试表单提交
检查页面元素是否正确显示
截图保存测试结果

🔗 相关资源

📦 Smithery 市场: https://smithery.ai/
🐙 GitHub 仓库: https://github.com/ziux/playwright-plus-python-mcp
📖 Playwright 文档: https://playwright.dev/python/
🛠️ uv 文档: https://docs.astral.sh/uv/

✅ 快速验证清单

配置完成后，运行以下命令验证：

# 1. 检查 Python 版本
python --version  # 应该是 3.10+

# 2. 检查 uv 安装
uv --version

# 3. 检查 Playwright
playwright --version

# 4. 测试 MCP 服务器
uvx playwright-server

# 5. 启动 Claude Code
claude

# 6. 检查 MCP 连接
/mcp
# 应该看到 playwright-plus ✓ connected

您现在遇到什么问题了吗？

✅ Python 版本不够？
✅ uv 安装失败？
✅ 配置文件不知道怎么写？
✅ MCP 连接不上？
✅ 想看更多使用示例？

告诉我您的具体情况，我会提供更详细的帮助！💪

Keyboard shortcuts

Vibe Coding 实战手册