Built-in Browser

Preview live UI state, browse the web, and verify agent work—all without leaving Zenflow.

Overview

Zenflow includes a built-in browser that shows live UI state directly inside your workflow. Check rendered output, browse reference material, or verify agent changes without switching windows.

Live Preview

View your running application at localhost directly inside Zenflow—no window switching required.

Browse While Agents Work

Open YouTube, docs, or any website in a browser tab while agents continue executing tasks in the background.

Copy and Fix

Spot something off? Copy the element from the browser and ask the agent to fix it—all in the same workspace.

How It Works

The built-in browser lives alongside your chat tabs, terminals, and task steps. Open it anytime to check your app’s live state, browse reference material, or verify agent work without context-switching.

1. Open the browser

   Click New browser in the top-right toolbar of any task view, next to New chat and New terminal.

2. Navigate to any URL

   Type a URL in the address bar. Navigate to localhost to preview your running app, or visit any website.

3. Work in parallel

   Switch between browser, chat, and terminal tabs freely. Agents keep running in the background while you browse.

4. Verify and iterate

   Check the live UI, copy elements that need changes, and ask the agent to fix them—all without leaving Zenflow.

Typical Workflow

1. Click 'New browser'

   From any task view, look for the New browser button in the top-right toolbar—right next to New chat and New terminal. Clicking it opens a browser tab alongside your existing chat and terminal tabs.

2. A browser tab appears

   A new Browser tab shows up in your tab bar with a full address bar, back/forward buttons, and a reload control. Type any URL to navigate—just like a regular browser.

3. Browse while agents work

   Navigate to YouTube, documentation, or any other website while agents continue executing your task steps in the background. Your task progress, chat history, and terminal sessions remain accessible in their own tabs.

4. Start a dev server from the terminal

   Switch to a terminal tab and run your dev server (e.g., npm run dev). Once it’s up, the built-in browser can connect to localhost to show your running application.

5. Preview your live app

   Navigate the browser tab to your local dev server URL (e.g., http://localhost:3420). The live UI renders directly inside Zenflow so you can verify that agent changes look correct—without switching windows.

6. Copy elements and request fixes

   Spot something off in the preview? Copy the element or take note of what needs changing, switch to the chat tab, and tell the agent what to fix. The agent applies the change, and you can immediately verify it in the browser.

Use Cases

UI Verification

After agents implement a frontend change, open the browser to confirm the result looks correct before approving or merging.

Reference Browsing

Pull up API docs, design specs, or Stack Overflow without leaving your Zenflow workspace.

Visual Feedback Loop

See something that needs tweaking? Copy the element from the browser, paste it into the chat, and ask the agent to adjust it.

End-to-End Testing

Manually verify user flows by interacting with the live app while reviewing agent-generated code changes side by side.