Give the model callable capabilities with assistant-ui toolkits — define frontend, backend, human, and provider tools, render tool calls as interactive UI, and connect MCP servers.
Tools are how the model takes action: fetch data, call an API, query a database, drive your UI, or run a workflow. In assistant-ui you declare tools in a toolkit — a named map where each key is the tool name the model sees and each value describes the tool's schema, where it runs, and how its call renders in the chat.
Start here
Author a toolkit with the "use generative" directive — frontend, backend, human, and provider tools, with the schema, executor, and renderer in one file.
Wire a toolkit into your AI SDK route with AISDKToolkit / frontendTools, mix client and server tools, and round-trip multi-modal results.
Render tool calls as custom components — loading and result states, human-in-the-loop, approvals, and streaming.
Dynamic ToolsTools whose executor closes over React state, via stubTool() + useAuiToolOverrides.
Define tools with "use generative"
Use "use generative" + defineToolkit for toolkits. For tools that execute
elsewhere, spread defineMcpToolkit({ ... }) for MCP servers or use
execute: externalTool() to attach a renderer to a non-MCP external tool.
In a "use generative" file every tool declares an execute and the kind is
inferred from it (you never write type). See
Defining Tools.
Rendering AI output as UI
assistant-ui has a few ways to turn model output into React UI. Pick by who decides what renders:
| You want… | Use | The decider |
|---|---|---|
| A custom component for a known tool call (form, picker, chart, status) | Tool UI — render on a toolkit entry | the model, by calling the tool |
| Persistent, out-of-thread state the AI can read and write | Interactables | the model + the user, bidirectionally |
| UI composed from a component vocabulary you ship, described as a JSON spec | Generative UI (JSON spec) — MessagePrimitive.GenerativeUI | the model, composing a tree |
| UI pushed by a LangGraph node alongside messages | LangGraph Generative UI — makeAssistantDataUI | the backend / orchestrator |
Connect external tools
Wire one or more MCP servers into your API route as a tool catalog.
User-managed MCPLet end users add and authenticate MCP servers from the browser.
MCP AppsRender MCP UI resources (ui://) inline in sandboxed frames.
Render sub-agent conversations inside a tool call.
Reference & components
- Tools API Reference —
tool,Toolkit,Tools, and the tool-status hooks. ToolFallback— a default tool card for tools with no custom UI.ToolGroup— collapse consecutive tool calls into one container.- Migrating Tools to Toolkits — move off the deprecated
makeAssistantTool/useAssistantToolUIAPIs.