@uicheck/mcp

Source: README

Install

npx @uicheck/mcp

本地 MCP 服务，用于通过 WebSocket 连接 uicheck 运行环境客户端。Web、Taro 小程序、React Native、Flutter、Apple 原生或 Android 原生应用连接后，AI 可以调用 MCP 工具请求截图和树状元素信息。

启动

npx @uicheck/mcp

默认端点：

MCP:    http://127.0.0.1:17322/mcp
Socket: ws://127.0.0.1:17322/socket

AI 客户端配置

把 MCP endpoint 配到任意支持 MCP 的 AI 客户端：

{
  "mcpServers": {
    "uicheck": {
      "url": "http://127.0.0.1:17322/mcp"
    }
  }
}

运行环境客户端

应用运行环境连接 socket 地址。浏览器页面使用 @uicheck/web：

initUiCheck({
  socket: {
    url: 'ws://127.0.0.1:17322/socket'
  }
})

Taro 小程序使用 @uicheck/taro，React Native 使用 @uicheck/rn，Flutter 使用 uicheck_flutter，Apple 原生使用 uicheck_apple，Android 原生使用 uicheck_android。

MCP 工具

工具说明参数返回
list_clients查看已连接的 uicheck 运行环境客户端。无JSON 文本数组。每项包含 id、connectedAt、lastSeenAt，以及可选的 userAgent、viewport。
capture_page请求已连接运行环境返回 PNG 截图。clientId 可选目标客户端 ID；timeoutMs MCP 等待超时；waitMs 截图前等待时间；captureTimeoutMs 运行环境截图超时；forceHtml2Canvas 强制 Web 端使用 html2canvas。MCP image 内容，mimeType 为 image/png；附带 JSON 文本 { width, height }。
capture_element截取第一个命中查询条件的元素 PNG 图。与 capture_page 相同的截图参数；额外支持 includeHidden、query、selector、styleName 加可选 styleValue、styles、id、testId、text、accessibilityLabel、className、role、tag。MCP image 内容，mimeType 为 image/png；附带 JSON 文本 { width, height }。
compare_screenshot截取当前页面或命中元素，并和传入的 PNG 图片做像素对比。与 capture_element 相同的截图和查询参数；target 可为 page 或 element，默认 page；expectedImageBase64 必填；threshold 为 pixelmatch 阈值。JSON 文本，包含 width、height、mismatchedPixels、totalPixels、mismatchRatio、passed；附带 PNG diff 图。
inspect_elements返回树状节点、文本、布局盒和元数据。传入查找参数时，只保留命中节点和它的父级树。clientId 可选目标客户端 ID；timeoutMs MCP 等待超时；limit 最大节点数，默认 80；includeHidden 是否包含隐藏或零尺寸节点；query 搜索常见节点字段；selector、styleName 加可选 styleValue、styles、id、testId、text、accessibilityLabel、className、role、tag 用于缩小匹配范围。JSON 文本。包含 count 和树状 tree，节点包含文本、可见性、布局盒、测试 ID、无障碍标签、类名和子节点等运行环境可提供的信息。

CLI

npx @uicheck/mcp -- --host 127.0.0.1 --port 17322