webmcp-bridge

概述

webmcp-bridge 提供了一个稳定的本地桥梁，允许 MCP 客户端调用浏览器 WebMCP 工具，当页面支持原生 WebMCP 时通过原生方式，否则通过注入式适配器。它将执行保持在浏览器中，在那里已经存在站点认证和人类-AI 协作等功能，同时向本地客户端暴露标准的 stdio MCP 接口。该架构支持无头自动化和用于协作工作流的可见浏览器窗口。

试试问 AI

装完之后，这里有 5 个你可以让 AI 做的事：

• bridge.open

  Opens a browser session for WebMCP collaboration

  试试:Open a browser session for the board demo试试:Start a visible browser session for human-AI collaboration
• bridge.close

  Closes the current browser session

  试试:Close the browser session试试:End the current WebMCP session
• diagram.get

  Retrieves the current board state as JSON

  试试:Get the current board state试试:Show me the diagram as JSON
• diagram.loadDemo

  Loads a demo board configuration

  试试:Load the demo board试试:Reset to demo diagram
• diagram.setTitle

  Sets the title of the current board

  试试:Set the board title to 'Project Plan'试试:Change diagram title
• diagram.export

  Exports the current board

  试试:Export the board试试:Download the diagram
• nodes.create

  Creates a new node on the board

  试试:Create a new node试试:Add a node to the diagram
• nodes.update

  Updates an existing node on the board

  试试:Update this node with new text试试:Modify this node's properties
• nodes.delete

  Deletes a node from the board

  试试:Delete this node试试:Remove node from diagram
• edges.create

  Creates a connection between nodes

  试试:Create an edge between these nodes试试:Connect node A to node B
• selection.get

  Gets the currently selected elements

  试试:What's currently selected?试试:Show selection
• selection.remove

  Removes selected elements from the board

  试试:Remove the selected items试试:Delete selection

可对比工具

安装

# 首先安装 Playwright 浏览器
npx playwright install

# 从 npm 安装
npm install -g @webmcp-bridge/local-mcp

# 直接运行
npx -y @webmcp-bridge/local-mcp --url https://board.holon.run --headless

# 或使用 uxc（推荐用于稳定快捷方式）
uxc link board-webmcp-ui "npx -y @webmcp-bridge/local-mcp --url https://board.holon.run --no-headless"

{
  "mcpServers": {
    "webmcp-bridge": {
      "command": "npx",
      "args": ["-y", "@webmcp-bridge/local-mcp", "--url", "https://board.holon.run"]
    }
  }
}

FAQ

原生 WebMCP 和适配器模式有什么区别？

原生 WebMCP 通过浏览器 navigator.modelContext 使用网站现有的实现，而适配器模式则注入一个 shim，为没有内置 WebMCP 功能的网站提供 WebMCP 功能。

它是否处理身份验证？

该桥接器假设用户已经在浏览器会话中进行了身份验证。它不实现凭据保管库，但可以重用现有的已登录浏览器配置文件。

webmcp-bridge 对比