Power your agent
การติดตั้งจากผู้เผยแพร่ ไม่ใช่เอนด์พอยต์ของ PlugMCP
URL แบบรีโมตหรือคำสั่งบนเครื่องของคุณ? การติดตั้งสองแบบต่างกันอย่างไร
รันบน PlugMCP
A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.
เปิดจากผู้เผยแพร่
AI coding agents edit your source files blind — they can't see your running frontend, and your frontend can't tell them where to look.
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.
Domscribe is a pixel-to-code development tool that bridges the gap between running web applications and their source code.
npx domscribe init
The setup wizard walks you through two steps:
That's it. Start your dev server and you're ready to go.
Prefer to set things up manually, or need finer control? See the manual setup instructions below.
Your agent calls domscribe.query.bySource with a file path and line number and gets back the live DOM snapshot, current props, component state, and rendered attributes — directly from the running browser. No human interaction needed.
[!TIP] Agents don't spontaneously query runtime state — prompt them explicitly: "Fix the button color — use domscribe to check what CSS classes it has before changing anything." Your dev server must be running with the target page open in the browser.
Click any element in the browser overlay, describe the change in plain English, and submit. Domscribe captures the element's source location, runtime context, and your instruction as an annotation. The agent claims it, navigates to the exact file and line, and implements the change. The overlay shows the agent's response in real time via WebSocket.
data-ds attributes injected via AST, stable across HMR and fast refresh.domscribe/annotations/, exposed via REST APIs that MCP wraps for agent access[!NOTE]
npx domscribe inithandles both steps below automatically. Use manual setup only if you need finer control.
Domscribe has two sides: app-side (bundler + framework plugins) and agent-side (MCP for your coding agent). Both are needed for the full workflow.
// next.config.ts
import type { NextConfig } from 'next';
import { withDomscribe } from '@domscribe/next';
const nextConfig: NextConfig = {};
export default withDomscribe()(nextConfig);
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@domscribe/nuxt'],
});
Vite plugin:
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { domscribe } from '@domscribe/react/vite';
export default defineConfig({
plugins: [react(), domscribe()],
});
Webpack plugin:
// webpack.config.js
const { DomscribeWebpackPlugin } = require('@domscribe/react/webpack');
const isDevelopment = process.env.NODE_ENV !== 'production';
module.exports = {
module: {
rules: [
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
enforce: 'pre',
use: [
{
loader: '@domscribe/transform/webpack-loader',
options: { enabled: isDevelopment },
},
],
},
],
},
plugins: [
new DomscribeWebpackPlugin({
enabled: isDevelopment,
overlay: true,
}),
],
};
Vite plugin:
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { domscribe } from '@domscribe/vue/vite';
export default defineConfig({
plugins: [vue(), domscribe()],
});
Webpack plugin:
// webpack.config.js
const { DomscribeWebpackPlugin } = require('@domscribe/vue/webpack');
const isDevelopment = process.env.NODE_ENV !== 'production';
module.exports = {
module: {
rules: [
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
enforce: 'pre',
use: [
{
loader: '@domscribe/transform/webpack-loader',
options: { enabled: isDevelopment },
},
],
},
],
},
plugins: [
new DomscribeWebpackPlugin({
enabled: isDevelopment,
overlay: true,
}),
],
};
Vite plugin:
// vite.config.ts
import { defineConfig } from 'vite';
import { domscribe } from '@domscribe/transform/plugins/vite';
export default defineConfig({
plugins: [domscribe()],
});
Webpack plugin:
// webpack.config.js
const {
DomscribeWebpackPlugin,
} = require('@domscribe/transform/plugins/webpack');
const isDevelopment = process.env.NODE_ENV !== 'production';
module.exports = {
module: {
rules: [
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
enforce: 'pre',
use: [
{
loader: '@domscribe/transform/webpack-loader',
options: { enabled: isDevelopment },
},
],
},
],
},
plugins: [
new DomscribeWebpackPlugin({
enabled: isDevelopment,
overlay: true,
}),
],
};
Working examples: See
packages/domscribe-test-fixtures/fixtures/for complete app setups across every supported framework and bundler combination.
For plugin configuration options, see the @domscribe/transform README.
If your frontend app is in a subdirectory (e.g. apps/web), pass --app-root during init:
npx domscribe init --app-root apps/web
Or run npx domscribe init and follow the prompts — the wizard asks if you're in a monorepo.
This creates a domscribe.config.json at your repo root that tells all Domscribe tools where your app lives. CLI commands (serve, stop, status) and agent MCP connections automatically resolve the app root from this config — no extra flags needed.
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 plugin marketplace add patchorbit/domscribe
claude plugin install domscribe@domscribe
copilot plugin install patchorbit/domscribe
gemini extensions install https://github.com/patchorbit/domscribe
Open the Powers panel → Add power from GitHub → enter https://github.com/patchorbit/domscribe/tree/main/domscribe-power.
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"]
}
}
}
1. Inject. The bundler plugin parses each source file, injects HMR-stable data-ds IDs via xxhash64, and records each mapping in .domscribe/manifest.jsonl.
2. Capture. Framework adapters (React fiber walking, Vue VNode inspection) extract live props, state, and component metadata. The overlay UI lets you click any element and see its full context.
3. Relay. A localhost Fastify daemon connects the browser and your agent via REST, WebSocket, and MCP stdio. A file lock prevents duplicate instances across dev server restarts.
4. Agent. Your coding agent connects via MCP to query by source (see what any line looks like live) or process annotations (claim, implement, and respond to UI change requests).
No single competitor combines build-time stable IDs, deep runtime capture, bidirectional source↔DOM querying, and an MCP tool surface in a framework-agnostic way.
The agent-facing surface — tools, prompts, wire schemas, and error envelope — is listed below as a human-readable index.
See the @domscribe/mcp README for detailed tool schemas, response formats, and prompt definitions.
pnpm install
nx run-many -t build test lint typecheck
Conventions are in .claude/rules/. PRs welcome.
Domscribe is a pixel-to-code development tool that bridges the gap between running web applications and their source code.
เครื่องมือ
ยังไม่มีรายการเครื่องมือ เซิร์ฟเวอร์แบบรีโมตจะได้รายการหลังการตรวจสอบสถานะครั้งแรก
FAQ
คัดลอกคอนฟิก stdio สำหรับ Cursor, Claude Desktop, Claude Code หรือ VS Code ได้ในหน้านี้ คอนฟิกนี้ใช้การติดตั้งของผู้เผยแพร่ ไม่ใช่พร็อกซีของ PlugMCP
ระเบียนนี้ไม่ได้ระบุตัวแปรสภาพแวดล้อมที่จำเป็น
Domscribe ทำงานแบบโลคัลผ่าน stdio
ตรวจสอบล่าสุดเมื่อ 2026-11-05 Domscribe is a pixel-to-code development tool that bridges the gap between running web applications and their source code.