assistant-ui

环境要求

• Node.js 环境（README 使用 npx/npm 命令）
• 使用 npm 作为包管理器
• 已有 React 项目，或通过 CLI 自动生成的 Next.js 项目
• 需要 Vercel AI SDK 配合 useChatRuntime 使用

安装与启动步骤

1. 1创建新项目

   在空目录执行 CLI，自动脚手架出一个带聊天界面的 Next.js 应用，这是官方推荐的最快路径。

   npx assistant-ui@latest create

   复制

2. 2接入已有项目

   已有 Next.js 项目时改用 init，将带样式的聊天组件加入现有工程，而不是新建项目。

   npx assistant-ui@latest init

   复制

3. 3手动安装依赖

   不想用 CLI 时，直接安装核心 React 包与 Vercel AI SDK 适配包，组件样式需自行接入。

   npm install @assistant-ui/react @assistant-ui/ai-sdk

   复制

4. 4编写聊天组件

   在客户端组件中调用 useChatRuntime 创建 runtime，再用 Provider 包裹 Thread 组件渲染界面。

   "use client";
   
   import { AssistantRuntimeProvider } from "@assistant-ui/react";
   import { useChatRuntime } from "@assistant-ui/ai-sdk";
   import { Thread } from "@/components/assistant-ui/elements/thread.aui";
   
   export function Chat() {
     const runtime = useChatRuntime();
     return (
       
         
       
     );
   }

   复制

5. 5更换运行时

   useChatRuntime 默认对接 Vercel AI SDK；要接自建后端可换成其他 runtime 或自定义 runtime。

如何确认成功

组件渲染出 Thread 聊天界面且无报错，发送消息后能通过所选 runtime 返回流式回复。

常见问题

注意事项

• README 未给出 Node.js 版本要求，建议使用较新的 LTS 版本。
• 示例中 Thread 的路径 @/components/assistant-ui/elements/thread.aui 由 CLI 生成，手动安装时需自行确认路径。
• README 未提供端口、环境变量等启动参数说明，具体以脚手架生成的项目为准。