AI Components

AI Elements Dashboard

Explore and preview every reusable AI UI component across the project with live demos, source metadata, and categorized discovery.

Showcase

Primary AI Demos

Feature-rich demos built from the same reusable components powering the AI experience.

LiveInteractive

Quick filter

Search AI Elements

Category

Browser

Status

Ready

Details

Metadata

A live browser frame with URL navigation and console output.

Filename: web-preview.tsx

Tags: Live, Interactive

Quick actions

Status

Preview

Use the live preview to evaluate component state, layout, and interaction patterns.

Documentation

The registry holds metadata, category, and implementation details for every AI element.

Components

Browse all elements

Explore the full component catalog with metadata, categories, and live usage status.

Web Preview

A live browser frame with URL navigation and console output.

Browser

web-preview.tsxReadyLiveInteractive

Canvas

A flow-based AI workspace for draggable nodes and visual pipelines.

Workspace

canvas.tsxReadyLiveWorkspace

Artifact

A generated output panel for files, code previews, and actions.

Workspace

artifact.tsxReadyLiveFiles

Agent

An AI agent interface with tools, instructions, and status output.

Agent

agent.tsxReady

Attachments

A file attachment list for AI conversations and content uploads.

Files

attachments.tsxReady

Audio Player

A media playback interface for audio transcripts and voice responses.

Media

audio-player.tsxReady

Chain Of Thought

A visual reasoning trail for AI decision making and inner monologue.

Reasoning

chain-of-thought.tsxReady

Checkpoint

A save point component for AI workflow state and decision branches.

Workflow

checkpoint.tsxReady

Code Block

A syntax highlighted code block for AI-generated source previews.

Editor

code-block.tsxReady

Commit

A git-style commit preview for AI-driven code changes.

Versioning

commit.tsxReady

Confirmation

A confirmation prompt for authorizing AI actions and decisions.

Forms

confirmation.tsxReady

Connection

A connection state panel for live AI service health and status.

Networking

connection.tsxReady

Context

A context inspector for application state and AI prompt context.

Data

context.tsxReady

Controls

A collection of interactive controls for AI workflows.

Forms

controls.tsxReady

Conversation

A chat conversation component for AI interactions and replies.

Messaging

conversation.tsxReady

Edge

A connector line for visual topology and graph-based workflows.

Workspace

edge.tsxReady

Environment Variables

A secure environment variable panel for AI runtime config.

System

environment-variables.tsxReady

File Tree

A file explorer view for project artifacts and generated outputs.

Workspace

file-tree.tsxReady

Image

A responsive image preview component for AI-generated visuals.

Media

image.tsxReady

Inline Citation

A citation badge for AI references and source attribution.

Content

inline-citation.tsxReady

JSX Preview

A live JSX rendering preview for AI-created UI snippets.

Editor

jsx-preview.tsxReady

Message

A message bubble component for structured AI chat output.

Messaging

message.tsxReady

Mic Selector

A voice input selector for multimodal AI experiences.

Inputs

mic-selector.tsxReady

Model Selector

A model picker component for choosing AI backends.

Inputs

model-selector.tsxReady

Node

A node component for graph-based pathing and relationships.

Workflow

node.tsxReady

Open In Chat

A quick action button to open an item in chat mode.

Tooling

open-in-chat.tsxReady

Package Info

A package metadata card for dependency and version details.

Workspace

package-info.tsxReady

Panel

A collapsible panel container for AI tooling surfaces.

Layout

panel.tsxReady

Persona

A persona avatar and state component for AI assistants.

Identity

persona.tsxReady

Plan

A planning card for AI-generated plans and action items.

Workflow

plan.tsxReady

Prompt Input

A prompt editor with actions, tooltips, and command-style UX.

Inputs

prompt-input.tsxReady

Queue

A queue list for managing AI tasks and staged actions.

Workflow

queue.tsxReady

Reasoning

A reasoning panel for structured AI thought and inference.

Reasoning

reasoning.tsxReady

Sandbox

A sandbox container for experimentation and model previews.

Workspace

sandbox.tsxReady

Schema Display

A schema visualization for AI-managed types and models.

Data

schema-display.tsxReady

Shimmer

A loading shimmer component for AI async states.

Feedback

shimmer.tsxReady

Snippet

A snippet display component for inline code and text blocks.

Editor

snippet.tsxReady

Sources

A sources panel for citations and AI knowledge context.

Content

sources.tsxReady

Speech Input

A speech capture input for voice-driven AI prompts.

Inputs

speech-input.tsxReady

Stack Trace

A stack trace viewer for runtime AI diagnostics.

Debug

stack-trace.tsxReady

Suggestion

A suggestion card for AI-generated next actions.

Reasoning

suggestion.tsxReady

Task

A task card for AI task management and progress tracking.

Workflow

task.tsxReady

Terminal

A terminal UI for CLI-style agent output and tooling.

Debug

terminal.tsxReady

Test Results

A test result panel for AI-generated validation reports.

Debug

test-results.tsxReady

Tool

A generic tool window for AI actions, input, and output.

Tooling

tool.tsxReady

Toolbar

A toolbar component for quick AI actions and filter controls.

Layout

toolbar.tsxReady

Transcription

A transcription panel for AI audio-to-text workflows.

Media

transcription.tsxReady

Voice Selector

A voice selection control for speech-driven AI apps.

Inputs

voice-selector.tsxReady