creative

Build a live react app builder in YAML

An agent that writes React components into a workspace, hot-reloads the preview as you chat.

workspace

The pattern

The workspace module's react render mode turns any agent into a UI builder. Ask for a dashboard, a form, a marketing page. The agent writes JSX into src/, the runtime serves it as a live preview, the user iterates by chatting. Useful for prototyping, design exploration, and onboarding non-engineers to React.

What good looks like

Preview updates within 1-2 seconds of an edit
Stylistically consistent across iterations
Type-safe output that compiles on first try
Reasonable component decomposition (no 800-line App.tsx)

Common pitfalls

Letting the agent rewrite from scratch each turn
Inline styles instead of consistent design tokens
Massive single-file components
No lint feedback, type errors compound

The minimum YAML to ship this

app.yaml

1modules:2  workspace:3    config:4      render_mode: react5      entry_file: src/App.tsx6      lint: true78agents:9  - id: builder10    modules: [workspace]11    brain: { model: claude-sonnet-4-6 }12    system_prompt: "Build the requested UI. One file at a time. Type-safe."

Ship in 5 minutes

Install Digitorn and deploy this agent

# 1. install runtime
curl -sSL https://digitorn.ai/install | sh

# 2. save the YAML above to ~/.digitorn/apps/my-react-builder/app.yaml
mkdir -p ~/.digitorn/apps/my-react-builder
# paste the YAML into app.yaml

# 3. deploy
digitorn deploy my-react-builder

Read the deep dive

10 apps you can ship in 50 lines of YAML

Read article

Newsletter

Get the next post in your inbox.

Engineering notes from the Digitorn team. No marketing, no launch announcements, no "10 prompts that will change your life". Just the things we write that we'd want to read.

Other things you can build

communicationSlack copilot/use-cases/slack-bot developerAutomated code reviewer/use-cases/code-review knowledgeResearch agent with citations/use-cases/research-agent developerDocumentation generator/use-cases/documentation-generator communicationVoice assistant/use-cases/voice-assistant opsScheduled reporter/use-cases/cron-reporter developerPR triager/use-cases/pr-triager knowledgeMeeting note-taker/use-cases/meeting-notes opsEmail triager/use-cases/email-triage

1modules:2 workspace:3 config:4 render_mode: react5 entry_file: src/App.tsx6 lint: true78agents:9 - id: builder10 modules: [workspace]11 brain: { model: claude-sonnet-4-6 }12 system_prompt: "Build the requested UI. One file at a time. Type-safe."

# 1. install runtime curl -sSL https://digitorn.ai/install | sh # 2. save the YAML above to ~/.digitorn/apps/my-react-builder/app.yaml mkdir -p ~/.digitorn/apps/my-react-builder # paste the YAML into app.yaml # 3. deploy digitorn deploy my-react-builder