A 10-part practical series on building an AI app builder with Next.js, Prisma, and WebContainer. It covers streaming chat, parser safety, workspace context engineering, state synchronization, and in-browser preview infrastructure end to end.
Before you write a line of code, you need to understand the four non-trivial problems hiding inside "chat → edit files → preview". This post maps the full architecture, explains...
Every feature in this app—the AI context, the workbench, the preview—reads from the same FileEntry table in SQLite. This post explains why that single-source design matters, how to seed a...
The system prompt is not documentation—it is the schema that your parser reads. This post builds the Message table, validates POST bodies so you never trust the client for chat...
You need two consumers of the same HTTP response stream: one for the browser so text appears token by token, one for the server so the full reply gets saved....
The model can output anything. Your parser must handle repeated paths (last wins), path traversal attempts (reject silently), unclosed fences (discard), and parse failures that must not roll back an...
Without context, the model edits blind. On turn two it might rewrite a file it has never seen. This part builds the workspace snapshot: a selection algorithm that picks spine...
The workbench needs three things: a file tree loaded from the database, a REST API to save/delete/rename with the same path rules as the parser, and a CodeMirror editor that...
Three things write to the same file simultaneously: the user types a draft, the AI applies changes via a background transaction, and router.refresh() reloads server props. Without a merge policy,...
While the model is streaming, a fenced code block is open—there is no closing fence yet. Your renderer must handle that state without crashing or showing raw backticks. This part...
WebContainer boots a full Node.js environment in the browser using WebAssembly and SharedArrayBuffer. SharedArrayBuffer requires cross-origin isolation—but you cannot apply that globally without breaking third-party scripts. This part scopes the...