tool-ui
将AI工具调用结果渲染为交互式UI的React组件库
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：tool-ui。 它的用途是：将AI工具调用结果渲染为交互式UI的React组件库 完整的 Skill 内容见：https://321skill.com/skills/tool-ui/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我查一下北京、上海、深圳未来三天的天气对比，用图表展示。” AI调用天气工具后，Tool UI 会将返回的数据渲染成一个清晰的天气对比图表组件，并嵌入到聊天记录中。用户可以直接在图表上切换城市、查看详细数据，而无需面对一堆JSON文本。
介绍
Tool UI 解决了AI聊天界面中工具调用结果呈现不直观的问题。当AI模型调用工具（如查询天气、获取数据）时，传统应用通常只是将原始的JSON数据直接扔进对话流，用户难以理解和操作。Tool UI 将这些枯燥的数据包转化为美观、交互式的UI组件，如审批卡片、表单、表格、图表和媒体卡片，让用户无需离开聊天界面即可理解信息并采取行动。
使用方式非常便捷，它采用了类似 shadcn/ui 的“复制/粘贴”模式。开发者无需安装整个库，只需将所需的React组件代码直接复制到自己的项目中即可使用。每个组件都附带Zod模式（Schema），用于验证AI工具返回的数据，确保渲染安全可靠。
这个库非常适合在AI聊天应用（如基于Claude、GPT等模型构建的助手）中工作的前端开发者、全栈工程师以及产品团队。他们希望提升用户体验，让AI的工具调用结果不再是冰冷的代码，而是直观的交互界面。
与同类工具相比，Tool UI 的核心优势在于其“无依赖”的复制粘贴模式和对交互的深度支持。它不是一个需要npm install的臃肿库，而是将组件代码完全交由开发者掌控，避免了版本锁定。同时，它的组件不仅仅是静态展示，用户可以在组件内进行选择、确认等操作，这些操作结果会作为“回执”反馈给AI助手，形成完整的交互闭环。
核心特点
采用“复制/粘贴”而非安装依赖的模式，组件代码完全内置于用户项目，无版本锁定风险；组件不仅是数据展示，更能捕获用户交互作为“回执”反馈给AI，实现双向闭环。
注意事项
主要面向React技术栈的Web应用，非React项目或移动端原生应用无法直接使用。
常见问题
Tool UI 需要安装吗？
不需要传统npm安装，采用类似shadcn/ui的复制粘贴模式，直接将组件代码复制到你的项目中即可。
Tool UI 支持哪些AI模型或平台？
它与模型无关，任何能调用工具并返回结构化数据的AI助手（如Claude、GPT）都可接入，核心是解析和渲染工具调用结果。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tool-ui/raw/index.md 读取 tool-ui 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tool-ui/raw/index.md（查看排版版本）