# Prompt to App
URL: https://remocn.dev/docs/product-scenes/prompt-to-app

A prompt types into a chat, files are written, and a site preview builds and deploys

- Install: `npx shadcn@latest add @remocn/prompt-to-app`
- Vibe: tech
- Natural length: 290f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/prompt-to-app
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PromptToApp } from "@/components/remocn/prompt-to-app";

const PromptToAppScene = () => (
  <PromptToApp
    prompt="Build a landing page for Lumen, a candle shop"
    projectName="lumen-site"
    deployUrl="lumen.remocn.app"
    siteName="Lumen"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="PromptToApp"
    component={PromptToAppScene}
    durationInFrames={314}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A prompt types into a chat, the assistant thinks and streams a short plan, then writes each file while a site preview builds beside it. A cursor clicks deploy, and the live URL pops in. Pass `prompt`, `plan`, `files`, `projectName`, and `deployUrl` for the chat side, and `siteName`, `siteHeadline`, `siteBody`, `siteLinks`, and `pours` for the built-in sample page, or pass your own React as `children` to replace the preview. It ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `prompt` | `string` | `DEFAULT_PROMPT` | The request typed into the chat. |
| `plan` | `string` | `DEFAULT_PLAN` | The assistant's short plan streamed after the prompt. |
| `files` | `string[]` | — | File names written one by one during the build. |
| `doneMessage` | `string` | `"Fernway is ready. The booking button links to your reservations page."` | Message shown once all files are written. |
| `projectName` | `string` | `"fernway-site"` | Project name shown in the preview header. |
| `deployUrl` | `string` | `"fernway.remocn.app"` | Live URL shown after the deploy completes. |
| `siteName` | `string` | `"Fernway"` | Brand name on the sample site. |
| `siteEyebrow` | `string` | `"Wine bar · Open late"` | Small line above the sample site headline. |
| `siteHeadline` | `string` | `"Natural wine, small plates, one long table."` | Headline of the sample site. |
| `siteBody` | `string` | `"Low-intervention bottles and seasonal plates in the Mission. Walk-ins welcome until 10."` | Body copy of the sample site. |
| `siteLinks` | `string[]` | `["Menu", "Wine list", "Events", "Visit"]` | Nav links on the sample site. |
| `pours` | `AppPour[]` | `DEFAULT_POURS` | Cards in the sample site grid: name, origin, price, tone. |
| `children` | `React.ReactNode` | — | Your own React content to replace the sample site. |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark interface. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for buttons and highlights. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `ground` | `GshPresetId` | — | Gradient shader preset for the background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader preset parameters. |

## Use when
- A launch video for an AI app builder showing prompt, plan, file writes and the finished site in one take.
- A beat that proves the output is real: files appear, the preview fills in, then a deploy goes live.
- A demo of a coding agent that ends on a shareable URL.

## Don't use when
- You want a short prompt-to-page swell without chat or files — use `prompt-swell`.
- The tool outputs images, not a site — use `ai-image-grid`.
- You want an agent plan with tool calls and checks rather than a site preview — use `agent-run`.