# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.obto.co/ai/app-preview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.