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