assistant-ui スレッドリスト

最新の API については assistant-ui.com/llms.txt を必ず確認してください。

複数のチャットスレッドを組み込み UI またはカスタム UI で管理します。

リファレンス

• ./references/management.md -- スレッド CRUD 操作
• ./references/custom-ui.md -- カスタムスレッドリスト UI

クイックスタート

スレッドリストは useChatRuntime + cloud で利用できます:

import { AssistantCloud } from "assistant-cloud";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { ThreadList } from "@/components/assistant-ui/thread-list";
import { Thread } from "@/components/assistant-ui/thread";

const cloud = new AssistantCloud({
  baseUrl: process.env.NEXT_PUBLIC_ASSISTANT_BASE_URL,
  authToken: async () => getAuthToken(),
});

function Chat() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
    cloud,
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <div className="flex h-screen">
        <ThreadList className="w-64 border-r" />
        <Thread className="flex-1" />
      </div>
    </AssistantRuntimeProvider>
  );
}

スレッド操作

import { useAui, useAuiState } from "@assistant-ui/react";

const api = useAui();
const { threadIds, mainThreadId } = useAuiState((s) => ({
  threadIds: s.threads.threadIds,
  mainThreadId: s.threads.mainThreadId,
}));

// スレッドに切り替える
api.threads().switchToThread(threadId);

// 新しいスレッドを作成
api.threads().switchToNewThread();

// スレッドアイテムの操作
const item = api.threads().item({ id: threadId });
await item.rename("New Title");
await item.archive();
await item.delete();

カスタムスレッドリスト

import { ThreadListPrimitive, ThreadListItemPrimitive } from "@assistant-ui/react";

function CustomThreadList() {
  return (
    <ThreadListPrimitive.Root className="w-64">
      <ThreadListPrimitive.New className="w-full p-2 bg-blue-500 text-white">
        + New Chat
      </ThreadListPrimitive.New>

      <ThreadListPrimitive.Items>
        <ThreadListItemPrimitive.Root className="flex p-2 hover:bg-gray-100">
          <ThreadListItemPrimitive.Trigger className="flex-1">
            <ThreadListItemPrimitive.Title />
          </ThreadListItemPrimitive.Trigger>
          <ThreadListItemPrimitive.Archive>Archive</ThreadListItemPrimitive.Archive>
          <ThreadListItemPrimitive.Delete>Delete</ThreadListItemPrimitive.Delete>
        </ThreadListItemPrimitive.Root>
      </ThreadListPrimitive.Items>
    </ThreadListPrimitive.Root>
  );
}

Cloud なし (ローカル)

import {
  unstable_useRemoteThreadListRuntime as useRemoteThreadListRuntime,
  unstable_InMemoryThreadListAdapter as InMemoryThreadListAdapter,
} from "@assistant-ui/react";

const runtime = useRemoteThreadListRuntime({
  adapter: new InMemoryThreadListAdapter(),
  runtimeHook: () => useLocalRuntime({ model: myModel }),
});

よくある落とし穴

スレッドリストが表示されない

• runtime に cloud を渡しているか確認
• 認証を確認

スレッドが保存されない

• cloud 接続を確認
• ネットワークリクエストをチェック