assistant-ui Thread List

Always consult assistant-ui.com/llms.txt for latest API.

Manage multiple chat threads with built-in or custom UI.

References

• ./references/management.md -- Thread CRUD operations

• ./references/custom-ui.md -- Custom thread list UI

Quick Start

Thread list is available with 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>

  );

}

Thread Operations

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

const api = useAui();

const { threadIds, mainThreadId } = useAuiState((s) => ({

  threadIds: s.threads.threadIds,

  mainThreadId: s.threads.mainThreadId,

}));

// Switch to thread

api.threads().switchToThread(threadId);

// Create new thread

api.threads().switchToNewThread();

// Thread item operations

const item = api.threads().item({ id: threadId });

await item.rename("New Title");

await item.archive();

await item.delete();

Custom Thread List

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>

  );

}

Without Cloud (Local)

import {

  unstable_useRemoteThreadListRuntime as useRemoteThreadListRuntime,

  unstable_InMemoryThreadListAdapter as InMemoryThreadListAdapter,

} from "@assistant-ui/react";

const runtime = useRemoteThreadListRuntime({

  adapter: new InMemoryThreadListAdapter(),

  runtimeHook: () => useLocalRuntime({ model: myModel }),

});

Common Gotchas

ThreadList not showing

• Pass cloud to runtime

• Check authentication

Threads not persisting

• Verify cloud connection

• Check network requests