Legacy/Styled 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-uiImport CSS styles
Add the following to your tailwind.config.ts:
{
plugins: [
require("tailwindcss-animate"), // make sure to "npm install tailwindcss-animate"
require("@assistant-ui/react-ui/tailwindcss")({
components: ["thread"],
})
],
}{
plugins: [
require("tailwindcss-animate"), // make sure to "npm install tailwindcss-animate"
require("@assistant-ui/react-ui/tailwindcss")({
components: ["thread"],
shadcn: true
})
],
}import "@assistant-ui/react-ui/styles/index.css";Use it in your app
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>
);
};