aipeek

Gives AI a peek into — and a hand on — your running browser app. Reads the UI tree (React fiber), semantic DOM, console, network, errors, and store state; drives the page (click, fill, press, wait, drag/drop, clipboard, screenshot) and profiles it. All over plain-text HTTP on your Vite dev server — zero resident context cost, unlike a browser MCP whose tool schemas sit in the model's context whether used or not.

It lives inside the open page (injected client + HMR channel), so it reads React/store internals a DOM-only driver can't and acts on the current tab with no separate browser process — and because it reads semantic text instead of parsing pixels, and batches a whole interaction into one round-trip, the model thinks once, not once per step. It does not open browsers, navigate, or run headless: it's the dev inner loop, not E2E (for that, use Playwright). The connection stays live on its own — it survives edits and dev-server restarts without dropping, so you never babysit it.

Install

npm i aipeek   # or pnpm add aipeek / bun add aipeek

// vite.config.ts
import { aipeekPlugin } from 'aipeek'

export default defineConfig({
  plugins: [aipeekPlugin()],
})

That's it. Start your dev server and your AI agent can see and drive the running app.

You don't memorize endpoints — the agent does

There's a whole surface of HTTP endpoints (read the UI, click, fill, profile, diff…), but it's for the machine, not you. On startup the plugin drops a one-line pointer into your repo's CLAUDE.md, and the full reference sits behind one URL — curl localhost:<port>/__aipeek/help. The agent reads that itself when it needs a command. You just tell it what you want changed in the app.

Two optional hints you can feed the agent

Both are pure extra context for the AI. Add them and it reads your app's state more precisely; skip them and everything still works — it just sees a bit less.

Store snapshots. Hand the agent your MobX/other stores so it can inspect live state:

window.__AIPEEK_STORES__ = { myStore, anotherStore }

Your app's state machine. Expose the variables that define "what screen am I on" so the agent reads them directly (and can check them mid-interaction):

window.__AIPEEK_SCREEN__ = () => ({ view, streaming, modal: openDialog })