logoassistant-ui
shadcn-ui

Thread

Overview

The raw message list and message composer UI. Useful for full screen chat use cases.

Getting Started

Initialize shadcn-ui

npx shadcn@latest init

Add thread

npx assistant-ui@latest add thread

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

The thread template is minimal and does not include branching or editing support.

Alternatively, you can add thread-full, which includes branching and editing enabled by default.

npx assistant-ui@latest add thread-full

Use in your application

/app/page.tsx

import { Thread } from "@/components/ui/assistant-ui/thread";
 
export default function Home() {
  return (
    <div className="h-full">
      <Thread />
    </div>
  );
}

Previous

Custom Scrollbar

Next

AssistantModal

On this page

Edit on Github