Your First App

This is the extended version of the Quickstart. We’ll build a real app step by step, explaining what happens at each stage and which tool (MCP or CLI) handles each move.

What we’re building

A team standup tracker. A simple web app where team members post daily standups and can see what everyone else is working on. It will have:

• A clean landing page
• A standup form (what I did, what I’m doing, blockers)
• A feed showing today’s standups
• Deployed to a live URL

Step 1: Describe the app

Open your AI editor (Claude Code, Cursor, etc.) and type:

With mistflow, build me a team standup tracker called "StandupFlow".
It should have a landing page with a hero section, a form where team
members can post their standup (yesterday, today, blockers), and a
feed showing today's standups from all team members. Use a clean,
modern design.

Tip

Be descriptive. The more detail you give, the better the result. Mention specific features, design preferences, and layout ideas.

Step 2: Answer a couple of questions

Mistflow reflects back what it understood and asks 1-2 clarifying questions, things like who the app is for and whether it needs authentication. Just answer naturally.

Then you’ll see a brief summary of what will be built along with acceptance criteria for each feature (these become the feature manifest). If something’s missing, just say so:

Also add a "streak" counter showing how many consecutive days
someone has posted.

When you’re happy with the summary, confirm it and Mistflow proceeds.

Note

Planning runs via mist_plan under the hood, the CLI path, because the backend can take 30-150s to generate the plan and that would blow past MCP’s 60s tool-call ceiling.

Step 3: (Optional) preview a mockup

Before a single line of app code is written, you can ask:

Show me a mockup first.

Your editor runs mist_mockup, which generates a grayscale HTML wireframe from the plan. Open the file it points to, review it, and ask for changes (“make the hero shorter”, “add a pricing section”), each round regenerates. When you’re happy:

Looks good, lock it in.

Step 4: Watch it build

Mistflow scaffolds the project with mist_init, runs mist_install in your shell, and then your AI editor works through the plan one step at a time by calling mist_implement repeatedly. Each call returns rich context, existing CRUD, integration blueprints, stack conventions, acceptance criteria, so the editor writes correct code the first time.

You’ll see React components, Drizzle schemas, Tailwind styles, and server actions land in your project as it goes. You’ll also see contracts/ scaffolded alongside db/schema.ts, that’s the integration contract layer that keeps everything in sync when the schema changes.

Step 5: Deploy

Once building is done, Mistflow deploys with mist_deploy:

Deployed! https://standupflow.mistflow.app

Step 6: QA

Your editor runs mist_qa against the live app. It drives a headless browser through the plan’s acceptance criteria, reports what passed and what didn’t, and marks verified criteria in the manifest. If something failed, you’ll see it here before the URL is shared with anyone.

Check progress yourself at any point:

mist_project action=`get`          # planned → implemented → verified
mist_debug             # what's still unverified

Step 7: Iterate

Don’t like something? Just tell your AI:

Make the form more compact, put all three fields in a single row
on desktop. And change the accent color to indigo.

Your editor edits directly (single-file cosmetic changes skip the plan step), then runs mist_build locally to make sure nothing broke, and mist_deploy redeploys. Your live URL updates within seconds.

For bigger changes (new data model, third-party integration, multi-page feature), your editor will run mist_plan again with your existing plan as context and then implement the new steps.

What to try next

• Add a custom domain: Set up standupflow.dev as the custom domain
• Check your dashboard: Open app.mistflow.ai to see build history and provenance
• Inspect the manifest: Run mist_project action=get“ to see which criteria are verified and which are still outstanding

Tips for great results

1. Be specific about design. “Clean and modern” works, but “Stripe-style with lots of whitespace and a blue accent” works better.
2. Iterate in small steps. Instead of describing 10 changes at once, make them one or two at a time.
3. Check the manifest. mist_project action=get“ tells you what’s actually verified vs what’s only implemented, closing that gap before shipping avoids regressions.
4. Check the dashboard. It shows deployment logs, build errors, and feature provenance, your debugging starting point.