@ibh/tube

A floating dev tool you drop into any React app. Pick an element, scribble on it, type a prompt — Claude reads the DOM + your screenshot and edits the code. Browser ⇄ WebSocket ⇄ tube ⇄ MCP (stdio) ⇄ Claude.

Get started

# 1. install
npm i -D @ibh/tube

// 2. mount the dev tool
import { TubeDevTools } from '@ibh/tube';

export default function App() {
  return (
    <>
      {/* your app */}
      <TubeDevTools />
    </>
  );
}

# 3. register tube as a Claude Code MCP server (stdio — recommended)
claude mcp add tube -- npx @ibh/tube --stdio

That's it. The island appears in the corner. Click an element, type, hit send — Claude picks it up. Claude Code spawns npx @ibh/tube --stdio on demand, so you don't need to keep a separate server running.

Fails? Run claude mcp remove tube first, then re-run the add command.

Or via .mcp.json

Equivalent to step 3, but committable to your repo:

{
  "mcpServers": {
    "tube": {
      "command": "npx",
      "args": ["@ibh/tube", "--stdio"]
    }
  }
}

What it does

• Select elements anywhere on the page and prompt Claude on them.
• Draw & annotate on top of the UI — strokes + text + a captured screenshot.
• Simple prompt — ⌘⇧P (or cmd-click the island) to fire off a one-off prompt with the page screenshot, no selection required.
• Inspect spaces, gaps, and sizes on hover.
• Queue prompts; track each one's status (queued → working → done) per task in the browser.
• Revert · edit · follow up — every prompt can be undone, refined, or chained.
• Persistent — prompts survive reloads and server restarts.
• Hotkeys — ⌘⇧K opens the island; each menu item has its own shortcut shown next to it.

Auto-pick new prompts

Paste this into a connected Claude session so it polls the queue and handles new prompts without being asked:

/loop 20s go through tube tasks

Multiple projects

Auto-discovery matches the consumer app's package.json name to the running tube subprocess, so two projects open in two terminals stay separate without any manual port config. If you do need to pin a port (e.g. running multiple tubes from one browser tab), pass it explicitly:

npx tube --port 4454 --ws-port 4455

<TubeDevTools port={4455} />

HTTP transport (legacy)

If you'd rather run a standalone tube server and have Claude Code talk to it over HTTP:

npx tube
claude mcp add --transport http tube http://localhost:4444/mcp/<project-name>

<project-name> matches your package.json name (URL-encode @scope/pkg → %40scope%2Fpkg). The CLI prints the exact command on startup.

License

MIT © Ilyass Ben Hakim