browser-ai

# 浏览器 AI MCP 服务器 [](https://smithery.ai/server/@qckfx/browser-ai) 一个由 AI 驱动的 MCP（模型上下文协议）服务器，提供浏览器自动化的自然语言接口。此服务器作为官方 Playwright MCP 服务器的智能包装器，允许您通过 Claude 使用纯英文命令控制浏览器。 ## 功能 - **自然语言浏览器控制**：使用纯英文命令执行浏览器自动化任务 - **Claude 集成**：通过 OAuth（使用您的 Claude 代码订阅）利用 Claude 的 AI 功能 - **智能工具映射**：AI 自动将您的命令翻译成适当的 Playwright 工具调用 - **会话管理**：在多个浏览器自动化命令中维护上下文 - **错误恢复**：具有有帮助的反馈的智能错误处理 ## 安装 ### 通过 Smithery 安装 要通过 [Smithery](https://smithery.ai/server/@qckfx/browser-ai) 自动安装用于 Claude Desktop 的 Browser AI： ```bash npx -y @smithery/cli install @qckfx/browser-ai --client claude ``` ### 手动安装 ```bash npm install -g @qckfx/browser-ai ``` 或直接使用 npx： ```bash npx @qckfx/browser-ai ``` ## 设置 ### 1. 身份验证 浏览器 AI MCP 服务器需要 Anthropic API 访问权限。您有两种身份验证选项： #### 选项 1：OAuth 身份验证（推荐适用于 Claude 订阅用户） 如果您有 Claude 订阅，请使用您的 Claude 帐户进行身份验证，以使用您的订阅积分： ```bash npx @qckfx/browser-ai --auth ``` 这将打开一个浏览器窗口进行 OAuth 身份验证。授权后，令牌将被安全保存，您的 API 使用将计入您的 Claude 订阅，而不是需要单独的 API 积分。 #### 选项 2：API 密钥身份验证 或者，您可以通过设置环境变量来使用 Anthropic API 密钥： ```bash export ANTHROPIC_API_KEY="your-api-key-here" ``` ### 2. 与 Claude Code 配置 身份验证后，将服务器添加到 Claude Code： ```bash claude mcp add browser-ai -- npx --yes @qckfx/browser-ai@latest ``` 如果使用 API 密钥身份验证，您可以将其作为环境变量传递： ```bash claude mcp add browser-ai --env ANTHROPIC_API_KEY="your-api-key-here" -- npx --yes @qckfx/browser-ai@latest ``` ### 3. 配置 Claude Desktop（替代方案） 如果使用 Claude Desktop，请在您的 Claude Desktop 配置文件（`claude_desktop_config.json`）中添加以下内容： ```json { "mcpServers": { "browser-ai": { "command": "npx", "args": ["@qckfx/browser-ai"], "env": { "PLAYWRIGHT_MCP_PATH": "@playwright/mcp@latest" } } } } ``` ## 使用 配置完成后，您可以在 Claude 中使用自然语言命令控制浏览器自动化： ### 示例命令 - **导航**： "前往 example.com 并等待页面加载" - **点击**： "点击登录按钮" - **表单填写**： "将用户名字段填写为 'john.doe@example.com'" - **截图**： "截取当前页面的截图" - **复杂任务**： "用测试数据填写注册表单并提交" ### 工作原理 1. 您向 Claude 提供自然语言命令 2. AI 解释您的意图并将其分解为 Playwright 工具调用 3. 服务器通过 Playwright MCP 服务器执行这些工具 4. 结果以用户友好的格式返回 ## 开发 ### 项目结构 ``` browser-ai/ ├── src/ │ ├── auth/ # OAuth 身份验证 │ ├── mcp/ # MCP 服务器和客户端 │ ├── ai/ # AI 代理和工具映射 │ ├── provider/ # 自定义 AI SDK 提供程序 │ └── index.ts # CLI 入口点 ``` ### 从源代码构建 ```bash git clone <仓库> cd browser-ai npm install npm run build ``` ### 测试 运行集成测试： ```bash npm test ``` ### 调试模式 启用调试日志记录： ```bash npx browser-ai --debug ``` ## 架构 ``` 用户命令 → Claude → 浏览器 AI MCP → AI 代理 → Playwright MCP → 浏览器 ↓ Claude（通过 OAuth） ``` 服务器公开一个名为 `browser_ai` 的工具，接受自然语言命令。然后： 1. 使用 Claude 解释命令 2. 生成 Playwright 工具调用序列 3. 通过 Playwright MCP 客户端执行它们 4. 返回用户友好的摘要 ## 故障排除 ### 身份验证问题 如果您遇到身份验证错误： 1. 运行 `npx browser-ai --auth` 重新身份验证 2. 确保您有有效的 Claude Code 订阅 3. 检查令牌是否已过期 ### 连接问题 如果服务器无法连接到 Playwright MCP： 1. 确保已安装 Playwright MCP：`npm install -g @playwright/mcp` 2. 检查 `PLAYWRIGHT_MCP_PATH` 环境变量 3. 启用调试模式以查看详细日志 ### 工具执行错误 如果命令执行失败： 1. 确保浏览器处于预期状态 2. 尝试将复杂命令分解为更简单的步骤 3. 检查调试日志中的特定错误消息 ## 要求 - Node.js 18 或更高版本 - 有效的 Claude Code 订阅 - Playwright MCP 服务器 ## 许可证 MIT ## 贡献 欢迎贡献！请在提交 PR 之前阅读我们的贡献指南。 ## 支持 对于问题和功能请求，请使用 GitHub 问题跟踪器。