# AI SDK Agents > 154 AI SDK patterns for chatbots, agents, tool calling, and streaming UI. Install with the shadcn CLI, download as Next.js, or export 78 verified backends as Hono servers for Node.js 24+. Built with shadcn/ui and TypeScript. AI SDK Agents is a pattern library for building AI applications with the Vercel AI SDK. Every pattern ships with full source code: React components, API routes, and tool definitions. Patterns work with OpenAI, Anthropic Claude, Google Gemini, and other providers supported by the AI SDK. Free patterns require no account; paid plans unlock the full library. Plans (one-time payment, lifetime license): - Pro ($149): all 154 patterns, commercial use, Next.js downloads, 78 verified Hono exports, future pattern updates - Premium ($199): everything in Pro, plus AI UI components, full-stack templates, and 19 coding-agent skills - Team ($999): Premium for up to 10 people, with priority support Documentation pages are available as raw markdown by appending `.md` to any docs URL. ## Start here - [AI SDK Agents](https://www.aisdkagents.com/): 154 copy-paste agent patterns for the Vercel AI SDK: tool calling, workflows, human-in-the-loop, memory, and streaming UI on shadcn/ui. - [AI Components](https://www.aisdkagents.com/ai-components): React UI for AI chat, tools, and forms on shadcn/ui and the AI SDK. - [All Patterns](https://www.aisdkagents.com/patterns): Browse every pattern: chat interfaces, agents, tools, workflows, artifacts, and integrations. ## Docs - [About AI SDK Agents](https://www.aisdkagents.com/docs/about.md): Full-stack Vercel AI SDK Blocks you can preview, install, and ship. - [Changelog](https://www.aisdkagents.com/docs/changelog.md): Latest updates and announcements. - [Free vs Pro](https://www.aisdkagents.com/docs/free-vs-pro.md): Compare free and Pro install and download flows, access checks, and what files you receive. - [AI Components Overview](https://www.aisdkagents.com/docs/ai-components.md): Premium CLI-installable UI building blocks for AI chat and tool-result experiences. - [MCP and registry access](https://www.aisdkagents.com/docs/ai-components/mcp.md): Let your coding agent browse and install AI Components through the shadcn MCP server, with one private registry token. - [AI Elements](https://www.aisdkagents.com/docs/blocks/ai-elements.md): shadcn/ui components for AI SDK chat UIs. Messages, prompts, tools, reasoning, and artifacts. - [First Block to production](https://www.aisdkagents.com/docs/blocks/first-block-to-production.md): A practical path from choosing a Block to shipping it safely in production. - [Blocks Overview](https://www.aisdkagents.com/docs/blocks.md): Installable, runnable AI SDK Blocks with live demos, CLI install, Next.js download, and optional Hono or Nitro export. - [Copy for a coding agent](https://www.aisdkagents.com/docs/foundations/copy-skill-files.md): How this action curates critical implementation files, formats them for AI coding tools, and speeds up iteration in Cursor, Claude Code, or Codex. - [Download as Next.js App](https://www.aisdkagents.com/docs/foundations/download-nextjs-app.md): What happens when you click Download as App for a Block, including free vs Pro pipelines, generated files, and first-run setup. - [Install with shadcn CLI](https://www.aisdkagents.com/docs/foundations/shadcn-cli-install.md): How CLI install works for free and Pro Blocks and AI Components, how tokenized installs are generated, and how to verify a successful install. - [Theming](https://www.aisdkagents.com/docs/foundations/theming.md): Using CSS Variables and color utilities for theming. - [Troubleshooting Install & Download](https://www.aisdkagents.com/docs/foundations/troubleshooting-install-download.md): Diagnose common install, entitlement, token, and runtime issues for CLI and Download as App workflows. - [Skills Overview](https://www.aisdkagents.com/docs/skills.md): Installable knowledge packages for coding agents. Skills teach architecture and workflows; they do not ship Block application source. - [Install Skills](https://www.aisdkagents.com/docs/skills/install.md): Install, verify, and update AI SDK Agents Skills with short-lived Skills CLI commands. - [Download a Template](https://www.aisdkagents.com/docs/templates/download.md): How Template downloads differ from Block zips, and how to run a Template locally the first time. - [Templates Overview](https://www.aisdkagents.com/docs/templates.md): Full-stack starter apps with auth, database, payments, and AI already connected. - [Compatibility & Limitations](https://www.aisdkagents.com/docs/blocks/hono/compatibility.md): Understand which patterns can be exported to Hono and the runtime boundaries of generated servers. - [Connect a Frontend](https://www.aisdkagents.com/docs/blocks/hono/connect-frontend.md): Point an AI SDK frontend or plain HTTP client at an exported Hono pattern server. - [Production Deployment](https://www.aisdkagents.com/docs/blocks/hono/deploy.md): Deploy a generated Hono API server with explicit networking, security, and streaming configuration. - [Export a Pattern](https://www.aisdkagents.com/docs/blocks/hono/export-pattern.md): Download a runnable Hono API server or copy its critical server files as AI-friendly Markdown. - [Hono API Servers](https://www.aisdkagents.com/docs/blocks/hono.md): Export supported AI SDK patterns as standalone Hono API servers that run on Node.js. - [Hono Troubleshooting](https://www.aisdkagents.com/docs/blocks/hono/troubleshooting.md): Diagnose unavailable exports, startup failures, CORS errors, and broken AI SDK streams in Hono pattern servers. - [Deploy a Nitro API server](https://www.aisdkagents.com/docs/blocks/nitro/deploy.md): Build and run a portable Nitro pattern export in production. - [Nitro API Servers](https://www.aisdkagents.com/docs/blocks/nitro.md): Export supported AI SDK patterns as standalone Nitro API servers that run on Node.js. ## Pattern Catalog - [All Patterns](https://www.aisdkagents.com/patterns): Browse every pattern — chat interfaces, agents, tools, workflows, artifacts, and integrations. - [Pattern Directory](https://www.aisdkagents.com/directory): Patterns organized by category and subcategory with search and filters. - [Free Patterns](https://www.aisdkagents.com/free): Open-source patterns with full source code, no account required. - [AI Components](https://www.aisdkagents.com/ai-components): React UI for AI chat, tools, and forms on shadcn/ui and the AI SDK. ## AI Components Live previews are public. Source and CLI install ship with Premium and Team. - [Prompt input](https://www.aisdkagents.com/ai-components/prompt-input): Expandable chat composer with @ sources, / skills, attachments, model picker, and rounded or pill variants. - [Mention menu](https://www.aisdkagents.com/ai-components/mention-menu): A 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 menu](https://www.aisdkagents.com/ai-components/slash-command-menu): A 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 prompts](https://www.aisdkagents.com/ai-components/starter-prompts): The 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. - [Context window](https://www.aisdkagents.com/ai-components/context-window): A 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. - [Voice session](https://www.aisdkagents.com/ai-components/voice-session): Voice 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. - [Model picker](https://www.aisdkagents.com/ai-components/model-picker): Choose 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. - [Attachments tray](https://www.aisdkagents.com/ai-components/attachments-tray): What 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. - [Claude composer input](https://www.aisdkagents.com/ai-components/claude-input): Claude-style landing composer: rounded prompt surface, model menu with extended thinking, attachment trigger, voice control, and category chips. - [OpenAI image chat](https://www.aisdkagents.com/ai-components/openai-chat-image): OpenAI-style image composer: image vs. ask-anything modes, idea carousel, and attachment thumbnails for chat and tool UIs. - [Limit reached](https://www.aisdkagents.com/ai-components/limit-reached): Shown in the thread in place of the reply that could not run: which limit was hit (messages, tokens, a model's cap or credits), a live countdown to the reset, and one way out chosen from what the plan allows: switch to a model with room, top up, or upgrade. When the reset passes it turns into Send now. Reads the limit from the useChat error. - [Knowledge sources](https://www.aisdkagents.com/ai-components/knowledge-sources): The 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. - [Report output](https://www.aisdkagents.com/ai-components/report-output): Report a response as harmful, separate from rating it unhelpful: pick a reason, add a note, choose whether reviewers see the chat, and send. Urgent reasons point to help right away. It confirms in place and can hide the response. Inline or as a dialog, and reportedMessages trims the AI SDK chat to send with it. - [Model compare](https://www.aisdkagents.com/ai-components/model-compare): One 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. - [Interrupted reply](https://www.aisdkagents.com/ai-components/interrupted-reply): A reply that ended early stays on screen, with three dots after the last word that arrived and one line under it saying why: you stopped it, the connection dropped, or it hit the length limit. Continue picks it up from there, and the dots breathe while it does. A dropped connection continues on its own when the browser is back online. Reads the reason from the AI SDK useChat onFinish callback and the text from the message. - [Model unavailable](https://www.aisdkagents.com/ai-components/model-unavailable): What the person sees when the model is busy, rate limited, or not answering: the model by name, one sentence in plain words, and a ring counting down to the next try, which happens on its own. Waits back off, a wait the provider asks for is honored, a long one is shown as a time, and after a few tries it stops and offers a fallback model as the one button. Never shows a status code. Reads the failure from an AI SDK APICallError, RetryError, or the useChat error. - [AI answer](https://www.aisdkagents.com/ai-components/ai-answer): A 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 viewer](https://www.aisdkagents.com/ai-components/source-viewer): The 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. - [Message actions](https://www.aisdkagents.com/ai-components/message-actions): The 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 actions](https://www.aisdkagents.com/ai-components/selection-actions): Wrap 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. - [Message branches](https://www.aisdkagents.com/ai-components/message-branches): A 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 state](https://www.aisdkagents.com/ai-components/thinking-state): Progress 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. - [Edit region](https://www.aisdkagents.com/ai-components/edit-region): Brush 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 ask](https://www.aisdkagents.com/ai-components/point-and-ask): An 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 overlay](https://www.aisdkagents.com/ai-components/region-overlay): What 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. - [Before and after](https://www.aisdkagents.com/ai-components/before-after): Judge an image edit by dragging a divider between the original and the result, then step back through earlier versions in the strip below. Builds its versions from AI SDK image results or an editing chat. - [Image results](https://www.aisdkagents.com/ai-components/image-results): The 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. - [OpenAI image loader](https://www.aisdkagents.com/ai-components/openai-image-loader): WebGL pixel-mosaic image generation loader with cycling status labels — monolith and compound APIs for AI SDK image flows. - [Session list](https://www.aisdkagents.com/ai-components/session-list): Chat 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 tabs](https://www.aisdkagents.com/ai-components/session-tabs): Open 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. - [Chat thread](https://www.aisdkagents.com/ai-components/chat-thread): The message list of a chat, built on AI SDK useChat messages and status. A question that was just asked moves to the top and the reply is written under it, so nothing you are reading moves. Jump to latest, a failed reply with Retry, and long pastes that fold. - [Panel dock](https://www.aisdkagents.com/ai-components/panel-dock): One side panel for everything a chat opens: artifacts, sources, a browser view. Each open item gets a tab, the one in front stays in view, and an item that was shown stays mounted so a preview does not reload. - [Thread header](https://www.aisdkagents.com/ai-components/thread-header): The bar above a chat: a title you rename in place, a slot for the model, Share, and the buttons that open the sidebar and the side panel. A title written by the model eases in, and a hairline appears once the thread scrolls under the bar. - [Chat screen](https://www.aisdkagents.com/ai-components/chat-screen): A whole chat app screen in one component: sidebar, header, thread, composer and side panel, already wired to each other. Takes messages, status, stop and regenerate straight from AI SDK useChat. - [Prose diff](https://www.aisdkagents.com/ai-components/prose-diff): Review 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. - [Inline prompt](https://www.aisdkagents.com/ai-components/inline-prompt): A prompt that opens on a selection in any editor: type an instruction or pick a preset, watch the rewrite stream in beside the struck original, then keep it, discard it, or ask for more. It never owns the document. Takes a streaming completion from the AI SDK. - [Ghost completion](https://www.aisdkagents.com/ai-components/ghost-completion): A writing field that suggests what comes next in dimmed text ahead of the caret. Tab takes it, a modifier with the right arrow takes one word, Escape or any other key lets it go, and typing along with it keeps it. Takes a streaming completion from the AI SDK. - [Document history](https://www.aisdkagents.com/ai-components/document-history): The saved states of a document as a short list: who changed it, and the instruction behind each change the model made. Opening one shows what it changed word by word, with one action to bring it back as a new checkpoint. Reads the instruction from AI SDK messages. - [MCP server list](https://www.aisdkagents.com/ai-components/mcp-server-list): Settings 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. - [Connector sync](https://www.aisdkagents.com/ai-components/connector-sync): The apps an agent's knowledge comes from, and whether each is in sync: when it last synced, how many documents it holds, and what the last sync changed. A connector that needs a new sign-in or failed opens by itself and says what to do. Counts AI SDK citations per app. - [Instructions editor](https://www.aisdkagents.com/ai-components/instructions-editor): A system prompt written as a document. Variables read as chips in the text, a row under it inserts them, and typing {{ completes one with Tab. It flags a variable that is not defined and a prompt past its token budget, and previews what the model will read. Resolves to AI SDK instructions. - [Tool picker](https://www.aisdkagents.com/ai-components/tool-picker): Choose the tools an agent may call: one row per tool with its mark, what it does, and one switch, grouped by MCP server when there are several. A row opens to the tool's inputs and whether it asks before it runs. Reads an AI SDK tool set and returns activeTools and toolApproval. - [Tool permissions](https://www.aisdkagents.com/ai-components/tool-permissions): Standing rules for what an assistant may do: each tool is set to always, ask, or never with one control, grouped by the app it belongs to, and one sentence says how many run without asking. Reads an AI SDK tool set and returns activeTools and toolApproval. - [Agent list](https://www.aisdkagents.com/ai-components/agent-list): Every agent in a workspace, one row each: its name, what it does, and the one thing worth knowing about it right now, with failed agents lifted to the top. Rows open, and a menu pauses, duplicates, or deletes. Reads its rows from AI SDK agents and results. - [Agent create](https://www.aisdkagents.com/ai-components/agent-create): Creates an agent from one sentence: describe it or start from a template, then watch the draft get written: name, instructions, tools and which of them ask first, model, and step limit. One button carries the whole flow. Reads a streamed AI SDK object and returns ToolLoopAgent settings. - [Agent summary](https://www.aisdkagents.com/ai-components/agent-summary): The top of an agent's page: its name, whether it is live, the model and tools it runs on, two weeks of runs as bars, and the one thing that needs a decision. The name renames in place and a switch pauses it. Builds its activity from stored AI SDK runs. - [Model settings](https://www.aisdkagents.com/ai-components/model-settings): The model an agent runs on and the limits it runs within: model, reasoning level, step limit, a fallback model, and temperature and output length behind one row. Each setting fits itself to what the picked model accepts. Returns AI SDK call options. - [Workflow step](https://www.aisdkagents.com/ai-components/workflow-step): One step of a visual agent workflow: a model call, a tool, a condition, or a handoff, with ports for the lines in and out, named branches, and what its last run did. Drop a canvas library's handles into the ports to use it as a node. Reads its run from AI SDK results. - [Workflow canvas](https://www.aisdkagents.com/ai-components/workflow-canvas): The surface an agent workflow is drawn on. Steps lay themselves out, lines join their ports, and a run plays across them as it streams in. Drag to connect, undo any change, and tidy the whole graph in one press. Reads runs from AI SDK data parts. - [Step picker](https://www.aisdkagents.com/ai-components/step-picker): The menu that answers what comes next in a workflow: step kinds and tools in one searchable list, driven from the keyboard. Use the panel on its own or behind an Add step button. Builds its tool rows from an AI SDK tool set. - [Step inspector](https://www.aisdkagents.com/ai-components/step-inspector): The panel for one step of a workflow: a model and its instructions, a tool's inputs, a condition's branches, or who a handoff goes to. Each input is typed in or read from an earlier step. Builds a tool's fields from its JSON Schema and says what is still missing. - [Version history](https://www.aisdkagents.com/ai-components/version-history): The saved versions of an agent as a short list: which one is live, which are drafts, and who changed what. Opening one shows its instructions, model and tools against the live version, with one action to publish or restore it. Saves AI SDK call settings as versions. - [Source ingest](https://www.aisdkagents.com/ai-components/source-ingest): One field for adding knowledge: drop files, paste links, or paste text. Each source shows the step it is on (uploading, reading, splitting, indexing) and says why when one fails. Reads progress from AI SDK data parts. - [Retrieval inspector](https://www.aisdkagents.com/ai-components/retrieval-inspector): Why an answer said what it said: the passages a search returned, ranked by score, with the ones the answer used and any better match it passed over. Opens a passage to the words the answer took. Reads the search tool and sources of an AI SDK message. - [Secrets manager](https://www.aisdkagents.com/ai-components/secrets-manager): The values an agent's tools read at run time, write-only: once saved, only a hint comes back. Secrets a tool needs and nobody has set are listed first, each with one field, so a missing key is found here and not in a failed run. Paste a .env block to add several at once, replace or remove one in place, and keep a value per environment. Reads what a tool set needs from each AI SDK tool's contextSchema. - [Trigger list](https://www.aisdkagents.com/ai-components/trigger-list): Every way an agent starts, one row each: schedules, webhooks, app events, and a manual run. Each row has a switch and one fact, the next start or the last one, and a start that failed says why and offers a retry. One sentence up top counts what is on and names the one problem. Reads the last start from an AI SDK result or message. - [Webhook trigger](https://www.aisdkagents.com/ai-components/webhook-trigger): One webhook that starts an agent: the URL, which copies when pressed, the template that turns a request body into the prompt with the payload's own paths as chips, the signing secret behind a two-press rotate, and the last five deliveries, each opening to its payload. Send test adds a delivery without the list changing height. Builds the prompt for an AI SDK agent and reads a delivery from its result. - [Event trigger](https://www.aisdkagents.com/ai-components/event-trigger): One sentence that says which app event starts an agent: every word is a menu, and conditions are added as more of the sentence. Under it, the rule is run over recent events and says how many it would have matched. A rule with a gap, or one that points at a disconnected app, cannot be turned on and says why. Ships the match function and the prompt template for an AI SDK agent. - [Publish review](https://www.aisdkagents.com/ai-components/publish-review): The moment a draft agent goes live: what it changes, whether its checks hold, and where it lands, on one card with one button. The button waits while evals run, stops at a blocking failure, and asks for a second press when a check did not pass. Works the changes out from two AI SDK agent settings. - [Deploy channels](https://www.aisdkagents.com/ai-components/deploy-channels): Where an agent can be reached, one row per place: Slack, the website, the API, email. A place that is set up has one switch for live or paused, one that is not offers setup, and one that broke says why. A row opens to its address and how much it is used. Reads channel changes from AI SDK data parts. - [Channel setup](https://www.aisdkagents.com/ai-components/channel-setup): Sets up one place an agent answers from, such as Slack: connect the workspace, choose when it replies, and pick the channels. Each part shows once the one before it is done, and one sentence says what turning it on will do. Decides in your webhook whether a message deserves an AI SDK call. - [Embed configurator](https://www.aisdkagents.com/ai-components/embed-configurator): Sets up the site widget for an agent: its name, first message, color, corner, and the sites allowed to load it, beside a live preview of the real widget. The install tag names only the agent, so a saved change reaches every site without a new paste. Checks the request origin before an AI SDK route streams. - [Embed widget](https://www.aisdkagents.com/ai-components/embed-widget): The chat a visitor opens from the corner of a site: a launcher and the panel it opens, with a greeting, starter questions, and a field that sends on Enter. It follows a streaming reply unless the visitor scrolled up, names the tool it is waiting on, and marks the launcher when a reply lands while closed. Takes useChat messages and status. - [Test run panel](https://www.aisdkagents.com/ai-components/test-run-panel): Try an agent while you edit it: send a test message, watch the tool calls and the reply stream, and see which draft of the instructions wrote the answer. After an edit the old answer dims and one button reruns it on the new draft. Reads an AI SDK chat. - [Review queue](https://www.aisdkagents.com/ai-components/review-queue): Grade 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. - [Eval scorecard](https://www.aisdkagents.com/ai-components/eval-scorecard): Results 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. - [Eval dataset](https://www.aisdkagents.com/ai-components/eval-dataset): The cases an agent is tested against. Each row is two lines, what the agent is asked and what a good answer says, and any text is edited where it stands. Open a row for its context, tags, name and why it failed last time. Type in the pinned last row to add a case, accept a real run's answer in one press, filter by tag or by what failed, import JSONL or CSV by button, drop or paste, and run exactly what is in view. Ships helpers that turn AI SDK messages and Review Queue rows into cases and build the state for experimental_evaluate. - [Eval case editor](https://www.aisdkagents.com/ai-components/eval-case-editor): One eval case in full: input, expected answer, tags and optional context, with a single step that turns a real run's output into the expected answer. Saves with a promise, warns about duplicate inputs, keeps a draft when the case changes elsewhere, and drops its card to sit inside a dataset row. - [Eval criteria editor](https://www.aisdkagents.com/ai-components/eval-criteria-editor): Define what the judge asks about every answer: yes or no, a scale of described levels, or named choices, with a pass line drawn where the pass mark falls among the levels. Exports the questions for AI SDK experimental_evaluate and the scales that map its answers back to scores. - [Eval run history](https://www.aisdkagents.com/ai-components/eval-run-history): Whether an agent is getting better: pass rate across eval runs as one line, measured against a baseline you choose, with regressions marked and dataset changes flagged. Scrub the chart or the list to read any run, and open one for its scorecard. - [Quality trend](https://www.aisdkagents.com/ai-components/quality-trend): How good a live AI product's answers are over time: a judge model's scores on a sample of real chats, one line at a time, with thumbs down and retries beside them. Every model swap, prompt change and deploy is a marker on the timeline, and the sentence names the one the score moved after. qualityRecord reads AI SDK experimental_evaluate answers; qualityBuckets folds them into days. - [Quality drop](https://www.aisdkagents.com/ai-components/quality-drop): One card for one drop in live quality: what fell and by how much against its usual level, the change shipped right before it, and a few failing chats with the judge's reason. One button rolls the change back, and the card follows the score until it recovers. qualityDrop finds the drop in judged buckets; qualityDropSample reads a failing chat from AI SDK messages. - [Change impact](https://www.aisdkagents.com/ai-components/change-impact): Did this change make things better or worse? It sets judge scores and user signals from before a model swap, prompt change or deploy against after (or old against new on a canary), each criterion a dot sliding from where it was with a band for how sure that is. Each move is called better, worse, no different or too close to call, with the chats a close call still needs. One action follows the verdict: roll back or ship. - [Failure clusters](https://www.aisdkagents.com/ai-components/failure-clusters): Where a live AI product is failing: failing chats grouped by topic, each with the share failing now against before, the topics that got worse most first. A topic opens to failing chats with the judge's reason, and becomes an eval set in one press. failureClusters folds judged chats that an AI SDK call has given a topic. - [Quality alerts](https://www.aisdkagents.com/ai-components/quality-alerts): When live quality should reach someone, as rules that read as sentences whose words are the controls: tell #quality when Accurate falls below 80 over a day. Each rule is played back over past days, so it says how often it would have fired, and whether it is firing now, before it pages anyone. qualityAlertCheck runs the same check on the server. - [Judge sampling](https://www.aisdkagents.com/ai-components/judge-sampling): How much live traffic the judge model sees: the share of chats judged, the criteria, the judge model, and whether every thumbs down is judged too. It says what that costs a day and how small a drop it can see within a day. shouldJudge samples by chat id so every server agrees, inside an AI SDK onFinish. - [Research job](https://www.aisdkagents.com/ai-components/research-job): One 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 tray](https://www.aisdkagents.com/ai-components/task-tray): A 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. - [Browser session](https://www.aisdkagents.com/ai-components/browser-session): Watch 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. - [Run recovery](https://www.aisdkagents.com/ai-components/run-recovery): A failed agent run, picked up where it broke. The steps that finished fold into one line, the step that failed says why in a sentence with what it got back one press away, and the steps still to come are named. Resume from that step is the one button; Change input opens the step's input in place first. While it runs again the card follows it step by step and ends on Recovered. A step that cannot resume offers a new run instead. Reads steps from the tool parts of an AI SDK message. - [Agent run tree](https://www.aisdkagents.com/ai-components/agent-run-tree): Parallel 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 card](https://www.aisdkagents.com/ai-components/tool-call-card): A 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. - [Agent inbox](https://www.aisdkagents.com/ai-components/agent-inbox): Every conversation your agents are working, one row each: the agent, what the thread is about, its latest line, and a status ring that fills as the agent works, turns orange when it needs you, and ticks when it is done. Threads that need a person come first. Archive, snooze until later or until the agent replies, mark read, and select many at once with the keyboard (j, k, x, e, h, u, z) or the pointer. inboxStatusFromChat reads each row's status from an AI SDK chat. - [Agent thread](https://www.aisdkagents.com/ai-components/agent-thread): One agent conversation, opened from the inbox. A status line under the title says what the agent is doing, how far along it is and for how long, or what it is waiting on, with one button: Stop, Review or Retry. Below it, people and the agent talk in one timeline where each tool call is a single line that opens to its input and output, and an approval is answered in place. Takes AI SDK messages and addToolApprovalResponse as they are. - [Inbox views](https://www.aisdkagents.com/ai-components/inbox-views): The rail beside an agent inbox: All inboxes, Needs you, Running, Snoozed and Archived, then one inbox per agent. Counts come from the same threads the inbox shows, so the two never disagree, and the number turns orange only when something is waiting on you. - [File import](https://www.aisdkagents.com/ai-components/file-import): The first step of an import. Drop, choose or paste a CSV, TSV or Excel file and see what was read: the rows, the columns and a preview. The separator, encoding, header row and each column's kind are detected, and anything that looks off (a guessed encoding, garbled characters, rows that split unevenly, an unclosed quote) is named with the one change that fixes it. Reads XLSX in the browser with no spreadsheet library. - [Column mapper](https://www.aisdkagents.com/ai-components/column-mapper): The step where a model matches an imported file's columns to your fields. One line per column says where it goes and how sure the match is, and unsure matches are flagged to check. Open a line to see its values and why it was matched, then send it elsewhere or leave it out. Streams the model's matches as they arrive, matches by header and values on its own without one, and ships the prompt and JSON schema for AI SDK Output.object. - [Import review](https://www.aisdkagents.com/ai-components/import-review): The last step of an import, before anything is written. Counts the rows that are ready, need a fix, or repeat another row or one you already have, and lists every value that was tidied on the way in, each with Undo. Click a value to fix it and Enter moves to the next; Suggest fixes asks a model for the rest. Hands back the rows to import and the ones left out, which download as CSV. - [Enrichment grid](https://www.aisdkagents.com/ai-components/enrichment-grid): A table a model fills in, one cell at a time. Source columns sit beside AI columns, and every AI cell shows where it stands: waiting, running, its answer, or why it failed. Each AI column's header carries the one action it needs now: Run for rows that have not run, a progress bar while they do, then Retry for the rows that failed. Virtualized for thousands of rows, with arrow-key navigation and copy. Reads cells from the data parts an AI SDK route streams. - [AI column create](https://www.aisdkagents.com/ai-components/ai-column-create): Define a column a model fills for every row. Write the prompt once and pull in any column as {{Column}}, typed with autocomplete or picked from a row of chips; unknown columns are marked as you type. Say what each cell holds (text, a number, yes or no, or one of a list) and which model answers, then try it on the first few rows before adding it. Fills the prompt per row and maps to AI SDK Output. - [Run estimate](https://www.aisdkagents.com/ai-components/run-estimate): What a run will cost before it starts. One figure with its range, how long it takes, and how much of the balance or spend limit it uses. Pick what to run (all rows, failed rows, a test batch) and the figure follows. When the run would not fit it says so in plain words and offers a top-up or the rows that fit. Prices AI SDK usage from preview runs into a per-row range. - [Cell inspector](https://www.aisdkagents.com/ai-components/cell-inspector): One cell of an AI column, opened: the answer, why the model gave it, the pages it read, and the prompt it was sent with this row's values marked. The answer is the edit control: type a new one, or pick from the column's options, and go back to the model's answer later. Run this row again, step to the next row with J and K, and see the model, tokens, cost and time. Reads usage, reasoning and sources from an AI SDK result. - [Agent gate](https://www.aisdkagents.com/ai-components/agent-gate): Human-in-the-loop agent gate: paged questions, plan approval, plugin connect, permission, eval scorecard, secret access, handoff, and scheduled runs. - [Decision inbox](https://www.aisdkagents.com/ai-components/decision-inbox): One 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. - [Tool call approval](https://www.aisdkagents.com/ai-components/tool-call-approval): One AI SDK tool call waiting on a person, inline in the thread: what the agent wants to do, the arguments it will use, and one answer. Once answered it folds to a single row that stays as the record. Optional countdown, deny with a reason, and keyboard shortcuts. - [Generative form](https://www.aisdkagents.com/ai-components/generative-form): A 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. - [Edit before run](https://www.aisdkagents.com/ai-components/edit-before-run): A 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. - [Guardrail notice](https://www.aisdkagents.com/ai-components/guardrail-notice): Tells 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. - [Schedule card](https://www.aisdkagents.com/ai-components/schedule-card): An 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. - [Agent plan](https://www.aisdkagents.com/ai-components/agent-plan): A 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. - [Cursor-style questions panel](https://www.aisdkagents.com/ai-components/cursor-questions-panel): Questions 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. - [Line items](https://www.aisdkagents.com/ai-components/line-items): Rows 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. - [Artifact panel](https://www.aisdkagents.com/ai-components/artifact-panel): A 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 preview](https://www.aisdkagents.com/ai-components/live-preview): Runs 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. - [Data table result](https://www.aisdkagents.com/ai-components/data-table-result): Rows 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 result](https://www.aisdkagents.com/ai-components/chart-result): A 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. - [Claude map itinerary](https://www.aisdkagents.com/ai-components/claude-map-itinerary-tool): Multi-day Leaflet itinerary with days, photos, and routing-style layout for trip planning tool output. - [Claude recipe tool](https://www.aisdkagents.com/ai-components/claude-recipe-tool): Rich recipe UI for AI chat: image carousel, servings scale, print, copy, inline timers, and unit conversion — styled for tool-rendered content. - [Claude text message tool](https://www.aisdkagents.com/ai-components/claude-text-tool): Multi-variant SMS drafts with edit, copy, reset, and optional Open in Messages — for text message tool payloads. - [Claude email tool](https://www.aisdkagents.com/ai-components/claude-email-tool): Email draft UI with subject/body variants, Gmail and mailto actions, copy and reset — styled for email tool output. - [Claude image search tool](https://www.aisdkagents.com/ai-components/claude-image-search-tool): Web image search results as a collage grid with lightbox carousel, domain badges, and favicons — for image_search-style tool output. - [File diff](https://www.aisdkagents.com/ai-components/file-diff): Unified file diff with sticky line numbers, word-level highlights, collapsed hunks, Shiki syntax colors, and optional accept/reject actions. - [Terminal result](https://www.aisdkagents.com/ai-components/terminal-result): A 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 result](https://www.aisdkagents.com/ai-components/test-run-result): A 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. - [App sidebar](https://www.aisdkagents.com/ai-components/app-sidebar): The left rail of an AI app: the product mark, new chat, search, navigation, a slot for the chat list, plan usage and the account. It closes to a rail of marks that stay exactly where they were, with each label as a tooltip. - [Chat layout](https://www.aisdkagents.com/ai-components/chat-layout): The frame a chat app sits in: sidebar, thread and a side panel you resize by dragging the gap between them. Under a set width the panes become sheets over the thread. Keeps a preview mounted while its panel is hidden. - [Notification center](https://www.aisdkagents.com/ai-components/notification-center): A bell for the app header that counts what is unread and opens to everything that happened while work went on without you: finished and failed runs, approvals, mentions and alerts, newest first and grouped by day. Narrow it to what needs you, mark all read, and page in older items as you scroll. Takes ActivityEvent rows; activityFromChat builds one from an AI SDK chat. - [Notification preferences](https://www.aisdkagents.com/ai-components/notification-preferences): What reaches a person, and where: one row per kind of notification, one column per channel (in app, email, Slack, push), each cell a toggle. Urgent things go everywhere and routine ones stay in the app. Columns not set up offer Set up, required channels stay on with the reason, and a column's name turns it on or off for every row. routeNotification decides where each event goes on the server. - [Notification channels](https://www.aisdkagents.com/ai-components/notification-channels): Where notifications can reach a person, each shown working or with the one step that makes it work: verify the email address, connect Slack for direct messages, turn on push in this browser (asking for permission only when pressed, and saying how to unblock it when blocked). Lists the other phones and browsers, and every ready channel can send a test. - [Quiet hours](https://www.aisdkagents.com/ai-components/quiet-hours): When notifications wait: a pause for now (an hour, until tomorrow, until Monday), a weekly schedule in the person's own time zone, and one exception so approvals still come through. The top line always says where things stand. Held notifications arrive together when it ends, and routeNotification applies all of it on the server. - [Email unsubscribe](https://www.aisdkagents.com/ai-components/email-unsubscribe): The page an email's unsubscribe link opens, no sign-in needed. It stops that kind of email as the page opens and says so plainly, with Undo, a lighter option to stay on, a way to stop everything that can be stopped, and a link to the full settings. Handles an expired link and a failed request. - [Away digest](https://www.aisdkagents.com/ai-components/away-digest): The card that greets someone coming back: what finished, what failed, and what waits on them since they were last here. Approvals come first and carry the one button, finished runs fold into a single row, and dismissing it marks it seen. Takes the same ActivityEvent rows as the notification center. - [Notify when done](https://www.aisdkagents.com/ai-components/notify-when-done): Sits beside a long run and offers to tell the user when it is done, so they can leave. One press turns it on with the channels they chose last; the menu switches between this browser, email and Slack. Shows time left from an estimate, asks for browser permission only when it is needed, and raises the browser notification itself when the tab is hidden. Takes useChat status. - [Run finished toast](https://www.aisdkagents.com/ai-components/run-finished-toast): The toast for a run that stopped while the user was elsewhere in the app: what it was, how it went, and one button to go and see it. Runs that finish together share one toast that counts up instead of stacking. showRunFinishedToast is safe to call from an effect, and useRunFinishedToasts drives it from a list of runs. Built on sonner. - [Email layout](https://www.aisdkagents.com/ai-components/email-layout): The shell every transactional email shares, built on React Email: the brand on top, one card for the message, and a footer that says why it was sent with links to notification settings and unsubscribe. Inline styles so it holds in Gmail and Outlook, dark mode where the client supports it, and heading, text, button, panel and facts parts to fill it. - [Connector setup](https://www.aisdkagents.com/ai-components/connector-setup): The apps a new user can connect, one row and one press each. An app signs in, reads what is there, then shows proof of what the assistant can now see and a question it can answer from it, which one click runs. Apps that fail say why, apps a person cannot connect say who can, and the step can always be skipped. Reads progress from AI SDK data parts and returns tool names for activeTools. - [Sign-up card](https://www.aisdkagents.com/ai-components/sign-up-card): One card for signing up and signing in, with no password: provider buttons and an emailed link or code. It marks the way the visitor signed in last time, catches a mistyped address, opens their inbox, and takes the code by typing, paste, or autofill. Shows the AI SDK message they were about to send, so it can go out once they are in. - [Role and goal picker](https://www.aisdkagents.com/ai-components/role-goal-picker): The two questions to ask right after signup: what the person does, then what they want done first. Each answer folds into its row and changes what comes next: the role decides which goals are offered, and both decide what gets set up, shown before one button to continue. Takes goals streamed from the AI SDK and returns lines for the model's instructions. - [Setup checklist](https://www.aisdkagents.com/ai-components/setup-checklist): The steps left before a new user gets their first useful answer, on one small card that sits beside the product. The next step is open with one button, steps tick themselves as the work gets done, and the card says it is finished and then leaves for good. Ticks steps from AI SDK messages and tool calls. - [Terms consent](https://www.aisdkagents.com/ai-components/terms-consent): What someone agrees to before using an AI product: that answers come from AI, what happens to their chats under the workspace policy, and, when the workspace leaves it to them, whether providers may learn from their chats. An optional age box, linked terms, one Agree button. When the terms change it asks again and lists only what is new. Inline or as a modal. - [OpenAI What's New dialog](https://www.aisdkagents.com/ai-components/openai-whats-new-dialog): Multi-step onboarding-style dialog with hero imagery, captions, and next/finish flow — inspired by product update modals. - [Workspace create](https://www.aisdkagents.com/ai-components/workspace-create): The step after signup that names a workspace: a name, an address that follows the name until it is edited, and a live check that the address is free, with a free one offered when it is not. A company email adds one switch that lets colleagues join without an invitation. - [Invite accept](https://www.aisdkagents.com/ai-components/invite-accept): The page an invitation link opens: who invited you, to which workspace, in which role, and one button to join. It also covers the invitation that expired, was withdrawn, was already used, or was sent to a different account than the one signed in. - [Data controls](https://www.aisdkagents.com/ai-components/data-controls): Where a user decides what happens to their own data: a switch for model training, a switch for chat history, an export, and a delete that needs a typed word. Each line says what the setting means right now, and a failed save puts the switch back. Carries the choices into AI SDK calls and builds the export from AI SDK messages. - [Memory manager](https://www.aisdkagents.com/ai-components/memory-manager): What 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. - [Scheduled tasks](https://www.aisdkagents.com/ai-components/scheduled-tasks): Every recurring job a user has set up for their agent, in one list: what runs, how often, and when it runs next, with a switch to pause each one. A failed run says why and offers a retry, and one sentence up top says what is coming next. Reads the last run from an AI SDK message. - [Custom instructions](https://www.aisdkagents.com/ai-components/custom-instructions): Where a user tells the assistant who they are and how to answer, with a sample answer underneath that rewrites itself as they type. Ready-made lines switch on and off as chips, a switch turns the instructions off without deleting them, and the footer says one thing: how to save, or what is in the way. Merges into AI SDK instructions. - [Skill library](https://www.aisdkagents.com/ai-components/skill-library): The skills a user has added to their assistant, grouped by who made them: their own, their team's, and the ones that ship with the product. Every row has a switch, and says whether the assistant reaches for the skill on its own or only on request. A row opens in place to its full description, that choice, and update and remove. A second side holds Discover, and a first-run banner points there. Lists automatic skills for AI SDK instructions. - [Skill detail](https://www.aisdkagents.com/ai-components/skill-detail): One skill, opened: what it does, when the assistant reaches for it, the tools it may call, and every file inside it, with the ones it can run marked. One sentence says what it is trusted with, and one switch turns it on. Reads a SKILL.md and its allowed tools. - [Extension directory](https://www.aisdkagents.com/ai-components/extension-directory): A catalog of things to add to an assistant: skills, plugins, MCP servers, or connectors. Cards carry the real brand mark, a category filter narrows them, and one click adds: the card shows it working, then added, or offers another try. Turns installed extensions into AI SDK active tools. - [Invite members](https://www.aisdkagents.com/ai-components/invite-members): Invite teammates by typing or pasting any list of emails. Each address becomes a chip, people already in the workspace are left out, and anything that is not an address can be pressed to fix it. One sentence says what the invites do to the plan's seats before the button sends them. - [Members table](https://www.aisdkagents.com/ai-components/members-table): Everyone in a workspace with their role and when they were last active, and the open invitations in the same list. The role is the one control on a row: it changes the role, removes the member, or resends and revokes an invitation, and the last owner cannot be removed. - [Access request](https://www.aisdkagents.com/ai-components/access-request): Where a role blocks something, the way to ask for it: what is needed, who can give it, an optional reason, and one Request button. It says who was told while it waits, then opens the way back or says why not. Reads the refusal from a useChat error and hands the request to Decision inbox. - [Workspace switcher](https://www.aisdkagents.com/ai-components/workspace-switcher): The sidebar control for moving between workspaces: the current one with its mark, a menu of the others, invitations that can be joined in place, and a row to make a new one. Switching shows at once and rolls back if it fails. - [Profile settings](https://www.aisdkagents.com/ai-components/profile-settings): Who the person is in a workspace: photo, name, the name people mention, email, time zone and language, each edited where it stands and saved when left. A new email takes effect only after the code sent to it is entered, and a device on another time zone is offered as a switch. profileInstructions puts the same facts in an AI SDK system prompt. - [Account security](https://www.aisdkagents.com/ai-components/account-security): How the person signs in and what protects it: linked accounts and passkeys, two-step verification with an authenticator app, and recovery codes shown once. It leads with the one weak spot, such as a workspace that requires a second step, and never lets the last way in be removed. - [Device sessions](https://www.aisdkagents.com/ai-components/device-sessions): Everywhere the account is signed in, one line per device with its place and last use, and this device marked. A sign-in the person has not confirmed is listed first. Sign out one device, or every other one with a second press. CLIs and MCP clients signed in with a token are listed as apps. - [Leave workspace](https://www.aisdkagents.com/ai-components/leave-workspace): The way out of a workspace and out of the product. The only owner hands the workspace over first, as step one; the only member is told leaving deletes it. Deleting the account says what goes with it, chats, agents and API keys, before the second press. - [Checkout summary](https://www.aisdkagents.com/ai-components/checkout-summary): The step before payment: what is charged today and why, line by line. Seats can be stepped or typed, monthly or yearly is one switch, a promotion code is checked by your provider, and credit for unused time and tax are their own lines. Says what the next charge will be, with a usage estimate from AI SDK usage, and hands off to Stripe Checkout or a Payment Element without asking for card details. - [Upgrade paywall](https://www.aisdkagents.com/ai-components/upgrade-paywall): The paywall that opens when someone reaches a gated feature. It leads with the feature they just tried, keeps one plan in focus, prices it for their seats and billing period, and draws last month's usage against what the plan includes. One button continues to checkout. As a panel or a dialog. - [Plan picker](https://www.aisdkagents.com/ai-components/plan-picker): Every plan in one list, with the current one marked and the account's usage drawn against each plan's limit. Monthly or yearly billing. Picking a plan shows what the change costs before you confirm: the prorated charge today and the next one, or when a downgrade takes effect. - [Trial banner](https://www.aisdkagents.com/ai-components/trial-banner): How much of a trial is left, wherever a trial user looks: one row across the top of the app, or stacked in a sidebar. A ring empties as the days pass, the title counts down in days, then hours, then minutes, and one line says what has been used and what happens at the end. One action: add a card to keep the plan, or choose one. In the last two days it turns urgent through its color, not its size. With a card on file it stays calm, and when the trial ends it says the plan has started. Reads a Stripe subscription. - [Trial ended](https://www.aisdkagents.com/ai-components/trial-ended): The composer, once a trial is over. The thread stays readable; this card says what was made is saved, keeps the message that was about to be sent, and offers one way on: keep the plan that was tried. Every plan, the free plan and a few more days are there, but quieter. Once the plan is kept or the trial extended, it hands the draft back with Send. Reads the ended trial from the useChat error a route returns. - [Subscription status](https://www.aisdkagents.com/ai-components/subscription-status): Where a subscription stands and the one way back from what is scheduled. An active plan says when it renews and offers a pause or a cancel, quietly. A cancel, a pause or a downgrade says what happens on which day and offers to take it back. A pause can be chosen right here: pick one to three months, see when billing stops and starts again, and confirm. Reads a Stripe subscription. - [Downgrade impact](https://www.aisdkagents.com/ai-components/downgrade-impact): What a downgrade takes away, said before it happens. The new price and the day, then only what goes over the new plan's limits, worst first, each with what happens to it and, where it helps, a way to decide now (who keeps a seat). What is kept is said too. Scheduling the move asks twice when something will be lost, and once scheduled it can be undone until the day. Counts AI SDK token usage against the new plan's allowance; Plan picker sends a downgrade here. - [Cancel flow](https://www.aisdkagents.com/ai-components/cancel-flow): Canceling in three short steps. Why, in one tap with an optional note. Then the one offer matched to that reason: half off when it costs too much, a pause when it sits unused, a conversation when something is missing, and no offer for a reason that has none. Then what happens and on which day, and the cancel. It ends on the date the plan stops, with Resume. A note under Something else can be read by a model into a reason, so it still gets the right offer. - [Share thread](https://www.aisdkagents.com/ai-components/share-thread): The share dialog for a conversation. A labelled marker in an outline of the thread sets where the shared copy ends: drag it, click a message, or use the arrow keys. One sentence says who can read how much, tool results and files each get a switch, and one press creates the link and copies it. Reads AI SDK messages and returns the trimmed copy to store. - [Multiplayer thread](https://www.aisdkagents.com/ai-components/multiplayer-thread): One thread, several people, one model. Every prompt carries its author, presence shows who is here, and prompts sent while a reply is streaming wait in a queue that can be dragged into a new order or cancelled. Ships a queue hook for the AI SDK chat status. - [Handoff card](https://www.aisdkagents.com/ai-components/handoff-card): Passes an agent run in flight to a teammate. The model writes the brief as it streams: what is done, what is blocked, and the one decision waiting. The receiver takes over with one button and the run's approvals follow. Reads the partial object the AI SDK streams. - [Answer comments](https://www.aisdkagents.com/ai-components/answer-comments): Comments anchored to the words of a model answer. Select any stretch of text to start a thread, reply, and resolve. One button turns the open threads into a single instruction for the model, and the threads find their place again in the revised text. Works with the AI SDK chat status. - [Prompt library](https://www.aisdkagents.com/ai-components/prompt-library): The prompts a team keeps, with who owns each one and how often it runs. Opening a prompt shows its variables as fields and fills them in as you type. Editing your own prompt changes it for everyone; editing someone else's saves a copy. The filled text is ready for AI SDK sendMessage. - [Run receipt](https://www.aisdkagents.com/ai-components/run-receipt): What 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. - [Trace viewer](https://www.aisdkagents.com/ai-components/trace-viewer): One agent run as a timeline: every model call and tool call on a shared clock, with latency and tokens per row. It opens on the failed call, or the slowest one, and shows that call's input and output. Builds its spans from AI SDK steps. - [Run log](https://www.aisdkagents.com/ai-components/run-log): Every agent run on one line: what was asked, the model, how long it took, and what it cost. Only a failed or live run gets a mark, and a failure says why. Filter by status and model, sort by duration or cost, and open a run in a panel beside the list to step through traces. Builds its rows from AI SDK steps. - [Request log](https://www.aisdkagents.com/ai-components/request-log): Every request to a model provider on one line: status code, model, tokens in and out, latency, and time. Failures and slow calls are the only rows with weight. A row opens in place to its request and response bodies, with the request ID one press from the clipboard. New requests wait behind a pill while you read. Builds rows from AI SDK steps and API call errors. - [Rate limit status](https://www.aisdkagents.com/ai-components/rate-limit-status): Requests and tokens per minute against each provider's limit, with the provider being limited listed first and a countdown to when it takes requests again. Reads the rate-limit headers on AI SDK responses. - [API key manager](https://www.aisdkagents.com/ai-components/api-key-manager): API keys for your product: create one, see its secret a single time, then only its name, scope, and when it was last used. Revoke takes two presses. A second variant stores the keys your users bring for model providers, ready for AI SDK gateway BYOK. - [Quickstart](https://www.aisdkagents.com/ai-components/quickstart): The first request a developer makes: the snippet in cURL, TypeScript, or Python with their key already in place, masked on screen and written in full on copy. The card listens for the request or sends it from the page, then shows the reply as it lands with its status, time, and tokens. Reads AI SDK useChat, useCompletion, and generateText results. - [Endpoint bar](https://www.aisdkagents.com/ai-components/endpoint-bar): One endpoint on one line: its verb, its path, and a Try it button. Path parameters are slots in the path that fill as you type, the form unfolds from the bar, and the response streams in underneath with its status and time. Reads AI SDK useCompletion output and call errors. - [Schema fields](https://www.aisdkagents.com/ai-components/schema-fields): The fields a request body, a tool, or a structured output takes: name, type, whether it is required, and what it means. Nested objects and one-of choices open in place, and a field folded away is still found by the browser's find-in-page. Reads a JSON Schema, an AI SDK schema, or a tool's input schema. - [Response examples](https://www.aisdkagents.com/ai-components/response-examples): What an endpoint sends back, one tab per status code, with errors set apart from successes. Deep values fold to a count, the card eases to each body's height, and Copy takes the whole body. Writes an example body from a JSON Schema and reads an AI SDK APICallError. - [API reference nav](https://www.aisdkagents.com/ai-components/api-reference-nav): The sidebar of an API reference: endpoints grouped by resource, each with its verb. The current row stays in view under a highlight that slides on click, arrow keys move between rows, and a filter appears once the list is long. Lists an AI SDK agent's tools as a group. - [Copy page menu](https://www.aisdkagents.com/ai-components/copy-page-menu): Copy a docs page for an assistant. The button copies the page as Markdown, fetched when pressed, and the menu beside it opens the page in Claude or ChatGPT or as plain text. Also writes an AI SDK chat as Markdown. - [Spend breakdown](https://www.aisdkagents.com/ai-components/spend-breakdown): What your AI features cost over time, split by model, feature, or user: one stacked chart and a ranked list that names every color. Point at a column to read that day, pick a row to follow it alone. Reads an AI SDK usage log or an AI Gateway spend report. - [Invoice history](https://www.aisdkagents.com/ai-components/invoice-history): Past invoices, one row each, led by the one that needs attention: a failed payment, then one that is due. A row opens to what the money was spent on, the same groups Spend breakdown lists, and every invoice has its own download. Builds its lines from an AI SDK usage log. - [Usage meter](https://www.aisdkagents.com/ai-components/usage-meter): How much of the plan is spent this period: one number, one bar, and the reset date. It changes color once near the cap, and switches to counting usage credits when the plan runs out. Adds up AI SDK usage. - [Budget alerts](https://www.aisdkagents.com/ai-components/budget-alerts): Spend alerts on one track: drag a marker to set when an alert goes out, pick who is told, and choose what happens at the cap. Runs can keep going, slow down, or stop. Prices AI SDK usage to keep spend live. - [Spend limits](https://www.aisdkagents.com/ai-components/spend-limits): A spending cap per member, team, or API key, with each one's use against it. Only the ones at or near their cap are listed, and the rest fold into one row. Click a row to change its cap. Prices AI SDK usage and checks a cap in your route. - [Plan compare](https://www.aisdkagents.com/ai-components/plan-compare): The current plan next to the next one up, priced against what the account really used: what last month cost on each, how much switching saves, and the usage where the bigger plan starts to pay off. Adds up AI SDK usage. - [Payment method](https://www.aisdkagents.com/ai-components/payment-method): The card or bank account on file and the billing email. A declined charge, an expired card or one that expires before the next charge is said first, in plain words, with the one action that fixes it: update the card, then pay the declined invoice. Reads a Stripe PaymentMethod and words a decline code; changing the card hands off to the Billing Portal. - [Credit top-up](https://www.aisdkagents.com/ai-components/credit-top-up): Buy usage credits and see how long they last. The balance leads with the time it has left at the current pace, each preset amount and a custom one says how much time it buys, and auto-reload tops the balance up under a threshold. Prices AI SDK usage and works out the pace from a usage log. - [Top spenders](https://www.aisdkagents.com/ai-components/top-spenders): The few members, keys, or models behind most of the spend, ranked, each with its share. It says how concentrated the spend is, points at whoever grew most against the period before, and folds everyone else into one row. Ranks a usage log priced from AI SDK usage. - [Seat usage](https://www.aisdkagents.com/ai-components/seat-usage): Seats paid for against seats used: one mark per seat, the members who have gone quiet with how long each has been away, and one action to remove the seats nobody needs. Reads last activity from stored AI SDK usage. - [Cost anomaly](https://www.aisdkagents.com/ai-components/cost-anomaly): One card for one spike in spend: what the day cost against a usual day, the jump drawn on the days around it, and the feature, key or user behind it. Finds the spike in a usage log written from AI SDK usage. - [Data retention](https://www.aisdkagents.com/ai-components/data-retention): How long each kind of AI data is kept: conversations, files, traces, memory. It leads with what the next cleanup deletes, and picking a shorter period shows what that costs before anything is gone. Picks expired AI SDK messages for your cleanup job. - [Model access](https://www.aisdkagents.com/ai-components/model-access): Choose which models a workspace may use and which one members start on. Each model shows its price next to its switch, so the cost of turning one on is in view. Reads the AI SDK gateway model list and resolves requests against the saved policy. - [Audit log](https://www.aisdkagents.com/ai-components/audit-log): Who changed a key, a limit, a model, or a prompt, and when: one sentence per change, grouped by day, with the before and after on the row and longer edits opening as a diff. Agents sit in the same log as people, built from AI SDK tool parts with who approved or denied each call. - [Moderation queue](https://www.aisdkagents.com/ai-components/moderation-queue): Where reported responses are judged. One row per response however many people flagged it, urgent and most reported first, overdue ones marked. Open a row to read the question and answer with the flagged passage marked and hard content blurred, then keep it or remove it from the keyboard. Undo, reopen, restrict the user, or add it to an eval set. - [Workspace data policy](https://www.aisdkagents.com/ai-components/workspace-data-policy): The rules a workspace sets for every member's data: no model training, and zero data retention. Each rule says what it means, how many members a change affects, and which models it takes away. Changes stay a draft until one Apply. workspaceDataPolicyOptions turns the policy into AI Gateway provider options for any AI SDK call. - [Trust center](https://www.aisdkagents.com/ai-components/trust-center): What an enterprise buyer reads before they pay. It leads with how the AI handles their data, drawn from the workspace policy and region so it never claims more, then certifications and documents. Public files download, private ones unlock with one request under NDA, and the data processing agreement is signed right on the page. - [Subprocessor list](https://www.aisdkagents.com/ai-components/subprocessor-list): Every company that processes customer data, one line each, with what it sees and where one press away. Model providers sit apart from infrastructure, upcoming additions carry their date, and a data region filters to who handles it. Download as CSV, or subscribe to hear about changes first. subprocessorsFromModels builds the model rows from AI Gateway model ids. - [Data region](https://www.aisdkagents.com/ai-components/data-region): Where a workspace's data is stored and processed. The first time it is one pick with the nearest region chosen. Later, another region says what a move involves (how much data, how long it is read-only, which models are not offered there), asks for the workspace name, then shows the move as it runs. dataRegionOptions keeps AI SDK calls on that region's providers. - [Role editor](https://www.aisdkagents.com/ai-components/role-editor): What each role may do, as a grid: roles across, permissions down, grouped by area, with the rows an AI workspace needs: which models a role may call and what one member may spend a month. Built-in roles are locked and a new role starts as a copy of any of them. Edits wait in a draft that marks every changed cell and says how many members it reaches before Save. roleCheck enforces the same rules in an AI SDK route. - [Domain verification](https://www.aisdkagents.com/ai-components/domain-verification): Proves the workspace owns an email domain: the TXT record to publish, copied in one press, and a check that runs on its own until the record is seen. Once verified it offers to let anyone with an address on it join without an invitation. Turns away shared mail services, and SSO depends on it. - [SSO setup](https://www.aisdkagents.com/ai-components/sso-setup): Connects an identity provider step by step: Okta, Entra ID, Google Workspace, or any SAML or OIDC provider. Copy the values it needs, paste back a metadata URL or file (read in the browser before it is saved), and test a real sign-in. Only then can SSO be required, with named admins keeping a password so nobody is locked out. - [SCIM provisioning](https://www.aisdkagents.com/ai-components/scim-provisioning): Members that follow the company directory: the endpoint and a token shown once, with a two-press rotate. Leads with anyone the directory could not add and why, says when it last synced and what changed, and maps directory groups to workspace roles. - [Feature code block](https://www.aisdkagents.com/ai-components/marketing-feature-code-block): Feature section with an animated code block and syntax highlighting, in three layouts. - [Feature Grid 1](https://www.aisdkagents.com/ai-components/marketing-feature-grid-1): Feature grid showcasing AI marketing agents with tilted card previews and hover effects. Perfect for highlighting product capabilities and use cases. - [Bento Layout 1](https://www.aisdkagents.com/ai-components/marketing-bento-1): Animated bento grid for presenting install methods, integrations, and product features. - [Integration Showcase 1](https://www.aisdkagents.com/ai-components/marketing-integrations-1): Integration cards with connection status, configuration controls, and connectivity testing. - [AI Integrations Circle](https://www.aisdkagents.com/ai-components/marketing-integrations-2): Circular fan-out layout showcasing AI integrations with radiating connection lines. Features interactive hover effects, tooltips, and dynamic positioning for visual integration highlights. - [Model comparison](https://www.aisdkagents.com/ai-components/marketing-model-comparison): Compare AI models on performance and pricing with filtering and sorting, as cards, a compact table, or hover details. - [Comparison Table 1](https://www.aisdkagents.com/ai-components/marketing-model-comparison-table-1): Sortable AI model table with pricing, performance, and capability columns for side-by-side evaluation. - [Agent ROI Calculator](https://www.aisdkagents.com/ai-components/marketing-calculator-agent-roi): Interactive agent ROI calculator with labeled inputs, live savings, and mobile-friendly cost comparison. ## Coding-Agent Skills - [Skills index](https://www.aisdkagents.com/skills): 19 Premium skills across the agent lifecycle, UI craft, and capability tiers. - [Plan AI SDK Agent](https://www.aisdkagents.com/skills/plan-ai-sdk-agent): Plan — Inspect your repository and write an implementation-ready agent blueprint without changing application code. - [AISDK Agents](https://www.aisdkagents.com/skills/aisdkagents): Build — Architecture guidance, installed-version API checks, and starter shapes from 125 AI SDK patterns. - [Build AI SDK Agent Evals](https://www.aisdkagents.com/skills/build-ai-sdk-agent-evals): Evaluate — Add datasets, scorers, and local or CI commands around an existing AI SDK agent. - [Observe AI SDK Agent](https://www.aisdkagents.com/skills/observe-ai-sdk-agent): Observe — Wire production tracing, per-user cost attribution, and replayable failure traces into an existing AI SDK agent. - [Optimize AI SDK Agent](https://www.aisdkagents.com/skills/optimize-ai-sdk-agent): Optimize — Baseline an existing agent, test focused changes, and keep only measured improvements. - [Write Agent Prompts](https://www.aisdkagents.com/skills/write-agent-prompts): Instruct — Inventory, audit, and rewrite the prompts an AI SDK agent actually runs on as versioned code with before and after eval evidence. - [Write Prompt Contracts](https://www.aisdkagents.com/skills/write-prompt-contracts): Instruct — Write AI SDK tool descriptions and sectioned instructions so the model picks the right tool and acts instead of narrating. - [Better Chat UI](https://www.aisdkagents.com/skills/better-chat-ui): Chat UI — Polish AI SDK useChat interfaces: message parts, statuses, streaming, scroll, composer, and persistence. - [Better Generative UI](https://www.aisdkagents.com/skills/better-generative-ui): Generative UI — Map AI SDK tool calls, structured output, and data parts onto typed UI components instead of raw JSON. - [Test UI Variants](https://www.aisdkagents.com/skills/test-ui-variants): Prototype — Build several structural UI variants on one URL and iterate by stealing, instead of polishing a single mock. - [Ingest Messy Documents](https://www.aisdkagents.com/skills/ingest-messy-documents): Ingest — Turns messy document sources into faithful structured text for retrieval and extraction: fidelity audits, parsing strategy per class, lossless tables, a normalized contract with provenance, and fidelity evals. - [Ground AI SDK Agent](https://www.aisdkagents.com/skills/ground-ai-sdk-agent): Ground — Adds measured retrieval to an existing AI SDK agent: corpus-derived chunking, hybrid search, citations, and retrieval-quality evals. - [Agent Memory](https://www.aisdkagents.com/skills/agent-memory): Memory — Adds durable per-user memory to an existing AI SDK agent: evidence-based write path, budgeted recall, decay, deletion, and recall-quality evals. - [Build MCP Server](https://www.aisdkagents.com/skills/build-mcp-server): Expose — Turns an existing API into a production MCP server: task-shaped tools, response discipline, OAuth, destructive-operation safety, and an eval harness. - [Extract Structured Data](https://www.aisdkagents.com/skills/extract-structured-data): Extract — Builds production structured-output pipelines: downstream-derived schemas, bounded validation and repair, confidence routing, and per-field accuracy on a golden set. - [Ship AI SDK on Cloudflare](https://www.aisdkagents.com/skills/ship-ai-sdk-cloudflare): Ship — Deploys an AI SDK agent to Cloudflare Workers: runtime architecture from the agent's shape, edge-verified streaming, Durable Object state, and AI Gateway. - [Ship AI SDK on AWS](https://www.aisdkagents.com/skills/ship-ai-sdk-aws): Ship — Deploys an existing AI SDK agent to AWS: runtime architecture from the agent's shape and your IaC, streaming that survives every layer, durable checkpointed workflows, and Bedrock or external providers wired with IAM. - [AI SDK on Mobile](https://www.aisdkagents.com/skills/ai-sdk-on-mobile): Mobile — Wires streaming AI SDK chat into React Native and Expo: a backend proxy for keys, a transport derived from installed Expo and RN versions, backgrounding resume, and on-device verification for both platforms. - [Migrate to AI SDK](https://www.aisdkagents.com/skills/migrate-to-ai-sdk): Migrate — Migrates LangChain, OpenAI SDK, Assistants API, or hand-rolled LLM code to AI SDK primitives with a characterization safety net and proven parity. - [Setup](https://www.aisdkagents.com/skills/setup): Entry point — The entry point. Explore the repo, run one interview covering every decision, then dispatch to the bootstrap and design engines. - [Bootstrap AGENTS.md](https://www.aisdkagents.com/skills/bootstrap-agents-md): Behavior — Emit AGENTS.md, CLAUDE.md, CONTEXT.md, docs/agents, and portable plan-mode and code-review skills, all rewritten from evidence in your repo. - [Design MD](https://www.aisdkagents.com/skills/design-md): Appearance — Create or update a living DESIGN.md design-language contract plus a portable frontend-design skill, without restyling existing UI. - [Frontier Interview](https://www.aisdkagents.com/skills/frontier-interview): Doctrine — Run multi-decision interviews as a frontier walk over a decision tree: batch every askable question, recommend answers, recompute, repeat. ## Explore by Topic - [AI Agent Orchestration Patterns — Subagents, Routing & Parallel Agents](https://www.aisdkagents.com/explore/ai-agent-orchestration): Working orchestration code, not diagrams: routing, sub-agent delegation, parallel fan-out, and orchestrator-worker patterns in TypeScript on the AI SDK. Live previews + full source. - [Durable AI Agents — Long-Running, Resumable Agent Patterns](https://www.aisdkagents.com/explore/durable-ai-agents): Agents that survive restarts: durable execution with the Workflow DevKit, plus Eve agents with long-term memory, cron schedules, and approval gates that park and resume. TypeScript, full source. - [AI Agent Tools — Tool Calling, Web Search & Scraping Patterns](https://www.aisdkagents.com/explore/ai-agent-tools): Give agents real capabilities: tool() definitions with lifecycle hooks, dynamic tools, tool-call repair, web search (Exa, Firecrawl), scraping, PDF ingestion, and human approval gates. - [AI SDK Examples — Copy-Paste Code for Every Core Function](https://www.aisdkagents.com/explore/ai-sdk-examples): Complete, running examples for the AI SDK: generateText, streamText, structured output, tool calling, agent loop control, prepareStep, and tool-call repair. Copy the source, keep shipping. - [AI Chat Components — React Chat UI for AI Apps (AI Elements)](https://www.aisdkagents.com/explore/ai-chat-components): Production React components for AI chat: message threads, streaming responses, reasoning displays, source citations, tool approval cards, and chat input. Tailwind-styled, copy-paste ready. - [AI Artifacts — Agents That Produce Excel, PDF, Docs & Charts](https://www.aisdkagents.com/explore/ai-artifacts): Patterns for AI agents that output real files and rich UI: XLSX spreadsheets, PDF reports, Word docs, slides, charts, tables, mermaid diagrams, and JSON-driven interfaces. Full source included. - [AI Image Generation with the AI SDK — fal, Gemini Flash Image & Editing](https://www.aisdkagents.com/explore/ai-image-generation): Generate and edit images in TypeScript with the AI SDK: Flux via AI Gateway, Gemini Flash image generation, image editing and merging, and brand-consistent image pipelines. Working code + previews. ## Templates - [Multi Tenant Better Auth Chat](https://www.aisdkagents.com/templates/better-auth-postgres): A full-featured ChatGPT-style SaaS chat app. Includes multi-tenant organizations, team roles, artifact management, resumable streaming, and persistent conversation history. - [AI SDK Agent Platform](https://www.aisdkagents.com/templates/ai-agent-platform): Build and deploy RAG agents: create, configure, and deploy AI agents with custom knowledge bases. Upload documents, scrape websites, and build vector embeddings with pgvector. - [Sub Agent Starter](https://www.aisdkagents.com/templates/sub-agent-starter): A hyper minimal sub agent template featuring multi-agent orchestration, tool usage, and artifact streaming with AI SDK Tools. - [Ecommerce Multi-Agent](https://www.aisdkagents.com/templates/ecommerce-sub-agent-template): A full-featured ecommerce AI assistant with multi-agent orchestration, product browsing, shopping cart management, and real-time artifact streaming built with AI SDK Tools. ## Optional - [Pricing](https://www.aisdkagents.com/pricing): Compare Pro, Premium, and Team lifetime licenses. - [GitHub](https://github.com/nolly-studio): Source and issues.