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.Documentation Index
Fetch the complete documentation index at: https://docs.bricks.tools/llms.txt
Use this file to discover all available pages before exploring further.
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 runsbun 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:| Button | Action |
|---|---|
| Refresh | Reload the webview |
| Pop out | Open the preview in a new in-app window |
Close (×) | Close the pane and stop the backend |
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 viabun compile.ts. - Changes to
.bricks/build/application-config.jsonare 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.Draw mode
Click Draw in the pane header to overlay a pen canvas on top of the running preview. Sketch directly on the preview content — circle a misaligned element, mark a target area, or jot a quick note — then click Save to attach the annotated screenshot (preview content + your strokes, composited as a single image) to the chat input. Draw mode works in both the inline pane and the popped-out preview window. From a popped-out window the saved image is forwarded to the main window’s chat input automatically.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 --help for the full subcommand list (brick, input, network, runtime, screenshot, storage).
The discovery file is removed when you close the pane.