Preview constraints
For comparing layouts in the chat, start with Block previews. This page explains the constraints relevant to integrations and troubleshooting.
Block trees and references
The PreviewBlocks tool accepts a tree of DMS blocks ({ type, options, children }), a title, an optional description, a mockup as reference and alternative views as variants.
- A tree is capped at 8 levels, 200 blocks across its variants and, with the sketches, 64 KB of JSON. A block names a registry type, never an arbitrary component, and an option it loads from (
fetchUrl…) must be a path of the site. - The mockup is an image attached in the conversation (
attachmentId: its file name, orlatest) or a same-origin path. An external URL is shown as a link, never loaded. Attached images are not kept on the server, so after a reload the dialog asks to attach the mockup again. - The preview is stored in the transcript and comes back with the conversation.
Custom sketches
A view (the preview or a variant) can carry a sketch instead of a tree, or beside it: static HTML and CSS ({ html, css?, caption?, height? }) of a proposed custom component.
The dialog labels it Custom sketch — not a DMS block. Its CSS can use --sketch-* variables that follow the dashboard's light or dark theme; images and fonts must be inline data: URLs.
Sketch isolation
The sketch is the agent's own HTML, rendered in an <iframe sandbox=""> through srcdoc. The frame has:
- No scripts and an opaque origin.
- No forms, popups or top navigation.
- A Content-Security-Policy (
default-src 'none'; style-src 'unsafe-inline'; img-src data:; font-src data:) that blocks network loads.
The sidecar also refuses a sketch with a script, an event handler, a javascript: URL, an embedding or linking element, a <meta http-equiv>, an @import or a URL that is not data:, but the frame is the security boundary.
A dashboard whose own CSP forbids inline styles applies it to the frame too, and the sketch then renders unstyled. Check the parent page's CSP when a sketch loses its styling.