Attachment
Overview
The Attachment components let the user attach files and view the attachments.
Sample Attachment
Note: These components provide the UI for attachments, but you also need to configure attachment adapters in your runtime to handle file uploads and processing. See the Attachments Guide for complete setup instructions.
Getting Started
Add attachment
npx shadcn@latest add "https://r.assistant-ui.com/attachment"This adds a /components/assistant-ui/attachment.tsx file to your project, which you can adjust as needed.
Use in your application
import {
ComposerAttachments,
ComposerAddAttachment,
} from "@/components/assistant-ui/attachment";
const Composer: FC = () => {
return (
<ComposerPrimitive.Root className="...">
<ComposerAttachments />
<ComposerAddAttachment />
<ComposerPrimitive.Input
autoFocus
placeholder="Write a message..."
rows={1}
className="..."
/>
<ComposerAction />
</ComposerPrimitive.Root>
);
};import { UserMessageAttachments } from "@/components/assistant-ui/attachment";
const UserMessage: FC = () => {
return (
<MessagePrimitive.Root className="...">
<UserActionBar />
<UserMessageAttachments />
<div className="...">
<MessagePrimitive.Content />
</div>
<BranchPicker className="..." />
</MessagePrimitive.Root>
);
};