Skip to content
AI Primer

tools

assistant-uiby assistant-ui5 months ago28

Defines model-callable tools and renders their calls in assistant-ui. The 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 AuiConfig({ tools: Tools({ toolkit }) }), and exposed to the model with new AISDKToolkit({ toolkit }).tools({ frontend }). Covers the tool kinds (backend, \"use client\" frontend, humanTool(), providerTool(), externalTool(), stubTool(), defineMcpToolkit()), render and display, ToolCallMessagePartProps, approval gates, 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 model-composed UI use generative-ui, for MCP servers users add in the browser use react-mcp, and for the styled ToolFallback and ToolGroup use elements.

Install

npx skills add https://github.com/assistant-ui/skills --skill tools
Show step-by-step
  1. 1

    Open your terminal

    • Mac: Press ⌘ Space, type "Terminal", press Enter
    • Windows: Press Win R, type "cmd", press Enter
  2. 2

    Paste the command above and press Enter

    Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).

  3. 3

    Restart Claude Code

    Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives
~/.claude/skills/assistant-ui--skills--assistant-ui--skills--tools/
├── SKILL.md
└── ... (skill resource files)
View on GitHub

Always review skill code before installing. Third-party skills may contain scripts that run on your machine.

Related skills

💻 Developer Tools

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

by obra · 2 months ago290k
🔍 Code Review

requesting-code-review

Use when completing tasks, implementing major features, or before merging to verify work meets requirements

by obra · 2 months ago290k
💻 Developer Tools

using-git-worktrees

Use when starting feature work that needs isolation from current workspace or before executing implementation plans - ensures an isolated workspace exists via native tools or git worktree fallback

by obra · 2 months ago290k
💻 Developer Tools

writing-plans

Use when you have a spec or requirements for a multi-step task, before touching code

by obra · 2 months ago290k