Domscribe MCP Server

Domscribe is a pixel-to-code development tool that maps running UI elements to their exact source locations, capturing runtime context (props, state

Local serverstdioGo

What is the Domscribe MCP Server?

Domscribe is a pixel-to-code development tool that maps running UI elements to their exact source locations, capturing runtime context (props, state, DOM) for

The short version

Domscribe bridges both directions: click a DOM element to tell your agent what to change, or let your agent query any source location to see exactly what it looks like live in the browser. Build-time stable IDs, deep runtime context (props, state, DOM), framework-agnostic, any MCP-compatible agent. Zero production impact.

The tools it exposes

The server publishes 14 tools. What each one is for:

  • domscribe.query.bySource — Query a source file + line and get live runtime context (props, state, DOM snapshot)
  • domscribe.manifest.query — Find manifest entries by file path, component name, or element ID
  • domscribe.manifest.stats — Manifest coverage statistics (entry count, file count, component count, cache hit rate)
  • domscribe.resolve — Resolve a data-ds element ID to its source location (file, line, col, component)
  • domscribe.resolve.batch — Resolve multiple element IDs in one call
  • domscribe.annotation.process — Atomically claim the next queued annotation (prevents concurrent agent conflicts)
  • domscribe.annotation.respond — Attach agent response and transition to PROCESSED
  • domscribe.annotation.updateStatus — Manually transition annotation status
  • domscribe.annotation.get — Retrieve annotation by ID
  • domscribe.annotation.list — List annotations with status/filter options
  • domscribe.annotation.search — Full-text search across annotation content
  • domscribe.verify.baseline — Capture a pre-edit style/geometry snapshot of a rendered element

Getting it running

The server ships on npm as domscribe, so your MCP client can launch it on demand — there is no separate build step. Add the server block to your client's configuration, restart it, and the tools register themselves.

How it compares

Among the developer tooling options, the useful question is rarely "what can it do" but "what does it cost you to run" — permissions, credentials, and how much of your context its toolset consumes. Domscribe's toolset — domscribe.query.bySource, domscribe.manifest.query, domscribe.manifest.stats and 11 more — is a fair guide to whether it matches your workflow. It is maintained by patchorbit; worth a glance at recent repository activity before you build anything load-bearing on it.

Things to watch

  • It runs with your machine's permissions. That is convenient and also the reason to think about what you point it at before you approve a tool call.
  • Keep per-call confirmation enabled while you learn its behaviour; it is the cheapest safeguard you have.

Recorded tools

  • domscribe.query.bySource — Query a source file + line and get live runtime context (props, state, DOM snapshot)
  • domscribe.manifest.query — Find manifest entries by file path, component name, or element ID
  • domscribe.manifest.stats — Manifest coverage statistics (entry count, file count, component count, cache hit rate)
  • domscribe.resolve — Resolve a data-ds element ID to its source location (file, line, col, component)
  • domscribe.resolve.batch — Resolve multiple element IDs in one call
  • domscribe.annotation.process — Atomically claim the next queued annotation (prevents concurrent agent conflicts)
  • domscribe.annotation.respond — Attach agent response and transition to PROCESSED
  • domscribe.annotation.updateStatus — Manually transition annotation status
  • domscribe.annotation.get — Retrieve annotation by ID
  • domscribe.annotation.list — List annotations with status/filter options
  • domscribe.annotation.search — Full-text search across annotation content
  • domscribe.verify.baseline — Capture a pre-edit style/geometry snapshot of a rendered element
  • domscribe.verify.afterEdit — Compare the element against the baseline — deterministic verdict + per-property deltas
  • domscribe.status — Relay daemon health, manifest stats, queue counts

More MCP options

Compare MCP servers by category, or browse hosted MCP servers if you prefer an endpoint over a local process.

Recorded tools

Check the linked publisher documentation and your connected client's tool list. Names and availability can vary with the server version and account permissions.

ToolWhat it does
domscribe.query.bySourceQuery a source file + line and get live runtime context (props, state, DOM snapshot)
domscribe.manifest.queryFind manifest entries by file path, component name, or element ID
domscribe.manifest.statsManifest coverage statistics (entry count, file count, component count, cache hit rate)
domscribe.resolveResolve a data-ds element ID to its source location (file, line, col, component)
domscribe.resolve.batchResolve multiple element IDs in one call
domscribe.annotation.processAtomically claim the next queued annotation (prevents concurrent agent conflicts)
domscribe.annotation.respondAttach agent response and transition to PROCESSED
domscribe.annotation.updateStatusManually transition annotation status
domscribe.annotation.getRetrieve annotation by ID
domscribe.annotation.listList annotations with status/filter options
domscribe.annotation.searchFull-text search across annotation content
domscribe.verify.baselineCapture a pre-edit style/geometry snapshot of a rendered element
domscribe.verify.afterEditCompare the element against the baseline — deterministic verdict + per-property deltas
domscribe.statusRelay daemon health, manifest stats, queue counts

How to install the Domscribe MCP Server

{
  "mcpServers": {
    "domscribe": {
      "command": "npx",
      "args": ["-y", "domscribe"]
    }
  }
}

Add to claude_desktop_config.json, then restart Claude Desktop.

Example prompts to try

  • “Use Domscribe to domscribe.query.bySource.”
  • “Use Domscribe to domscribe.manifest.query.”
  • “Use Domscribe to domscribe.manifest.stats.”

Frequently asked questions

Domscribe is a pixel-to-code development tool that maps running UI elements to their exact source locations, capturing runtime context (props, state, DOM) for Confirm the tools offered by your installed version in the connected client. Tool availability and permissions depend on the server and account configuration.