Pi Agent Web — browser-native app builder

Pi Agent Web turns a plain-language request into a working React application. The agent, project filesystem, package installation, dev server, preview, browser inspection, checkpoints, and GitHub deployment all run in the user's browser. Only model inference is remote by default.

Product flow

1. Describe the product you want in chat.
2. The agent creates or edits a React + Vite + TypeScript project in OPFS.
3. A WebContainer installs packages and serves the app in the preview pane with hot reload.
4. The agent inspects and interacts with that preview, fixes runtime errors, and runs the build.
5. Undo restores a local checkpoint. Publish pushes source to main and the built site to gh-pages, then enables GitHub Pages.

Large or ambiguous requests enter plan mode first. Small edits execute directly. The agent runtime is based on Pi's tool loop and persistent sessions; it is model-agnostic rather than tied to Grok or any other provider.

Models and privacy

• Managed cloud model: the default preset calls the same-origin /api/llm proxy. Configure the server with LLM_BASE_URL, LLM_API_KEY, and LLM_MODEL.
• Bring your own model: OpenRouter and compatible remote presets remain available. Browser-held API keys are stored in sessionStorage, so they disappear when the tab session ends.
• Optional local inference: the existing WebGPU GGUF path remains available for capable devices.

Project files, chat history, Pi sessions, and checkpoints are stored locally in OPFS/IndexedDB. Source code is sent to the selected model only as part of the agent context. GitHub credentials are also session-scoped and sent directly to GitHub's API.

Run locally

npm install
npm run dev          # http://localhost:5050
npm test -- --run
npm run build

WebContainers require cross-origin isolation. Vite supplies the required COOP/COEP headers during development. A production host must provide equivalent headers (the included service-worker fallback supports static hosts such as GitHub Pages).

To run the optional API server:

LLM_BASE_URL=https://provider.example/v1 \
LLM_API_KEY=... \
LLM_MODEL=your-model \
node server/index.js

The server preserves the provider's OpenAI-compatible streaming response, keeps the provider key off the client, forces the configured model, and applies per-IP rate limiting.

Architecture

Chat UI -> Pi agent loop -> OPFS workspace <-> WebContainer (npm + Vite)
                |                                  |
                |                                  +-> sandboxed live preview
                +-> file, shell, browser, plan, checkpoint and publish tools

Cloud preset -> same-origin model proxy -> OpenAI-compatible provider
BYO preset   -> provider API directly from the browser
Publish      -> GitHub Data/Pages APIs

Core implementation lives in src/pi, the browser project runtime in src/runtime, local durable state in src/lib/localProjectStore.ts, and the model proxy in server/index.js.