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

# Build your first app

> Create a project from the dashboard, send your first prompts, and see a live preview update in real time.

Follow these steps to go from a blank slate to a running Expo app in Openv2.

<Steps>
  <Step title="Sign in">
    Go to [openv2.dev](https://openv2.dev) and sign in or create an account. Openv2 supports email/password and OAuth sign-in.
  </Step>

  <Step title="Create a project from the Dashboard">
    After signing in you land on the **Dashboard** at `/dashboard`. You have two options:

    * **New project:** Type a one- or two-sentence description of your app in the main input and submit. Openv2 creates a project and opens the workspace at `/chat/{projectId}`.
    * **Existing project:** Select a project from your list to continue where you left off.

    <Tip>
      Keep your initial description brief and focused on the core screen or flow. You'll refine with follow-up prompts.
    </Tip>
  </Step>

  <Step title="Learn the workspace layout">
    The workspace has three main areas:

    | Area          | Purpose                                                                                   |
    | ------------- | ----------------------------------------------------------------------------------------- |
    | **Header**    | Model picker, credits balance, collaborator controls, build actions, and project settings |
    | **Chat**      | Where you send prompts and see the assistant's responses                                  |
    | **Workbench** | Live preview, code editor, file browser, and terminal                                     |

    See [Workbench & editor](/workbench-editor) and [Chat & AI assistant](/chat-ai-assistant) for a deeper look at each area.
  </Step>

  <Step title="Send your first prompts">
    The assistant writes files and runs terminal commands in response to your prompts. Three prompt patterns that work well as starting points:

    **Scaffold a basic structure**

    ```text theme={null}
    Expo app with two tabs: Home (hero image + CTA button) and Profile
    (editable display name stored in React state).
    ```

    **Add navigation**

    ```text theme={null}
    Add a stack navigator: Home → Details screen that receives an item
    ID as a parameter and displays its title and description.
    ```

    **Apply visual polish**

    ```text theme={null}
    Apply a cohesive dark theme with an 8px spacing scale and
    accessible touch targets throughout the app.
    ```

    After you submit a prompt, the assistant may run commands like `npx expo install` in the terminal before the preview updates. Watch the terminal tab to follow along.
  </Step>

  <Step title="Check the Preview">
    Open the **Preview** tab in the Workbench. Once the dev server starts you'll see your app's web build inside a device frame.

    * If the UI looks stale after a change, use the **reload** button in the preview panel.
    * For native APIs and real-device behavior, see [Test on your device](/test-on-device).

    <Info>
      The in-browser preview runs the Expo web target. It's the fastest feedback loop for layout and navigation work.
    </Info>
  </Step>

  <Step title="Understand credits">
    Each completed assistant turn uses **credits**. Your balance is shown in the header.

    * **Free plan:** a daily credit allowance
    * **Paid plans:** larger credit pools, topped up via Stripe

    See [Billing & plans](/billing-plans) for limit details and how to upgrade.
  </Step>

  <Step title="Review your version history">
    When a turn finishes and files have changed, Openv2 snapshots the project. You can browse and restore earlier states from the versions panel—useful when an experiment breaks something that was working.

    See [Versions & history](/versions-history) for details on how to rewind.
  </Step>
</Steps>

## Where to go next

<CardGroup cols={2}>
  <Card title="Test on your device" icon="smartphone" href="/test-on-device">
    Preview your app on a real phone with Expo Go and a QR code.
  </Card>

  <Card title="Prompting tips" icon="message-square" href="/prompting">
    Patterns that produce cleaner code and fewer follow-up turns.
  </Card>

  <Card title="Workbench & editor" icon="layout-dashboard" href="/workbench-editor">
    Explore the code editor, file browser, and terminal in detail.
  </Card>

  <Card title="Versions & history" icon="clock" href="/versions-history">
    Browse snapshots and rewind to any earlier project state.
  </Card>
</CardGroup>
