AI导哈

浏览器自动化代理服务

一个基于Playwright的浏览器自动化代理服务，提供HTTP API和MCP服务器集成，用于控制浏览器会话和实现协同浏览功能。

  • by canadaduane
  • TypeScript
  • 本地部署
  • 6 星标
  • 更新于
在 GitHub 查看 canadaduane/browse-together-mcp

使用说明

一起浏览MCP

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

桌面上的Playwright浏览器和MCP服务器。您可以启动一个令人兴奋的浏览器（用于人机交互）和一个配套的MCP服务器，该服务器可用于通过HTTP API或MCP服务器控制浏览器。

该项目为浏览器自动化和共同浏览提供了两项互补服务：

  • A. 浏览器代理服务 它通过HTTP控制持久的Playwright浏览器实例。让你像往常一样登录你使用的服务。
  • 一 MCP服务器 通过FastMCP框架向MCP客户端（如Claude Desktop）公开浏览器功能。可以在您提供的经过身份验证的会话中运行，使您的MCP命令作为经过身份验证用户具有更大的功能和实用性。

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

特性

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

注意：目前支持Mac OS，但可以扩展到其他平台，只需稍作更改。

这是电脑用户/操作员吗？

不，现在不行。这是一款（令人兴奋的）网络浏览器，其行为类似于普通的人控浏览器，但也允许您通过HTTP API或MCP客户端控制会话。虽然您可以获取屏幕截图、下拉文档等，但这不是计算机使用/操作员服务。

把它想象成基于MCP的浏览器会话远程控制，用于在编码时拉取文档或其他任务。

核心组件

  • 浏览器服务:

    • browser.ts：主要浏览器代理服务实现
    • types.ts：使用Zod定义命令结构和类型

  • MCP服务器:

    • mcp.ts：连接到浏览器服务的FastMCP实现

用法

开发人员快速入门

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

    # Install all browsers
npx playwright install

# Or install specific browsers
npx playwright install chromium
npx playwright install firefox

    安装Deno：

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

    看 Deno安装 了解更多详情。

  2. 启动浏览器服务:

    deno task browser

    这将启动浏览器代理 http://localhost:8888 （或您环境中指定的端口）

  3. 配置您的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 标志：

# Use Firefox via environment variable
BROWSER_TYPE=firefox deno task browser

# Or via CLI flag
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"}'

请参阅 中的API参考 002-browser.md 了解更多详情。

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

  1. 通过编辑您的MCP客户端（例如Cline、Windsurf、Claude Desktop）配置MCP服务器 claude_desktop_config.json:
{
  "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" 
      }
    }
  }
}
  1. 使用客户端中的MCP工具，命令如下：
Let's browse to jsr.io together.

可用的MCP工具

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

  • 转到：导航到URL
  • 点击：点击一个元素
  • 填充：填写表单字段
  • 内容：获取页面HTML内容
  • 获取：在浏览器上下文中执行获取请求
  • listPages：列出所有活动的浏览器页面
  • 关闭页面：关闭特定页面

文档

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

其中一些步骤可能已经过时或不再相关，但作为参考和了解项目是如何构建的。

另请参见 vibe-coders.org 了解更多关于我们在犹他州桑迪的当地vibe编码小组的信息。

发展

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

建筑

+----------------+      +--------------+      +------------------+
|                |      |              |      |                  |
| Cline/LLM      | ---- | MCP Server   | ---- | Browser Service  |
| (MCP Client)   |      | (mcp.ts)     | HTTP | (browser.ts)     |
|                |      |              |      |                  |
+----------------+      +--------------+      +------------------+
                               |                       |
                          FastMCP API            Playwright API
                               |                       |
                           STDIO/SSE            Chromium Browser

该系统的工作原理如下：

  1. 这 浏览器服务 (browser.ts)使用Playwright管理持久的Chromium浏览器实例
  2. 这 MCP服务器 (mcp.ts)使用FastMCP提供标准MCP接口
  3. MCP服务器通过HTTP将命令转发到浏览器服务
  4. MCP客户端 像Claude Desktop一样，可以通过简单的工具调用使用所有浏览器功能

相关 MCP