Generative UI

Generative UI lets Claude create interactive visualizations inline in your conversations. Instead of describing a process in text, Claude can generate a flowchart. Instead of listing numbers, it can produce an interactive chart you can explore.

These are not pre-built templates — Claude generates the HTML, SVG, and JavaScript code in real time based on the conversation context. Every visualization is unique to your question.

What It Can Do

SVG Diagrams

Claude automatically chooses the best diagram type based on your question:

• Flowcharts — Process flows, decision trees
• Timelines — Historical sequences, project phases
• Hierarchy diagrams — Organization charts, system architecture
• Cycle diagrams — Feedback loops, iterative processes
• Side-by-side comparisons — Feature comparison, pros vs cons
• Layered stacks — Architecture layers, tech stacks

Interactive Charts

Built with Chart.js, supporting real-time interaction:

• Line charts, bar charts, pie charts, radar charts
• Sliders and buttons to control data views
• Multiple datasets with toggle controls

Calculators & Tools

Small interactive utilities embedded in the conversation:

• Loan calculators with adjustable parameters
• Unit converters
• Formula visualizers with slider controls

Multi-Widget Narratives

For complex topics, Claude interleaves multiple widgets with text explanations — using different visualization types for different aspects of the topic. For example, a question about "how does an LLM work" might produce:

1. A hierarchy diagram showing the model architecture
2. Text explaining the training process
3. An interactive chart showing loss curves
4. Text summarizing key takeaways

Drill-Down Interaction

Clickable nodes within diagrams. Click a node to automatically send a follow-up question, diving deeper into that specific topic.

How to Use

Generative UI is enabled by default. You don't need to turn it on or configure anything. Claude automatically decides when a visualization would be more helpful than plain text.

Simply ask questions that lend themselves to visual explanations:

• "Explain how HTTP requests work"
• "Compare React, Vue, and Svelte"
• "Show me the training pipeline of a large language model"
• "Visualize the sorting algorithms"

Claude will choose the appropriate visualization type and generate it inline.

Widget Types Guide

Theme Integration

Widgets automatically inherit your current theme. When you switch between light and dark mode, all widgets update in real time — colors, backgrounds, and text adapt seamlessly. This is achieved through a CSS variable bridge that maps CodePilot's theme tokens to the widget's styling system.

Security

Every widget runs in a sandboxed iframe with strict security controls:

• No network access — Widgets cannot make fetch requests, XHR calls, or WebSocket connections (connect-src 'none')
• No DOM escape — sandbox="allow-scripts" without allow-same-origin prevents widgets from accessing the parent page
• CDN allowlist — External scripts are limited to four trusted CDNs: cdnjs.cloudflare.com, cdn.jsdelivr.net, unpkg.com, esm.sh
• Link interception — All link clicks are intercepted and opened in a new browser tab via the parent page
• HTML sanitization — Dangerous tags (iframe, object, embed, form) are always stripped

Persistence

Widgets are persisted as part of the message content. When you switch to another conversation and come back, widgets re-render from the stored code. CDN-dependent widgets (like Chart.js charts) reload their libraries on re-render.

Limitations

• Requires official API — Some third-party API providers may not properly forward the widget system prompt. If widgets aren't appearing, verify you're using an official Anthropic API provider.
• CDN loading time — Chart.js and other CDN libraries need network access to load. First render may take a few seconds. A shimmer overlay indicates loading progress.
• Widget size — Each widget is recommended to stay under 3000 characters. Very complex visualizations may be split across multiple widgets.
• No persistent state — Widget internal state (slider positions, selected tabs) resets when the conversation is re-opened.