Digitorn
Digitorn
All templates
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

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.

One-click unsubscribe. We never share your address. Powered by our own infrastructure, not a tracker.

Other templates

developerStarter coder/templates/starter-coderdeveloperClaude Code clone/templates/claude-code-cloneresearchDeep research agent/templates/deep-researchmessagingSlack helper/templates/slack-helperdeveloperPull request reviewer/templates/pr-revieweropsWeekly digest reporter/templates/weekly-digestknowledgeDocumentation generator/templates/doc-writermessagingVoice assistant/templates/voice-assistantopsScheduled data pipeline/templates/data-pipeline