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

# Build your first web app

> From prompt to live preview in 5 minutes

<Steps>
  <Step title="Sign in">
    Go to [vibely.sh](https://vibely.sh) and sign in. New accounts get free credits — no card needed.
  </Step>

  <Step title="Pick Web App">
    On the new-project screen, choose **Web App**. This selects the `vibely-web` template (Vite + React + Tailwind).
  </Step>

  <Step title="Describe your app">
    Be concrete. "Build a CRM for solo consultants. Contacts, deals with stages, daily activity feed. Use Supabase auth (email + Google). Tailwind styling." beats "make a CRM."

    Tip: include the **golden user flow**, the **data model** in one sentence, and the **look** in one or two adjectives.
  </Step>

  <Step title="Watch the preview mount">
    Within \~10 seconds the right pane opens an iframe at a `*.vibelyagent.com` URL. The dev server is already running at this point — what fills in is the agent writing files into the live tree, hot-reloaded on each save.
  </Step>

  <Step title="Iterate">
    Keep prompting. "Add a kanban view." "Make the sidebar collapsible." "When a deal is dragged to Won, send a Slack message." Each turn appends to the same chat and runs against the same sandbox.
  </Step>

  <Step title="Publish">
    Click **Publish** to get a stable `your-vibelyagent.com` URL, or connect your own domain. See [Publishing](/features/deploy/publish).
  </Step>
</Steps>

<Frame>
  <img src="https://cdn.vibely.sh/doc/v1/web-app-quickstart-1.webp" alt="Pick Web App and describe it" width="1200" height="675" />
</Frame>

## Tips for a good first prompt

* **State the user, not the feature.** "A waitlist signup for indie hackers" gives the agent more to work with than "a form".
* **Pick the data model up front.** Naming the entities ("posts have comments and reactions") prevents three rounds of schema rework.
* **Mention auth early.** Adding auth after the fact requires migrating routes — much cheaper to ask for it from the start.
* **Pick a vibe.** "Minimal, lots of whitespace, monochrome" or "playful, bright, rounded corners" — one phrase is enough to anchor the design.

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

After your first prompt the agent should have:

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

If it shipped a page full of `lorem ipsum`, prompt: "Replace all placeholder text with real content matching the brief." That's a known model failure mode and we patch it on retry.

<Frame>
  <img src="https://cdn.vibely.sh/doc/v1/web-app-quickstart-2.webp" alt="Preview mounts, then Publish" width="1200" height="675" />
</Frame>

## 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`." |
| Plug in Stripe | "Add Stripe checkout for a \$19/mo 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](/integrations/connectors/overview) |

## Next

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

  <Card title="Publish your app" icon="globe" href="/features/deploy/publish">
    Custom domain and how preview URLs work.
  </Card>
</CardGroup>


## Related topics

- [Web App Mode](/features/web-apps/overview.md)
- [Build your first mobile app](/features/mobile-apps/quickstart.md)
- [Web app templates](/features/web-apps/templates.md)
- [Add payments to your app](/features/grow/payments.md)
- [Test and verify your app](/features/testing/overview.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.