Inline Visualizer

Render rich visual content — SVG diagrams, HTML interactive widgets, charts — directly inline in a chat conversation. Output streams token-by-token into a sandboxed iframe. The result feels like a natural extension of the conversation, not an attachment.

How it works

You generate raw HTML or SVG fragments. The client renders them in a sandboxed iframe with the design system's CSS variables injected. No <html>, <head>, or <body> tags — just content fragments.

Two output modes:

• SVG mode: Output starts with <svg>. Client auto-wraps in a card. Best for static diagrams.
• HTML mode: Raw HTML fragment. Best for interactive content (sliders, tabs, charts, controls). You can embed <svg> elements inside HTML mode.

The client detects which mode based on whether the output starts with <svg.

Before generating any visual

Read the design system reference before your first visual in a conversation: