creativeintermediate

Live React app builder

Ask for a dashboard, a form, a marketing page. The agent writes JSX into src/, the runtime serves a live preview, the user iterates by chatting. Useful for prototyping, design exploration, and onboarding non-engineers to React.

lines 30cost ~$0.20 per session of light prototypinginstall hub://digitorn/react-builder

Install in one command

digitorn install hub://digitorn/react-builder

What you get

Live React preview that updates as you chat
Type-safe TSX with built-in lint feedback
Atomic per-component edits
No build step in your YAML, the runtime handles Vite

Credentials this template uses

Anthropic Claude

Click each one for the credential setup command, scope guidance, and provider details.

The full YAML, ready to fork

app.yaml

1app:2  app_id: react-builder3  name: "React app builder"4  version: "1.0.0"5  category: "creative"67execution:8  mode: conversation9  entry_agent: builder1011modules:12  workspace:13    config:14      render_mode: react15      entry_file: src/App.tsx16      lint: true1718agents:19  - id: builder20    modules: [workspace]21    brain:22      provider: anthropic23      model: claude-sonnet-4-624      credential:25        ref: anthropic_main26        scope: per_user27        provider: anthropic28    system_prompt: |29      Build the requested UI as React + TypeScript.30      One file at a time. Type-safe. Use design tokens, not inline styles.31      Decompose into focused components, keep App.tsx small.

How it works

workspace render_mode react

Same workspace module, react render mode this time. The runtime spins up Vite, watches src/, hot-reloads on every write. The user sees their app reshape in real time.

lint: true for self-correction

Type errors and lint warnings come back to the agent in the next turn's tool result. The agent fixes its mistakes without you having to point them out.

system prompt for stylistic consistency

The prompt nudges the agent towards a consistent component style: type-safe, focused (no 800-line App.tsx), uses design tokens not inline styles. Tweaking these is the iteration loop, not the underlying YAML.

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 templates

developerStarter coder/templates/starter-coder developerClaude Code clone/templates/claude-code-clone researchDeep research agent/templates/deep-research messagingSlack helper/templates/slack-helper developerPull request reviewer/templates/pr-reviewer opsWeekly digest reporter/templates/weekly-digest knowledgeDocumentation generator/templates/doc-writer messagingVoice assistant/templates/voice-assistant opsScheduled data pipeline/templates/data-pipeline