codeflow.md

CodeFlow.

Chat with agents, get real Next.js code running in a sandbox.

● live · code-flow-hazel.vercel.app $ git source
--- codeflow.yaml
project"CodeFlow"
tagline"Chat with agents, get real Next.js code running in a sandbox."
role"solo · design + full-stack"
status"live · v0.4"
timelineFeb → May 2026 · weekends
commits61
stackNext.js 16 · React 19 · TypeScript · tRPC · Prisma · Postgres · Tailwind · shadcn
infraE2B sandboxes · Inngest · OpenAI / Gemini · Clerk · Vercel
noteslive's offline — ran out of OpenAI credits. starving artist arc.

01#tl;dr

CodeFlow is an AI-powered development platform where you build a working web app by chatting with agents. Describe what you want, the agents generate and execute Next.js code inside a real E2B sandbox, and the result shows up in a split-pane live preview you can keep iterating on.

    • What: chat → working Next.js app, live in a sandbox
    • Hard part: turning long-running agent runs into a UI that stays responsive
    • Why it matters: AI builders are everywhere; almost none of them run the code they generate

02#the problem

Most AI builders either spit out static mockups or hand you a zip and wish you luck. Neither survives contact with real engineering. The thing the agent generates and the thing that actually works aren't the same thing — you find out by trying to run it.

CodeFlow runs actual code in an actual sandbox. The thing you see is the thing that works. You keep talking to it until it's right, instead of restarting from scratch every time you change your mind.

03#architecture

Three async loops glued together: the chat UI, an Inngest background job runner, and an E2B sandbox doing the actual execution. The trick was making the long, slow agent runs feel snappy — you can't await a multi-minute job from a Server Action without freezing the UI.

fig. 01 · message → background job → sandbox → live preview

04#key decisions

01

Inngest background jobsvs.server actions

A single chat message can take minutes — agent reasoning, code gen, sandbox boot, install, execute. Server Actions block the request lifetime; Inngest gives me durable, retryable steps with built-in event publishing back to the UI. Worth the extra moving part.

02

E2B Code Interpretervs.VM-per-user / Docker

Sandboxing untrusted, AI-generated Next.js code is a security problem I don't want to solve. E2B gives me ephemeral isolated runtimes with a clean API, and the cost is per-second so idle sessions don't bleed money.

03

OpenAI default, Gemini interchangeablevs.single model lock-in

Gemini speaks the OpenAI-compatible API, so swapping is one env variable and the agent kit doesn't care. Lets me fall back when one is rate-limiting or cheaper for a given workload.

04

tRPC + TanStack Query

End-to-end types from procedure to React hook. Caught entire categories of bugs at compile time during refactors — especially around the streaming message shape between server and chat UI.

05#walkthrough

01.describe what to build
CodeFlow landing — prompt input focused with a kanban-board request typed in
02.agents go to work
CodeFlow generating an admin dashboard while the Inngest dashboard streams the agent run
03.split-pane preview
CodeFlow with the file tree and a data.ts source file visible alongside the chat
04.live preview
Generated Netflix-style homepage running in the sandbox preview

06#the stack

    • frontend: Next.js 16, React 19, TypeScript, Tailwind v4, shadcn/ui, Radix
    • api: tRPC + TanStack Query — typed from procedure to hook
    • jobs: Inngest + @inngest/agent-kit — durable steps, retries, pub/sub back to UI
    • ai: OpenAI default, Gemini swappable via AI_PROVIDER env
    • exec: E2B Code Interpreter sandboxes
    • data: Prisma + Postgres
    • auth & billing: Clerk + usage tracking with Pro tier rate limits

07#what's next

    • multi-file edit diffs visible in chat in progress
    • session resume across reloads
    • shareable preview URLs
    • writeup: building agent loops that survive cold-start