In-Browser AI Coding Agent (WebContainer)
Overview
A build that runs an AI coding agent entirely inside the browser. It pairs StackBlitz’s WebContainer API, a full Node.js runtime in the browser, with an embedded agent chat widget, so the agent can read and write files, run commands and live-preview the result without any traditional server.
Why It Exists
Interactive coding agents normally need a backend to execute code. WebContainer removes that constraint by running Node directly in the browser. This build explores building an agent experience, chat in, code changes and a live preview out, on that foundation, with the API calls handled via a proxy and worker.
What We Built
A Vite app whose main.js boots a WebContainer instance, mounts a virtual filesystem, and renders a floating agent chat widget over a live preview iframe, with a bridge layer marshalling calls between the UI and the running container. The repo is organised into packages/ with three pieces: sandbox-agent (Dockerised sandbox), agent-worker (a Cloudflare Worker, configured via wrangler.jsonc) and widget (the embeddable chat UI). A comment in the code notes the Agent SDK handles API calls through a Vite proxy, i.e. an agentic tool-use loop driving the in-browser environment.
Technologies & Approach
WebContainer API for serverless, in-browser Node execution; the Claude Agent SDK for the agent’s reasoning and tool-use loop; a Cloudflare Worker to proxy/serve agent requests; Docker for a separate sandbox-agent. Splitting widget, worker and sandbox into packages keeps the embeddable UI, the API edge and the execution sandbox cleanly separated.
Outcome / Impact
Demonstrated that a usable AI coding-agent loop, edit, run, preview, can run with the execution environment living in the user’s browser, validating a lightweight architecture for embeddable agentic coding experiences.
Capabilities Demonstrated
- Building in-browser code-execution sandboxes (WebContainer)
- Embedding agentic chat agents into web UIs
- Agent worker / sandbox orchestration across edge + container
- Agentic tool-use loops driving a live development environment