logoassistant-ui
shadcn/ui

AssistantSidebar

Overview

A chat sidebar show on the right side of the screen. Useful for co-pilot use cases.

Getting Started

Add assistant-sidebar

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

This adds /components/assistant-ui/assistant-sidebar.tsx to your project, which you can adjust as needed.

Use in your application

/app/page.tsx
import { AssistantSidebar } from "@/components/assistant-ui/assistant-sidebar";
 
export default function Home() {
  return (
    <div className="h-full">
      <AssistantSidebar>{/* your app */}</AssistantSidebar>
    </div>
  );
}

Previous

AssistantModal

Next

Markdown

On this page

Edit on Github