Aperture

An AI code editor that checks its own work. Composer plans a change and stages it as a diff. Every staged change is then checked before you apply it: it parses, its imports resolve, the TypeScript compiler passes, the page renders, and the tests pass. The tests run in your browser tab, free, in about a second.

▶ Watch the 30-second demo on YouTube

Demo: aperturesais.grok.me. It plays recorded runs. It does not call Grok, so it does not spend anyone's API quota. A key you add in Settings is yours alone.

Try it in a minute, no API key needed

Needs Node 22.6 or newer.

git clone https://github.com/Hankaws/aperture.git
cd aperture
npm ci
APERTURE_MODEL=replay VITE_AUTH_ENABLED=false npm run dev

Open http://localhost:8080/app and click Fix the off-by-one in listTasks, then Build it. Watch the plan, the staged diff and the checks. The demo project ships with three known bugs and one failing test for each. The fix makes its own test pass, and the other two still fail, so the Tests check is amber: "already failing before this change", not blamed on the edit. Click the chip to see the run. The other two suggested tasks fix the other two bugs the same way.

APERTURE_MODEL=replay plays back recorded agent runs on the built-in demo project (harbor-api) instead of calling a model. It exercises the whole product and costs nothing. VITE_AUTH_ENABLED=false skips sign-in and uses a local in-process database (PGlite), so nothing else needs setting up.

What it does

• Plan, then build. Composer reads the code, posts a plan, and waits for Build it. You can reword, reorder, remove or add steps first. Edits arrive as staged diffs you keep or skip file by file. Nothing touches your files until you apply. Turn off Plan first to have Composer edit straight away; either way, nothing is applied until you Apply.

• An agent board. Every run (its plan, Build it, the test runs and automatic fix that answer it) is one card: working, needs you, review or done, with background jobs alongside. Two runs with staged changes can be compared side by side, file by file (Ctrl/Cmd+J).

• Background runs. Send a task with the clock button (or Ctrl/Cmd+Shift+Enter) and keep working; up to three run at once, beside whatever Composer is doing on screen. Each works on a copy of your files as they were when it started, in this tab, with any model, including the replay demo and a model on your own computer. When the agent finishes, the change goes through the same checks as any other: parse, imports, tsc, the tests and your stage hooks. A red check goes back to the agent once. Then the run waits on the agent board under Review.

  • Open brings it into Composer as its own run, staged and unapplied. If you changed the same file meanwhile, your edits and the run's are merged.
  • If you changed the very same lines, the run waits under Needs you with Run again, which starts the task over on your current files.
  • A run that was working when the tab closed says so after the reload; it does not resume. External agents (ACP) still run as server jobs on Pro.

• Check results on every change. Five checks, each computed from the staged change itself:

  • Parses: the changed code, markup and JSON files parse.
  • Imports resolve: every import in the changed scripts resolves.
  • Types: the real TypeScript compiler, run in a worker in your tab on the staged change. It checks the changed files and the files that depend on them (importers, files that re-export them, and their importers in turn, up to 40), against the whole project and its tsconfig.json, so a change that breaks a caller in another file is caught. An error the files already had is shown amber, not blamed on the change. The editor has no node_modules, so packages are typed any (their types are not there to check against), and so are Node's and a test runner's globals; implicit any is not reported for the same reason. The compiler (about 1.3 MB compressed) loads the first time a Composer turn starts in a TypeScript project and is reused after that. If it cannot run (a project over 600 TypeScript files, say), a lighter check that reads each file on its own stands in, and the row says so. A repository that size, or an older one with years of files, belongs on Agent Check rather than in the browser tab: it reads up to 5,000 files (50 MB) and typechecks up to 3,000 (30 MB) on your runner, with the installed packages' real types. publishes both limits, including a 601-file project the editor refuses and Agent Check still accepts. Counted the same way, nestjs/nest at (13 Oct 2026) is 2,111 TypeScript files: the editor refuses it and Agent Check still reads it. has the count.

Using a real model

Leave out APERTURE_MODEL=replay. Sign in and add your own key under Settings → Models.

Configuration

Everything is optional for local use. Set these in your shell or your host's environment settings, never in a committed file.

Variable	What it does
APERTURE_MODEL=replay	Recorded runs instead of a model; no key, no cost
VITE_AUTH_ENABLED=false	No sign-in. Each browser gets its own anonymous workspace, settings and keys; the plan and usage limits are shared by all anonymous visitors
DATABASE_URL	Postgres for accounts and saved work. Without it, an in-process PGlite database
BETTER_AUTH_SECRET, BETTER_AUTH_URL	Session signing and the public URL when sign-in is on
APERTURE_SECRETS_KEY	Encrypts saved API keys and tokens: any string of 32 or more characters, kept somewhere safe. Without it they are encrypted under BETTER_AUTH_SECRET, and changing that secret makes them unreadable. Set it in every environment that shares the database
APERTURE_SECRETS_KEY_PREVIOUS	The old value while you rotate APERTURE_SECRETS_KEY: still read, and saved secrets move to the new key
GROK_AUTH_ISSUER, GROK_AUTH_CLIENT_ID, GROK_AUTH_CLIENT_SECRET	"Sign in with Grok". Only apps hosted by Grok App Builder have these; email and password sign-in works without them
APERTURE_LOCAL_ENDPOINTS	1 lets a custom model endpoint on http://127.0.0.1 (Ollama, LM Studio) be called from a production server you run yourself. On by default in local dev, off when deployed: there, loopback is the server itself, not your machine
APERTURE_SANDBOX=vercel-oidc	Lets the agent run projects in Vercel Sandbox, when deployed on Vercel
VERCEL_SANDBOX_TOKEN, VERCEL_TEAM_ID, VERCEL_PROJECT_ID	Vercel Sandbox from any other host
PADDLE_ENVIRONMENT	sandbox (Paddle's test mode) or production. Paid plans stay off unless it is one of the two
PADDLE_API_KEY, PADDLE_WEBHOOK_SECRET	Paddle's API key and the webhook destination's secret. Server only
PADDLE_CLIENT_TOKEN	Paddle's client-side token, which loads the checkout. Paddle makes it to be public

Don't set VITE_AUTH_ENABLED=false together with DATABASE_URL. The app refuses that combination on purpose, so a shared database is never opened without sign-in.

Selling Pro and Team

Pro and Team sell server sandbox runs (300 and 1,000 a month), so they can be bought only when both Paddle and the sandbox are configured. Until then the pricing page shows them as coming soon. Paddle is the seller of record and handles payment and sales tax.

1. In Paddle, create a Pro and a Team product, each with a monthly and a yearly price, and put the four price IDs in the variables above.
2. Checkout settings → default payment link: https://<your site>/billing/pay. Paddle reviews the site before approving it for live payments.
3. Notifications → new destination: https://<your site>/api/billing/webhook, with the subscription.* events. Its secret is PADDLE_WEBHOOK_SECRET.
4. Test end to end with PADDLE_ENVIRONMENT=sandbox and Paddle's test cards, then switch to production keys.

A plan changes only when a signed webhook confirms the payment. A failed renewal keeps the plan for 7 days, a cancellation keeps it to the end of the period paid for, and both then move the account to Hobby without deleting anything.

Development

npm run dev        # the app on http://localhost:8080
npm test           # every *.test.ts / *.test.mjs, no build step
npm run typecheck
npm run lint
npm run build      # production build

CI also runs the replay demo end to end in Chromium against a production build (scripts/e2e-demo.mjs; how to run it locally is in AGENTS.project.md), and the signed-in visitor path with npm run build && npm run smoke (scripts/smoke-visitor.mjs).

Read AGENTS.project.md before changing things. It lists the traps in this codebase that type-check cleanly and then fail at runtime, and how each one is verified.

Path	What lives there
src/components/ide/	The editor UI: panels, review strip, checks, Composer
src/lib/agent/	The agent loop, tools, plan/build phases and the replay model
src/lib/runner/	The in-browser test runner
src/lib/workspace/	Files, staged edits, checks, preview rendering
src/lib/sandbox/	Verify runs in Vercel Sandbox
src/lib/indexer/	Code search that the agent uses

See CONTRIBUTING.md to send a change.

License

Aperture's code is under the MIT License. Some scaffolding comes from the Grok App Builder template and is not covered by it. See THIRD_PARTY_NOTICES.md.