你来组合的聊天 UI
assistant-ui 是一套构建 AI 聊天界面的 React primitives。它给你可组合的零件(thread、消息、composer、action bar),走 Radix 和 shadcn 风格,标记和外观都归你;难的部分由它包办:流式、自动滚动、工具调用渲染、markdown、无障碍。截至 2026-06 有 10,639 星,未决 issue 出奇地少,是个避免手搓聊天 UI 的好维护方式。
心智模型是:数据流来自后端 runtime,assistant-ui 是上面那层界面。
它做什么
你把应用包在一个 runtime 里,再放进这些 primitives。runtime 适配器连到后端(Vercel AI SDK、LangGraph、一个数据流端点,或自定义),组件开箱渲染对话,带流式、重试、平滑的逐 token 更新。工具调用能渲染成 React 组件,generative UI 就是这么做的。样式归你:它走 shadcn 那套把组件复制进你项目的模式,不把你锁在一个不透明的主题上。
安装
npx assistant-ui@latest create # 新项目,带样式起步模板
npx assistant-ui@latest init # 加进已有项目或直接装包 npm install @assistant-ui/react,加上你后端的适配器(Vercel AI SDK 用 @assistant-ui/react-ai-sdk)。它 MIT 许可,商用不受限。
它如何与 Vercel AI SDK 互补
这两个是伙伴关系、各管一段,搞混它们会白费力气。Vercel AI SDK 处理数据:模型调用、流式、tool calling。assistant-ui 处理界面:把那个流渲染成打磨好、可交互的聊天。桥是一个 runtime 适配器(AI SDK 用 useChatRuntime),把 SDK 的流喂进 assistant-ui 的组件。你已经在用 AI SDK、又在手写聊天 JSX 的话,assistant-ui 正是那层,省得你自己重建流式 UX、工具渲染和无障碍。
适合与不适合
想要生产级聊天 UI、又不想从零搭流式、自动滚动、工具渲染时,选它;想完全掌控样式时,选它;需要在一套 UI 后面切换后端(AI SDK、LangGraph)、靠它的 runtime 适配器时,选它。
它不太适用的地方:它仅限 React,别的框架需要别的方案。它默认你乐于把 primitives 组合起来,比起一个成品 widget 要多些搭建。而且因为它跟着快速演进的生态,与 AI SDK、LangGraph、MCP 的集成点偶尔要对齐版本,tracker 也显示了这点。
assistant-ui 和手搓 UI 的对比
| assistant-ui | 用 useChat 手搓 | |
|---|---|---|
| 流式 UX | 内建,平滑 | 你自己实现 |
| 工具调用渲染 | 工具结果转 React 组件 | 你自己解析渲染 |
| 后端灵活性 | runtime 适配器(AI SDK、LangGraph) | 绑你接的那个 |
| 样式 | 完全掌控,shadcn 模式 | 完全掌控,全手动 |
| 搭建 | 组合 primitives | 全都自己搭 |
直接用 Vercel AI SDK 的 useChat 给你数据和完全自由,代价是整个界面自己搭,包括流式动画、工具渲染和无障碍。assistant-ui 把这些作为你仍完全掌控的可组合 primitives 给你。区别在于:组装经过测试的零件,还是从一张白组件起步。
star 曲线
star 曲线随 LLM 聊天应用激增一起长,越来越多团队撞上同一个认知:一个好的流式聊天 UI 比看上去费工。极低的未决 issue 数和频繁发布,指向一个被紧凑维护的项目。
issue 区给你的预警
只有寥寥几个未决 issue,信号集中在集成层面。React 19 和打包器(Turbopack)的变化引起过 hook 顺序错误,但很快被修。给 AI SDK、LangGraph、MCP 的 runtime 适配器偶尔丢上下文,或在后端更新时要对齐版本。create CLI 有过偶发的依赖小问题。工具审批支持因 runtime 而异。这些是一个骑在快速演进后端上的 UI 层的正常接缝,issue 周转快是个好维护信号。
相关仓库
要和它配对的数据层 SDK,看 vercel/ai。要放在聊天 UI 后面的 agent,看 cline 和 OpenHands。要 agent 记忆,看 Mem0。想看什么在涨,见 LLM 工具、每日榜 和 每周报告。
常见问题
assistant-ui 是什么? 一套构建 AI 聊天界面的可组合 React primitives,处理流式、工具调用渲染、markdown 和无障碍,而你保留对标记和样式的完全掌控。它不是黑盒 widget,你从零件组装它。
assistant-ui 和直接用 Vercel AI SDK 搭? 它们一起用。AI SDK 管数据和流式;assistant-ui 把它渲染成打磨好的聊天 UI。只用 AI SDK 意味着整个界面自己搭;assistant-ui 给你难做的 UI 部分的现成 primitives。
assistant-ui 支持哪些后端? 它通过 runtime 适配器连 Vercel AI SDK、LangGraph、一个通用数据流端点和自定义 runtime,所以你能在一套 UI 后面切换后端。
我能完全自定义样式吗? 能。它走 shadcn 那套把组件复制进你项目的模式、基于 Radix,所以标记和样式归你,不被锁在一个主题上。
assistant-ui 仅限 React 吗? 是。它为 React 而造,别的框架需要别的聊天 UI 方案。跨框架的数据和模型处理,Vercel AI SDK 是那层与框架无关的。