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

# Build Your First Website

> Go from a prompt to a live website with a database, payments, and custom domain.

This guide walks you through building a website from scratch. You describe what you need, the agent builds it, and you deploy it live.

<Steps>
  <Step title="Select Website as your artifact type">
    On the home dashboard, click the artifact picker and select **Website** (or type directly and mention you want a website).

    <Frame caption="The artifact picker with Website selected.">
      <img src="https://pub-51091dcf1e9d4b04bb2e74f489c4f346.r2.dev/2be0ee91550696120d95cffa72128535992173537a4a3dd1605417ec2b980acc.png" alt="Home dashboard showing the artifact picker with the Website option highlighted" />
    </Frame>
  </Step>

  <Step title="Describe your website">
    Tell the agent what your site needs to do. Be specific about features, pages, and functionality.

    <Prompt description="Landing page for a subscription service.">
      Build a landing page for my coffee subscription service. I need a hero section, a pricing table with three tiers, an email signup form, and a footer with social links. Dark theme, modern design.
    </Prompt>

    <Prompt description="SaaS tool with user accounts.">
      Build a project management app where users can sign up, create projects, add tasks, and mark them complete. Include a dashboard showing active projects and a simple Kanban board.
    </Prompt>

    <Prompt description="Portfolio site with contact form.">
      Create a personal portfolio website for a photographer. Gallery page with image grid, about page, and a contact form that sends me an email when someone submits it.
    </Prompt>
  </Step>

  <Step title="Answer the agent's questions">
    The agent asks about your requirements before writing code: what pages you need, whether you need a database, user authentication, payments, or any specific integrations. Answer these questions so the agent builds the right thing the first time.
  </Step>

  <Step title="Watch the live preview">
    As the agent writes code, a live preview appears in the side panel. The preview updates in real time as the agent adds features and makes changes.

    <Frame caption="The live website preview updating in real time as the agent writes code.">
      <img src="https://pub-51091dcf1e9d4b04bb2e74f489c4f346.r2.dev/ae924e27c9fbede358a82d01c6781f3696f8f0ddc552e2a516532ffa7e3a4f09.png" alt="Side panel showing a live website preview with the agent's code changes reflected immediately" />
    </Frame>
  </Step>

  <Step title="Refine through conversation">
    Ask for changes directly in the chat. The agent edits the code and the preview updates.

    <Prompt description="Change a visual element.">
      Make the hero section taller and change the background to a gradient from dark blue to black.
    </Prompt>

    <Prompt description="Add a new feature.">
      Add a pricing section with three tiers: Free, Pro, and Enterprise. Include a "Get Started" button on each card.
    </Prompt>
  </Step>

  <Step title="Deploy when ready">
    When you are happy with the result, click the **Publish** button in the website header. Your site goes live with a public URL at **yoursite.runable.site**.

    See [Deploy & Go Live](/build-websites/ai-websites/deploy-and-go-live) for full deployment details.
  </Step>
</Steps>

<Tip>
  Turn on **Plan Mode** before sending your first message for complex websites. The agent researches, asks smart questions, and writes a full plan before building. This prevents having to redo significant work later.
</Tip>

## What the agent sets up automatically

When the agent builds your website, it provisions the following infrastructure without you needing to configure anything:

| Component        | What you get                                                             |
| ---------------- | ------------------------------------------------------------------------ |
| **Live preview** | An instant preview URL in the side panel that updates as the agent codes |
| **Database**     | A SQLite database for storing any data your app needs                    |
| **File storage** | Object storage for uploads, images, and files                            |
| **AI gateway**   | An API key for adding AI features to your website                        |
| **Environment**  | A `.env.local` file with all necessary configuration pre-filled          |

## Next steps

<CardGroup cols={2}>
  <Card title="Deploy & Go Live" icon="rocket" href="/build-websites/ai-websites/deploy-and-go-live">
    Publish your website and get a public URL.
  </Card>

  <Card title="Custom Domains" icon="link" href="/build-websites/ai-websites/custom-domains">
    Connect your own domain to your deployed website.
  </Card>
</CardGroup>