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

# Quick Start

> Get started with OpenBuilder in 5 minutes

This quickstart guide will walk you through building a full stack app using OpenBuilder's core features. By the end, you will be familiar with the end to end process from planning to deployment.

<Info>
  Open OpenBuilder directly in your browser — no installation required.
</Info>

As an example, we will use the following app idea:

> ```
> Build a notes app with user authentication
> ```

## 1. Plan your app

<Frame>
  <video controls className="w-full h-full rounded-xl" src="https://mintcdn.com/openbuilder/FxoUbFw4IR2zywHs/images/quick-start/planning.mp4?fit=max&auto=format&n=FxoUbFw4IR2zywHs&q=85&s=e722b3049418b1092cef65c42c44ec8e" data-path="images/quick-start/planning.mp4">
    Your browser does not support the video tag. This video demonstrates the planning step in OpenBuilder.
  </video>
</Frame>

* Enter app idea
* Give app name
* Review the plan
* **Accept**, **Reject**, or **Chat** to modify the plan

<Tip>
  If you alraedy have a detailed PRD, you can copy and paste the PRD into the initial prompt and OpenBuilder will break it down to logical steps.
</Tip>

## 2. Build the first screen

<Frame>
  <video controls className="w-full h-full rounded-xl" src="https://mintcdn.com/openbuilder/FxoUbFw4IR2zywHs/images/quick-start/frontend.mp4?fit=max&auto=format&n=FxoUbFw4IR2zywHs&q=85&s=0b7f91cd2781e82a057b96fa7b575685" data-path="images/quick-start/frontend.mp4">
    Your browser does not support the video tag. This video shows the process of building the first screen in OpenBuilder.
  </video>
</Frame>

* Approve agent's context selection
* Wait for code changes to finish
* Click **Open App** to inspect the app inside OpenBuilder Browser
* **Chat** to make adjustment or **Start Next Step**

<Tip>
  The app is still a mock up at this stage, core functionalities are likely not implemented yet and will be added during later steps.
</Tip>

## 3. Connect Supabase

<Frame>
  <video controls className="w-full h-full rounded-xl" src="https://mintcdn.com/openbuilder/FxoUbFw4IR2zywHs/images/quick-start/supabase.mp4?fit=max&auto=format&n=FxoUbFw4IR2zywHs&q=85&s=b9d883561728f3d3b35c263fe5530b2f" data-path="images/quick-start/supabase.mp4">
    Your browser does not support the video tag. This video demonstrates connecting Supabase to your project.
  </video>
</Frame>

* Connect to your Supabase
* Approve access to organization
* Return to OpenBuilder and **create a new project**.
* Approve Supabase changes

<Warning>
  Currently we only integrate with new Supabase projects. If you'd like to use your existing Supabase project, let us know here and you will be the first to know when it becomes available.
</Warning>

## 4. Deploy your app

<Frame>
  <video controls className="w-full h-full rounded-xl" src="https://mintcdn.com/openbuilder/FxoUbFw4IR2zywHs/images/quick-start/deploy.mp4?fit=max&auto=format&n=FxoUbFw4IR2zywHs&q=85&s=d6096befcc8256ec5e13b246987059e2" data-path="images/quick-start/deploy.mp4">
    Your browser does not support the video tag. This video demonstrates deploying your app with OpenBuilder.
  </video>
</Frame>

* Click **Deploy** -> **Deploy App** in the OpenBuilder menu bar
* Wait for deployment to complete
* Inspect the deployed URL

<Info>
  Support for custom domain is coming soon.
</Info>

## Next Steps

<CardGroup cols={2}>
  <Card title="Debugging" icon="arrow-up-right" iconType="regular" href="../guides/debugging">
    Fix errors the right way.
  </Card>

  <Card title="Connect APIs" icon="arrow-up-right" href="../guides/connect-APIs">
    Integrate with 3rd party APIs such as OpenAI, Stripe (coming soon), etc.
  </Card>
</CardGroup>

## Common Problems

<AccordionGroup>
  <Accordion title="I cannot connect my Supabase account.">
    * Make sure you still have available project slots in your Supabase organization. If you are on a free Supabase plan, you will have 2 project slots.
    * If you already have 2 or more projects, you can pause one of the projects to make room for new projects.

    If all fails, try creating a New Organization in Supabase on a free tier, and click "Connect to Supabase" again from within OpenBuilder to initiate the access authorization.
  </Accordion>

  <Accordion title="My deployment failed.">
    Make sure all linter errors and runtime errors are fixed before trying to deploy.

    After fixing any remaining errors, initiate deployment again.
  </Accordion>

  <Accordion title="I'm stuck trying to fix an error">
    Use OpenBuilder's debugging tools:

    * For compile/lint errors: Use the automatic quick fix prompts
    * For runtime errors: Click "Fix Error" in the Flow Diagram
    * For UI issues: Use Built-in Screenshot, Attach Image, or Element Selector
    * For unexpected behaviors: Use the Interactive Debugger when prompted

    Check the [Debugging Guide](../guides/debugging) for detailed instructions.
  </Accordion>
</AccordionGroup>