> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibely.sh/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Build your first web app

> From a blank prompt to a working URL — in five minutes, with no setup.

This page is the focused quick-start for Web App Mode. For the broader product walk-through, see [Quick start](/docs/introduction/quick-start). For the seven-day onboarding arc, see [Your first week](/docs/introduction/your-first-week).

<Steps>
  <Step title="Sign in">
    Go to [vibely.sh](https://vibely.sh) and sign in with Google, SSO, or email.
  </Step>

  <Step title="Pick Web App">
    On the new-project screen, choose **Web App**. You'll be building on Vite + React + Tailwind + TanStack, with Supabase wired in automatically when you ask for auth or a database.
  </Step>

  <Step title="Describe your app, concretely">
    Concreteness beats length. Three things to name:

    * **Who's using it.** *"For solo consultants tracking client relationships."*
    * **The data model in one sentence.** *"Contacts, deals with stages, daily activity feed."*
    * **The feel in one or two adjectives or references.** *"Calm and professional, like Linear meets Notion."*

    Putting them together:

    > *"A CRM for solo consultants — contacts, deals with three stages, daily activity feed. Supabase auth (email + Google). Calm and professional, like Linear meets Notion."*

    See [Art of Prompting](/docs/introduction/prompting-best-practices) for the patterns that consistently land good first turns.
  </Step>

  <Step title="Answer the 3–4 clarifying questions">
    Before writing code, Vibely asks a short batch of follow-ups — usually about the niche, the primary user, the must-have flow, and the visual tone. One-line answers are fine; what matters is that the agent now builds for *your* exact use case instead of a generic CRM/dashboard/site.
  </Step>

  <Step title="Watch the preview appear">
    Within \~10 seconds the right pane opens a live preview at a `*.vibelyagent.com` URL. The agent writes files into the live tree; the preview hot-reloads as each one lands.
  </Step>

  <Step title="Iterate">
    Keep prompting. Small turns work better than big ones:

    * *"Add a kanban view to deals, draggable between stages."*
    * *"Make the sidebar collapse on mobile."*
    * *"When a deal moves to Won, post to Slack `#wins`."*

    For visual tweaks, click any element in the preview and type a change — *"make this CTA bigger and orange"* — and the agent patches just that element.
  </Step>

  <Step title="Publish">
    Project menu → **Publish**. You'll get a stable `<your-slug>.vibelyagent.com` URL within seconds. Add a custom domain when you're ready. See [Publish](/docs/web-app/publish) for access controls, version history, and GitHub export.
  </Step>
</Steps>

## Tips for a strong first prompt

* **Lead with the user.** *"For solo consultants"* gives the agent something to design around. *"A CRM"* doesn't.
* **Name the data model up front.** *"Contacts, deals, activities"* — naming entities prevents three rounds of schema rework.
* **Mention auth early.** Adding it after the fact requires migrating routes. Cheaper to ask for it from the start.
* **Anchor the vibe with references.** *"Minimal like Linear, warm like Notion"* lands far better than *"clean and modern."*

## What "good" looks like at the end of turn 1

After your first prompt, the agent should have produced:

* A multi-page skeleton — home, auth flow, and at least one core screen
* Real components (not `<div>Coming soon</div>` placeholders)
* Working navigation between pages
* Tailwind tokens consistent across pages
* A Supabase schema if you mentioned data

If the agent shipped a page full of `lorem ipsum`, prompt: *"Replace all placeholder text with real content matching the brief."* A known failure mode; a retry usually fixes it.

## Common follow-ups

| Goal                       | Prompt                                                                   |
| -------------------------- | ------------------------------------------------------------------------ |
| Add a route                | *"Add a `/settings` page with profile, billing, and team tabs."*         |
| Add a feature behind auth  | *"Gate the dashboard behind a logged-in check; redirect to `/sign-in`."* |
| Wire in Stripe             | *"Add Stripe checkout for a Pro plan; use Supabase for user tier."*      |
| Send transactional email   | *"Send a welcome email via Resend when a user signs up."*                |
| Connect a third-party tool | See [Connectors](/docs/connectors/overview)                                   |

## Next

<CardGroup cols={2}>
  <Card title="Iterate effectively" icon="pen-to-square" href="/docs/web-app/iterate">
    Make changes without breaking what's working.
  </Card>

  <Card title="Publish" icon="globe" href="/docs/web-app/publish">
    Custom domains, access controls, rollbacks, GitHub export.
  </Card>

  <Card title="What's in the box" icon="cube" href="/docs/web-app/templates">
    The stack and starter setup every web app ships with.
  </Card>

  <Card title="Connectors" icon="plug" href="/docs/connectors/overview">
    Wire third-party services with one prompt.
  </Card>
</CardGroup>