MCP Playwright Webx11

无VNC显示的剧作家MCP服务器

Docker Compose安装程序运行Microsoft Playwright MCP服务器，该服务器具有可通过web浏览器中的noVNC访问的虚拟X11显示器。

特性

• 剧作家MCP服务器：通过模型上下文协议（MCP）实现浏览器自动化
• 头部浏览器模式：查看实时运行的浏览器
• noVNC Web界面：从任何web浏览器查看浏览器显示
• 可重用结构：可通过SSE或stdio访问的持久剧作家服务
• stdio到SSE代理：基于stdio的MCP客户端和SSE端点之间的桥梁

快速开始

使用Docker Compose（推荐）

1. 启动持久化Playwright+noVNC服务：

docker compose up -d playwright-display

1. 访问服务：

- VNC 网页 用户 界面: http://localhost:6080/vnc.html - MCP SSE端点: http://localhost:3080/sse

MCP客户端配置

stdio传输 （推荐）：

{
  "mcpServers": {
    "playwright": {
      "command": "docker",
      "args": [
        "run",
        "--rm",
        "-i",
        "--network=playwright-network",
        "mcp-playwright-novnc:latest",
        "mcp-proxy",
        "http://playwright-display:3080/sse"
      ]
    }
  }
}

SSE运输 （直接连接）：

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:3080/sse"
    }
  }
}

环境变量

Docker编写配置

该项目包括 docker-compose.yml 使用持久化Playwright+noVNC服务创建文件。

Docker镜像还包括 mcp-proxy 将stdio桥接到SSE的脚本，允许使用stdio传输的MCP客户端连接到正在运行的Playwright服务。

代理使用情况：The mcp-proxy 命令接受SSE URL作为命令行参数：

mcp-proxy 

您还可以使用 PLAYWRIGHT_SSE_URL 环境变量作为回退。

您可以在编写文件中自定义环境变量，也可以通过 .env 文件：

SCREEN_WIDTH=1920
SCREEN_HEIGHT=1080
SCREEN_DEPTH=24
MCP_BROWSER=chromium

在当地建设

# Build the Docker image
docker compose build

# Start the service
docker compose up -d

# View logs
docker compose logs -f playwright-display

测试代理

# Test the proxy connection
echo '{"jsonrpc":"2.0","method":"tools/list","id":1}' | \
  docker run --rm -i --network=playwright-network \
  mcp-playwright-novnc:latest mcp-proxy http://playwright-display:3080/sse

建筑

该设置由一个运行以下命令的Docker容器组成：

• 剧作家MCP服务器 （端口3080）：通过SSE或stdio接受浏览器自动化命令
• Chromium浏览器：在虚拟显示器（Xvfb）上运行
• noVNC Web界面 （端口6080）：通过您的网络浏览器实时查看浏览器
• mcp代理：将基于stdio的MCP客户端连接到SSE端点

可用的MCP工具

Playwright MCP服务器提供浏览器自动化工具，包括：

• browser_navigate -导航到URL
• browser_click -点击元素
• browser_type -在输入中键入文本
• browser_fill_form -填写表单字段
• browser_take_screenshot -截图
• browser_snapshot -捕获可访问性快照
• browser_tabs -管理浏览器选项卡
• browser_close -关闭浏览器
• browser_evaluate -评估JavaScript
• browser_console_messages -获取控制台消息
• 还有更多。..

使用预构建图像

预构建映像可从GitHub容器注册表获得：

# Pull the latest image
docker pull ghcr.io/xtr-dev/mcp-playwright-novnc:latest

完整设置示例

1.创建一个 docker-compose.yml 文件：

services:
  playwright-display:
    image: ghcr.io/xtr-dev/mcp-playwright-novnc:latest
    container_name: playwright-display
    ports:
      - "6080:6080"  # noVNC web interface
      - "3080:3080"  # MCP SSE endpoint
    environment:
      - SCREEN_WIDTH=1920
      - SCREEN_HEIGHT=1080
      - MCP_BROWSER=chromium
    networks:
      - playwright-network

networks:
  playwright-network:
    name: playwright-network

2.启动服务：

docker compose up -d

3.配置您的MCP客户端：

{
  "mcpServers": {
    "playwright": {
      "command": "docker",
      "args": [
        "run",
        "--rm",
        "-i",
        "--network=playwright-network",
        "ghcr.io/xtr-dev/mcp-playwright-novnc:latest",
        "mcp-proxy",
        "http://playwright-display:3080/sse"
      ]
    }
  }
}

4.访问浏览器显示：

打开http://localhost:6080在您的网络浏览器中查看Playwright浏览器的运行情况。

许可证

MIT许可证-请参阅 许可证 详细信息文件