Domscribe — 编码 Agent 的双向 UI-代码桥接 MCP 服务器
Domscribe 是一款开源 MCP 服务器，在运行中的 Web 应用与源代码之间建立双向链接，让 AI 编码 Agent 能够在编辑代码的同时看到并与浏览器交互。它于 3 月 27 日在 Product Hunt 上线，GitHub 上已有 102 星。
该工具支持双向操作：开发者可以在浏览器覆盖层中点击任意 DOM 元素来告诉 Agent 需要修改什么，而 Agent 可以查询任意源代码位置来查看其实时渲染效果、props 和组件状态。当 Agent 进行修改时，实时反馈通过 WebSocket 中继推送到浏览器覆盖层。
Domscribe 通过构建时稳定 ID（通过 AST 注入确定性的 data-ds 属性）、深度运行时上下文捕获以及框架无关的支持实现这一功能，兼容 React 18-19、Vue 3、Next.js 15-16 和 Nuxt 3+。它通过 MCP 暴露 12 个工具和 4 个提示，可与 Claude Code、GitHub Copilot、Gemini、Kiro 等 MCP 兼容的 Agent 配合使用。所有插桩代码在生产构建中自动剥离。
内置 PII 脱敏功能在浏览器传输前清除敏感数据。项目采用 MIT 许可证。
GitHub: https://github.com/patchorbit/domscribe
官网: https://www.domscribe.com/
← 返回所有文章
该工具支持双向操作：开发者可以在浏览器覆盖层中点击任意 DOM 元素来告诉 Agent 需要修改什么，而 Agent 可以查询任意源代码位置来查看其实时渲染效果、props 和组件状态。当 Agent 进行修改时，实时反馈通过 WebSocket 中继推送到浏览器覆盖层。
Domscribe 通过构建时稳定 ID（通过 AST 注入确定性的 data-ds 属性）、深度运行时上下文捕获以及框架无关的支持实现这一功能，兼容 React 18-19、Vue 3、Next.js 15-16 和 Nuxt 3+。它通过 MCP 暴露 12 个工具和 4 个提示，可与 Claude Code、GitHub Copilot、Gemini、Kiro 等 MCP 兼容的 Agent 配合使用。所有插桩代码在生产构建中自动剥离。
内置 PII 脱敏功能在浏览器传输前清除敏感数据。项目采用 MIT 许可证。
GitHub: https://github.com/patchorbit/domscribe
官网: https://www.domscribe.com/
评论