A split-pane generative UI application. Write markdown on the left, get live interactive components on the right. The markdown IS the state — it contains both human-readable descriptions and structured component schemas. Hit "Apply" to send the markdown to an LLM which restructures it and generates UI components.
- Node.js 18+
- Python 3.10+
- Azure OpenAI access (gpt-5 deployment)
npm installcd packages/api
pip install -r requirements.txtcp packages/api/.env.example packages/api/.envEdit packages/api/.env with your Azure OpenAI credentials:
AZURE_OPENAI_ENDPOINT=https://your-resource.openai.azure.com
AZURE_OPENAI_API_KEY=your-api-key
AZURE_OPENAI_DEPLOYMENT=gpt-5
AZURE_OPENAI_API_VERSION=2025-01-01-preview
Start both servers:
# Terminal 1 — API server (port 8000)
npm run dev:api
# Terminal 2 — Next.js dev server (port 3000)
npm run dev:webOpen http://localhost:3000.
- Write a description of the UI you want in the markdown editor
- Click Apply — the markdown is sent to Azure OpenAI
- The LLM returns updated markdown with component specifications
- Components render as interactive widgets (tables, forms, checklists, etc.)
- Interact with components locally (no LLM round-trips for clicks/edits)
- Modify your description and Apply again — component state is preserved
| Type | Description |
|---|---|
table |
Editable table with computed values |
form |
Input form with various field types |
checklist |
Toggleable items with progress bar |
counter |
Increment/decrement with optional bounds |
metric |
KPI display with change indicator |
chart_bar |
Horizontal bar chart |
tabs |
Tabbed container with child components |
toggle |
On/off switch |
card |
Static display card |
text |
Styled text block |
grid |
Layout grid for child components |
code |
Syntax-highlighted code block |
divider |
Horizontal rule |
packages/
web/ — Next.js frontend (TypeScript, Tailwind CSS)
api/ — Python FastAPI backend (Azure OpenAI proxy)