primitives by assistant-ui/skills
npx skills add https://github.com/assistant-ui/skills --skill primitives请始终查阅 assistant-ui.com/llms.txt 以获取最新 API 信息。
遵循 Radix UI 模式的可组合、无样式组件。
import {
AuiIf,
ThreadPrimitive,
ComposerPrimitive,
MessagePrimitive,
ActionBarPrimitive,
BranchPickerPrimitive,
AttachmentPrimitive,
ThreadListPrimitive,
ThreadListItemPrimitive,
} from "@assistant-ui/react";
| 基础组件 | 关键部件 |
|---|
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
ThreadPrimitive | .Root, .Viewport, .Messages, .Empty, .ScrollToBottom |
ComposerPrimitive | .Root, .Input, .Send, .Cancel, .Attachments |
MessagePrimitive | .Root, .Parts/.Content, .If, .Error |
ActionBarPrimitive | .Copy, .Edit, .Reload, .Speak, .FeedbackPositive, .FeedbackNegative, .ExportMarkdown |
BranchPickerPrimitive | .Previous, .Next, .Number, .Count |
function CustomThread() {
return (
<ThreadPrimitive.Root className="flex flex-col h-full">
<ThreadPrimitive.Empty>
<div className="flex-1 flex items-center justify-center">
开始对话
</div>
</ThreadPrimitive.Empty>
<ThreadPrimitive.Viewport className="flex-1 overflow-y-auto p-4">
<ThreadPrimitive.Messages components={{
UserMessage: CustomUserMessage,
AssistantMessage: CustomAssistantMessage,
}} />
</ThreadPrimitive.Viewport>
<ComposerPrimitive.Root className="border-t p-4 flex gap-2">
<ComposerPrimitive.Input className="flex-1 rounded-lg border px-4 py-2" />
<ComposerPrimitive.Send className="bg-blue-500 text-white px-4 py-2 rounded-lg">
发送
</ComposerPrimitive.Send>
</ComposerPrimitive.Root>
</ThreadPrimitive.Root>
);
}
新代码建议使用 AuiIf。基础组件的 .If 组件仍然存在,但已弃用。
<AuiIf condition={({ message }) => message.role === "user"}>
仅用户
</AuiIf>
<AuiIf condition={({ thread }) => thread.isRunning}>
生成中...
</AuiIf>
<AuiIf condition={({ message }) => message.branchCount > 1}>
有编辑历史
</AuiIf>
<AuiIf condition={({ thread }) => thread.isRunning}>
<ComposerPrimitive.Cancel>停止</ComposerPrimitive.Cancel>
</AuiIf>
<AuiIf condition={({ thread }) => thread.isEmpty}>无消息</AuiIf>
<MessagePrimitive.Content components={{
Text: ({ part }) => <p>{part.text}</p>,
Image: ({ part }) => <img src={part.image} alt="" />,
ToolCall: ({ part }) => <div>工具: {part.toolName}</div>,
Reasoning: ({ part }) => <details><summary>思考过程</summary>{part.text}</details>,
}} />
<MessagePrimitive.If hasBranches>
<BranchPickerPrimitive.Root className="flex items-center gap-1">
<BranchPickerPrimitive.Previous>←</BranchPickerPrimitive.Previous>
<span><BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count /></span>
<BranchPickerPrimitive.Next>→</BranchPickerPrimitive.Next>
</BranchPickerPrimitive.Root>
</MessagePrimitive.If>
基础组件未渲染
AssistantRuntimeProvider 包裹样式未生效
className 并使用您应用的 Tailwind/CSS 系统进行样式设置每周安装量
494
代码仓库
GitHub 星标数
7
首次出现时间
2026年1月21日
安全审计
安装于
codex403
opencode394
gemini-cli385
github-copilot375
amp327
kimi-cli324
Always consultassistant-ui.com/llms.txt for latest API.
Composable, unstyled components following Radix UI patterns.
import {
AuiIf,
ThreadPrimitive,
ComposerPrimitive,
MessagePrimitive,
ActionBarPrimitive,
BranchPickerPrimitive,
AttachmentPrimitive,
ThreadListPrimitive,
ThreadListItemPrimitive,
} from "@assistant-ui/react";
| Primitive | Key Parts |
|---|---|
ThreadPrimitive | .Root, .Viewport, .Messages, .Empty, .ScrollToBottom |
ComposerPrimitive | .Root, .Input, .Send, .Cancel, |
function CustomThread() {
return (
<ThreadPrimitive.Root className="flex flex-col h-full">
<ThreadPrimitive.Empty>
<div className="flex-1 flex items-center justify-center">
Start a conversation
</div>
</ThreadPrimitive.Empty>
<ThreadPrimitive.Viewport className="flex-1 overflow-y-auto p-4">
<ThreadPrimitive.Messages components={{
UserMessage: CustomUserMessage,
AssistantMessage: CustomAssistantMessage,
}} />
</ThreadPrimitive.Viewport>
<ComposerPrimitive.Root className="border-t p-4 flex gap-2">
<ComposerPrimitive.Input className="flex-1 rounded-lg border px-4 py-2" />
<ComposerPrimitive.Send className="bg-blue-500 text-white px-4 py-2 rounded-lg">
Send
</ComposerPrimitive.Send>
</ComposerPrimitive.Root>
</ThreadPrimitive.Root>
);
}
Prefer AuiIf for new code. Primitive .If components still exist but are deprecated.
<AuiIf condition={({ message }) => message.role === "user"}>
User only
</AuiIf>
<AuiIf condition={({ thread }) => thread.isRunning}>
Generating...
</AuiIf>
<AuiIf condition={({ message }) => message.branchCount > 1}>
Has edit history
</AuiIf>
<AuiIf condition={({ thread }) => thread.isRunning}>
<ComposerPrimitive.Cancel>Stop</ComposerPrimitive.Cancel>
</AuiIf>
<AuiIf condition={({ thread }) => thread.isEmpty}>No messages</AuiIf>
<MessagePrimitive.Content components={{
Text: ({ part }) => <p>{part.text}</p>,
Image: ({ part }) => <img src={part.image} alt="" />,
ToolCall: ({ part }) => <div>Tool: {part.toolName}</div>,
Reasoning: ({ part }) => <details><summary>Thinking</summary>{part.text}</details>,
}} />
<MessagePrimitive.If hasBranches>
<BranchPickerPrimitive.Root className="flex items-center gap-1">
<BranchPickerPrimitive.Previous>←</BranchPickerPrimitive.Previous>
<span><BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count /></span>
<BranchPickerPrimitive.Next>→</BranchPickerPrimitive.Next>
</BranchPickerPrimitive.Root>
</MessagePrimitive.If>
Primitives not rendering
AssistantRuntimeProviderStyles not applying
className and style with your app's Tailwind/CSS systemWeekly Installs
494
Repository
GitHub Stars
7
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
codex403
opencode394
gemini-cli385
github-copilot375
amp327
kimi-cli324
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
103,800 周安装
.AttachmentsMessagePrimitive | .Root, .Parts/.Content, .If, .Error |
ActionBarPrimitive | .Copy, .Edit, .Reload, .Speak, .FeedbackPositive, .FeedbackNegative, .ExportMarkdown |
BranchPickerPrimitive | .Previous, .Next, .Number, .Count |