Domscribe plugin
Ties a running frontend to an agent: a click leads to the source line, and the agent sees live DOM, props and state.
- 195 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- In dev mode the plugin hooks into the build and a local daemon opens a WebSocket and API on localhost.
- The agent receives live props, state and DOM of the running app.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/domscribeDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- In dev mode the plugin hooks into the build and a local daemon opens a WebSocket and API on localhost.
- The agent receives live props, state and DOM of the running app.
This is third-party code. Review the repository files before installing.
What it does
During development a bundler plugin injects stable `data-ds` identifiers into markup and writes a map to `.domscribe/manifest.jsonl`. React and Vue adapters capture live props, state and a DOM snapshot. A local Fastify daemon connects the browser and the agent over WebSocket, and the agent reaches it through MCP: 12 tools and 4 prompts. One way, the user clicks an element in the overlay, describes the change in words and the agent finds the file and line. The other way, the agent calls `domscribe.query.bySource` with a path and line and gets what that spot looks like in the browser. Annotations sit in the repository as JSON in `.domscribe/annotations/`, and sensitive patterns such as emails and tokens are scrubbed before leaving the browser.
Who it is for. Frontend developers on React, Vue, Next.js and Nuxt who edit UI through an agent and are tired of explaining where an element is.
Good fit when
- A user clicks a button in the browser and asks to change its colour, and the agent opens the right file by itself.
- Before editing, the agent asks the browser for CSS classes and component props by file path and line.
- In a monorepo the app lives in `apps/web` and `npx domscribe init` needs `--app-root`.
- A team keeps UI notes next to the code and shares them through the repository.
Not a fit when
- The app is not on React, Vue, Next.js or Nuxt and the bundler has no support.
- You need to inspect a production site: instrumentation is stripped from production builds.
- The dev server is not running or the page is not open in the browser.
Example request
Change the submit button colour, but first check through Domscribe which CSS classes it has right now in the browser.Limitations
The agent does not query browser state on its own and must be told, for example to check an element's classes through Domscribe before editing. Browser queries need a running dev server and an open page. Supported are React 18 to 19, Vue 3, Next.js 15 to 16, Nuxt 3 and up, and the Vite 5 to 8, Webpack 5 and Turbopack bundlers. Outside these combinations only DOM-to-source mapping works, with no state capture. Vite 8 needs Domscribe 0.7.0 or newer.
How to disable. Remove the bundler plugin and the `@domscribe/*` devDependencies, disable the MCP entry and the agent plugin, then delete `.domscribe/` and `domscribe.config.json`.
FAQ
How do I install it for Claude Code?
Run `claude plugin marketplace add patchorbit/domscribe`, then `claude plugin install domscribe@domscribe`. The `npx domscribe init` wizard does this for you.
Which agents are supported?
Claude Code, GitHub Copilot (`copilot plugin install patchorbit/domscribe`), Gemini CLI, Amazon Kiro, Cursor and any agent with MCP and skills.
What reaches production?
Nothing: instrumentation is stripped from production builds, and a CI check enforces it.
How do I connect MCP by hand?
Add a stdio entry with `npx -y @domscribe/mcp` to the agent configuration and install skills with `npx skills add patchorbit/domscribe`.
Where are UI annotations stored?
In `.domscribe/annotations/` as JSON files in your repository. REST interfaces serve them, and MCP wraps those.
Discussion
No questions or reviews yet.
Related
PluginsAn MCP server plus a Chrome extension: pick a DOM element by Option-click and the agent gets its text, styles and selector
Connects an agent to a running Next.js 16+ dev server: errors, routes, logs and docs for your installed version
Annotation toolbar for React pages: click an element to hand the agent its selector and context, plus skills for setup and an autonomous UI critique
A CLI that sets up a canvas where an AI agent builds dashboards and reports as React artifacts, revised block by block
The Reactive Data Client plugin teaches Claude Code, Cursor and Codex to add the library and work with schemas, REST and hooks.
A CLI that lets an agent inspect a running React app: component tree, props, state, hooks and render profiling
README in short
Work splits into four steps: injecting identifiers, capturing context, relaying through a local daemon and MCP for the agent. Other frameworks have an adapter interface, and `@domscribe/transform` offers only DOM-to-source mapping.