星战科技xingzhan.cloud
返回市场
共同浏览-mcp

共同浏览-mcp

作者：canadaduane5 星标更新：2025-04-03
安装使用来源：spider==github.com

项目介绍

Browse Together MCP

使用Playwright浏览器代理与MCP服务器

在您的桌面上运行一个Playwright浏览器和MCP服务器。您可以启动一个有头浏览器（供人类交互）以及一个可以通过HTTP API或MCP服务器控制浏览器的伴随MCP服务器。

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

  • 一个通过HTTP控制持久性Playwright浏览器实例的浏览器代理服务。让您像平常一样登录到您使用的各种服务。
  • 一个通过FastMCP框架向MCP客户端（如Claude Desktop）暴露浏览器功能的MCP服务器。可以在您提供的认证会话内操作，使您的MCP命令作为认证用户时更具威力和实用性。

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

特性

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

注意：目前支持Mac OS，但只需少量修改即可扩展到其他平台。

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

不，目前不是。这是一个（有头）网络浏览器，它像普通的人类控制浏览器一样工作，但也允许您通过HTTP API或MCP客户端控制您的会话。虽然您可以获取截图、下载文档等，但这不是一个计算机使用/操作服务。

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

核心组件

  • 浏览器服务：

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

  • MCP服务器：

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

使用方法

开发者快速入门

  1. 安装前置条件： 安装Playwright的浏览器包（假设您已安装npx）：

    # 安装所有浏览器
npx playwright install

# 或安装特定浏览器
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标志来选择要使用的浏览器：

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

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

方案1：通过HTTP API互动

向/api/browser/:pageId发送POST请求，附带描述动作的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工具在您的客户端中执行类似以下命令：
让我们一起浏览jsr.io。

可用的MCP工具

MCP服务器向客户端暴露了以下工具：

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

文档

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

这些步骤中的一些可能已经过时或不再相关，但它们被包含进来作为参考并提供关于项目是如何构建的见解。

更多信息，请访问Sandy, UT本地氛围编码小组。

开发

  • 运行浏览器代理：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可以通过简单的工具调用来使用所有浏览器功能。