技能介绍

要解决的问题

在 React 项目里从零搭一个 Agent 聊天界面，看起来只是“一个输入框加一个消息列表”，真正落地时要处理的是线程管理、运行时状态、消息流式渲染、模型与供应商适配这些分散的轮子。做 LLM 应用的开发者往往把大量时间花在 UI 脚手架上，而不是花在 Agent 本身的行为上。这个技能把 assistant-ui 的搭建路径收敛成一套可复用的结构：线程（thread）、运行时（runtime）、消息组件，以及模型/供应商适配器。

技能如何工作

核心思路是分层，而不是把所有逻辑塞进一个组件树：

线程与运行时解耦：thread 作为会话容器，runtime 负责驱动单次对话的执行，两者可以分别复用和替换。
模型接入通过适配器：类似 @assistant-ui/react-ai-sdk 这样的运行时适配器把模型调用接进来，后端可以是模型端点，也可以是你自己的 Agent 端点。
CLI 提供两条起步路径：新项目直接脚手架生成，已有项目则注入所需样式组件，不必推翻重来。
消息组件可定制：消息渲染部分不是写死的，可以替换成符合产品设计的实现。

典型步骤是：先确认项目里已有 React 应用、@assistant-ui/react 以及运行时适配器；然后用 CLI 生成 Next.js 应用或向现有项目添加组件；最后把运行时指向自己的模型或 Agent 端点，跑通一条真实对话，再在真实场景里调整消息组件的呈现。

适用边界与注意点

前提是你已经有可调用的后端模型或 Agent 端点。这个技能管的是前端界面结构，不提供模型本身，也不负责模型的可用性。
“生产级”指的是结构可复用，不代表鉴权、错误与重试、流式中断这些问题有默认兜底，这些需要你在自己项目里补齐。
脚手架以 Next.js 为默认目标；非 Next.js 项目要走“添加到现有项目”的路径，框架适配情况需要自己确认。
适配器是和 SDK 绑定的，选哪一个取决于你后端的模型调用方式，资料里给出的 @assistant-ui/react-ai-sdk 只是其中一种运行时方案。