AppCafe Docs

Workflow Mode

Understand the step-by-step generation pipeline.

How generation works

When you submit a prompt, AppCafe runs a multi-step AI workflow:

  1. Planning — The AI analyzes your prompt (or refined prompt) and produces a detailed plan: pages, components, data models, and relationships.
  2. Page generation — Each page is built one at a time. You can follow the progress in the workflow panel.
  3. Data models — If your app needs a database, the AI creates models, relationships, and sample data automatically.
  4. Image generation — Hero images, section backgrounds, and placeholders are generated with Google AI to match your app's content.
  5. Assembly — All pages, components, and assets are stitched together into a single coherent Next.js project.

The workflow panel

During generation you'll see a timeline of steps on the left and a live preview on the right. Each step shows:

  • A status indicator (pending, running, complete).
  • A short summary of what the AI decided at that step.
  • Expandable details if you want to inspect the raw plan.

Regenerating

After the initial generation you can:

  • Edit and regenerate — Change your prompt or answer different refinement questions, then regenerate the entire app.
  • Edit individual pages — Use the visual editor or chat to update specific pages without regenerating everything.

Cost tracking

Each generation consumes AI credits. You can view your credit usage on the Cost Analytics page in the dashboard. Image generation and LLM calls are tracked separately.

On this page