ThreadList

Overview

The ThreadList component lets the user switch between threads.

Sample ThreadList

This demo uses ThreadListSidebar, which includes thread-list as a dependency and provides a complete sidebar layout. For custom implementations, you can use thread-list directly.

Getting Started

Add the component

Use threadlist-sidebar for a complete sidebar layout or thread-list for custom layouts.

ThreadListSidebar

npx assistant-ui@latest add threadlist-sidebar

npx shadcn@latest add @assistant-ui/threadlist-sidebar

npx shadcn@latest add "https://r.assistant-ui.com/threadlist-sidebar"

ThreadList

npx assistant-ui@latest add thread-list

npx shadcn@latest add @assistant-ui/thread-list

npx shadcn@latest add "https://r.assistant-ui.com/thread-list"

Use in your application

/app/assistant.tsx

import { Thread } from "@/components/assistant-ui/thread";
import { ThreadListSidebar } from "@/components/assistant-ui/threadlist-sidebar";
import { 
  SidebarProvider, 
  SidebarInset,
  SidebarTrigger 
} from "@/components/ui/sidebar";

export default function Assistant() {
  return (
    <SidebarProvider>
      <div className="flex h-dvh w-full">
        <ThreadListSidebar />
        <SidebarInset>
          {/* Add sidebar trigger, location can be customized */}
          <SidebarTrigger className="absolute top-4 left-4" />
          <Thread />
        </SidebarInset>
      </div>
    </SidebarProvider>
  );
}

/app/assistant.tsx

import { Thread } from "@/components/assistant-ui/thread";
import { ThreadList } from "@/components/assistant-ui/thread-list";

export default function Assistant() {
  return (
    <div className="grid h-full grid-cols-[200px_1fr]">
      <ThreadList />
      <Thread />
    </div>
  );
}

ThreadList

Overview

Getting Started

Add the component

ThreadListSidebar

ThreadList

Use in your application

On this page