Domscribe is a pixel-to-code development tool that maps running UI elements to their exact source locations, capturing runtime context (props, state
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 handoff to coding agents via MCP. That is what the domscribe mcp server brings to an AI assistant: the same capability, reachable through the Model Context Protocol rather than a separate app or dashboard.
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 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 IDdomscribe.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 calldomscribe.annotation.process — Atomically claim the next queued annotation (prevents concurrent agent conflicts)domscribe.annotation.respond — Attach agent response and transition to PROCESSEDdomscribe.annotation.updateStatus — Manually transition annotation statusdomscribe.annotation.get — Retrieve annotation by IDdomscribe.annotation.list — List annotations with status/filter optionsdomscribe.annotation.search — Full-text search across annotation contentdomscribe.verify.baseline — Capture a pre-edit style/geometry snapshot of a rendered elementThe 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.
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.
This entry was verified against Domscribe's own documentation before publication; SyncDev keeps the directory reviewed rather than auto-generated.
| Tool | What it does |
|---|---|
| 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 |
{
"mcpServers": {
"domscribe": {
"command": "npx",
"args": ["-y", "domscribe"]
}
}
}Add to claude_desktop_config.json, then restart Claude Desktop.
Kill hallucinated APIs — version-accurate, up-to-date library documentation injected straight into context.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
GitHub's official server — repos, issues, pull requests, Actions and code security, straight from your assistant.
Issue tracking at the speed of conversation — Linear's official hosted server with OAuth and zero install.
Local repository surgery — status, diffs, commits, branches and history for any repo on disk.
Timezone sanity for AI — current time anywhere and correct conversions, without the model doing date math.