tool-ui

拿来即用的 AI 界面组件，半天搭出聊天与工具调用面板

开源 🏷️定价信息待确认 ✅ 目前可打开设计创意 🍴 复刻 31 🐛 待处理 2 👀 关注 1 ⚠️ 作者已归档（停止维护）

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 779

维护状态维护中

是否开源开源

定价模式 🏷️定价信息待确认

项目预览

项目数据

分类设计创意

开发团队assistant-ui

官网地址https://tool-ui.com

GitHubhttps://github.com/assistant-ui/tool-ui

定价模式🏷️定价信息待确认

价格说明定价信息待确认

访问状态✅ 目前可打开

是否开源是

开源协议MIT

主要语言TypeScript

技术栈/模型ai,chat,components,llm,mcp,ui

GitHub 星标★ 779

上线时间2025-11-03 00:00:00

代码更新2026-08-31

仓库体积14.9 MB

本站数据更新2026-11-04

维护状态维护中

收录时间2026-09-16

浏览次数2

项目介绍

tool-ui 是一套专为 AI 交互界面打造的 React/TypeScript UI 组件库，解决开发者从零搭建聊天、工具调用、MCP 协议等 AI 前端时重复造轮子的问题。它把 AI 场景中高频出现的界面元素（消息气泡、流式输出、工具调用卡片、参数表单、结果展示等）封装成开箱即用的组件，并针对 LLM 流式响应、函数调用、MCP 工具链等做了适配。开发者可以直接组合这些组件，快速拼出类似 ChatGPT 插件、Agent 控制台、AI 助手面板等产品，而不必纠结样式与状态管理细节。项目用 TypeScript 编写，类型友好，便于二次开发与主题定制，适合需要快速验证 AI 产品交互的中小团队或个人开发者。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-09-16 · 当前星标 ★ 779

技术标签

ai chat llm mcp ui

使用教程

难度：入门约 12 分钟部署方式：前端集成 4 步

环境要求

React 18+
Tailwind（推荐）

安装与启动步骤

1装包

渲染工具调用过程的 React 组件集。
```
npm i @assistant-ui/tool-ui
```
2接进聊天流

按消息里的 tool_call 类型分发组件。
```
import { ToolCall } from '@assistant-ui/tool-ui';
```
3自定义样式

所有组件都是源码级复制，可直接改。
```
复制组件到 components/ 再改
```
4处理长输出

工具返回大 JSON 时要折叠展示。
```
用 Collapsible 包一层
```