MCP 服务器

Browse Together MCP

与你的 AI 共同浏览，在你编辑代码时。一个带有头部的、由 Playwright 控制的浏览器，以及配套的 MCP 服务器。

canadaduane

开发者工具

访问服务器

README

Browse Together MCP

带有 MCP 服务器的 Playwright 浏览器代理

在您的桌面上运行 Playwright 浏览器和 MCP 服务器。您可以启动一个带界面的浏览器（用于人机交互）以及一个配套的 MCP 服务器，该服务器可以通过 HTTP API 或 MCP 服务器来控制浏览器。

本项目为浏览器自动化和协同浏览提供了两个互补的服务：

一个浏览器代理服务，通过 HTTP 控制一个持久的 Playwright 浏览器实例。让您可以像平常一样登录您使用的服务。
一个 MCP 服务器，通过 FastMCP 框架将浏览器功能暴露给 MCP 客户端（如 Claude Desktop）。可以在您提供的已认证会话中运行，从而使您的 MCP 命令作为已认证用户拥有更强大的功能和实用性。

这两个服务都使用 Deno 和 TypeScript 构建，并且可以无缝协作。

特性

多浏览器支持：可以使用 Chromium（默认）或 Firefox 运行。
持久浏览器会话：单个浏览器实例在服务的整个生命周期内运行。
命名标签页：使用唯一的 ID 控制单个浏览器会话中的多个页面（标签页）。
HTTP API：使用简单的 JSON 命令通过 HTTP 与浏览器交互。
MCP 集成：通过 Cline、Windsurf、Claude Desktop 或其他 MCP 客户端使用浏览器。
类型安全：使用 Zod 对传入的命令进行强大的验证。
使用 API 令牌保护您的浏览器代理服务 (HTTP) 端点。

注意：目前支持 Mac OS，但可以通过少量更改扩展到其他平台。

这是计算机使用/操作员服务吗？

不，目前还不是。这是一个（带界面的）Web 浏览器，其行为类似于正常的人工控制浏览器，但也允许您通过 HTTP API 或 MCP 客户端控制您的会话。虽然您可以获取屏幕截图、下载文档等，但这并不是计算机使用/操作员服务。

可以将其视为基于 MCP 的浏览器会话远程控制，用于在您编写代码时下载文档或其他任务。

核心组件

浏览器服务:
- browser.ts: 主要的浏览器代理服务实现
- types.ts: 使用 Zod 定义命令结构和类型
MCP 服务器:
- mcp.ts: 连接到浏览器服务的 FastMCP 实现

用法

开发者快速入门

安装先决条件: 安装 Playwright 的浏览器包（假设您已安装 npx）：

# 安装所有浏览器
npx playwright install

# 或安装特定浏览器
npx playwright install chromium
npx playwright install firefox

安装 Deno：

curl -fsSL https://deno.land/install.sh | sh

有关更多详细信息，请参见 Deno 安装。

启动浏览器服务:
```
deno task browser
```
这将在 http://localhost:8888（或您环境中指定的端口）上启动浏览器代理。

配置您的 MCP 客户端:

{
    "mcpServers": {
 	   "browse-together": {
 		   "command": "deno",
 		   "args": ["run", "-A", "/Users/duane/Projects/browse-together-mcp/mcp.ts"]
      },
  }
}

您也可以直接启动 MCP 服务器进行测试：

deno task mcp

浏览器选择

您可以通过设置 BROWSER_TYPE 环境变量或使用 --browser-type 标志来选择要使用的浏览器：

# 通过环境变量使用 Firefox
BROWSER_TYPE=firefox deno task browser

# 或通过 CLI 标志
deno task browser --browser-type firefox

选项 1：通过 HTTP API 交互

将 POST 请求发送到 /api/browser/:pageId，其中包含描述操作的 JSON 正文。

示例：导航到 URL

curl -X POST http://localhost:8888/api/browser/myTab \
  -H "Content-Type: application/json" \
  -d '{"action":"goto","url":"https://example.com"}'

示例：点击元素

curl -X POST http://localhost:8888/api/browser/myTab \
  -H "Content-Type: application/json" \
  -d '{"action":"click","selector":"#submit-button"}'

有关更多详细信息，请参见 002-browser.md 中的 API 参考。

选项 2：与 MCP 客户端一起使用

通过编辑您的 claude_desktop_config.json 在您的 MCP 客户端（例如 Cline、Windsurf、Claude Desktop）中配置 MCP 服务器：

{
  "mcpServers": {
    "browse-together": {
      "command": "/path/to/deno", 
      "args": [
        "run",
        "--allow-read",
        "--allow-net",
        "--allow-env",
        "--allow-sys",
        "/path/to/browse-together-mcp/mcp.ts"
      ],
      "env": {
        "PORT": "8888" 
      }
    }
  }
}

在您的客户端中使用带有以下命令的 MCP 工具：

Let's browse to jsr.io together.

可用的 MCP 工具

MCP 服务器向客户端公开以下工具：

goto: 导航到 URL
click: 点击元素
fill: 填充表单字段
content: 获取页面 HTML 内容
fetch: 在浏览器上下文中执行 fetch 请求
listPages: 列出所有活动的浏览器页面
closePage: 关闭特定页面

文档

本项目是通过一系列描述增量规划步骤的文档进行“氛围编码”的：

其中一些步骤可能已过时或不再相关，但作为参考包含在内，并用于深入了解项目的构建方式。

另请参见 vibe-coders.org，以获取有关我们在犹他州桑迪的本地氛围编码小组的更多信息。

开发

运行浏览器代理： deno task browser
运行 MCP 服务器： deno task mcp
格式化代码： deno fmt
检查依赖项： deno check --all browser.ts mcp.ts types.ts

架构

+----------------+      +--------------+      +------------------+
|                |      |              |      |                  |
| Cline/LLM      | ---- | MCP 服务器   | ---- | 浏览器服务  |
| (MCP 客户端)   |      | (mcp.ts)     | HTTP | (browser.ts)     |
|                |      |              |      |                  |
+----------------+      +--------------+      +------------------+
                               |                       |
                          FastMCP API            Playwright API
                               |                       |
                           STDIO/SSE            Chromium 浏览器

系统工作方式如下：