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-builderRead 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-botdeveloperAutomated code reviewer/use-cases/code-reviewknowledgeResearch agent with citations/use-cases/research-agentdeveloperDocumentation generator/use-cases/documentation-generatorcommunicationVoice assistant/use-cases/voice-assistantopsScheduled reporter/use-cases/cron-reporterdeveloperPR triager/use-cases/pr-triagerknowledgeMeeting note-taker/use-cases/meeting-notesopsEmail triager/use-cases/email-triage