Web Preview

When your environment runs a dev server, Wallfacer embeds it directly in the task view so you can see your app without switching windows.

When It's Available

The preview appears when a service in your environment's manifest exposes a port -- for example, a Next.js dev server on port 3000 or a Vite server on port 5173. The VM's port mappings provide a public URL for each exposed service.

If no services expose ports, the preview panel won't appear.

The Preview

An embedded browser (WebView) loads your running app using the public URL from the VM's port mappings. You interact with it like any browser -- click links, fill forms, navigate pages.

Port Selection

If multiple services expose ports (e.g., a frontend on 3000 and a backend on 8080), use the port selector to switch between them. Each service appears by name as defined in your environment manifest.

Refreshing

Use the refresh button to reload the preview after Claude makes changes.

Many frameworks support hot module replacement (HMR), which updates the preview automatically when files change. Whether this works depends on your framework and dev server configuration.

How Claude Captures Your App

Claude can view the same running app directly through its MCP tools, without you driving the preview by hand:

• Screenshots. Claude renders any page your environment serves and captures it to verify a UI change. Each screenshot comes with a permanent shareable link that Claude can embed in a pull request test plan.
• Rendered DOM. When a screenshot is ambiguous, Claude reads the page's HTML after JavaScript has run, along with any console and page errors.

Claude can also drive the page before it captures. In a single pass it clicks buttons, fills and submits forms, selects options, hovers, presses keys, and waits for elements to appear, then takes the screenshot or reads the DOM. This reaches states that only show up after interaction, such as a form's validation message or a view behind a menu, instead of just the page as it first loads.