AI Components for shadcn/ui
Chat, forms, and tool UIs. Install with the shadcn CLI, or copy and paste.
66 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.
Mention menuInputsA prompt field with an @ menu for files, docs, people, and tools: grouped results as you type, arrow keys and Enter to pick, and mentions that delete as one piece. Sends them as AI SDK data parts.
Slash command menuInputsA prompt field with a / menu: recent commands first, the arguments still to type shown in the field, and a list of choices where an argument has them. Commands follow the MCP prompt shape and resolve to a message for AI SDK sendMessage.
Starter prompts2 variantsInputsThe 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. As a list or as a row of cards.
File diffCodeUnified file diff with sticky line numbers, word-level highlights, collapsed hunks, Shiki syntax colors, and optional accept/reject actions.
Terminal resultCodeA command the agent ran: the command line, exit status, and a live timer on one row, with the output behind it. Long output folds to its last lines, failures open by default, and ANSI colors are kept. Reads AI SDK tool parts.
Test run resultCodeA test run that shows only what failed: pass and fail counts on one row, then each failing test with its expected and received values diffed and a Fix action that hands the agent a ready-made prompt. Reads Jest and Vitest JSON reports and AI SDK tool parts.
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.
Knowledge sourcesFeedbackThe files and sites an agent can search. A healthy source shows only its name; indexing shows progress and a failure says why. Open one to re-index or remove it, and see how often the chat cited it.
Edit regionInputsBrush over part of an image, say what should change, and get back a prompt and a mask for an AI SDK image edit. Three brush sizes, undo, and a clear preview of the selected area.
Point and askInputsAn image the user can point at. Click to drop a pin, drag to draw a box, then ask. The marks reach the model drawn on the image and described in the text, as AI SDK message parts.
Region overlayTool resultsWhat a vision model read in an image, shown on the image. Point at a field and a spotlight finds it on the picture; point at the picture and its field lights up. Built from AI SDK structured output with box coordinates.
Edit before runApprovalsA tool call waiting for approval whose arguments the user can correct first: change the amount, pick another option, then run. Returns the edited input and what changed, from an AI SDK tool part.
Review queueFeedbackGrade real outputs one at a time from the keyboard: pass, fail with a reason, skip, go back. Reads items from AI SDK messages and hands back labeled rows for an eval set.
Research jobFeedbackOne long-running task the user can walk away from: what it is doing now, how far along it is, the sources found, what it has learned so far, and a notify-me toggle. Built from one AI SDK message.
Task trayFeedbackA small pill for agents working in the background. It says one thing: who needs you, what is running, or that the work is done. Press it for each task's progress and result. Maps from AI SDK chat status.
Voice sessionInputsVoice mode in one card: a wave that shows listening, thinking, and speaking, a live transcript with tool calls where they happened, and mute, interrupt, and end. Takes the state AI SDK useRealtime returns.
Browser sessionFeedbackWatch an agent drive a browser: the page as it is now, a pointer that glides to where it acted, one line about what it is doing, step-by-step review, and a Take over button. Reads AI SDK computer tool calls.
Image resultsTool resultsThe images a model made, and almost nothing else. Each one fades in as it arrives; click one to see it large, download it, or use it, and click again for all of them. Reads AI SDK file parts and generateImage results.
Model compareResponsesOne prompt answered by two or three models, side by side as they stream. Each answer shows its time and cost, the fastest and cheapest stand out, and one click picks the answer to continue with.
Model pickerInputsChoose a model and how hard it should think. Each model shows its context window and its cost next to the others, with what it is good for underneath. The picked id and reasoning level go straight into an AI SDK call.
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.
Live previewResponsesRuns model-written HTML, or a sandbox app by URL, in a frame. Catches runtime errors, takes build errors from outside, and offers one button that sends them back to the model. Reads the document out of an AI SDK message.
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.
Selection actionsResponsesWrap any answer or document. Selecting text opens a small toolbar to ask about the passage, explain it, quote it in a reply, or copy it, with each result ready for AI SDK sendMessage.
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.
Message branchesNavigationA version pager for a message that was edited or retried. The count opens a tree of every version with a preview of each, so you can jump straight to any of them, however deep. Its hook keeps the versions that useChat drops.
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.
Chart resultTool resultsA tool result drawn as a line, area, column, bar, or pie chart, with the one sentence it supports and a switch to the numbers behind it. Picks the chart from the rows, reads AI SDK tool parts, and needs no chart library.
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 panelApprovalsQuestions the agent needs answered before it goes on, one at a time from the keyboard: single choice, pick any, or a typed answer. Reads questions from an AI SDK tool call and hands the answers back as text.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