代理Jake浏览器MCP服务器
MCP(模型上下文协议)服务器,使AI代理能够自动化Chrome浏览器交互。
概述
该服务器实现了MCP协议,将浏览器自动化工具暴露给像Claude这样的AI代理。它与 代理jake浏览器mcp扩展 以提供完全的浏览器控制。
建筑
┌─────────────────┐ stdio ┌─────────────────┐ WebSocket ┌──────────────────┐
│ AI Agent │◄──────────────►│ MCP Server │◄──────────────►│ Chrome Extension │
│ (Claude, etc.) │ JSON-RPC │ (This project) │ port 8765 │ │
└─────────────────┘ └─────────────────┘ └────────┬─────────┘
│
│ Chrome
│ Debugger
│ API
▼
┌──────────────────┐
│ Browser Tab │
│ (Any website) │
└──────────────────┘安装
git clone https://github.com/SnakeO/agent-jake-browser-mcp-server.git
cd agent-jake-browser-mcp-server
npm install
npm run build用法
使用Claude桌面版
添加到您的 claude_desktop_config.json:
{
"mcpServers": {
"browser": {
"command": "node",
"args": ["/path/to/agent-jake-browser-mcp-server/dist/index.js"]
}
}
}使用VS代码/光标
添加到MCP设置中:
{
"mcp.servers": {
"browser": {
"command": "node",
"args": ["/path/to/agent-jake-browser-mcp-server/dist/index.js"]
}
}
}CLI选项
node dist/index.js [options]
Options:
--port WebSocket port for extension connection (default: 8765)
--verbose Enable verbose logging
--help Show help工具
导航(4个工具)
| 工具 | 说明 |
|---|---|
browser_navigate | 导航到URL |
browser_go_back | 返回浏览器历史记录 |
browser_go_forward | 在浏览器历史记录中前进 |
browser_reload | 重新加载当前页面 |
页面检查(1个工具)
| 工具 | 说明 |
|---|---|
browser_snapshot | 获取页面的ARIA可访问性树快照 |
互动(6个工具)
| 工具 | 说明 |
|---|---|
browser_click | 点击一个元素 |
browser_type | 在输入框中键入文本 |
browser_hover | 将鼠标悬停在元素上 |
browser_drag | 将元素拖动到其他位置 |
browser_select_option | 从下拉列表中选择一个选项 |
browser_press_key | 按键盘键或组合键 |
元素查询(5个工具)
| 工具 | 说明 |
|---|---|
browser_get_text | 获取元素的文本内容 |
browser_get_attribute | 从元素中获取属性值 |
browser_is_visible | 检查元素是否可见 |
browser_wait_for_element | 等待元素出现 |
browser_highlight | 突出显示要调试的元素 |
选项卡管理(4个工具)
| 工具 | 说明 |
|---|---|
browser_new_tab | 在新选项卡中打开URL |
browser_list_tabs | 列出所有打开的浏览器选项卡 |
browser_switch_tab | 切换到其他选项卡 |
browser_close_tab | 关闭浏览器选项卡 |
实用工具(3个工具)
| 工具 | 说明 |
|---|---|
browser_wait | 等待指定时间 |
browser_screenshot | 对页面进行截图 |
browser_get_console_logs | 获取控制台日志消息 |
示例用法
一旦连接,AI代理就可以使用这些工具:
AI: I'll help you fill out that form. First, let me take a snapshot of the page.
[calls browser_snapshot]
AI: I can see the form fields. Let me fill in your name.
[calls browser_type with ref="e12", text="John Doe"]
AI: Now I'll click the submit button.
[calls browser_click with ref="e15"]发展
# Install dependencies
npm install
# Build
npm run build
# Development with watch
npm run dev
# Run tests
npm test
# Type checking
npm run typecheck项目结构
src/
├── index.ts # Entry point
├── server.ts # MCP server implementation
├── context.ts # Extension communication context
├── ws-server.ts # WebSocket server for extension
├── types.ts # TypeScript type definitions
├── tools/ # Tool implementations
│ ├── index.ts # Tool registry
│ ├── navigation.ts # Navigate, back, forward, reload
│ ├── snapshot.ts # ARIA snapshot
│ ├── interaction.ts # Click, type, hover, drag
│ ├── queries.ts # Get text, attributes, visibility
│ ├── tabs.ts # Tab management
│ └── utility.ts # Wait, screenshot, console logs
└── utils/ # Utilities
├── logger.ts # Logging
└── port.ts # Port management技术栈
- Node.js
- TypeScript
- MCP SDK(@anthropic/MCP-SDK)
- Zod用于模式验证
- 用于扩展通信的WebSocket(ws)
- tsup用于捆绑
相关
- 代理jake浏览器mcp扩展 -执行浏览器命令的Chrome扩展程序
许可证
麻省理工学院-参见 许可证
