eregion ⟡

Select a component in your running app, describe the change, and an AI edits the real source. Hot-reload closes the loop, so you see the result in the same window in seconds.

Eregion is an open-source SDK. It drops a dev-only overlay into your app and connects it to a local daemon running a live Claude Agent SDK session, authenticated by your existing Claude Code login. Selecting a component costs no tokens: the message carries only compact references and the AI pulls what it needs through instrumentation tools, so a request costs about the size of your message, not the size of your codebase.

Alt+S    enter selection mode (⟡ shows in the taskbar)
click    select a component (Shift+click adds more)
type ↵   describe the change and press Enter
Esc      clear the selection or leave the mode

Each request becomes a job you watch live: the assistant's text and tool calls in order, file diffs with one-click revert, per-request cost, and a chat to keep iterating.

What it can do

Use cases

• Fast frontend edits without leaving the browser — click a component, say "round the corners and add a subtle shadow," and watch it apply live.
• Edit many components at once, in parallel — fire edits across different components at the same time, each in its own live session, without them mixing.
• Try several versions of one change — generate 2–3 takes on the same request and keep the one you like.
• Change UI in plain language — describe what you want; the AI resolves the source file and edits it, so you don't have to hunt for where a component lives.
• Full-stack in one motion — ask what query backs a component, then edit the frontend and the backend behind it together.

Principles

• Lazy context. Selecting spends no tokens. The AI pulls source and traces on demand through MCP tools, so it never greps your whole repo.
• Warm sessions. The daemon keeps sessions alive, so the prompt cache stays warm and replies are cheap.
• Deterministic resolution. Build-time tagging and static indexes map a DOM node to its source. The AI doesn't guess where a component lives.
• Local only. The daemon binds to 127.0.0.1 behind a per-session token. Nothing leaves your machine beyond the calls the Agent SDK already makes.

Instrumentation tools the AI uses

The daemon exposes an in-process MCP server (eregion) so the model reaches for precise, cheap tools before touching your filesystem:

• get_selection: the components you currently have selected (name, file:line, summarized props, recent requests).
• get_component_source: a focused source window for a selected component, cheaper and more exact than Grep.
• get_backend_trace: the route, handler file:line, and DB queries (statement and duration) correlated to a selection.

Getting started

Prerequisite: Claude Code installed and logged in. Eregion reuses that session, so there's no separate API key.

Run this in your app. It detects your framework, installs only the packages you need, updates .gitignore, and prints the exact wiring:

npm create eregion@latest       # or: pnpm create eregion · yarn create eregion · bun create eregion

Then start your dev server as usual. On Vite and Next.js the build plugin starts the daemon for you, so nothing runs on the side. Press Alt+S and you're editing.

The plugin spawns the daemon once, reuses it across restarts, and stops it with your dev server. Pass viteEregion({ parallel: 4 }) or withEregion(config, { parallel: 4 }) for more concurrent sessions, noDaemon: true to manage it yourself, or run npx eregion-dev by hand.

Manual setup

To wire it yourself, install the daemon and your framework's packages, add .eregion/ to .gitignore, and follow your framework below. Everything is dev-only and becomes a no-op in production.

Vite + React

// vite.config.ts
import { viteEregion } from '@eregion/build';
export default defineConfig({
  plugins: [viteEregion({ appName: 'my-app' }), react()],
  // on WSL under /mnt/c: watch: { usePolling: true }
});

// main.tsx (dev only)
if (import.meta.env.DEV) {
  void import('@eregion/overlay').then(async ({ mount, registerAdapter }) => {
    registerAdapter((await import('@eregion/adapter-react')).reactAdapter);
    const overlay = mount();
    if (overlay) (await import('@eregion/chat-ui')).mountChat(overlay);
  });
}

Next.js (App Router, webpack or Turbopack)

// next.config.ts
import { withEregion } from '@eregion/next';
export default withEregion(nextConfig);

// app/layout.tsx: <EregionDevtools /> inside the <body>
import { EregionDevtools } from '@eregion/next/devtools';

// instrumentation.ts (optional, enables backend traces)
import { registerEregionInstrumentation } from '@eregion/next/instrumentation';
export function register() { return registerEregionInstrumentation(); }

withEregion starts the daemon as next.config loads and publishes the connection env, so next dev is all you run.

Angular

// main.ts (see packages/angular/README.md)
import { initEregion } from '@eregion/angular';
if (typeof ngDevMode !== 'undefined' && ngDevMode) void initEregion();

The daemon statically indexes your @Component decorators (no app build needed) and serves the index to the overlay. Angular has no build-plugin hook to spawn the daemon, so run it alongside ng serve: npx eregion-dev in a second terminal, or add it to your dev script with concurrently.

Node / Bun backend (optional, request to query trace)

// at backend boot, before anything else (dev only, a no-op in production)
import { init } from '@eregion/node-agent';
init();

It instruments HTTP automatically and Express / pg / mysql2 / mongodb when present, then reports handler and SQL to the daemon so get_backend_trace can answer.

Architecture

Browser (app in dev)                          Dev machine
┌────────────────────────────────┐   WS      ┌─────────────────────────────────┐
│ @eregion/overlay + adapters    │◄─────────►│ @eregion/daemon                 │
│ command bar + activity rail    │  token    │  pool of live Agent SDK sessions│
│ network patch (traceparent)    │           │  eregion MCP tools · permissions│
└──────────────┬─────────────────┘           │  Angular indexer · trace store  │
               ▼                             └──────────────┬──────────────────┘
Node/Bun/Next backend                                       │ edits the repo
┌────────────────────────────────┐  POST /trace/ingest      ▼
│ @eregion/node-agent (OTel)     │────────────────► hot-reload closes the loop
└────────────────────────────────┘

The daemon listens on 127.0.0.1, on the first free port in 47100..47199, and every connection must present the session token.

Packages

Try the demo

The repo ships a sample Vite + React app and a mock backend that fakes a real SQL query (with db.* span attributes):

pnpm install && pnpm build
./demo.sh                      # starts the daemon, the mock API, and the sample app

Open the app, fetch http://localhost:3199/api/orders from it, select the component that renders the result, and ask "what query is behind this?".

FAQ

How do I edit React, Next.js, or Angular components with AI in real time? Install Eregion (npm create eregion@latest), start your dev server, press Alt+S, click a component, and describe the change. The edit lands in your real source and hot-reload shows the result in the same window in seconds.

Can I edit multiple components at the same time? Yes. The daemon runs a pool of live sessions (2 by default, more with --parallel N), so edits to different components run in parallel without mixing. You can also generate several variants of a single edit at once.

Does it change my real source code or just the DOM? Your real source. Every edit is a file diff you can review and revert with one click — nothing is a throwaway DOM tweak.

How is this different from a visual page builder or browser devtools? Visual builders generate their own markup and browser devtools only change the live DOM. Eregion edits your actual source files through the Claude Agent SDK, so changes are permanent, reviewable diffs in your repo.

Won't it burn tokens on a large codebase? No. Selecting a component spends no tokens; the AI pulls only the source it needs through MCP instrumentation tools, so a request costs about the size of your message, not the size of your repo.

Is my code sent anywhere? The daemon runs locally on 127.0.0.1 behind a per-session token. Nothing leaves your machine beyond the calls the Claude Agent SDK already makes.

Which frameworks are supported? React (Vite and Next.js) and Angular today, with Vue, Svelte, Solid, and more on the roadmap.

Do I need a separate API key? No. Eregion reuses your existing Claude Code login.

Roadmap: we're looking for contributors

Eregion is young and the surface area is wide. These are the directions we'd most love PRs for. Open an issue to claim one, or propose your own.

Flagship: edit a shared component per usage, not just globally

A shared component like a ChatCard gets rendered all over the app with different props: a compact card in one place, an expanded one in another, an error state somewhere else. Same component, many faces. Today, selecting it edits the one source file, which changes every usage at once. We want Eregion to understand a component's real versions and let you edit just one:

• Discover the component's call sites (usages): the distinct prop configurations one shared component takes across the codebase and the running app. Figma calls these instances, Storybook calls them stories; in code they're call sites. The overlay already detects the sibling instances of the hovered component (instancesOf / hoverKin), which is the seed for a full usage inventory.
• Show each usage as it actually renders, so you pick the one you mean by looking at it.
• Edit one specific usage without breaking the others. Knowing every call site, the AI can add a variant prop, branch on it, or fork the usage safely, instead of editing the shared file and regressing the other places.
• Promote a one-off usage into a first-class variant: a named prop, a cva/variant map, or a generated Storybook story.

This turns "edit the file" into "edit this version."

Other directions we'd merge

Selection & preview

• Live thumbnails for the ×N variants: render each parallel version offscreen and pick the winner by sight.
• Before/after screenshots per edit, shown in the job card.
• Select by state (hover, open, loading, error) and edit that state.
• Select by words instead of clicks ("the primary button", "the third card").

Editing power

• Design-token awareness: detect the theme (CSS vars, Tailwind, a theme file) and route edits through it instead of hardcoded values.
• Responsive editing: select at a breakpoint, edit responsive styles, verify across viewports.
• Accessibility pass: audit the selection (contrast, roles, labels) and fix.
• Test generation: write or update tests for the edited component and run them.
• End-to-end edits over the backend trace: "add a field to this card" touching frontend and the query behind it.

Frameworks & ecosystem

• New adapters: Vue, Svelte, Solid, Qwik, Astro. (Today: React and Angular.)
• More build integrations: Remix, SvelteKit, Nuxt, Vite SSR.
• Editor bridge: jump from an edit to the file in VS Code / Cursor.

Collaboration & delivery

• Open a PR (branch per job) straight from a job's changes, not just a commit.
• A session timeline with grouped checkpoints and richer undo/redo.
• Shared sessions: more than one dev on the same running app.

Intelligence

• Project memory: learn the repo's conventions so edits match house style.
• Team-defined MCP tools: let projects expose their own instrumentation to the agent.
• Re-render and performance hints from the React profiler, with one-click fixes.

Have an idea that isn't here? That's exactly the kind of issue we want to read.

Contributing

Eregion is a pnpm + Turborepo workspace (Node ≥ 20).

pnpm install
pnpm build          # build all packages (topological)
pnpm test           # vitest across the workspace
pnpm typecheck      # tsc --noEmit across the workspace

cd examples/vite-react && pnpm dev   # run the sample app (the plugin starts the daemon)

Issues and PRs are welcome. Keep changes focused, add or update tests alongside behavior changes, and run pnpm test && pnpm typecheck before opening a PR.

License

MIT. See LICENSE.