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

Initialize shadcn-ui

npx shadcn@latest init

Add assistant-sidebar

npx assistant-ui@latest add sidebar

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

Use in your application

/app/page.tsx

import { AssistantSidebar } from "@/components/ui/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