Manual Setup

If you need finer control over your Domscribe configuration, you can set things up manually instead of using npx domscribe init. Domscribe has two sides that both need to be configured: app-side (bundler and framework plugins) and agent-side (MCP for your coding agent).

App-Side: Add to Your Bundler

The app-side integration injects build-time stable data-ds attributes into your components via AST transformation, and optionally initializes the runtime for deep context capture (props, state, component trees).

Choose your framework for detailed setup instructions:

For unsupported frameworks, you can use the base transform package @domscribe/transform for DOM-to-source mapping without runtime capture, or build a custom adapter.

Agent-Side: Connect Your Coding Agent

Domscribe exposes 12 tools and 4 prompts via MCP. Agent plugins bundle the MCP config and a skill file that teaches the agent how to use the tools effectively.

Claude Code

claude plugin marketplace add patchorbit/domscribe
claude plugin install domscribe@domscribe

GitHub Copilot

copilot plugin install patchorbit/domscribe

Gemini CLI

gemini extensions install https://github.com/patchorbit/domscribe

Amazon Kiro

Open the Powers panel, select Add power from GitHub, and enter https://github.com/patchorbit/domscribe/tree/main/domscribe-power.

Cursor

Install from the Cursor plugin directory.

Any Agent (Skills and MCP)

Install the Domscribe skills:

npx skills add patchorbit/domscribe

Then add this MCP config to your agent:

{
  "mcpServers": {
    "domscribe": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@domscribe/mcp"]
    }
  }
}

For agent-specific details, see the Agents documentation.