When we started designing the Code workspace, we had a hypothesis: most AI code generation tools fail because they're disconnected from the environment where code runs. You get a code block in a chat window, you copy it, you paste it somewhere else, you run it, you come back to the chat to report the error. The loop is exhausting.
We wanted to close that loop entirely. The result is a chat-driven workspace where Tripplet writes code directly to a file tree, you see a live preview immediately, and deploy happens with one click. Here's how we built it.
Architecture: Three panes, one state
The workspace has three components: a chat pane (standard streaming chat), a code pane (CodeMirror editor with our file tree), and a preview pane (sandboxed iframe). They share a single source of truth: an in-memory file tree that maps file paths to content strings.
When the model generates a response that includes file operations, our parser extracts structured operations — create, modify, delete — and applies them to the file tree. The code pane re-renders the affected files. The preview iframe reloads after each successful operation set. The user sees the change before the full response has even finished streaming.
The streaming file operations protocol
We designed a lightweight message format for file operations that streams efficiently over SSE. Each operation is a JSON object: `{ op: "create" | "modify" | "delete", path: string, content?: string }`. The model is prompted to emit these before its explanation, so the UI updates happen progressively as the model writes.
For partial file updates — when the model modifies a specific function in a large file — we use a diff format rather than sending the full file content. This reduces token usage by 60-80% on iterative changes and makes the streaming feel immediate.
We handle errors optimistically. If an operation set fails (malformed JSON, invalid path, etc.), we revert the file tree to its last known good state and surface the error in the chat pane. The user can ask for a correction and the model tries again.
Deploy pipeline
One-click deploy packages the current file tree as a zip, uploads it to our deployment infrastructure, and returns a public URL. The full flow takes 8-12 seconds on average. We use Vercel's deployment API under the hood, which means the URLs are fast and globally distributed.
Currently, the Code workspace supports static HTML, CSS, and JavaScript projects, as well as single-page React apps with Babel transforms in the browser. Next.js support and server-side environments are in progress.
We also store deployment history. If you deploy, make changes, and the new deploy breaks something, you can roll back to any previous deploy from the settings dialog in the workspace.