Assistant sidebar

Installation

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

First time? Set up a runtime

Runtime components read their state from an assistant-ui runtime. Add one to an existing project:

npx assistant-ui@latest init

Then wrap your app in a runtime provider:

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/ai-sdk";

export default function App() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {/* your components */}
    </AssistantRuntimeProvider>
  );
}

The installation guide covers new projects, templates, and API routes.

Assistant sidebar splits the screen between your app and a Thread, with a drag handle between them. It has no standalone form, since the only state it holds is the resizable split itself, and the conversation pane is always a live Thread.

Getting started

AssistantSidebar needs nothing beyond a runtime provider higher up the tree and the content to show in the left pane.

Wrap your app

app/layout.tsx

import { AssistantSidebar } from "@/components/assistant-ui/elements/assistant-sidebar.aui";

export default function Layout({ children }: { children: React.ReactNode }) {
  return <AssistantSidebar>{children}</AssistantSidebar>;
}

Needs an AssistantRuntimeProvider ancestor. children renders in the left pane; a full Thread fills the right one.

Anatomy

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel>{children}</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>
    <Thread />
  </ResizablePanel>
</ResizablePanelGroup>

Neither panel sets a defaultSize or minSize, so the group starts at an even split and either side can be dragged arbitrarily close to zero.

Examples

Constrain the split

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize={70} minSize={30}>
    {children}
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={30} minSize={20}>
    <Thread />
  </ResizablePanel>
</ResizablePanelGroup>

Show a grip on the handle

<ResizableHandle withHandle />

API reference

AssistantSidebarProps

Prop	Type	Default	Description
`children`	`ReactNode`	required	Rendered in the left pane.

Panels

ResizablePanelGroup, ResizablePanel, and ResizableHandle come from @/components/ui/resizable, a thin wrapper over react-resizable-panels; every prop of the underlying library, including defaultSize, minSize, maxSize, and order, passes straight through.

How can I help you today?

Installation