Getting Started
Quick Start
5 分钟快速开始使用 aui-components
本指南将帮助你在 5 分钟内搭建一个完整的 AI 聊天界面。
前提条件
- Node.js 18+
- pnpm（推荐）或 npm
- React 19+
- 一个可用的 AI API endpoint（如
/api/chat）
Step 1: 安装依赖
pnpm add aui-components @assistant-ui/react ai @ai-sdk/openaiai 和 @ai-sdk/openai 是 Vercel AI SDK，用于与 AI 后端通信。你也可以替换为其他 transport（如 LangGraph）。
Step 2: 创建 Chat 组件
"use client";
import { AssistantRuntimeProvider, useChatRuntime } from "@assistant-ui/react";
import { Thread } from "aui-components";
export function Chat() {
const runtime = useChatRuntime({
api: "/api/chat",
});
return (
<AssistantRuntimeProvider aui={runtime.aui} runtime={runtime}>
<div className="h-screen">
<Thread />
</div>
</AssistantRuntimeProvider>
);
}Step 3: 创建 API Route
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";
export async function POST(req: Request) {
const { messages } = await req.json();
const result = streamText({
model: openai("gpt-4o"),
messages,
});
return result.toUIMessageStreamResponse();
}Step 4: 在页面中使用
import { Chat } from "@/components/chat";
export default function Home() {
return <Chat />;
}运行效果
启动项目后，你将看到：
- 一个居中的欢迎界面
- 底部输入框（支持附件上传、语音输入）
- 发送消息后显示 Markdown 渲染的回复
- 工具调用自动分组展示
- 思维链（Reasoning）自动折叠
- 消息操作栏（复制、刷新、朗读等）