Agent skill · software engineering · assistant-ui
tools
Defines model-callable tools and renders their calls in assistant-ui. Covers the current authoring model: a \"use generative\" file whose default export is defineToolkit({...}), compiled by withAui from @assistant-ui/next, aui() from @assistant-ui/vite, or withAui from @assistant-ui/metro, mounted with const config = AuiConfig({ tools: Tools({ toolkit }) }) on <AssistantRuntimeProvider runtime={runtime} config={config}>, and exposed to the model with new AISDKToolkit({ toolkit }).tools({ frontend }) in an AI SDK route. Covers the tool kinds inferred from execute (plain backend, \"use client\" frontend, humanTool(), providerTool(), externalTool(), stubTool() plus useAuiToolOverrides, defineMcpToolkit() spreads), render / renderText / display, toModelOutput, providerOptions, ToolCallMessagePartProps (args, argsText, status, result, isError, timing, interrupt, approval, addResult, resume, respondToApproval), useToolArgsStatus, useToolCallElapsed, useInlineRender, server-side approval gates with toolApprovalAcceptsText, MCP servers, MCP Apps, WebMCP, and sub-agent messages. Reach for it when a tool is never called, a tool UI does not render, a frontend result never reaches the model, humanTool() throws at runtime, or an approval gate cannot be answered. For UI the model composes from a vocabulary you ship use generative-ui, for MCP servers the end user adds in the browser use react-mcp, and for the styled ToolFallback and ToolGroup files use elements.
Why this skill is useful
Adds executable scripts for custom tool registration and UI rendering that enhance LLM capabilities beyond standard practices.
What it needs
Requires @assistant-ui/react, zod installed locally. About 8k tokens when loaded. Last updated 2026-08-02. 20 stars on the source repository.
What this skill does
assistant-ui Tools Always consult assistant-ui.com/llms.txt for the latest API. A tool is a named capability the model can call. In assistant-ui you declare tools in a toolkit, a map whose keys are the tool names the model sees and whose values carry the schema, the executor, and the renderer. The supported authoring path is a "use generative" file compiled by a build plugin, which splits one file into a server build (schema plus backend executors) and a client build (schema plus renderers plus browser executors). References ./references/toolkits.md -- authoring a toolkit end to end: kinds, renderers, toModelOutput, providerOptions, stubs, splitting and merging files, backendless ./references/tool-ui.md -- rendering states, useToolArgsStatus, deferred rendering, streaming args, ToolFallback and ToolGroup ./references/human-in-loop.md -- human tools, human() interrupts, and the full approval gate surface ./references/mcp-server.md -- server-side MCP servers and defineMcpToolkit ./references/mcp-apps.md -- rendering MCP App ui:// widgets with McpAppRenderer ./references/webmcp.md -- publishing frontend tools to the browser agent with unstableuseWebMcpProvider ./references/multi-agent.md -- sub-agent conversations inside a tool call ./references/legacy-component-apis.md -- the deprecated makeAssistantTool family and how to migrate off it The authoring model 1. Add the build plugin The directive does nothing without a compiler. Vite and TanStack Start add aui() from @assistant-ui/vite to plugins instead; Expo and bare React Native wrap the Metro config with withAui from @assistant-ui/metro. All three take an aui options object, documented in toolkits.md. 2. Write the toolkit 3. Mount it on the client To scope a toolkit to part of the tree instead, wrap that subtree in <AuiProvider extends={aui} config={config}> with const aui = useAui(). useChatRuntime() targets /api/chat by default. 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills assistant-ui/tools