@elabs-ai/components-ai
Chat: ChatShell, Conversation, Message, PromptInput, Tool, Reasoning, Sources, CodeBlock, Artifact.
pnpm add @elabs-ai/components-aiHighlights
A few of the 44 pages here. Open a family below, or in the navigation, to see all of it.
The standard chat input — a PromptInput pre-assembled with attachments, tools and submit.
The SAFE generative-UI path: renders an agent-DESIGNED screen from data — a JSON tree of catalog types validated against the catalog — with the real components; actions reach the host's onAction.
A Card-shaped, collapsible plan the agent proposes before it starts executing — and the decision the human returns.
A line-level unified diff inside an agent transcript — what the agent changed, with correct old/new line numbers.
The named human-in-the-loop variant of Confirmation — a titled, described approval card, binary or N-option with scope.
Chronological rail of agent steps and checkpoints — what the agent did, in order.
The chat workspace's right context rail — sources, produced assets and a root↔detail drill-in.
Browse by family
ChatGreeting · CodeBlock · Conversation · GroupedParts · MarkdownView · MessageCompare · MessageEdit · MessageFeedback · MessageForm · MessageTable · Persona · SelectionToolbar · Suggestion
Composer · PermissionModeSelect · PromptInput · PromptInputEffort · PromptInputMode · PromptInputSlash · WithMentionInput
AgentEvent · AgentTimeline · ApprovalCard · DiffView · FileTree · Plan · TestResults · ToolResultCard · TurnStatus
A2UI Agent Ops · A2UI Analytics · A2UI Data Grid · A2UI Surface · Canvas
ContextPanel · ModelProviderLogo · SessionHeader · SessionStatusBar
AssetPreview · Attachments · AudioPlayer · AudioVisualizer · Gallery · GeneratedImage