> ## 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.

# Quick start

> Build and publish your first Vibely app in about ten minutes, from your first prompt to a live URL you can share.

Build your first app and put it live on the web in about ten minutes. There is nothing to install and nothing to configure. You describe what you want, Vibely builds it, and you publish it to a real URL you can share.

<Frame>
  <img src="https://cdn.vibely.sh/doc/v1/quickstart-1.webp" alt="Build and publish your first app" width="1200" height="675" />
</Frame>

In this guide you build a website for **Little Fern**, an imaginary neighborhood cafe: a homepage with an interactive menu, opening hours, and a location section. It stands in for anything you'd rather build, so swap in your own idea at any step. When you finish, [From idea to store](/guides/from-idea-to-store) walks through a full product journey.

<Note>
  Building with Vibely uses [credits](/features/account/credits). The Free plan includes 5 free credits a day plus 5 a month, which is enough to finish this guide. See [Plans](/features/account/plans) for what each plan includes.
</Note>

<Steps>
  <Step title="Create your account">
    [Sign up for free](https://vibely.sh/signup) with Google or email. After a short setup, Vibely opens the dashboard with your personal workspace ready. For details, see [Create an account](/introduction/create-account).
  </Step>

  <Step title="Describe your app">
    The prompt box ("Ask Vibely to create a web app") sits in the middle of the [dashboard](/introduction/dashboard). Keep **Web** selected above it, and describe what you want in plain language.

    Try this prompt, or adapt it to your own idea:

    ```text wrap theme={"system"}
    Build a website for Little Fern, a neighborhood cafe. Include a warm hero section with a headline and a photo, an interactive menu where visitors filter items by category (coffee, breakfast, lunch, pastries), an opening hours section, and a location section with the address and a short "find us" description. Use realistic sample content throughout. Cozy, welcoming design. Works well on mobile. No login or database yet.
    ```

    The last line matters. Keeping your first version free of logins and databases means there is less to go wrong, and you can add both later with a single prompt.

    <Accordion title="Use your own idea instead">
      Adapt one of these starters, or write your own. The steps in this guide stay the same.

      ```text wrap theme={"system"}
      Build an internal tool for tracking my team's equipment: a searchable table of items with name, owner, status, and return date, plus a form to add new items. Use realistic sample data. No login or database yet.
      ```

      ```text wrap theme={"system"}
      Build a dashboard for a subscription business showing monthly revenue, active customers, and churn as charts, with a recent signups table. Use realistic sample data. No login or database yet.
      ```

      Three things make a first prompt work, and none of them is length: name the user, not the feature; name the data in one sentence; and name a vibe ("minimal, lots of whitespace" or "playful, bright, rounded corners"). More in [Prompting best practices](/prompting/best-practices).
    </Accordion>

    <Accordion title="Build a mobile app instead">
      Select **Mobile** above the prompt box to build a native iOS and Android app with Expo. You preview it in the browser and on your phone through Expo Go. Mobile projects need a Pro plan or higher. See [Build your first mobile app](/features/mobile-apps/quickstart).
    </Accordion>

    <Accordion title="Start from a template instead">
      If you'd rather begin from a working app than a blank prompt, open **Templates** in the sidebar, pick one, and use it as your starting point. Everything below still applies. See [Templates](/features/design/workspace-templates) and [Remix a project](/features/projects/remix).
    </Accordion>
  </Step>

  <Step title="Watch the first version appear">
    Vibely creates your project and opens the [editor](/features/projects/editor): the [project chat](/features/projects/chat), where you talk to Vibely, and the [preview](/features/projects/preview), where your app runs live. The preview usually appears within seconds, and fills in as Vibely writes files into the running app.

    You don't have to wait in silence. Send a follow-up while Vibely works and it is queued to run next.

    Everything you see is a real, working app, and the code behind it is yours. Every change is saved as a [version you can restore](/features/projects/history), so nothing you do next can break it permanently.
  </Step>

  <Step title="Make a change">
    Ask for one change at a time and check the preview after each. For example:

    ```text wrap theme={"system"}
    Add a "Today's specials" section between the menu and the opening hours, highlighting two menu items with a short description and price.
    ```

    If the app works but doesn't look or feel like you pictured, say that in plain words too. This is a perfectly good prompt:

    ```text wrap theme={"system"}
    Make the whole site feel warmer and less corporate.
    ```
  </Step>

  <Step title="Tweak it by pointing">
    For small visual changes, pointing beats describing. Turn on **Edits** in the composer, click the exact element in the preview, and say what should change. See [Visual edits](/features/design/visual-edits).
  </Step>

  <Step title="Check that it works">
    Before publishing, spend a few moments testing your app:

    * Click every button and link.
    * Try the interactive parts: filter the menu by every category.
    * Switch the preview to a phone-sized view. Most people will open your link on their phone.

    If something is off, tell Vibely exactly what is wrong and where:

    ```text wrap theme={"system"}
    In the menu, clicking the pastries filter shows no items. It should show the pastry items.
    ```

    If the preview shows an error, select **Try to fix** on the error card in the chat. Repair turns don't cost credits.
  </Step>

  <Step title="Publish">
    Select **Publish** in the top right of the editor. Vibely suggests a `vibelyagent.com` web address, which you can edit, and asks who can see the website. Select **Publish** to deploy. After a short build, your app is live at its own `vibelyagent.com` URL. Send the link to a friend, or [invite them to the project](/features/collaboration/sharing) to build together.

    One thing surprises most new users: **your live site is a snapshot**. Later changes show up in the preview straight away, but the live site only changes when you publish again. The publish panel marks this as **Unpublished changes**; select **Update** to push them live. See [Publish your app](/features/deploy/publish).
  </Step>
</Steps>

That's the whole loop: describe, refine, publish. Every app you build in Vibely, however ambitious, is this loop repeated.

## What "done" looks like after the first turn

The first response should be a real app, not a skeleton:

* More than one section or page, with working navigation.
* Real components rather than "coming soon" placeholders.
* Consistent styling throughout.
* Sample content that reads like your brief, not `lorem ipsum`.

If you got placeholder text, prompt: *"Replace all placeholder text with real content matching the brief."* One retry usually fixes it.

## Other ways to start a project

A typed prompt is the most common starting point, but not the only one:

* **Attach a design or screenshot**: use the **+** menu in the prompt box to add a mockup, a sketch, or a screenshot of a layout you like, and Vibely uses it as a visual reference. See [Project chat](/features/projects/chat).
* **Start from a template**: open **Templates** in the sidebar and start from a working app. See [Templates](/features/design/workspace-templates).
* **Build from a link**: point Vibely at a page and it rebuilds the layout as a starting point. See [Build from a URL](/features/design/build-from-url).
* **Start from a chat**: bring a conversation where you already worked the idea out. See [Build from a chat](/guides/build-from-chat).

<Tip>
  You can also build from your AI tools. Connect the [Vibely MCP server](/integrations/vibely-mcp-server) to Claude, ChatGPT, Cursor, Claude Code, or Codex, and create projects without opening Vibely.
</Tip>

<Frame>
  <img src="https://cdn.vibely.sh/doc/v1/quickstart-2.webp" alt="Build and publish your first app" width="1200" height="675" />
</Frame>

## Keep going

<Card title="From idea to store" icon="map" href="/guides/from-idea-to-store">
  Ready for a real product? The full journey: shape an idea, build in loops, add a backend, test, and ship.
</Card>

<CardGroup cols={2}>
  <Card title="Prompting best practices" icon="keyboard" href="/prompting/best-practices">
    Get better results with clearer prompts.
  </Card>

  <Card title="Add a backend" icon="database" href="/integrations/supabase">
    Store data and sign in users with your own Supabase.
  </Card>

  <Card title="Use your own domain" icon="globe" href="/features/deploy/custom-domain">
    Put your published app on a domain you own.
  </Card>

  <Card title="Build your first mobile app" icon="mobile-screen" href="/features/mobile-apps/quickstart">
    Expo, previewing on a real device, and shipping to the stores.
  </Card>
</CardGroup>


## Related topics

- [Optimize your app for SEO and AI search](/features/grow/seo.md)
- [Dashboard overview](/introduction/dashboard.md)
- [Create an account](/introduction/create-account.md)
- [FAQ](/faq.md)
- [Publish your Vibely project](/features/deploy/publish.md)


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