# App Preview

## App Preview

### Preview Before You Publish

The **App Preview** feature lets you see a live version of your application before making it publicly available. Every time the AI deploys code to your app, you can generate a preview URL to verify the changes look correct.

***

### How It Works

1. The AI deploys code to your application using OBTO's MCP tools
2. You (or the AI) call `obto_generate_preview` with your app name
3. OBTO generates a temporary preview URL
4. Open the URL in your browser to see the live application

The preview renders exactly what the live app will look like — same backend, same frontend, same database. It's not a mock or a screenshot — it's your actual application running on the platform.

***

### Generating a Preview

#### Through the AI

Ask your AI to generate a preview at any point during development:

```
"Show me a preview of the app"
"Generate a preview so I can check how it looks"
"Let me see what we've built so far"
```

The AI will call `obto_generate_preview` and return the preview URL.

#### Through the Tool Directly

The tool takes a single parameter:

| Parameter | Type   | Required | Description                            |
| --------- | ------ | -------- | -------------------------------------- |
| `appName` | string | ✅        | The name of the application to preview |

**Returns:** A preview URL you can open in your browser.

***

### Preview vs. Published

| Aspect             | Preview                         | Published                       |
| ------------------ | ------------------------------- | ------------------------------- |
| **URL**            | Temporary preview URL           | `yourapp.obto.co`               |
| **Who can access** | Anyone with the URL             | Public                          |
| **Data**           | Live data from your environment | Live data from your environment |
| **Purpose**        | Development testing             | Production use                  |

> 💡 Preview and published apps share the same backend and database. Changes made through the preview (e.g., form submissions) affect real data.

***

### When to Preview

* **After deploying a new page** — Verify the layout renders correctly
* **After changing styles** — Check colors, spacing, and responsive behavior
* **After modifying routes** — Test API endpoints return the correct data
* **Before publishing** — Final sanity check before going live

***

### Iterating with Preview

The typical development cycle with OBTO is:

1. **Describe** what you want → AI deploys it
2. **Preview** → Check the result
3. **Iterate** → "Change the header to blue," "Add a footer," "Fix the contact form"
4. **Preview again** → Verify
5. **Publish** → Go live

The AI can generate previews automatically after each deployment step, or you can request them manually when you're ready to check.

***

### Next Steps

* **Publish App** — Go live with a public URL
* **Dev Zone** — Manage your applications