Development Previews
Documentation and guides for OutcomeDev.
The Preview pane in your Task Workspace provides a live, interactive window into your project as the AI agent works. It renders the running development server from your cloud sandbox directly in your browser — like having localhost:3000 streamed to you.
How It Works
Every task runs inside an isolated cloud environment (a Sandbox). When the agent starts a development server inside that sandbox (e.g., npm run dev), OutcomeDev detects the open port and creates a secure tunnel to your browser.
- Agent starts a dev server — The agent runs a command like
npm run dev,next dev, orpython -m http.serverinside the sandbox. - Port detection — The platform detects when a port (typically
3000,5173,8080, etc.) starts listening. - Secure bridge — A unique URL (ending in
.vercel.run) is generated that tunnels traffic from your browser to that port. - Live preview — The Preview pane loads this URL in an iframe, showing your app in real-time with hot reloading.
Prerequisites
The Preview pane works automatically for any web project — no setup required. However, it only shows something useful if the agent runs a dev server.
| Project Type | Preview Works? | Why |
|---|---|---|
| Next.js, React, Vue, Svelte | ✅ Yes | Agent runs npm run dev, dev server starts automatically |
| Static HTML/CSS | ✅ Yes | Agent can start a simple HTTP server |
| Python Flask/Django | ✅ Yes | Agent runs python app.py or python manage.py runserver |
| CLI tool, library, script | ❌ No preview | No web server to display — this is expected |
| Project with build errors | ❌ Blank/error | Dev server crashes if the code doesn't compile |
The Secure Bridge (.vercel.run)
The preview URL acts as a secure tunnel between your browser and the sandbox:
- Encrypted Traffic — All data is encrypted in transit.
- Isolated Environment — The sandbox is completely isolated from your local machine.
- Instant Updates — Hot module replacement (HMR) works through the tunnel, so changes appear instantly.
Tips for Best Results
Guide the Agent
You can prompt the agent to start the dev server explicitly:
- "Start the development server and let me know when I can preview the landing page."
- "Add a contact form and keep the preview running so I can test it."
- "I'm getting a 404 in the preview — can you check the routes and restart the server?"
Keep Alive Mode
By default, the sandbox (and preview) shuts down when the agent finishes. To keep the preview running for manual testing, enable Keep Alive in your task settings before starting the task.
Refresh the Preview
If the preview looks stale, use the Refresh button in the Preview pane toolbar. This reloads the iframe without restarting the server.
Why Your Preview Might Be Blank
| Scenario | What to Do |
|---|---|
| Agent hasn't started the dev server yet | Wait — it may still be installing dependencies or writing code |
| Project has build errors | Check the Logs/Terminal tab for error messages |
| Sandbox has been reclaimed | The preview only works while the sandbox is alive. Start a follow-up to spin up a new sandbox |
| Non-web project | Expected — CLI tools and libraries don't have a UI to preview |
| Port conflict | The agent may need to use a different port. Try asking it to restart the dev server |
Preview Pane vs. Deployments Tab
These are two different things:
| Preview Pane | Deployments Tab | |
|---|---|---|
| What it shows | Live dev server from the sandbox | Vercel's production-like preview deployment |
| When it's available | While the sandbox is running | After the agent pushes code and Vercel builds it |
| Persistence | Temporary — goes away when sandbox stops | Persistent — stays available after sandbox is gone |
| Requires setup | No | Yes — repo must be connected to Vercel |
| Hot reloading | ✅ Yes | ❌ No — it's a static build |