Domscribe — Bidirectional UI-Code Bridge MCP for Coding Agents

Domscribe is an open-source MCP server that creates a bidirectional link between running web applications and their source code, giving AI coding agents the ability to see and interact with the browser while editing. It launched on Product Hunt on March 27 and has 102 stars on GitHub.

The tool works in two directions: developers can click any DOM element in a browser overlay to tell their agent what to change, while agents can query any source location to see its live rendering, props, and component state. When an agent makes changes, real-time feedback is delivered through a WebSocket relay that pushes responses to the browser overlay as they happen.

Domscribe achieves this with build-time stable IDs (deterministic data-ds attributes injected via AST), deep runtime context capture, and framework-agnostic support for React 18-19, Vue 3, Next.js 15-16, and Nuxt 3+. It exposes 12 tools and 4 prompts via MCP, works with Claude Code, GitHub Copilot, Gemini, Kiro, and other MCP-compatible agents. All instrumentation is automatically stripped from production builds.

Built-in PII redaction scrubs sensitive data before browser transmission. The project is MIT-licensed.

GitHub: https://github.com/patchorbit/domscribe
Website: https://www.domscribe.com/