Claude Browser MCP Server

浏览器和文件MCP服务器

赋予Claude Code浏览器和文件超能力。 此MCP服务器通过Playwright将Claude Code（或任何MCP客户端）与真实浏览器连接起来 和 添加了从命令行读取Excel、Word、PowerPoint、CSV和图像文件的功能。

问题

克劳德·科德住在航站楼里。它可以编写代码、运行脚本和管理文件，但不能与web交互。需要测试UI吗？检查部署？删除动态内容？您必须手动切换上下文。

解决方案

此MCP服务器为Claude Code提供了一个完整的浏览器自动化工具包 和 文件读取功能。Claude Code现在可以：

• 导航 访问任何URL并读取页面内容
• 点击 按钮、链接和交互元素
• 类型 以逼真的击键模拟形式呈现
• 截图 页面或特定元素（以base64 PNG格式返回）
• 找到 按CSS选择器、文本、XPath或ARIA角色显示元素
• 执行JavaScript 在页面上下文中
• 管理选项卡 --打开、关闭、在它们之间切换
• 滚动、悬停、等待 --完全交互式控制
• 读取Excel 工作簿--工作表、标题、数据作为标记表
• 读单词 文档——文本、标题、表格
• 阅读PowerPoint 演示文稿——幻灯片文本、表格、演讲者笔记
• 读取CSV 文件——具有可配置的分隔符和编码
• 读取图像 --JPG、PNG、GIF、BMP、WebP、TIFF以base64格式返回给Claude
• 检查文件 --元数据、大小、类型、修改日期

什么是MCP？

模型上下文协议 是由Anthropic创建的开放标准，允许AI模型通过统一的接口连接到外部工具和数据源。把它想象成人工智能的USB-C：一个标准化的插头，可以让任何MCP客户端（Claude Code、Claude Desktop等）与任何MCP服务器（浏览器自动化工具、数据库连接器、Slack集成等）通信。

关键部分：

• MCP服务器 --公开“工具”（AI可以调用的功能）、“资源”（它可以读取的数据）和“提示”（模板）。这就是这个项目：一个暴露 browser_navigate, browser_click, browser_screenshot等等。
• MCP客户端 --发现并调用这些工具的AI应用程序。Claude Code和Claude Desktop都是MCP客户端。
• 运输 --他们如何沟通： stdio 对于本地进程（此服务器使用什么）或 streamable HTTP 用于远程/网络服务器。

实际结果是：MCP为您提供了一种协议，而不是每个AI工具都构建自己的专有插件系统。只需编写一个服务器，它就可以与任何兼容的客户端一起工作。此浏览器服务器今天可以与Claude Code和任何未来的MCP兼容代理一起使用。

快速开始

1.安装

Linux/macOS：

cd Claude_Browser_MCP_Server
chmod +x install.sh
./install.sh

窗户：

cd Claude_Browser_MCP_Server
python -m venv .venv
.venv\Scripts\pip install -r requirements.txt
.venv\Scripts\playwright install chromium

这将创建一个虚拟环境，安装依赖项并下载Chromium。

2.配置克劳德代码

选项A-CLI（推荐）：

claude mcp add browser -s user -e BROWSER_HEADLESS=false -- /path/to/.venv/bin/python /path/to/browser_mcp.py

在Windows上：

claude mcp add browser -s user -e BROWSER_HEADLESS=false -- C:\path\to\.venv\Scripts\python.exe C:\path\to\browser_mcp.py

选项B——手动配置：

添加到您的 项目级 .mcp.json:

{
    "mcpServers": {
        "browser": {
            "command": "/path/to/.venv/bin/python",
            "args": ["/path/to/browser_mcp.py"],
            "env": {
                "BROWSER_HEADLESS": "false"
            }
        }
    }
}

或添加到 全球 ~/.claude/settings.json 同样的 mcpServers 钥匙。

3.使用它

在Claude Code中，只需让它执行浏览器操作：

> Go to https://myapp.dev and check if the login page loads correctly
> Navigate to the admin dashboard and take a screenshot
> Fill out the contact form on our website with test data
> Check what our competitor's pricing page looks like

Claude Code将在适当的时候自动使用浏览器工具。

可用工具（25）

浏览器工具（18）

文件工具（7）

配置

环境变量（在 env MCP配置块）：

示例工作流程

QA测试

"Navigate to localhost:3000, log in with test credentials,
 go to the dashboard, and screenshot any error states"

竞争性研究

"Go to competitor.com/pricing, extract their plan names and prices,
 then check their features page"

表单自动化

"Fill out the insurance quote form on our staging site with
 these test values: Name=John Doe, DOB=1990-01-15, ..."

网络爬虫

"Navigate to the job board, find all Python developer positions
 posted this week, and extract the company names and salaries"

阅读电子表格

"Read the Excel file at C:\Reports\Q1_sales.xlsx and summarize the data"
"List all sheets in the workbook and show me the first 50 rows of the Summary tab"

分析图像

"Look at the screenshot at C:\Users\gregg\Desktop\error.png and tell me what the error is"
"Read the architecture diagram at C:\docs\system_diagram.jpg and describe the components"

处理文档

"Read the Word doc at C:\proposals\draft.docx and check for any inconsistencies"
"Extract all the slide content from the PowerPoint at C:\presentations\quarterly.pptx"

选择器如何工作

这些工具接受灵活的选择器：

• 层叠样式表: #login-button, .nav-link, input[name='email']
• XPath: //button[@type='submit']
• 文本: text=Sign In 或者只是 Sign In （自动检测）
• 角色：使用 browser_find 随着 role='button'
• 剧作家: button >> text=Submit, .form >> input

如果CSS/XPath选择器找不到任何内容，它会自动回退到文本匹配。

建筑

Claude Code (CLI)
    |
    +-- MCP Protocol (stdio)
    |
    v
Browser MCP Server (Python)
    |
    +-- FastMCP (tool registration + validation)
    +-- Pydantic (input validation)
    |
    v
Playwright (async)
    |
    v
Chromium Browser

服务器使用FastMCP的生命周期管理在工具调用之间维护一个持久的浏览器实例。浏览器在MCP连接开始时启动一次，在连接结束时关闭。

兼容性

• python: 3.10+
• MCP-SDK: 1.26.0+
• 剧作家: 1.58.0+
• openpyxl：3.1.0+（Excel）
• python docx：1.1.0+（单词）
• python pptx：1.0.0+（PowerPoint）
• 枕头：10.0.0+（图像）
• 平台：Windows、macOS、Linux

故障排除

“未安装Playwright浏览器”

cd Claude_Browser_MCP_Server && source .venv/bin/activate  # Linux/macOS
# or: .venv\Scripts\activate  # Windows
playwright install chromium
sudo playwright install-deps chromium  # Linux system deps

“连接被拒绝”/服务器未启动

• 检查MCP配置中的路径指向正确的 .venv/bin/python （Linux/macOS）或 .venv\Scripts\python.exe （Windows）
• 确保已成功创建虚拟环境
• 尝试手动运行： .venv/bin/python browser_mcp.py
• 检查服务器状态： claude mcp list

Linux服务器上的无头模式

"env": {
    "BROWSER_HEADLESS": "true"
}

慢速页面超时

"env": {
    "BROWSER_TIMEOUT": "60000"
}

配套项目：Claude代码集成开发环境

此MCP服务器旨在与 克劳德代码IDE --一个完整的基于web的IDE，将Claude Code的CLI与项目管理、会话记录和多选项卡界面打包在一起。

一起使用时：

• 带有自动摄取功能的文件上传 --单击IDE中的上传按钮，选择一个文件（Excel、Word、PowerPoint、图像、CSV），它就会落入项目的工作目录。IDE会自动提示Claude使用此服务器的文件工具读取它。没有复制粘贴，没有要键入的文件路径。
• 零配置 --Claude Code通过以下方式自动发现此MCP服务器 ~/.claude/settings.json.在IDE中启动会话，所有25个工具立即可用。
• 会话保持 --IDE记录每次对话，通过虚拟终端模拟器清理原始终端输出，并允许您以本机方式恢复会话。MCP工具在恢复的会话中可用，无需重新连接。
• 工作目录意识 --每个IDE项目都有一个配置的工作目录。通过IDE上传的文件位于该目录中，文件工具路径相对于Claude Code实际运行的位置进行解析。

IDE处理UI、会话管理和PTY流程生命周期。此服务器处理浏览器自动化和文件处理。它们通过Claude Code的MCP协议进行通信——IDE从不直接与此服务器通信。

许可证

麻省理工学院——随心所欲。