Prompt to App

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

Installation

$ pnpm dlx 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.

Props18

Prop	Type	Default
prompt	stringDEFAULT_PROMPT The request typed into the chat.
plan	stringDEFAULT_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	number1 Playback speed multiplier for the whole timeline.
ground	GshPresetId— Gradient shader preset for the background.
groundParams	Partial<GradientParams>— Overrides for the shader preset parameters.

promptstring
The request typed into the chat.
DefaultDEFAULT_PROMPT
planstring
The assistant's short plan streamed after the prompt.
DefaultDEFAULT_PLAN
filesstring[]
File names written one by one during the build.
doneMessagestring
Message shown once all files are written.
Default"Fernway is ready. The booking button links to your reservations page."
projectNamestring
Project name shown in the preview header.
Default"fernway-site"
deployUrlstring
Live URL shown after the deploy completes.
Default"fernway.remocn.app"
siteNamestring
Brand name on the sample site.
Default"Fernway"
siteEyebrowstring
Small line above the sample site headline.
Default"Wine bar · Open late"
siteHeadlinestring
Headline of the sample site.
Default"Natural wine, small plates, one long table."
siteBodystring
Body copy of the sample site.
Default"Low-intervention bottles and seasonal plates in the Mission. Walk-ins welcome until 10."
siteLinksstring[]
Nav links on the sample site.
Default["Menu", "Wine list", "Events", "Visit"]
poursAppPour[]
Cards in the sample site grid: name, origin, price, tone.
DefaultDEFAULT_POURS
childrenReact.ReactNode
Your own React content to replace the sample site.
theme"light" | "dark"
Light or dark interface.
Default"light"
accentstring
Accent color for buttons and highlights.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
groundGshPresetId
Gradient shader preset for the background.
groundParamsPartial<GradientParams>
Overrides for the shader preset parameters.