Skip to main content
Preview your BRICKS application inside the chat window. The preview pane runs the compiled project as an embedded webview, picks up file changes automatically, and exposes a Chrome DevTools Protocol (CDP) endpoint for the BRICKS CLI.

​
Open the preview

Click the Preview button in the input bar. The pane mounts on the right side of the chat panel and starts compiling your project in the background. When the pane opens, CTOR runs bun typecheck followed by bun compile.ts, then loads the application into an embedded webview using the stage from your application.json (production, beta, or development).
Preview requires bun to be installed and available in your PATH.

​
Pane controls

The pane header has three buttons:
ButtonAction
RefreshReload the webview
Pop outOpen the preview in a new in-app window
Close (×)Close the pane and stop the backend
A small badge next to the title shows the active stage.

​
Layout with the diff view

When both the diff view and the preview pane are open, they stack vertically inside a single right column. Drag the handle between them to adjust the split. Drag the handle on the column’s left edge to resize the column against the chat area.

​
Live recompile

The pane watches your project for changes:
  • Saving any file under subspaces/ triggers a debounced rebuild via bun compile.ts.
  • Changes to .bricks/build/application-config.json are pushed into the running webview without a full reload.

​
Pop-out window

Click Pop out to detach the preview into its own frameless in-app window. The new window keeps the backend session alive — closing the chat-side pane, switching sessions, or switching projects does not stop a popped-out preview. Close the pop-out window itself to release the session.

​
CDP and bricks devtools

While the preview is running, CTOR starts a CDP server and writes discovery info to .bricks/devtools.json in your project directory. The BRICKS CLI reads this file to inspect the running preview from a terminal. From inside the project directory: 
bricks devtools scan        # auto-discover the local preview
bricks devtools brick tree  # walk the brick component tree
Run bricks devtools --help for the full subcommand list (brick, input, network, runtime, screenshot, storage). The discovery file is removed when you close the pane.

​
Session switching

Switching to a different chat session automatically closes the preview pane and stops its backend, so you don’t end up with a stale CDP server from a previous project.

​
Agent tools

The AI agent can drive the pane through preview_open, preview_close, and preview_status. See Agent tools.