文章目录
- [assistant-ui：在 React 应用里搭一套 ChatGPT 级别的聊天界面](#assistant-ui：在 React 应用里搭一套 ChatGPT 级别的聊天界面)
assistant-ui：在 React 应用里搭一套 ChatGPT 级别的聊天界面
做一个 AI 聊天应用，模型对接往往只花一天，前端对话界面却能拖上一周。消息流式输出、Markdown 渲染、代码高亮、附件上传、语音输入、键盘快捷键、无障碍适配......每一项单独做都不算难，拼在一起就是一个不小的工程量。
assistant-ui 就是来解决这个问题的。它是一个开源的 TypeScript/React 组件库，目标是让开发者用几行代码就能得到生产级别的 AI 聊天界面。目前项目在 GitHub 上拿到了超过 1 万颗 Star，由 Y Combinator 孵化。
快速上手
最省事的方式是用 CLI 脚手架。一行命令创建一个 Next.js 项目，开箱就能跑：
npx assistant-ui@latest create如果已有项目想加聊天功能，换成 init 即可：
npx assistant-ui@latest init也可以手动安装：
npm install @assistant-ui/react @assistant-ui/react-ai-sdk核心代码量很小。在页面里引入 runtime provider，挂上 Thread 组件，一个完整的对话界面就出来了。useChatRuntime 默认对接 Vercel AI SDK，换成 useLangGraphRuntime 或自定义 runtime 就能接任何后端。
组件化设计
assistant-ui 的设计思路类似 Radix UI：不提供一个黑盒聊天组件，而是提供一组可组合的基础单元。Thread、Message、Composer、ThreadList、ActionBar 这些组件可以单独使用，也可以组合成完整的对话界面。每个组件的样式都可以自由定制，CLI 还会生成一套基于 shadcn/ui 的主题作为起点。
这种设计的好处在于灵活性。想做一个类似 Perplexity 风格的搜索对话界面，或者一个类似 ChatGPT 的多轮对话应用，用同样的基础组件就能搭出来，不需要从头造轮子。
开箱即用的能力
assistant-ui 把聊天界面的常见需求都内置了：
- 流式输出（streaming）：消息逐字显示，不需要自己写打字机效果
- 自动滚动：新消息出现时页面自动跟随
- 重试机制：请求失败可以一键重发
- 附件支持：对话中可以上传文件
- Markdown 渲染和代码高亮：消息内容自动解析格式
- 语音输入：支持语音转文字
- 键盘快捷键和无障碍访问：符合 Web 标准的交互体验
这些功能如果从零实现，每项都要花时间调试。assistant-ui 把它们封装成组件的内置行为，开发者只需要聚焦业务逻辑。
后端适配
项目提供了多个后端适配包，覆盖了主流的 AI 框架：
| 集成 | 包名 |
|---|---|
| Vercel AI SDK | @assistant-ui/react-ai-sdk |
| LangGraph / LangChain | @assistant-ui/react-langgraph |
| AG-UI / A2A 协议 | @assistant-ui/react-ag-ui |
| Google ADK / OpenCode | @assistant-ui/react-google-adk |
| 自定义数据流后端 | @assistant-ui/react-data-stream |
模型方面，OpenAI、Anthropic、Google Gemini、Mistral、Ollama 等主流提供商都直接支持。通过 AI SDK 的社区适配器，几乎可以对接任何模型服务。
生成式 UI
assistant-ui 有一个比较有特色的功能：生成式 UI。它可以把模型的工具调用和 JSON 输出渲染成 React 组件，在对话中直接展示结构化内容。开发者还可以在前端暴露安全操作给模型调用，并在界面上收集用户的内联审批。这个能力让聊天界面不再只是文字收发，而是可以承载更复杂的交互场景。
生产环境采用
从项目展示的信息来看，assistant-ui 已经被不少团队用在生产环境，包括 Mastra、LangChain、Browser Use、Stack AI、Helicone 等产品。项目由 Y Combinator 支持，有持续维护的保障。
除了 React Web 版本，assistant-ui 还提供了 React Native 和 Terminal（基于 Ink）的适配包，覆盖了移动端和终端场景。
许可证
项目采用 MIT 许可证，可以自由用于商业项目。另有可选的 Assistant Cloud 服务，提供托管的消息持久化和数据分析功能。
总的来说，如果你正在做一个 AI 应用，需要一个聊天界面，assistant-ui 值得花半小时试一下。它解决的是前端最耗时的那一块重复工作，让开发者把精力放在模型能力本身。
果你正在做一个 AI 应用，需要一个聊天界面，assistant-ui 值得花半小时试一下。它解决的是前端最耗时的那一块重复工作，让开发者把精力放在模型能力本身。