AI UI Components
AI UI Components for React
Production-ready React and Tailwind UI components for AI applications, chat interfaces, and AI agent workflows. Build thoughtful AI experiences with real product states instead of starting from scratch.
AI Chat UI Components
React components for AI chat interfaces, conversations, streaming responses, prompts, thinking states, and message interactions.
AI Chat
Complete AI chat window with streaming replies.
Chatbot
AI chatbot as a widget, panel, sidebar or page.
Chat Message
Chat message bubble with sources and attachments.
Streaming Response
AI answer that streams in word by word.
Thinking State
Loading state while the AI is thinking.
Message Actions
Copy, regenerate and rate buttons for AI replies.
Prompt Input
Auto-growing prompt box with send and stop.
Chat Empty State
Welcome screen for a new AI chat.
Prompt Composer
Prompt input with files, model picker and commands.
Suggested Prompts
Starter prompt cards and chips for AI chat.
Conversation History
Chat history sidebar with search, pin and rename.
Memory Manager
View and edit what an AI assistant remembers.
Generative Preview
HTML a model is writing, rendered live in a locked-down frame, with the code beside it.
Code Block
Syntax-highlighted code block with copy and tabs.
Voice Input
Voice recording button with live audio levels.
Voice Orb
Animated voice assistant orb for talk mode.
Inline Citations
Numbered source citations inside an AI answer.
Generation Error
Error message with retry for a failed AI reply.
Quota Banner
Usage limit banner with a reset countdown.
Suggestion Banner
Inline AI suggestion to apply, dismiss or undo.
Image Generation Loader
Loading animation for AI image generation.
AI Agent UI Components
React components for AI agent interfaces, task plans, tool calls, approvals, run status, timelines, summaries, and agent workflows.
Agent Workspace
Full AI agent screen from task to summary.
Agent Run Status
Live status bar for a running AI agent.
Task Plan
AI agent plan as steps that tick off live.
Tool Call
Card showing an agent tool call and its result.
Approval Request
Human approval step before an AI agent acts.
Agent Timeline
Step-by-step timeline of an agent run.
Run History
List of past agent runs with status and cost.
Run Summary
Summary card at the end of an agent run.
Agent Settings
Settings form for an AI agent and its tools.
Failure Recovery
Failed agent run with retry and recovery options.
Agent Execution Graph
Graph view of an agent run and its branches.
Trace Waterfall
Waterfall trace of every call in an agent run.
Run Replay
Replay a recorded agent run step by step.
Agent Permissions
Manage what an AI agent is allowed to do.
Dry-Run Preview
Preview every change an agent will make.
Agent Inbox
Inbox of background agent tasks awaiting you.
Agent Ledger
Everything an agent changed, each change with its before, after and an undo.
Fan-out Grid
One job split across many workers, every task a cell on a live grid.
Agent Queue
The work waiting for your agents: worker slots, the line behind them and the backlog.
Workflow Builder
A node canvas for agent workflows that refuses broken wiring as you draw it.
Plan vs Actual
An agent's plan and its real run as two lanes on one clock, with a pace dial and a finish time that rolls over.
Fallback Chain
A request passed from model to model like a relay, with why each one failed and a receipt for the detour.
Conflict Radar
Parallel agents drawn as a minimap of each file, with the lines where their changes collide marked before merge.
Decision Tree
An agent stuck at a fork lays the whole decision out as a tree: options, the follow-up each one leads to, and the path you pick lit end to end.
Scheduled Runs
Agent work packed into usage windows: each day a track as long as its limit, big tasks torn across days, rearranged by dragging.
Agent Steering
Send corrections to an agent while it runs.
Autonomy Dial
Control how much an AI agent may do alone.
Scoped Permission Grant
Allow an agent action once, for an hour or always.
Model Picker
AI model selector with cost per reply.
Prompt Library
Saved prompt templates with fill-in blanks.
Inline Diff
Accept or reject AI text edits inline.
Sub-agent Tree
Live tree of an orchestrator and its sub-agents.
Delegate Board
Drag tasks onto AI agents to assign them.
Agent Lanes
Multi-agent timeline with one lane per agent.
Agent Email Draft
AI-written email to review, retone and send.
Code Diff View
Code diff of agent changes with accept and reject.
Web Search Results
Live list of pages an agent is searching.
Agent Cursors
Named cursors for AI agents editing a document.
Built for modern AI products
Liro combines React, Tailwind CSS, accessible interactions, and production-ready states to help developers build AI applications faster. Components support light and dark interfaces and are designed to work together as complete product experiences.