tools by assistant-ui/skills
npx skills add https://github.com/assistant-ui/skills --skill tools请始终查阅 assistant-ui.com/llms.txt 以获取最新的 API 信息。
工具让 LLM 能够触发带有自定义 UI 渲染的操作。
工具在哪里执行?
├─ 后端 (LLM 调用 API) → AI SDK tool()
│ └─ 需要自定义 UI? → makeAssistantToolUI
└─ 前端 (仅限浏览器) → makeAssistantTool
└─ 需要自定义 UI? → makeAssistantToolUI
// 后端 (app/api/chat/route.ts)
import { tool, stepCountIs } from "ai";
import { z } from "zod";
const tools = {
get_weather: tool({
description: "获取城市的天气",
inputSchema: z.object({ city: z.string() }),
execute: async ({ city }) => ({ temp: 22, city }),
}),
};
const result = streamText({
model: openai("gpt-4o"),
messages,
tools,
stopWhen: stepCountIs(5),
});
// 前端
import { makeAssistantToolUI } from "@assistant-ui/react";
const WeatherToolUI = makeAssistantToolUI({
toolName: "get_weather",
render: ({ args, result, status }) => {
if (status === "running") return <div>正在加载天气...</div>;
return <div>{result?.city}: {result?.temp}°C</div>;
},
});
// 在应用中注册
<AssistantRuntimeProvider runtime={runtime}>
<WeatherToolUI />
<Thread />
</AssistantRuntimeProvider>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
import { makeAssistantTool } from "@assistant-ui/react";
import { z } from "zod";
const CopyTool = makeAssistantTool({
toolName: "copy_to_clipboard",
parameters: z.object({ text: z.string() }),
execute: async ({ text }) => {
await navigator.clipboard.writeText(text);
return { success: true };
},
});
<AssistantRuntimeProvider runtime={runtime}>
<CopyTool />
<Thread />
</AssistantRuntimeProvider>
// makeAssistantToolUI 属性
interface ToolUIProps {
toolCallId: string;
toolName: string;
args: Record<string, unknown>;
argsText: string;
result?: unknown;
status: "running" | "complete" | "incomplete" | "requires-action";
submitResult: (result: unknown) => void; // 用于交互式工具
}
const DeleteToolUI = makeAssistantToolUI({
toolName: "delete_file",
render: ({ args, status, submitResult }) => {
if (status === "requires-action") {
return (
<div>
<p>删除 {args.path}?</p>
<button onClick={() => submitResult({ confirmed: true })}>确认</button>
<button onClick={() => submitResult({ confirmed: false })}>取消</button>
</div>
);
}
return <div>文件已删除</div>;
},
});
工具 UI 未渲染
toolName 必须完全匹配(区分大小写)AssistantRuntimeProvider 内部注册 UI工具未被调用
stopWhen: stepCountIs(n) 以允许多步操作结果未显示
status === "complete"每周安装量
487
代码仓库
GitHub 星标数
7
首次出现
2026 年 1 月 21 日
安全审计
安装于
codex398
opencode391
gemini-cli384
github-copilot371
amp324
kimi-cli321
Always consultassistant-ui.com/llms.txt for latest API.
Tools let LLMs trigger actions with custom UI rendering.
Where does the tool execute?
├─ Backend (LLM calls API) → AI SDK tool()
│ └─ Want custom UI? → makeAssistantToolUI
└─ Frontend (browser-only) → makeAssistantTool
└─ Want custom UI? → makeAssistantToolUI
// Backend (app/api/chat/route.ts)
import { tool, stepCountIs } from "ai";
import { z } from "zod";
const tools = {
get_weather: tool({
description: "Get weather for a city",
inputSchema: z.object({ city: z.string() }),
execute: async ({ city }) => ({ temp: 22, city }),
}),
};
const result = streamText({
model: openai("gpt-4o"),
messages,
tools,
stopWhen: stepCountIs(5),
});
// Frontend
import { makeAssistantToolUI } from "@assistant-ui/react";
const WeatherToolUI = makeAssistantToolUI({
toolName: "get_weather",
render: ({ args, result, status }) => {
if (status === "running") return <div>Loading weather...</div>;
return <div>{result?.city}: {result?.temp}°C</div>;
},
});
// Register in app
<AssistantRuntimeProvider runtime={runtime}>
<WeatherToolUI />
<Thread />
</AssistantRuntimeProvider>
import { makeAssistantTool } from "@assistant-ui/react";
import { z } from "zod";
const CopyTool = makeAssistantTool({
toolName: "copy_to_clipboard",
parameters: z.object({ text: z.string() }),
execute: async ({ text }) => {
await navigator.clipboard.writeText(text);
return { success: true };
},
});
<AssistantRuntimeProvider runtime={runtime}>
<CopyTool />
<Thread />
</AssistantRuntimeProvider>
// makeAssistantToolUI props
interface ToolUIProps {
toolCallId: string;
toolName: string;
args: Record<string, unknown>;
argsText: string;
result?: unknown;
status: "running" | "complete" | "incomplete" | "requires-action";
submitResult: (result: unknown) => void; // For interactive tools
}
const DeleteToolUI = makeAssistantToolUI({
toolName: "delete_file",
render: ({ args, status, submitResult }) => {
if (status === "requires-action") {
return (
<div>
<p>Delete {args.path}?</p>
<button onClick={() => submitResult({ confirmed: true })}>Confirm</button>
<button onClick={() => submitResult({ confirmed: false })}>Cancel</button>
</div>
);
}
return <div>File deleted</div>;
},
});
Tool UI not rendering
toolName must match exactly (case-sensitive)AssistantRuntimeProviderTool not being called
stopWhen: stepCountIs(n) to allow multi-stepResult not showing
status === "complete" before accessing resultWeekly Installs
487
Repository
GitHub Stars
7
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykPass
Installed on
codex398
opencode391
gemini-cli384
github-copilot371
amp324
kimi-cli321
agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试
136,300 周安装
Amazon Aurora DSQL 技能:无服务器分布式SQL数据库,支持MCP工具查询与模式管理
合作与业务拓展指南:9位产品负责人教你建立战略伙伴关系,达成业务交易
656 周安装
企业级智能体运维指南:云端AI系统生命周期管理、可观测性与安全控制
657 周安装
Amazon Aurora DSQL 技能:无服务器分布式 SQL 数据库管理与 MCP 工具集成
SQL查询优化指南:PostgreSQL、Snowflake、BigQuery高性能SQL编写技巧与方言参考
657 周安装
Gemini Live API 开发指南:实时语音视频交互、WebSockets集成与SDK使用
657 周安装