AI Components for shadcn/ui
Chat, forms, and tool UIs. Install with the shadcn CLI, or copy and paste.
45 components · Chat patterns
Agent gateApprovalsHuman-in-the-loop agent gate: paged questions, plan approval, plugin connect, permission, eval scorecard, secret access, handoff, and scheduled runs.
Decision inboxApprovalsOne place for the approvals background agents are waiting on: one request at a time with who is asking, why, and the tool input, a count of what is left, deny with a reason, and AI SDK tool approval mapping.
MCP server listFeedbackSettings for an agent's MCP servers: connection status with brand marks, a switch per server and per tool, reconnect and sign-in for the ones that dropped, and the active tool names ready for the AI SDK.
Prompt inputInputsExpandable chat composer with @ sources, / skills, attachments, model picker, and rounded or pill variants.
Starter promptsInputsThe first screen of a chat: one question and a few prompts to start from, chosen by which tools are connected and what the user worked on last.
File diffCodeUnified file diff with sticky line numbers, word-level highlights, collapsed hunks, Shiki syntax colors, and optional accept/reject actions.
Prose diffApprovalsReview an AI rewrite in place: word-level suggestions inside the text, accept or reject each one by click or key, undo, and a live word count. Takes a streaming completion from the AI SDK.
Context windowFeedbackA map of what the model is holding: every cell is a share of the token budget, grouped by system prompt, tools, files, conversation, and memory. Drop files, compact the conversation, and pin totals to AI SDK usage.
Run receiptFeedbackWhat an agent run cost and where it went: fresh, cached, and reasoning tokens priced per line, then grouped by step or by tool, with cache savings, built from AI SDK step usage.
Memory managerFeedbackWhat an agent remembers about the user, one sentence per memory. Open one to see where it came from, then edit or delete it with undo. Reads memories saved by AI SDK tool calls.
Generative formInputsA form that fills itself in from a streaming structured object, then lets the user correct it and send. Fields come from your JSON Schema or from the object as it arrives, for AI SDK useObject.
Line itemsInputsRows that fill in from a streaming array, then let the user fix them, add or remove rows, and confirm, with amounts, tax, and a total that follow along. For invoices and orders from AI SDK useObject.
Eval scorecardFeedbackResults of an eval run: cases passing, a mark per case, average per criterion, what was fixed or regressed since the last run, and the input, output, and judge's reasons behind any case.
Guardrail noticeApprovalsTells the user, in one sentence, that a guardrail held back or changed something: what was caught, what it was replaced with, and a way to ask for review or go ahead anyway. Reads AI SDK data parts.
AI answerResponsesA grounded answer for RAG and search: numbered citations that preview and light up their source cards, streaming states, copy with sources, regenerate, feedback reasons, follow-ups, and AI SDK message mapping.
Source viewerResponsesThe source behind a citation: the document opens at the cited passage, highlighted, with a step through every cited spot and a warning when a quote is not in the text.
Artifact panelResponsesA side panel for what the agent made: rendered documents, highlighted code, and charts with a data table, with version history, live streaming from AI SDK tool input, copy, download, and full screen.
Attachments trayInputsWhat is going with the message: file and image chips with upload progress, failures with retry, a built-in media viewer, add by picker, drop, or paste, and mapping to and from AI SDK file parts.
Schedule cardApprovalsAn agent's recurring job at a glance: a live countdown to the next run, a strip of past runs you can scrub for each result, and pause, resume, and run now. Reads runs from AI SDK messages.
Message actionsResponsesThe row under a chat message: copy, edit and resend, retry on another model, ratings, and a version switcher, with a hook that keeps the versions useChat drops.
Session listNavigationChat history for a sidebar: grouped by when you last touched it, with search, pinning, inline rename, a confirmed delete, and a quiet mark for chats whose agent is still running.
Session tabsNavigationOpen chats as a row of tabs you can drag into order: a sliding marker for the one on screen, a running or unread mark per tab, close, rename, a new-chat button, and edges that fade when tabs scroll out of view.
Thinking stateFeedbackProgress between the prompt and the answer, built from AI SDK message parts: reasoning, tool calls, and sources as a step list with elapsed time, or as a one-line pill.
Agent run treeFeedbackParallel subagents as a live tree: name, current step, elapsed time, tokens, and status per agent, with expandable steps and nested agents, driven by AI SDK tool parts.
Tool call cardTool resultsA compact row per AI SDK tool part: name, status, summary, and elapsed time, expanding to syntax-colored input and output. Handles retry and approval, and groups the calls of one step under a single row.
Data table resultTool resultsRows from a query tool as a table: columns typed from the data, click-to-sort headers, a count that says when rows were cut off, the query on request, and copy as CSV. Reads AI SDK tool parts.
Agent planApprovalsA plan the user can edit before approving it, then the same list becomes the run log: per-step status and timing, resume from the step that failed, and AI SDK tool part mapping.
Claude composer inputInputsClaude-style landing composer: rounded prompt surface, model menu with extended thinking, attachment trigger, voice control, and category chips.
OpenAI image chatInputsOpenAI-style image composer: image vs. ask-anything modes, idea carousel, and attachment thumbnails for chat and tool UIs.
OpenAI image loaderFeedbackWebGL pixel-mosaic image generation loader with cycling status labels — monolith and compound APIs for AI SDK image flows.
Claude map itineraryTool resultsMulti-day Leaflet itinerary with days, photos, and routing-style layout for trip planning tool output.
Claude recipe toolTool resultsRich recipe UI for AI chat: image carousel, servings scale, print, copy, inline timers, and unit conversion — styled for tool-rendered content.
Claude text message toolTool resultsMulti-variant SMS drafts with edit, copy, reset, and optional Open in Messages — for text message tool payloads.
Claude email toolTool resultsEmail draft UI with subject/body variants, Gmail and mailto actions, copy and reset — styled for email tool output.
Claude image search toolTool resultsWeb image search results as a collage grid with lightbox carousel, domain badges, and favicons — for image_search-style tool output.
OpenAI What's New dialogFeedbackMulti-step onboarding-style dialog with hero imagery, captions, and next/finish flow — inspired by product update modals.
Cursor-style questions panelApprovalsMulti-question wizard with single- and multi-select, keyboard-friendly navigation, and optional other text — for in-app intake flows.Frequently asked questions
AI components are React UI for chat threads, streaming replies, tool results, agent status, and forms. Built on shadcn/ui for the Vercel AI SDK. Install with the shadcn CLI or copy the source.
shadcn
@shadcn
aisdkagents Looks amazing. A registry of agents makes so much sense. I like this distribution method.
Join AI Engineers from these companies