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

# Quickstart

> Build your first app in 5 minutes

<Info>
  This quickstart shows the "Describe your app" path. If you already have data in Google Sheets, HubSpot, or another tool, check out [Build from data](/build-from-data) for a guided experience that starts from your existing data.
</Info>

## Create your first app

Let's build a simple deal tracker to see Gainable in action. This will take about 5 minutes.

### Step 1: Start a new project

1. Go to [build.gainable.dev](https://build.gainable.dev)

### Step 2: Describe what you want

In the input box, type your first prompt:

<CodeGroup>
  ```text Good prompt wrap theme={null}
  Setup a dashboard with 3 KPIs: Total deals, won deals, and lost deals. 

  Create a table listing deals with customer, amount, assigned to, and close date for each deal; include a "Add new" deal button. 

  Lastly, add a line chart showing deals for each status over the last 12 months by deal close date. 

  Have it all vertically stacked; with KPIs 1st, chart 2nd, and table last.
  ```

  ```text What this creates theme={null}
  - A Deal data model with all your fields
  - A deals page with a table to manage deals
  - Add, edit, and delete functionality
  - A dashboard with KPI cards and a line chart
  ```
</CodeGroup>

<Tip>
  Being specific about your fields (like "deal name, company, and amount") helps Gainable create exactly what you need.
</Tip>

### Step 3: Watch it build

Gainable will show you a plan of what it's going to build, and if you choose to accept it will generate your entire application. You'll see:

1. **Plan preview** - What features will be created; if Gainable finds the request ambiguous it will ask follow-up questions
2. **Build progress** - Watch the build being generated
3. **Your app** - A working application appears in the preview panel with a message telling you what's been done

### Step 4: Use your app

Once the build completes, you can:

* **Add a deal** - Click the "Add Deal" button and fill in the form
* **View your dashboard** - See your data visualized in charts
* **Edit or delete** - Click on any deal to modify it

<Note>
  Your app updates in real-time. If you add a deal, the dashboard chart updates automatically.
</Note>

## Try adding a feature

Now let's add something new. In the chat, type:

```text theme={null}
Add a kanban board view where I can drag deals between status columns
```

Gainable will add a kanban board to your existing app, preserving everything you've already built.

## Tips for success

<AccordionGroup>
  <Accordion title="Be specific about your data">
    Instead of "track customers", say "track customers with name, email, company, and signup date"
  </Accordion>

  <Accordion title="Describe relationships">
    If things are connected, say so: "each project has many tasks" or "contacts belong to companies"
  </Accordion>

  <Accordion title="Iterate incrementally">
    Start simple and add features one at a time. Don't try to build everything in one prompt.
  </Accordion>

  <Accordion title="Request features by name">
    Ask for specific features: "add a pie chart", "add a kanban board", "add real-time updates"
  </Accordion>
</AccordionGroup>

## What's next?

<CardGroup cols={2}>
  <Card title="Learn about prompting" icon="message" href="/prompting/overview">
    Write prompts that get great results
  </Card>

  <Card title="See examples" icon="lightbulb" href="/prompting/examples">
    Copy and adapt real prompts
  </Card>

  <Card title="Explore skills" icon="wand-magic-sparkles" href="/concepts/skills">
    Discover built-in features you can request
  </Card>

  <Card title="Build from data" icon="database" href="/build-from-data">
    Connect existing data sources and build on top of them
  </Card>

  <Card title="Add Gaia Copilot" icon="comments" href="/copilots/overview">
    A conversational assistant inside your app
  </Card>

  <Card title="Add Gaia Autopilot" icon="robot" href="/autopilot/overview">
    Autonomous agents that draft work for approval
  </Card>
</CardGroup>