Browser previews
Preview a local application, manage browser tabs, and inspect pages inside Dream.
Dream's browser opens web pages alongside your project and chats. Use it to inspect a local application while an agent works on its code.
Preview your application#
- Start the application using its normal project command in a terminal.
- Copy the local URL printed by the application, including its port.
- Click Browser in the right toolbar.
- Enter the URL in the address bar and press Enter.
The page opens inside the workspace. If the application uses a different port on its next run, update the address accordingly. Dream's browser opens the URL; it does not start the application.
Use browser tabs#
Click New tab to open another page and select a tab to switch to it. This is useful for keeping two routes visible in your browsing history without replacing one with the other.
Use Go back, Go forward, and Refresh browser to navigate. Close an individual tab using its close control. Hiding the browser panel lets you return to its open tabs later.
Inspect and share what you see#
The browser actions include:
| Action | Use it to… |
|---|---|
| Open DevTools | Inspect the page's console, elements, and network activity |
| Take screenshot | Capture the page for a bug report or further discussion |
| Zoom in / Zoom out / Reset zoom | Adjust the preview's display scale |
| Open in system browser | View the current URL in your regular browser |
Use Expand browser when you need more room and Collapse browser to return to the smaller view. To give an agent a screenshot of the whole page, use the chat's attachment control.
Send an element to a chat#
- Click Select an element to send to chat in the browser toolbar.
- Hover over the page to outline elements, then click the one you want to discuss. Press Escape to cancel.
- Type a comment in the Send to chat form, enable New chat if you want a separate conversation, and send it.
Dream sends your comment with the element's selector, size, text, styles, HTML, and a screenshot of the element, so the agent can locate it in the code. See Sending feedback to a chat for details and limitations.
Ask an agent to use the browser#
Claude Code, Codex, OpenCode, and Grok Build chats receive tools for Dream's browser automatically. They work with the same project browser tabs you see. Cursor chats do not receive these tools.
Give the agent the page URL and a concrete task, for example:
Open http://localhost:3000/settings in Dream's browser. Change the theme, refresh the page, and check whether the selection persists. Inspect the console and network requests if it fails.
The tools can open and navigate tabs, inspect page content, click, type, hover, select options, scroll, take screenshots, and inspect console logs and network responses. They can also attach files from the project to upload controls. File uploads must use paths inside the project.
Start the application before asking the agent to inspect its local URL. Browser actions follow the chat's permissions; respond in the chat if approval is requested. These tools are built in and do not require a manual MCP server definition.
Reload and clear site data#
Try a normal refresh after changing application code. If the page still appears stale, use Force reload from the browser actions.
Clear cache removes cached browser data. Clear cookies clears cookies and can sign you out of sites in the embedded browser. Use these actions deliberately when investigating caching or authentication behavior.
If a local page does not load#
Check that the application is still running, confirm the full URL and port in its terminal output, and inspect any server error there. Try the same address in your system browser to narrow down whether the issue belongs to the application or the embedded preview.