-

Components

PreviousNext

Explore all the components available in the library.

Resource CardNewReusable card for agents, datasets, plugins, and workspaces.Dataset CardNewKnowledge dataset card with document counts and indexing state.Segment CardNewKnowledge segment card for chunks, scores, and metadata.Agent Template CardNewTemplate card for agent marketplaces, starters, and playbooks.API Key CardNewAPI key card with scopes, status, and management actions.Channel Status CardNewChannel integration card for web chat, email, and messaging.Resource SidebarNewCollapsible sidebar shell for resource detail pages.Workspace SelectorNewSearchable workspace selector for console surfaces.Extraction Strategy SelectNewDocument parsing strategy selector for OCR, tables, and graph indexing.Model Type FilterNewPill filter for model catalogs and capability views.Package CardNewCredit package card for recharge and plan selection.Workflow Node CardNewWorkflow node summary card for builders and run views.Node CatalogNewSearchable catalog for workflow nodes, tools, and actions.Condition BuilderNewRule builder for workflow branches, filters, and routing.Variable Binding EditorNewBind target fields to upstream workflow variables.Output Variables ViewNewTyped output variables with descriptions and samples.Run Node ListNewWorkflow run timeline with node status and summaries.Indexing ProgressNewProgress panel for document ingestion, chunking, and embedding.Usage Stat CardNewCompact metric card for requests, spend, latency, and quotas.Token Trend ChartNewToken usage chart for input tokens, output tokens, and cost.Provider Status CardNewProvider health card for model sync, balance, and latency.Model Diff ViewNewReview added, updated, and removed models after provider sync.Document Status BadgeNewStatus badges for documents and indexing pipelines.Chat ComposerNewAgent input panel with model, attachment, send, and stop controls.Agent StatusNewStatus indicator for agent, voice, and tool-running states.Tool Call CardNewStructured tool call state, arguments, results, and duration.Prompt EditorNewPrompt composition with variables, actions, and token estimates.Model SelectorNewGrouped model picker for ZGI chat and workflow configuration.Variable SelectorNewSearchable variable picker for prompt, workflow, and automation inputs.Code EditorNewTextarea-based code editor for workflow and agent configuration.Option EditorNewEditable option lists for forms, filters, and workflow fields.File UploadNewDropzone and file list for agent, workflow, and dataset inputs.Confirm DialogNewConfirmation flow for destructive or async ZGI actions.File IconNewFile-type icons for uploads, datasets, and knowledge resources.Radio CardNewCard-shaped radio controls for agent and workflow choices.Audio PlayerA customizable audio player with progress controls and playback management for music, podcasts, and voice content.Bar VisualizerReal-time audio frequency visualizer with state-based animations for voice agents and audio interfaces.ConversationA scrolling conversation container with auto-scroll and sticky-to-bottom behavior for chat interfaces.Conversation BarA complete ZGI voice conversation interface with microphone controls, text input, and real-time waveform visualization.Live WaveformReal-time canvas-based audio waveform visualizer with microphone input and customizable rendering modes.MatrixA retro dot-matrix display component with circular cells and smooth animations. Perfect for retro displays, indicators, and audio visualizations.MessageComposable message components with avatar, content variants, and automatic styling for user and assistant messages.Mic SelectorMicrophone input selector with device management.OrbA 3D animated orb with audio reactivity, custom colors, and agent state visualization built with Three.js.ResponseStreaming markdown renderer with smooth character-by-character animations for AI responses using Streamdown.Scrub BarA component for scrubbing through a timeline, typically used for audio or video playback.Shimmering TextAnimated text with gradient shimmer effects and viewport-triggered animations using Motion.Speech InputA compact ZGI speech-to-text input component with real-time transcription.Transcript ViewerA component for displaying an audio transcript with word-by-word highlighting synced to audio playback.Voice ButtonInteractive button with voice recording states, live waveform visualization, and automatic feedback transitions.Voice PickerSearchable ZGI voice selector with audio preview, orb visualization, and provider voice integration.WaveformCanvas-based audio waveform visualization components with recording, playback scrubbing, and microphone input support.