Design System

Chat UI - AI Elements

Overview
Review paths
Preview chat app surfacesOpen the demo-only `/demo/chat-shell-preview` handoff for inline, carousel, PiP, and fullscreen review.Build an inline app surfaceUse the host-friendly card, rail, and fullscreen rules.Review widget inventoryCompare Apps SDK and ChatKit references, then inspect installable KnearMe surfaces.Review artifact cardsCompare reference, decision, and generated artifact patterns.Design a shellStart with bounded chat shells, context rails, and panel states.Compare mobileReview mode changes, device framing, and recipe-level examples.Inspect tokensCheck foundation rules before composing new surfaces.

AI Elements

Provider-aligned compound components for tools, reasoning, previews, and prompt orchestration.

Tool & Confirmation

Approval-aware tool invocations should have a consistent contract whether they come from GenUI or direct runtime tool UI.

Developer details

Start from these files when you need to trace the live implementation.

src/shared/ai-elements/tool.tsx · src/shared/ai-elements/confirmation.tsx

Parameters

{  "field": "projectType",  "confidence": 0.82}

Result

{  "projectType": "Stone veneer",  "confidence": 0.82}

Reasoning & Chain of Thought

Expandable reasoning surfaces should preserve trust and layout stability.

Developer details

Start from these files when you need to trace the live implementation.

src/shared/ai-elements/chain-of-thought.tsx · src/shared/ai-elements/reasoning.tsx

Checked uploaded photos
The stonework finish reads as veneer rather than full rebuild.
Missing timeline detail
Need start/end timing before generating customer-facing copy.

I have enough confidence to extract the project type, but not enough evidence to generate final publish copy until the timeline is confirmed.

Prompt Input

The generic AI Elements prompt-input compound underpins richer app-specific composers.

Developer details

Start from these files when you need to trace the live implementation.

src/shared/ai-elements/prompt-input.tsx

AI Elements can manage attachments, model pickers, commands, and voice buttons here.

Preview Primitives

Code, image, and JSX previews support rich app outputs without leaving the thread.

Developer details

Start from these files when you need to trace the live implementation.

src/shared/ai-elements/code-block.tsx · src/shared/ai-elements/image-preview.tsx · src/shared/ai-elements/jsx-preview.tsx

{  "status": "ready",  "next": "publish"}
Stonework example

Inline image preview with expandable affordance.

Publish readiness

Inline JSX preview with real hierarchy and actions.

Needs photos

Upload two more project photos before publishing this portfolio entry.

Persona

Animated personas are optional expression layers, not structural UI.

Developer details

Start from these files when you need to trace the live implementation.

src/shared/ai-elements/persona.tsx

Shell context

I'm checking whether the publish summary needs one more customer outcome before it goes live.
Ask a follow-up about the missing outcome
Thinking

Persona lives inside the shell

Keep it as a small accent beside transcript or composer states. It should support the shell rhythm, not replace the shell or become the main focal point.