内容
# 浏览器 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 问题跟踪器。
MCP 市场