4 tiers / source first

Examples

Compose the vertical slice.

Assembly demos and skins for the component library. Start from the catalog when building something new; use these screens to see composition.

Open starter Open catalog

4 canonical · 8 skins · demos · library components in docs

Canonical slice

Primary host compositions

01Chat with toolsFull run: message, thinking, tool, approval, question, composer. 02Judgement pauseapproval-gate + ask-user-question when policy needs a choice. 03Rich objectsSynthesis, verdict, status row — composed, not extracted. 04Thread listSidebar chrome: new thread, groups, truncated titles.

Skins

Shell and product-feel ports

05Base shellEmpty welcome, suggestions, branch picker. 06ChatGPT skinInverted bubbles, icon actions, edit composer. 07ArtifactsChat + code/preview split panel. 08Assistant modalFloating bottom-right chat entry. 09Claude skinWarm serif shell + disclaimer. 10Gemini skinCentered empty composer. 11Grok skinLogo empty state + pill composer. 12Perplexity skinSearch-forward warm shell.

Library demos

Showcases for first-class library components

13Tool UINotepad card + static weather summary. 14ReasoningCollapsible chrome + thinking-steps. 15Diff viewerUnified/split escaped patch chrome. 16AttachmentsComposer tiles + message previews. 17Follow-upsPost-reply prompt chips. 18Chain of thoughtReasoning + tool-call + answer. 19QuoteToolbar, composer preview, message block. 20Message timingLatency badge + metrics panel. 21Model selectorVariants, search, groups, effort. 22Action barCopy + regenerate under a turn. 23ErrorHost alert on a failed turn. 24DictationIdle mic / dictating stop; host owns mic.

More library demos

Showcases for promoted library components

25Loading stateDrive / Dots / Orbit + elapsed timer. 26ThinkingSteps / Reasoning / Search / Coding traces. 27Streaming textCitations, actions, sources, follow-ups. 28Approval pagerMulti-question HITL pager. 29Tool chipsCollapsible tool/message chip stack. 30Task rowsCapsules / list agent task status. 31Chat tabsTabbed chat + composer. 32RecommendationConfidence meter + alternatives / Accept. 33Context cardsRetrieved chunks with source types. 34Diff tableAI-proposed tabular edits. 35Records tableCRM-style grid with tags and select. 36Filter tableStatus chips reorganize rows. 37Sidebar navWorkspace search + section nav. 38Command searchCommand list filter + empty state. 39Insight cardsPaged insights + SVG charts. 40Code blockFile chrome + copy for escaped code. 41Fine-tuneInspector ranges + layout toggles. 42GenUI (deferred)External iframe intentionally not ported.