AppCreator

The describe-an-app bar with a plan segment and an in-flight create action.

AppCreator is the platform’s front door: one bordered surface whose border warms to primary while you type. While empty it pitches example prompts through a typewriter placeholder; when the prompt is satisfied the create action ignites (neon fill, glow, one shimmer sweep); on submit the whole bar pulses a primary ring and the stripes march until the app exists. The prompt auto-grows, the foot holds a quiet free/paid segment and the create action, Enter creates (Shift+Enter breaks a line), and while creating everything locks with the prompt still visible so the wait has context.

freepaid

"use client";

import { useState } from "react";

import { AppCreator } from "./app-creator";
import { samplePrompts } from "./fixtures";

export const AppCreatorDemo = () => {
  const [creating, setCreating] = useState(false);
  const [created, setCreated] = useState<string | null>(null);

  return (
    <div className="flex w-full max-w-2xl flex-col gap-3">
      <AppCreator
        isCreating={creating}
        placeholderPrompts={samplePrompts}
        onCreate={(prompt, plan) => {
          setCreating(true);
          setCreated(null);
          window.setTimeout(() => {
            setCreating(false);
            setCreated(`${plan}: ${prompt}`);
          }, 1800);
        }}
      />
      {created ? (
        <p className="font-mono text-muted-foreground text-xs">
          created {created}
        </p>
      ) : null}
    </div>
  );
};

export default AppCreatorDemo;

Install

npx shadcn@latest add https://ui.neon.com/r/app-creator.json

Usage

import { AppCreator } from "@/components/neon-ui/app-creator";

<AppCreator
  isCreating={isCreating}
  onCreate={(prompt, plan) => createApp({ prompt, plan })}
/>;

Wiring to Neon

The typed example creates a Neon project per app (POST /projects) through your API layer, then routes to the new workspace. The plan value maps onto your billing tier.

Props

PropType

onCreate(prompt: string, plan: AppPlan) => void

Called with the trimmed prompt and selected plan.

Type(prompt: string, plan: AppPlan) => void

isCreating?boolean

Locks the controls and spins the action.

Typeboolean

Defaultfalse

placeholder?string

Typestring

Default"Describe the app you want to build…"

placeholderPrompts?string[]

Example prompts cycled through the placeholder with a typewriter rhythm while the field is empty.

Typestring[]

defaultPlan?"free" | "paid"

Type"free" | "paid"

Default"free"

actionLabel?string

Typestring

Default"Create app"

disabled?boolean

Typeboolean

Defaultfalse

Accessibility

The plan segment is a radio group; the textarea carries an explicit label. The create button is disabled rather than hidden when the prompt is empty, and the in-flight state announces through the button’s text change.