Recipe

Build-app-from-prompt UI

Clone the Lovable/GPT Engineer UX — prompt box, streaming output, live preview — using Meridian primitives.

Ingredients

Meridian SSE endpoint for streaming responses
Sandbox iframe for live preview rendering
Tailwind prompt box with auto-resize textarea
File tree sidebar populated from generation output

Architecture

User Prompt
  │
  ▼
┌─────────────────┐
│  /api/generate  │  POST → SSE stream
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  File Tree      │  Parsed from stream chunks
│  (left panel)   │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  Preview Frame  │  Renders generated HTML/JS
│  (right panel)  │  in sandboxed iframe
└─────────────────┘

Key Decisions

Streaming over polling

Use Server-Sent Events so the user sees tokens arrive in real time. Fall back to polling only if the SSE connection drops.

Sandboxed preview

Render generated output in an iframe with the sandbox attribute. Never eval untrusted code in the parent window.

File tree from stream

Parse file boundaries from the SSE payload. Each chunk carries a path and content delta. Assemble the tree client-side.

Next Steps

See the API reference for the generate endpoint schema, and the recipes index for related patterns.