CDP (Chrome DevTools Protocol) for MCP Development

AionUi supports CDP for external debugging tools integration. In development mode (just dev), CDP is enabled by default on port 9230.

Enable CDP in Production

Open AionUi Settings → System → Developer Debug
Enable "Enable Remote Debugging (CDP)"
Restart the app

Configure MCP chrome-devtools

Add this to your IDE's MCP configuration. The configuration file location depends on your IDE:

IDE	Config Path
Cursor	`~/.cursor/mcp.json`
VS Code	`~/.vscode/mcp.json`
Claude Desktop	`~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) or `%APPDATA%\Claude\claude_desktop_config.json` (Windows)
Codebuddy	`~/.codebuddy/mcp.json`

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@0.16.0", "--browser-url=http://127.0.0.1:9230"]
    }
  }
}

Other AI-Friendly Development Tools

AionUi can integrate with other MCP tools for enhanced development experience:

Tool	Purpose	Config
Playwright MCP	Browser automation (alternative to chrome-devtools)	`"@playwright/mcp@latest"`
Puppeteer MCP	Browser automation	`"@puppeteer/mcp@latest"`
Filesystem MCP	File operations	`@modelcontextprotocol/server-filesystem`
Git MCP	Git repository operations	`@modelcontextprotocol/server-git`

See MCP Servers for more tools.

Usage with MCP

Once configured, you can use MCP tools to interact with AionUi:

list_pages — List all open pages in AionUi
take_snapshot — Get accessibility tree snapshot of current page
click, fill, hover — Interact with UI elements
navigate_page — Navigate to URLs

Inspect with Chrome DevTools

Open http://127.0.0.1:9230/json in Chrome
Click on a page to inspect it with DevTools
Or use Chrome's chrome://inspect → Configure → add 127.0.0.1:9230

CDP (Chrome DevTools Protocol) MCP 开发

AionUi 支持 CDP 用于外部调试工具集成。在开发模式 (just dev) 下，CDP 默认在端口 9230 启用。

在生产环境启用 CDP

打开 AionUi 设置 → 系统 → 开发者调试
启用"启用远程调试 (CDP)"
重启应用

配置 MCP chrome-devtools

将以下配置添加到你的 IDE 的 MCP 配置文件中。配置文件位置取决于你使用的 IDE：

IDE	配置路径
Cursor	`~/.cursor/mcp.json`
VS Code	`~/.vscode/mcp.json`
Claude Desktop	`~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) 或 `%APPDATA%\Claude\claude_desktop_config.json` (Windows)
Codebuddy	`~/.codebuddy/mcp.json`

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@0.16.0", "--browser-url=http://127.0.0.1:9230"]
    }
  }
}

其他 AI 友好的开发工具

AionUi 可以集成其他 MCP 工具来增强开发体验：

工具	用途	配置
Playwright MCP	浏览器自动化（chrome-devtools 替代方案）	`"@playwright/mcp@latest"`
Puppeteer MCP	浏览器自动化	`"@puppeteer/mcp@latest"`
Filesystem MCP	文件操作	`@modelcontextprotocol/server-filesystem`
Git MCP	Git 仓库操作	`@modelcontextprotocol/server-git`

更多工具请查看 MCP Servers。

MCP 使用方式

配置完成后，可以使用 MCP 工具与 AionUi 交互：

list_pages — 列出 AionUi 中所有打开的页面
take_snapshot — 获取当前页面的可访问性树快照
click, fill, hover — 与 UI 元素交互
navigate_page — 导航到 URL

使用 Chrome DevTools 检查

在 Chrome 中打开 http://127.0.0.1:9230/json
点击页面链接使用 DevTools 检查
或使用 Chrome 的 chrome://inspect → 配置 → 添加 127.0.0.1:9230

5.9 KiB Raw Permalink Blame History