Skip to content
agent-devtools

agent-devtools

An in-page agent devtool that edits your code in place — powered by your own Claude Pro / Max subscription.
Get started GitHub
A real Claude agent picks a broken Checkout grand total, reads OrderSummary.tsx, cart.ts and money.ts, removes a stray * 100, and the total fixes itself live via HMR — all inside the browser tab.

Pick the broken total, ask in plain English, and watch a real Claude agent trace the bug across files and fix it live — without ever leaving the tab.

Edit from the UI

Type a prompt into the floating widget; your local Claude Code edits the source files directly.

Reuses your subscription

No Anthropic API key — the dev server reuses your ~/.claude OAuth session. No extra billing.

Two providers

acp (default) runs Claude Code as a child process; sdk runs it in-process. Switch from the widget.

Page context, automatic

Pick an element and the widget attaches its component metadata (componentName, sourceLocation) to the prompt — works on React, Vue 2, Vue 3, Angular, Svelte, SvelteKit, Next.js (App + Pages), Nuxt 2, and Nuxt 3.

What the picker ships

Section titled “What the picker ships”

When you pick an element, the widget hands the agent the evidence to reason with — not a screenshot:

The agent-devtools composer with a picked element's evidence tooltip showing its source file, component chain, and a unique CSS selector.

  • Component chain — the named ancestors up to the root, e.g. OrderSummary → App.

  • Source file — the authored file the element renders from, so the agent opens the right code first.

  • Selector + outerHTML — the exact node, so the agent can still locate the markup when no source path resolves.

No IDEYour own Claude Pro / Max subscriptionZero bytes in your production bundle

Next steps

Section titled “Next steps”