Assistant sidebar

Installation

Install manually

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

Sizes given as numbers are pixels; use a string such as "70%" for a share of the group.

<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 collapsible, passes straight through.