React AI chat and agent components for Tailwind CSS
The AI Kit covers the screens most AI products share. Chat Thread is the scrolling conversation, pinned to the newest message while it streams; Chat Message renders the question and the answer with its thinking, tool calls and Markdown; Prompt Input is the composer with attachments, tool chips, a model picker and dictation; and Conversation List holds the chat history with search and pinned chats. Model Picker, Reasoning Indicator, Suggestion Chips and Usage Meter handle the details around a conversation. For agents there are Agent Status Card, Tool Call Timeline (each tool call with its input and output), Rule Builder and Workflow Canvas, a node editor for automations.
All AI Kit[16]
Workflow Canvas
A node editor for automations: a trigger, actions, AI steps and yes / no branches you connect, insert into, tidy up and watch run.
Voice Input
Talk instead of typing: a mic that grows into a recording pill with a live waveform and transcript, a full-width bar, or a voice orb.
Model Picker
A model switcher for AI chats: a quiet trigger that opens a short grouped list of models, each with its name and one line on what it is for.
Agent Status Card
An AI agent at work at a glance: orb, name, status, current step, progress, elapsed time, steps, logs and the controls that matter now.
Chat Message
One message of an AI conversation: the question in a bubble, the answer with its thinking, tools, markdown, sources and actions.
Chat Thread
The scrolling conversation of an AI chat: pinned to the newest message while it streams, with day pills, follow-ups and a pinned composer.
Conversation List
The chat history of an AI app: New chat, search, pinned chats and Today / Yesterday / older groups, with rename, pin, archive and delete.
Prompt Input
The AI chat composer: a growing text box with attachments, tool chips, a model picker, dictation and one round send / stop button.
Reasoning Indicator
The model's thinking, kept out of the way: a shimmering live timer while it thinks, then a quiet "Thought for 12 s" to expand.
Rule Builder
An if-this-then-that editor for automations: a trigger, conditions and ordered actions as sentence cards, read back as one sentence.
Suggestion Chips
Prompt suggestions people tap instead of typing: pills under a composer, cards on a welcome screen, or follow-up rows under an answer.
Guides
Tutorials and guides from the blog that use these components.
Building UI with AI agents
React AI Chat UI: Streaming, Auto-Scroll and Mobile
How a production React AI chat UI handles streaming, auto-scroll, IME input and the phone keyboard, part by part, with code for the Next.js App Router.
10 min read
About AI Kit
Voice Input records with a live waveform and transcript, and Fluid Orb, Matrix Orb and Grid Reveal are animated states for voice and image generation. The components share message, tool call and model types from the AI Chat helpers in Hooks & Utilities, and they render what your model returns, so you connect them to your own API or SDK. On a phone menus open as bottom sheets and every target is 44px. 3 of the 16 AI components are free: the source is open to everyone through the CLI, shadcn and the docs page (the MCP server needs a free account key). The other 13 are part of Pro.