Full Thread Example

完整的聊天页面示例，展示如何使用 aui-components 构建 AI 聊天界面

以下是一个完整的 AI 聊天应用示例，涵盖了 Thread 组件的所有核心功能。

完整代码

Chat 组件

components/chat.tsx

"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>
  );
}

API Route

app/api/chat/route.ts

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,
    // 启用推理可见性（Reasoning）
    providerOptions: {
      openai: { reasoningEffort: "medium" },
    },
  });

  return result.toUIMessageStreamResponse();
}

Page

app/page.tsx

import { Chat } from "@/components/chat";

export default function Home() {
  return <Chat />;
}

Layout

app/layout.tsx

import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "AI Chat Demo",
  description: "A demo chat application using aui-components",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className="antialiased">
        {children}
      </body>
    </html>
  );
}

CSS

app/globals.css

@import "tailwindcss";

/* 添加 assistant-ui 所需的 CSS 变量 */
@theme {
  --color-background: #fff;
  --color-foreground: #0a0a0a;
  --color-muted: #f5f5f5;
  --color-muted-foreground: #737373;
  --color-border: #e5e5e5;
  --color-primary: #171717;
  --color-primary-foreground: #fafafa;
  --color-secondary: #f5f5f5;
  --color-secondary-foreground: #171717;
  --color-accent: #f5f5f5;
  --color-accent-foreground: #171717;
  --color-destructive: #ef4444;
  --color-ring: #0a0a0a;
  --color-popover: #fff;
  --color-popover-foreground: #0a0a0a;
}

.dark {
  --color-background: #0a0a0a;
  --color-foreground: #fafafa;
  --color-muted: #262626;
  --color-muted-foreground: #a3a3a3;
  --color-border: #262626;
  --color-primary: #fafafa;
  --color-primary-foreground: #171717;
  --color-secondary: #262626;
  --color-secondary-foreground: #fafafa;
  --color-accent: #262626;
  --color-accent-foreground: #fafafa;
  --color-destructive: #7f1d1d;
  --color-ring: #d4d4d4;
  --color-popover: #0a0a0a;
  --color-popover-foreground: #fafafa;
}

环境变量

.env.local

OPENAI_API_KEY=sk-your-key-here

运行

pnpm dev

打开 http://localhost:3000 即可看到聊天界面。

功能说明

这个示例展示了 aui-components 的以下功能：

Thread — 完整聊天线程（消息列表 + 输入框）
MarkdownText — AI 回复的 Markdown 渲染
Composer — 输入框 + 发送/取消按钮
自动滚动 — 新消息自动滚动到底部
BranchPicker — 消息分支切换

可选增强

添加工具调用