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

# Getting Started with Mocha

> Start your journey with Mocha and create your first AI-powered website

<Warning>
  **Mocha is shutting down on August 1, 2026.** Read the [shutdown announcement](https://getmocha.com/blog/mocha-shutdown) to learn how to migrate or export your apps.
</Warning>

Welcome to Mocha! This guide will walk you through creating and customizing your first AI-powered website. Let's get started!

## Create Your First Project

<Steps>
  <Step title="Sign Up">
    Head over to [getmocha.com](https://getmocha.com) and create your free account. The signup process is quick and straightforward.
  </Step>

  <Step title="Create Your Project">
    Once registered, you can create your first project. Simply enter a prompt describing what you want to build, and Mocha's AI will handle the rest.

    <Frame caption="Watch how easy it is to create a new project with Mocha">
      <img src="https://mintcdn.com/mocha-47857bf6/Q5Os2Tbn61W-oFpO/images/creation-flow.gif?s=cc2a57aa1947914ebfd93414c10bd3fb" width="1058" height="720" data-path="images/creation-flow.gif" />
    </Frame>
  </Step>

  <Step title="Wait for Generation">
    Hang tight! It takes a couple of minutes for the AI to build the first version of your site. The AI is carefully crafting your website's code, design, and content.

    <Frame caption="Example of the previous website created with Mocha">
      <img src="https://mintcdn.com/mocha-47857bf6/Q5Os2Tbn61W-oFpO/images/website-ready.png?fit=max&auto=format&n=Q5Os2Tbn61W-oFpO&q=85&s=cc1592b46004c61145ca101614144343" width="1906" height="1266" data-path="images/website-ready.png" />
    </Frame>
  </Step>
</Steps>

## Customize Your App

Below is an overview of the Mocha interface. The main menu on the top left allows you to see your user, number of messages remaining, billing status, and more.

On the right side, you can see the chat interface, where you can ask the AI to make changes to your website.

In the center, you can see the website preview, where you can see and interact with the current state of your website.

In the top nav, you can find the page you're currently navigating on, and access to the project settings where you can change the project name, description, custom knowledge, and sharing settings.

<Frame caption="Interface overview of Mocha">
  <img src="https://mintcdn.com/mocha-47857bf6/Q5Os2Tbn61W-oFpO/images/project-overview.png?fit=max&auto=format&n=Q5Os2Tbn61W-oFpO&q=85&s=185562c0e6916082ef18b7a21c78d183" width="1906" height="1266" data-path="images/project-overview.png" />
</Frame>

<CardGroup cols={2}>
  <Card title="AI Chat Assistant" icon="sparkles">
    Use the chat panel on the right to make changes to your website. Ask for new features, design updates, or any modifications you'd like to make.
  </Card>

  <Card title="Image Integration" icon="image">
    Attach images in the chat to show the AI exactly what you want. For example:

    * "Make it look like this" (with a screenshot)
    * "Use this as the background"
    * "Add this image to the hero section"
  </Card>
</CardGroup>

## Build Full-Stack Features

<CardGroup cols={3}>
  <Card title="Backend & APIs" icon="server" href="/basics/backend">
    Write backend endpoints and call external APIs. Manage secrets safely.
  </Card>

  <Card title="Authentication" icon="user-shield" href="/basics/auth">
    Add sign‑in with Google and protect pages and actions.
  </Card>

  <Card title="Databases" icon="database" href="/basics/databases">
    Create tables, view data, and understand Dev vs Prod databases.
  </Card>
</CardGroup>

## Interactive Features

<AccordionGroup>
  <Accordion title="Live Preview">
    Your website is fully interactive! You can:

    * Test all features directly in the preview pane
    * Maximize the preview for a full-screen experience
    * Interact with buttons, forms, and other elements
  </Accordion>

  <Accordion title="Error Handling">
    <Warning>Don't panic if you encounter errors!</Warning>
    You have several options to resolve issues:

    * Use the "Fix with AI" button
    * Paste error messages in the chat
    * Restore previous working versions
    * Check our detailed error handling guide
  </Accordion>
</AccordionGroup>

## Publishing Your Website

<Steps>
  <Step title="One-Click Deployment">
    Publish your website to the web with a single click. Your site will be available at a unique mocha.app subdomain.
  </Step>

  <Step title="Custom Domains">
    <Tip>Available on Pro tiers (Bronze, Silver, Gold)</Tip>
    Upgrade to a Pro tier to:

    * Use custom subdomains (e.g., my-super-app.mocha.app)
    * Connect your own custom domain (coming very soon)
  </Step>

  <Step title="Share with the World">
    That's it! Your website is live and ready to share. Send the link to friends, post it on social media, or add it to your portfolio.
  </Step>
</Steps>

<Frame caption="One-click deployment makes publishing your website effortless">
  <img src="https://mintcdn.com/mocha-47857bf6/yxhIdHUepwfUyu7I/images/publishing.gif?s=f2b570604d854d307a12ffdf0efbd330" width="1242" height="720" data-path="images/publishing.gif" />
</Frame>

## Advanced Features

<CardGroup cols={2}>
  <Card title="Project Settings" icon="gear">
    Customize your project through the settings panel:

    * Change project name and description
    * Add custom knowledge
    * Configure sharing settings
  </Card>

  <Card title="Multi-Page Websites" icon="layer-group">
    Create additional pages by simply asking the AI:

    * "Add a profile page"
    * "Create a pricing page"
    * "Add a contact form page"
  </Card>
</CardGroup>

## Social Media Integration

<Note>Make your website stand out on social media!</Note>

To update your website's social media preview:

1. Upload your desired image
2. Ask Mocha: "Use this as the sharing preview when sharing the link on social media"

<Frame caption="Example of a social media preview card">
  <img src="https://mintcdn.com/mocha-47857bf6/Q5Os2Tbn61W-oFpO/images/sharing-preview.png?fit=max&auto=format&n=Q5Os2Tbn61W-oFpO&q=85&s=e9161528d0b598d96bd3e4cc86f9d602" width="1231" height="936" data-path="images/sharing-preview.png" />
</Frame>

## Next Steps

<Tabs>
  <Tab title="Explore Features">
    * Try different AI prompts
    * Experiment with image uploads
    * Test the live preview
  </Tab>

  <Tab title="Get Help">
    * Visit our [Community Discord](https://discord.gg/shDEGBSe2d)
    * Check out our [YouTube tutorials](https://www.youtube.com/@buildwithmocha)
    * Contact [support@getmocha.com](mailto:support@getmocha.com)
  </Tab>
</Tabs>