aie

v1.1.1

Published

16 days ago

Point-and-click feedback for the HTML artifacts an AI agent builds — annotate elements in the browser and deliver them to a specific running Claude Code instance.

0High
0Medium
0Low

arafathusayn

claude-code ai-agent html annotate review feedback bun cli

aie: ai editor

A point-and-click visual editor you embed in your own React app, at dev time. Wrap your app in <AIE>, click any element in the running UI, and tell your local Claude Code what to change — it edits the source behind that element and replies in a floating chat. Nothing ships to your end-users.

Point-and-click → source edits. Toggle Annotate, click an element, and type what you want changed. Your local Claude Code edits the code behind it.
Works across your stack. Next.js (App Router), TanStack Start, React Router, and plain Vite/React — Server Components included. The agent jumps straight to the right file.
Live chat and layout hints. Replies stream into a draggable panel that shows whether the agent is waiting, listening, or working, and it flags real layout bugs — overflow, clipped or overlapping text — alongside your notes.
Zero cost in production. Gate it with enabled and it disappears: no overlay, no listeners, no network. Safe to leave in the tree you ship.

Get started

The CLI needs Bun — install it first. The aie/react component works in any React toolchain (Vite, Next.js, TanStack Start, React Router).

1. Install the CLI

Your local Claude Code drives the editor through this command.

bun add -g aie       # global `aie` command
bun update -g aie    # upgrade anytime

No global install? Prefix any aie … command with bunx aie@latest.

2. Add the wrapper to your app

The same package provides the aie/react component:

bun add aie          # or: npm install aie · pnpm add aie · yarn add aie

react (>= 18) is a peer dependency you already have. It's dev-only and compiles to a passthrough in production (step 3).

3. Wrap your app with `<AIE>`

import { AIE } from "aie/react";

export default function Root() {
  return (
    <AIE
      sessionId="my-app"
      serverUrl="http://localhost:4388"
      enabled={process.env.NODE_ENV !== "production"}
      sourceRoot={process.cwd()}
    >
      <App />
    </AIE>
  );
}

For Next.js (App Router), wrap {children} in app/layout.tsx:

// app/layout.tsx
import { AIE } from "aie/react";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AIE
          sessionId="my-app"
          serverUrl="http://localhost:4388"
          enabled={process.env.NODE_ENV !== "production"}
          sourceRoot={
            process.env.NODE_ENV !== "production" ? process.cwd() : undefined
          }
        >
          {children}
        </AIE>
      </body>
    </html>
  );
}

| Prop | Default | What it does | | ------------ | ---------- | ------------------------------------------------------------------------- | | sessionId | required | Stable id for this app. Pass the same value to the agent as --session. | | serverUrl | required | URL where aie serve runs. No default — set it explicitly. | | enabled | true | Set false (or gate on NODE_ENV) to keep the editor out of production. | | sourceRoot | — | Optional, dev-only. Your project root, so the agent opens the exact file. Usually process.cwd(). |

4. Install the `/aie-listen` skill

The package ships a Claude Code skill at node_modules/aie/skill/SKILL.md. Copy it into a skills directory to get the /aie-listen slash command:

# project-scoped (commit it so your team gets it)
mkdir -p .claude/skills/aie-listen
cp node_modules/aie/skill/SKILL.md .claude/skills/aie-listen/SKILL.md

# or global, for every project
mkdir -p ~/.claude/skills/aie-listen
cp node_modules/aie/skill/SKILL.md ~/.claude/skills/aie-listen/SKILL.md

5. Start listening, then point-and-click

In your repo's Claude Code session, run the skill — that session becomes the agent:

/aie-listen --session my-app

It starts listening and boots the server for you. Now, in your running app:

The floating aie panel is draggable, collapses to a bubble, and toggles with Ctrl + A + I.
Toggle Annotate, click an element, type, and press ⌘/Ctrl + Enter. The agent edits the source and replies in the chat.

Prefer to drive it by hand? Three commands are all you need:

aie serve                          # start the server on :4388 (also auto-starts on first poll)
aie poll  --session my-app         # wait for the next feedback batch
aie reply --session my-app "done"  # send a reply into the chat

CLI reference

Target a session with --session <id> (matching your <AIE sessionId>), or a file path for a standalone HTML artifact. Add --port N (default 4388, or set AIE_PORT).

| Command | What it does | | ---------------------------- | ---------------------------------------- | | serve | Start the coordination server. | | poll --session <id> | Wait for the next feedback batch (JSON). | | reply --session <id> "msg" | Send an agent message into the chat. | | open --session <id> | Register or resume the session. | | end --session <id> | End the session. | | stop | Stop the server. | | key --session <id> | Print the session key. |

License

Proprietary — UNLICENSED. Published builds ship compiled JS and type declarations only.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme