@uicheck/mcp

让 AI 看懂真实应用界面

UI Check 把页面截图、DOM 元素树、布局盒、间距和坐标暴露给 AI。AI 可以通过 MCP 查询真实页面，定位目标元素，再回到代码里修复 UI。

开始接入查看工具

给 Agent查看 uicheck.ai，并使用 uicheck 检查元素

localhost:3000/dashboard

1Revenue+18.2%

2Conversion3.74%

Latency126ms

AI Agent

list_clients()

inspect_elements({
  query: "Revenue",
  limit: 20
})

capture_page({ waitMs: 300 })

Multi-runtime entrypoints

选择应用运行环境

不同平台只负责把自己的 UI 能力转成 uicheck 协议。AI 客户端不需要区分 Web、Taro、小程序、RN、Flutter 或原生应用。

@uicheck/web

浏览器 DOM 页面，读取真实 DOM、截图、视口和元素布局。

@uicheck/taro

Taro 小程序页面，通过 selector query 返回小程序节点树。

@uicheck/rn

React Native 应用，读取 testID、accessibilityLabel 和运行时布局。

uicheck_flutter

Flutter 应用，通过运行时客户端暴露组件树、截图和布局。

uicheck_apple

iOS/macOS 原生应用，通过 Swift 客户端接入 UIView/NSView。

uicheck_android

Android 原生应用，通过 Kotlin 客户端接入 View 层级。

Quick start

在 Web 端接入

查看多平台文档

# 1. 启动 MCP 服务npx @uicheck/mcp # 2. AI 客户端配置 MCPhttp://127.0.0.1:17322/mcp # 3. Web 应用侧连接 WebSocketnpm install @uicheck/web import { initUiCheck } from '@uicheck/web' initUiCheck({  socket: {    url: 'ws://127.0.0.1:17322/socket'  }})