Getting Started
Installation
aui-components 安装与配置指南
安装
pnpm add aui-componentsPeer Dependencies
确保你的项目中已安装以下依赖：
pnpm add react@^19.2.0 react-dom@^19.2.0如果使用 AI SDK 后端（推荐）：
pnpm add @assistant-ui/react ai @ai-sdk/openai如果使用 LangGraph 后端：
pnpm add @assistant-ui/react @assistant-ui/react-langgraphTailwind CSS 配置
aui-components 使用 Tailwind CSS v4。在你的 global.css 中导入：
@import "tailwindcss";同时确保引入了 assistant-ui 所需的 CSS 变量和动画。参考 assistant-ui 文档 完成配置。
AssistantRuntimeProvider
所有 aui-components 组件必须在 AssistantRuntimeProvider 内部使用：
import { AssistantRuntimeProvider, useChatRuntime } from "@assistant-ui/react";
import { Thread } from "aui-components";
export function App() {
const runtime = useChatRuntime({
api: "/api/chat",
});
return (
<AssistantRuntimeProvider aui={runtime.aui} runtime={runtime}>
<Thread />
</AssistantRuntimeProvider>
);
}AssistantRuntimeProvider 提供了 assistant-ui 的运行时上下文，包括线程管理、消息状态、编辑模式等功能。
环境变量
创建 .env 文件：
OPENAI_API_KEY=sk-...或配置你使用的 AI 服务商对应的环境变量。