AI Components for shadcn/ui

Compatible with the Vercel AI SDK. Install with the shadcn CLI, or copy and paste.

201 components · Chat patterns
Install with your coding agent over MCP

ChatComposer10

Prompt inputComposer with mentions, skills and filesMention menuType @ to pull in files, people and toolsSlash command menuType / to run a command with argumentsStarter prompts2 variantsFirst prompts picked from what you useContext windowWhat fills the token budget, cell by cellVoice sessionLive voice with transcript and tool callsModel pickerPick a model and how hard it thinksAttachments trayFile chips with progress, retry and previewClaude composer inputLanding composer in the style of ClaudeOpenAI image chatImage composer in the style of OpenAI

ChatAnswers12

Limit reachedSays you hit the limit, and when it resetsKnowledge sourcesFiles and sites an agent can searchReport outputFlag a harmful reply for human reviewModel compareOne prompt, several models, side by sideInterrupted replyA reply that stopped, kept, with ContinueModel unavailableThe model is busy, and when it tries againAI answerGrounded answer with live citationsSource viewerOpens the document at the cited passageMessage actionsCopy, edit, retry and rate under a replySelection actionsSelect text to ask, explain or quoteMessage branchesPage through every version of a messageThinking stateReasoning and tool calls as a step list

ChatImages6

Edit regionBrush a mask and say what should changePoint and askPin or box part of an image, then askRegion overlayWhat a vision model read, on the imageBefore and afterDrag a divider between original and editImage resultsGenerated images that fade in as they landOpenAI image loaderPixel-mosaic loader for image generation

ChatSessions2

Session listChat history with search, pins and renameSession tabsOpen chats as tabs you drag into order

ChatScreens4

Chat threadMessage list built on AI SDK useChatPanel dockOne side panel, a tab per open itemThread headerRename, share and toggle panelsChat screenA whole chat app, already wired together

ChatWriting4

Prose diffAccept or reject a rewrite word by wordInline promptRewrite a selection with an instructionGhost completionDimmed suggestions ahead of the caretDocument historySaved states, with who or what changed it

AgentsConfiguration17

MCP server listConnect servers, switch tools on or offConnector syncWhere knowledge comes from, and how freshInstructions editorA system prompt with checked variablesTool pickerOne switch per tool an agent may callTool permissionsAlways, ask or never, per toolAgent listEvery agent, with failures lifted firstAgent createDescribe an agent, get a working draftAgent summaryStatus, model, tools and two weeks of runsModel settingsModel, reasoning, step limit and fallbackWorkflow stepOne node of a visual agent workflowWorkflow canvasDraw an agent workflow and watch it runStep pickerSearch step kinds and tools to add nextStep inspectorEdit a step's inputs and where they come fromVersion historyLive, draft and past versions of an agentSource ingestDrop files, links or text to add knowledgeRetrieval inspectorThe passages behind an answer, rankedSecrets managerWrite-only secrets, missing ones first

AgentsTriggers3

Trigger listEvery way an agent starts, with a switchWebhook triggerA URL that starts an agent from a requestEvent triggerA sentence that picks the event to start on

AgentsDeploy5

Publish reviewWhat changes when a draft goes liveDeploy channelsWhere an agent can be reached, per placeChannel setupConnect one channel and set when it repliesEmbed configuratorStyle the site widget beside a previewEmbed widgetThe chat a visitor opens on your site

AgentsEvals13

Test run panelTry an agent while you edit itReview queueGrade real outputs from the keyboardEval scorecardPass rate, criteria and regressionsEval datasetThe cases an agent is tested againstEval case editorTurn a real run into a test caseEval criteria editorDefine what the judge asksEval run historyPass rate across runs, against a baselineQuality trendJudge scores on live chats, with what changedQuality dropWhat fell, what caused it, one rollbackChange impactDid this change make it better or worse?Failure clustersFailing chats grouped by topicQuality alertsAlert rules that read as sentencesJudge samplingHow much the judge sees, and what it costs

AgentsProgress6

Research jobA long task you can walk away fromTask trayA pill for agents working in the backgroundBrowser sessionWatch an agent drive a browserRun recoveryPick a failed run up at the step that brokeAgent run treeParallel subagents as a live treeTool call cardA compact row per tool call

AgentsBulk runs7

File importDrop a spreadsheet, see what was readColumn mapperA model matches columns to your fieldsImport reviewFix, dedupe and check rows before they landEnrichment gridA table a model fills in, cell by cellAI column createOne prompt, filled in for every rowRun estimateWhat a run will cost, before it startsCell inspectorWhy a cell says what it says

AgentsApprovals9

Agent gateEvery way an agent stops to ask a personDecision inboxApprovals waiting on you, one at a timeTool call approvalApprove one tool call inline in the threadGenerative formA form that streams in, then you correctEdit before runCorrect the arguments, then approveGuardrail noticeSays what a guardrail caught, in a lineSchedule cardNext run countdown and a strip of past runsAgent planEdit the plan, approve, then watch it runCursor-style questions panelAnswer an agent's questions by keyboard

AgentsResults10

Line itemsStreamed rows you fix, total and confirmArtifact panelDocuments, code and charts an agent madeLive previewRuns model-written HTML and catches errorsData table resultQuery rows as a typed, sortable tableChart resultA tool result drawn as the right chartClaude map itineraryMulti-day trip on a map, day by dayClaude recipe toolRecipe with scaling, timers and unitsClaude text message toolSMS drafts in variants, ready to sendClaude email toolEmail drafts with Gmail and mailto actionsClaude image search toolWeb image results as a collage grid

AgentsCode3

File diffUnified diff with word-level highlightsTerminal resultA command, its exit status and its outputTest run resultA test run that shows only what failed

WorkspaceApp shell2

App sidebarThe left rail: chats, nav, usage, accountChat layoutSidebar, thread and a resizable side panel

WorkspaceNotifications9

Notification centerEverything that happened while you were outNotification preferencesWhat reaches you, and whereNotification channelsEmail, Slack and push, each one workingQuiet hoursPause or schedule when notifications waitEmail unsubscribeOne-click unsubscribe page, with UndoAway digestWhat finished and what waits, since you leftNotify when doneLeave a long run and hear when it's doneRun finished toastA toast when a background run finishesEmail layoutThe shell for every transactional email

WorkspaceOnboarding8

Connector setupConnect an app in one press, with proofSign-up cardSign up or in with no passwordRole and goal pickerTwo questions to ask right after signupSetup checklistThe steps left before a first useful answerTerms consentAI disclosure and terms, asked onceOpenAI What's New dialogMulti-step dialog for product updatesWorkspace createName a workspace, check its address liveInvite acceptThe page an invitation link opens

WorkspacePersonalization4

Data controlsTraining, history, export and deleteMemory managerWhat an agent remembers, one line eachScheduled tasksRecurring jobs with next run and a pauseCustom instructionsTell the assistant how to answer you

WorkspaceExtensions3

Skill libraryAdded skills, grouped by who made themSkill detailOne skill: its triggers, tools and filesExtension directoryA catalog of skills, plugins and servers

WorkspaceTeam4

Invite membersPaste any list of emails to inviteMembers tableMembers, roles and open invitationsAccess requestAsk for what your role can't doWorkspace switcherMove between workspaces from the sidebar

WorkspaceAccount4

Profile settingsWho you are in this workspaceAccount securityHow you sign in, and what protects itDevice sessionsEverywhere you are signed inLeave workspaceLeave, or hand it over first

WorkspaceBilling8

Checkout summaryThe total, before you payUpgrade paywallWhat you'd get, priced on what you usePlan pickerEvery plan, with yours markedTrial bannerDays left in the trial, and what to doTrial endedThe composer once a trial is over, draft keptSubscription statusWhere the plan stands, and the way backDowngrade impactWhat a smaller plan takes awayCancel flowWhy, one fitting offer, then the cancel

WorkspaceCollaboration5

Share threadChoose where the shared copy endsMultiplayer threadOne thread, several people, one modelHandoff cardPass a run in flight to a teammateAnswer commentsComment threads anchored to answer textPrompt libraryTeam prompts with owners and variables

DeveloperLogs & traces4

Run receiptWhat a run cost and where it wentTrace viewerOne run as a timeline, open on the failureRun logEvery agent run on one lineRequest logEvery provider request on one line

DeveloperAPI8

Rate limit statusUsage against each provider's rate limitAPI key managerCreate, scope and revoke API keysQuickstartA first request with the key filled inEndpoint barVerb, path and a Try it button on one lineSchema fieldsName, type and meaning of every fieldResponse examplesExample responses, one tab per statusAPI reference navEndpoints grouped by resource, with verbsCopy page menuCopy a docs page as Markdown for a model

AdminUsage & billing11

Spend breakdownAI spend by model, feature or userInvoice historyPast invoices, led by what needs attentionUsage meterPlan usage as one number and one barBudget alertsDrag a marker to set a spend alertSpend limitsSpend caps per member, team or API keyPlan compareYour plan and the next, on real usagePayment methodThe card on file, and the fix when it failsCredit top-upBuy credits, see how long they lastTop spendersWho is behind most of the spend, rankedSeat usageSeats paid for against seats usedCost anomalyOne spend spike and what caused it

AdminGovernance9

Data retentionHow long each kind of AI data is keptModel accessWhich models a workspace may useAudit logWho changed what and when, with the diffModeration queueJudge reported replies, one decision eachWorkspace data policyNo training, zero retention, for everyoneTrust centerCertifications, documents and a DPA to signSubprocessor listEvery vendor that touches customer dataData regionWhere data lives, and moving it safelyRole editorWhat each role can do

AdminIdentity3

Domain verificationProve you own the domainSSO setupConnect your identity providerSCIM provisioningMembers that follow your directory

MarketingSections5

Feature code block3 variantsFeature section with animated codeFeature Grid 1Feature grid with tilted card previewsBento Layout 1Animated bento for installs and featuresIntegration Showcase 1Integration cards with connection statusAI Integrations CircleIntegrations fanned out around a circle

MarketingComparison3

Model comparison3 variantsCompare models on performance and priceComparison Table 1Sortable table of model pricing and specsAgent ROI CalculatorInputs in, live agent savings out

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.

From $149

One license. 1,800+ files.

Get all access todayor browse the blocks first
shadcn
shadcn
Verified account

@shadcn

aisdkagents Looks amazing. A registry of agents makes so much sense. I like this distribution method.