ReferenceLegacyStyled Components

Thread

Overview

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

Getting Started

Install `@assistant-ui/react-ui`

npm install @assistant-ui/react-ui

Import CSS styles

Add the following to your tailwind.config.ts:

/tailwind.config.ts

{
  plugins: [
    require("tailwindcss-animate"), // make sure to "npm install tailwindcss-animate"
    require("@assistant-ui/react-ui/tailwindcss")({
      components: ["thread"],
    })
  ],
}

Use it in your app

/app/page.tsx

import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
import { Thread } from "@assistant-ui/react-ui";
 
const MyApp = () => {
  const runtime = useChatRuntime({
    api: "/api/chat",
  });
 
  return (
    <div className="h-full">
      <Thread runtime={runtime} />
    </div>
  );
};

Previous

@assistant-ui/react-hook-form

Next

Thread Width

On this page

Overview Getting Started Install @assistant-ui/react-uiImport CSS styles Use it in your app