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

# Complete thread-list sidebar layout
npx shadcn@latest add "https://r.assistant-ui.com/threadlist-sidebar"

# Just the thread-list for custom layouts
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>
  );
}