Runtime Generative Interface

An experiment in agent-defined frontends: the user opens a SaaS dashboard, then chats with an AI agent that rewrites the UI live by editing source files inside an in-browser sandbox.

The hypothesis: as model capability grows, the SaaS frontend stops being a fixed artifact shipped by the vendor and starts being a negotiation between the user, the agent, and a stable set of backend endpoints. Same data, infinite UIs — one per user, one per task, one per moment.

This repo is a minimal end-to-end demonstrator of that idea.

What you get

• A mock backend (PulseBoard, a fictional B2B SaaS retention-analytics product) exposing a small, clearly-defined set of REST endpoints with realistic mock data.
• A starter dashboard frontend that calls those endpoints.
• A WebContainer sandbox that boots the backend + frontend entirely in the user's browser — no server required.
• A chat panel where the user talks to a Gemini-powered agent. The agent has tools to read and write files inside the WebContainer, so its replies change the running UI.
• A settings panel where the user supplies their own API key (stored in localStorage, never sent to a server we control).

Why it matters

Every SaaS company today employs designers and frontend engineers to ship one UI for everyone. But "everyone" is a fiction — your power user, your CFO, and your new hire all want different views of the same data. Agent-defined frontends let the user be the designer, in the moment, conversationally. The vendor's job collapses to: expose stable endpoints and let the agent do the rest.

This repo is a proof-of-concept, not a product. It is intentionally small, hackable, and open.

Quickstart

git clone <this-repo>
cd runtime-generative-interface
pnpm install
pnpm run dev

Open the printed URL, click Settings, paste your Gemini API key (get one at aistudio.google.com), then open the chat and ask the agent to redesign the dashboard.

Try saying

• "Make this look like a Bloomberg terminal — dense, monospace, dark."
• "I only care about customers at risk of churning. Hide everything else."
• "Turn the revenue chart into a sparkline I can glance at."
• "Add a segments treemap below the KPIs."

How it works

┌────────────────────────────────────────────────────────────┐
│ Outer host app (this repo's src/)                          │
│  ┌──────────────┐  ┌────────────────────────────────────┐  │
│  │ Chat panel   │  │ <iframe> WebContainer              │  │
│  │ (Gemini)     │  │  ├ mock backend (Node, port 4000)  │  │
│  │              │  │  └ frontend  (Vite, port 5173) ←── │  │
│  └──────┬───────┘  └────────────────┬───────────────────┘  │
│         │                           │                      │
│         │  agent tools:             │                      │
│         │   write_file, read_file,  │                      │
│         │   list_files, restart_dev │                      │
│         └───────────────────────────┘                      │
└────────────────────────────────────────────────────────────┘

The agent never touches the backend — only the frontend code. Its tool calls write to the WebContainer's filesystem, Vite hot-reloads, and the user sees the new UI immediately.

Backend endpoints

The mock backend exposes five stable endpoints. The agent is told these are the contract — it should not invent new ones.

Method	Path	Description
GET	/api/kpis	Top-line metrics (MRR, ARR, active customers, churn, NPS)
GET	/api/revenue?range=30d|90d|1y	Revenue time-series
GET	/api/customers	Customer list with health scores
GET	/api/activity	Recent product events feed
GET	/api/segments	Customer segment breakdown

See template/server/index.mjs for shapes.

Repo layout

runtime-generative-interface/
├── src/                  # Outer host app (Vite + React)
│   ├── components/       # Chat panel, settings, WebContainer frame
│   ├── hooks/            # WebContainer + API key state
│   └── agent/            # Gemini client, tool definitions, prompts
├── template/             # The project that boots inside WebContainer
│   ├── server/           # Mock backend (Node + Express-style)
│   └── app/              # Starter dashboard frontend (React + Vite)
├── FEATURES.md           # Detailed plan for what's built and what's next
├── CLAUDE.md             # Notes for future Claude Code sessions
└── README.md             # You are here

Configuration

Users supply their own Gemini API key via the in-app Settings panel. The key is stored in localStorage only and is sent directly from the browser to Google's API. No proxy, no telemetry.

The default model is gemini-3.1-pro-preview (configurable in Settings, alongside gemini-3-flash-preview). Other providers (Anthropic, OpenAI) are planned — see FEATURES.md.

Status

This is a research scaffold. Some surfaces are stubbed. See FEATURES.md for what's wired up and what's a TODO.

License

MIT.