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

# Quickstart

> Build and publish your first web app in minutes with AI

## What is OptiDev?

OptiDev is an AI-powered platform that turns your ideas into fully functional web applications. Describe what you want, and watch it come to life.

**No coding experience? No problem.** If you can describe it, you can build it.

***

## Step 1: Start with a Plan

Go to [app.optidev.ai/dashboard](https://app.optidev.ai/dashboard) and click **Create New App**.

Give OptiDev Agent context about who you are and what you're building:

<Tabs>
  <Tab title="Kiosk Example">
    > *"I'm a Marketing Coordinator for a Harley Davidson dealer in Texas. I need to create a kiosk page for our touchscreen display on the showroom floor. We're highlighting the Pan America 1250 ST model this month."*
  </Tab>

  <Tab title="Dashboard Example">
    > *"I'm a Growth Analyst for a SaaS company. I need to build a Stripe Dashboard showing recent subscriptions and new trial signups."*
  </Tab>
</Tabs>

The more context you provide, the better your app will be.

***

## Step 2: Attach Context

You can attach files and links to help OptiDev Agent understand exactly what you want:

| Attachment Type | How to Use                                                              |
| --------------- | ----------------------------------------------------------------------- |
| **Screenshots** | Paste images of websites, apps, or designs as reference                 |
| **Documents**   | Attach PDFs or docs with product info, brand guidelines, etc.           |
| **URLs**        | Paste website links and ask the agent to use them as reference          |
| **Images**      | Attach photos to include in your app, or ask the agent to generate them |

### Example with Attachments

> *"I want the kiosk to have an attract screen that slides through these 3 images. \[attach images]*
>
> *Read this URL [https://www.harley-davidson.com/us/en/motorcycles/pan-america-1250-st.html](https://www.harley-davidson.com/us/en/motorcycles/pan-america-1250-st.html) for product info and write a short description for each slide.*
>
> *When someone taps the screen, show a page explaining how to order with this month's special discount."*

Describe your app like you're telling a friend to build it for you.

***

## Step 3: Review and Build

OptiDev Agent creates a plan before building. This saves time by catching issues early.

### Review the Plan

* Read through what the agent proposes to build
* Ask for changes if something isn't right
* Approve when you're happy with the direction

### First Build

Click **Approve** and the agent starts building. First builds typically take **5-15 minutes** depending on complexity.

You'll see live progress as the agent writes code, creates components, and sets up your app.

<Note>
  Grab a coffee while your app is being built. The agent will let you know when it's ready for review.
</Note>

***

## Step 4: Refine Your App

Once the first build is complete, refine it until it's exactly what you want.

### Give Feedback

* **Take a screenshot** of what you see and paste it into the chat
* Point out specific things: *"Make the header text larger"* or *"Change the CTA button to red"*
* Reference components by name: *"Update the hero section..."*

### Use the Visual Editor

For quick design tweaks, switch to the **Visual** tab:

* Click any element to select it
* Edit text directly on the page
* Change colors, fonts, and spacing without code

<Tip>
  The Visual Editor is perfect for small changes. For bigger features, describe them to the Agent.
</Tip>

***

## Step 5: Publish and Share

When you're happy with your app, click **Publish** in the top right corner.

Your app builds and deploys in seconds. You'll get a public URL to share immediately.

### Connect Your Own Domain

Want to use your own domain like `app.yourcompany.com`?

See [Custom Domain](/features/custom-domain) for setup instructions.

***

## What's Next?

<CardGroup cols={2}>
  <Card title="Prompt Guide" icon="message" href="/get-started/prompt-guide">
    Learn how to write effective prompts for better results.
  </Card>

  <Card title="Agent Mode" icon="robot" href="/features/agent-mode">
    Deep dive into Claude AI assistant capabilities.
  </Card>

  <Card title="Visual Editor" icon="paintbrush" href="/features/visual-editor">
    Master the point-and-click visual editing tools.
  </Card>

  <Card title="Connect Data" icon="database" href="/optidev-cloud/how-to-use">
    Add a database, user auth, and APIs to your app.
  </Card>
</CardGroup>