# Domscribe

> Domscribe bridges AI coding agents and your running frontend by injecting build-time stable IDs and exposing live DOM context via MCP, enabling agents to find and edit the right UI element every time.

Domscribe solves the blind spot in AI-assisted frontend development: coding agents can read source files but cannot see your running UI. It injects deterministic `data-ds` IDs at build time via AST, maps every element to its exact file, line, and column, and exposes live DOM snapshots, component props, and state to any MCP-compatible agent. The result is bidirectional context — click a UI element to tell your agent what to change, or let the agent query a source location to see exactly what renders live in the browser.

- **Build-time stable IDs** — deterministic `data-ds` attributes injected via AST using xxhash64, stable across HMR and fast refresh, with a JSONL manifest mapping every ID to its source location.
- **Deep runtime capture** — live props, state, and DOM snapshots extracted via React fiber walking and Vue VNode inspection, not just shallow HTML.
- **Bidirectional workflow** — *UI to Code*: click any element in your running app, describe a change, and the agent edits the right file; *Code to UI*: the agent queries any source line to see what renders live.
- **Any MCP-compatible agent** — 12 MCP tools and 4 prompts work with Claude Code, GitHub Copilot, Cursor, Gemini CLI, Amazon Kiro, and any other MCP client.
- **Framework-agnostic** — supports React, Vue, Next.js, and Nuxt with extensible adapter architecture.
- **Multi-bundler support** — works with Vite 5–7, Webpack 5, and Turbopack.
- **PII redaction** — emails, tokens, and sensitive patterns are automatically scrubbed before leaving the browser.
- **Zero production impact** — all `data-ds` attributes, overlay scripts, and relay connections are stripped in production builds, enforced by CI.
- **Fully local** — a localhost Fastify daemon connects the browser and agent via REST, WebSocket, and MCP stdio; no cloud dependency or OAuth required.
- **Quick setup** — run `npx domscribe init` for an interactive wizard that handles framework detection, bundler config, and agent plugin installation in under a minute.

## Features
- Build-time stable IDs via AST injection
- JSONL manifest mapping DOM elements to source locations
- Live DOM snapshot querying by source file and line
- React fiber walking for props and state capture
- Vue VNode inspection for runtime context
- Bidirectional UI-to-Code and Code-to-UI workflows
- 12 MCP tools and 4 MCP prompts
- In-app element picker overlay (Lit shadow DOM)
- PII redaction before data leaves the browser
- Zero production impact — instrumentation stripped in production builds
- WebSocket relay for real-time agent feedback
- Fully local — no cloud dependency

## Integrations
React, Vue, Next.js, Nuxt, Vite, Webpack, Turbopack, Claude Code, GitHub Copilot, Cursor, Gemini CLI, Amazon Kiro

## Platforms
CLI, API, DEVELOPER_SDK

## Pricing
Open Source

## Links
- Website: https://domscribe.com
- Documentation: https://www.domscribe.com/docs
- Repository: https://github.com/patchorbit/domscribe
- EveryDev.ai: https://www.everydev.ai/tools/domscribe