Blog: Watch Your Product Build Itself — Live Preview Comes to the Pipeline
Watch Your Product Build Itself — Live Preview Comes to the Pipeline
Release v1.0.159
The best thing about watching a product get built autonomously is, well, watching it get built. Until now, SaaS Factory's pipeline detail page gave you deep visibility into the machinery — agent logs streaming in real time, PR diffs showing exactly what each cycle changed — but the product itself was somewhere else, on a separate tab, if you remembered to open it.
With v1.0.159, that changes.
The Preview Is Now Part of the Pipeline
We've added an embedded live preview pane directly to the pipeline detail page. It's an iframe pointed at your product's latest Vercel deployment URL, and it updates automatically every time a new deploy cycle completes. You don't switch tabs. You don't manually refresh. The preview just changes as the product does.
This is the same "see it being built" experience that v0, Bolt.new, Lovable, and Replit have used to win on feel. Those tools are visual-first by design — they show you a prototype forming on screen in real time, and that immediacy makes the whole experience compelling in a way that logs alone never can.
SaaS Factory is doing something more ambitious — autonomous agents discovering features, architecting systems, writing production code, running tests, and shipping releases without a human in the loop — but the lack of a visual window into that process made it feel more abstract than it needed to.
How It's Wired Together
The infrastructure was already there. Every project stores a deploymentUrl. Every pipeline run that triggers a deployment records the resulting Vercel URL in the deployStatus column. All we needed was to surface that data as a rendered preview inside the pipeline detail view (live-pipeline-detail.tsx) rather than leaving it sitting in the database.
Now the latest deployment URL feeds an iframe that lives alongside the agent logs and PR diff panels. When a new deploy cycle finishes, the iframe source updates. The product on screen reflects what the agents just shipped.
What You'll Notice
Open any active pipeline run. The detail page now has a three-panel layout:
- Left/top: Agent Logs — every agent action, in sequence, as it happens
- Middle: PR Diff — the code that changed in this cycle
- Right/bottom: Live Preview — your actual product, rendered, right now
The first time a pipeline run produces a successful deployment, the preview pane comes alive. From that point on, it tracks every deploy. Watch a new feature land in the diff panel, then watch it appear in the running app a few moments later.
A Smaller Gap, A Better Loop
Competing with visual-first tools on feel has always been part of the roadmap. This release is a direct step in that direction. The agents haven't changed — they're still doing the same work — but now you have a front-row seat to the output, not just the process.
More visual improvements are coming. For now: open a pipeline, and watch something get built.