Domscribe Pixel-to-Code
Domscribe is a pixel-to-code development tool that bridges the gap between running web applications and their source code.
What is Domscribe Pixel-to-Code?
Domscribe Pixel-to-Code is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to domscribe is a pixel-to-code development tool that bridges the gap between running web applications and their source code.
Domscribe is a pixel-to-code development tool that bridges the gap between running web applications and their source code.
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Domscribe is a pixel-to-code development tool that bridges t
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx domscribeConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Domscribe Pixel-to-Code
Domscribe is a pixel-to-code development tool that creates a live bridge between running web applications and their source code, enabling AI coding agents to query live DOM state, props, and component data and map them directly to source file locations. It injects build-time stable identifiers (data-ds attributes) via AST transformation and exposes 12 MCP tools and 4 prompts that let agents like Claude Code, GitHub Copilot, and Gemini CLI perform precise UI-targeted edits without guessing file paths. Frontend developers use it to eliminate the gap between what they see in the browser and what they need to change in code.
Prerequisites
- Node.js 18 or later
- A React, Vue, Next.js, or Nuxt web application using Vite, Webpack, or Turbopack as the bundler
- An MCP-compatible AI coding agent: Claude Code, GitHub Copilot CLI, Gemini CLI, or Cursor
Run the initialization wizard
Run npx domscribe init in your project root. The interactive wizard will configure both the agent MCP connection and the framework/bundler plugin for your application in two steps.
npx domscribe initConfigure a monorepo app root (if needed)
If your web application lives in a subdirectory of a monorepo, pass the --app-root flag so Domscribe knows where to apply instrumentation.
npx domscribe init --app-root apps/webVerify domscribe.config.json was created
The init wizard creates a domscribe.config.json at the configured app root. This file tells all Domscribe tools where your application lives and is read automatically by both the CLI and MCP server.
Add Domscribe to your MCP client configuration
For Claude Code or other MCP clients that require manual configuration, add the Domscribe MCP server using the @domscribe/mcp package.
Start your development server
Run your application's normal dev server. Domscribe's instrumentation activates during development builds and is automatically stripped in production — no changes needed to your build pipeline.
Domscribe Pixel-to-Code Examples
Client configuration
Add Domscribe to any MCP-compatible client using the @domscribe/mcp package via npx. For Claude Code specifically, you can also use the plugin marketplace.
{
"mcpServers": {
"domscribe": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@domscribe/mcp"]
}
}
}Prompts to try
With Domscribe connected and your app running, ask your AI agent to work directly with live UI elements.
- "Find the source file for the navigation component visible at the top of the page"
- "Query the live props of the ProductCard component and update the price display format"
- "Show me the DOM tree for the checkout form and map each field to its source location"
- "List all pending UI change annotations and implement the first one"Troubleshooting Domscribe Pixel-to-Code
data-ds attributes are not appearing in the rendered DOM
Ensure the Domscribe bundler plugin is registered in your Vite, Webpack, or Turbopack config. Re-run `npx domscribe init` and follow the framework-specific plugin installation step.
domscribe.resolve tool returns no matches for a clicked element
The relay daemon must be running alongside your dev server. Check `domscribe.status` for daemon health. If the daemon is not running, start it with `npx domscribe daemon start`.
MCP server fails to connect in Claude Code
Try the plugin marketplace approach: run `claude plugin marketplace add patchorbit/domscribe`. This handles MCP registration automatically without requiring manual JSON config edits.
Frequently Asked Questions about Domscribe Pixel-to-Code
What is Domscribe Pixel-to-Code?
Domscribe Pixel-to-Code is a Model Context Protocol (MCP) server that domscribe is a pixel-to-code development tool that bridges the gap between running web applications and their source code. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Domscribe Pixel-to-Code?
Follow the installation instructions on the Domscribe Pixel-to-Code GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Domscribe Pixel-to-Code?
Domscribe Pixel-to-Code works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Domscribe Pixel-to-Code free to use?
Yes, Domscribe Pixel-to-Code is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
Domscribe Pixel-to-Code Alternatives — Similar Developer Tools Servers
Looking for alternatives to Domscribe Pixel-to-Code? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Domscribe Pixel-to-Code in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Domscribe Pixel-to-Code?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.