npx claudepluginhub m9dfukc/claude-devtools-bridgeMCP devtools bridge — inspect and mutate live application state from Claude via WebSocket
MCP devtools bridge that lets Claude inspect and mutate live application state via WebSocket.
Works with any JavaScript framework — register your state containers and actions, and Claude gets 5 MCP tools to interact with your running app.
Dev Server (Vite / Express / standalone)
┌─────────────────────────────────────────────┐
│ WebSocket Relay │
│ /devtools-bridge │
│ ┌──────────┴──────────┐ │
│ ▼ ▼ │
│ ?role=browser ?role=mcp │
└────────┬──────────────────────┬──────────────┘
│ │
WS client WS client
│ │
┌────────┴───┐ ┌───────┴──────┐ stdio ┌────────┐
│ Browser App│ │ MCP Server │◄───────────►│ Claude │
│ │ │ │ MCP │ Code │
│ atoms │ │ get_state │ │ │
│ derived │ │ set_state │ │ │
│ actions │ │ trigger_action │ │
│ effects │ │ get_logs │ │ │
│ logs │ │ clear_logs │ │ │
└────────────┘ └──────────────┘ └────────┘
Both the browser client and the MCP server connect as WebSocket clients to a relay hosted by your dev server. The relay forwards messages between them.
When Claude Code's sandbox is enabled, MCP servers run as sandboxed subprocesses that cannot bind ports (bind() is blocked by Seatbelt) but can make outbound connections to localhost. By hosting the WebSocket relay on the dev server (which runs outside the sandbox) and having the MCP server connect as a client, the bridge works regardless of whether the sandbox is enabled or not — no special permissions needed.
There are two parts: the client (runs in your browser app) and the MCP server (gives Claude the tools). You also need to mount the relay on your dev server.
The plugin bundles the MCP server and a skill with devtools conventions. No .mcp.json needed.
1. Enable the plugin in .claude/settings.json:
{
"enabledPlugins": {
"devtools-bridge@claude-devtools-bridge": true
},
"extraKnownMarketplaces": {
"claude-devtools-bridge": {
"source": {
"source": "github",
"repo": "m9dfukc/claude-devtools-bridge"
}
}
}
}
2. Install the client as a dev dependency (for browser-side imports):
# npm
npm install -D claude-devtools-bridge@github:m9dfukc/claude-devtools-bridge
# pnpm / yarn berry (v2+)
pnpm add -D claude-devtools-bridge@github:m9dfukc/claude-devtools-bridge
# yarn v1 (classic) — needs explicit transitive dep due to hoisting quirk
yarn add -D claude-devtools-bridge@m9dfukc/claude-devtools-bridge @modelcontextprotocol/sdk
3. Mount the relay on your dev server:
// vite.config.ts
import { devtoolsBridgePlugin } from "claude-devtools-bridge/adapters/vite";
export default defineConfig({
plugins: [
devtoolsBridgePlugin(),
// ... other plugins
],
});
import { mountDevtoolsBridge } from "claude-devtools-bridge/adapters/node";
const server = app.listen(3000);
mountDevtoolsBridge(server);
import { startDevtoolsBridge } from "claude-devtools-bridge/adapters/standalone";
startDevtoolsBridge(5173); // creates its own HTTP server
4. Register state and actions in your app:
import {
initDevtools,
registerAtom,
registerDerived,
registerAction,
wrapAction,
wrapEffect,
} from "claude-devtools-bridge";
import type { DisposeFn } from "claude-devtools-bridge";
// Any object with deref() and reset() works
const appState = {
_value: { count: 0, items: [], view: "home" },
deref() { return this._value; },
reset(val) { this._value = val; },
};
// register* returns a DisposeFn — collect them for cleanup
const disposers: DisposeFn[] = [];
disposers.push(registerAtom("app", appState));
// Register read-only derived/computed state
disposers.push(
registerDerived("app.itemCount", {
deref: () => appState.deref().items.length,
}),
);
disposers.push(
registerAction(
"app.increment",
wrapAction("app.increment", () => {
const state = appState.deref();
appState.reset({ ...state, count: state.count + 1 });
}),
),
);
// Wrap external calls as observable effects
const fetchItems = wrapEffect("api.fetchItems", async (query: string) => {
const res = await fetch(`/api/items?q=${query}`);
return res.json();
});
Open Design — local-first design app exposed to coding agents over MCP. Install once with your agent's plugin command and projects/files/skills are reachable through stdio.
Claude Code plugins for the Slidev presentation framework
Bundled plugins for actuating and debugging the Chrome browser.