Development Previews | OutcomeDev Docs

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, or python -m http.server inside 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. And you rarely need to ask: when the agent builds anything runnable, it finishes by starting the dev server, verifying the page actually responds, and handing you the live preview as part of its wrap-up. "Deploy it so I can use it" is satisfied by the running preview; agents don't push to external hosting unless you explicitly name a provider.

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

Starting the dev server is default agent behavior, but you can still steer it:

"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?"

After the Agent Finishes

The preview stays available through the warm window, the sandbox remains hot after completion, and the window extends while you're actively using the workspace. For longer manual testing sessions, enable Keep Alive in task settings (manual mode) to keep the sandbox and preview running until you stop them.

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