[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71V503B4Y4FHMKGDFWHC79A":3,"skill-same:01M71V503B4Y4FHMKGDFWHC79A":76},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":28,"linkOnly":29,"markdownContent":30,"markdownBody":31,"frontMatter":32,"refName":34,"commitSha":35,"skillDirectory":36,"forksCount":37,"repositoryHtmlUrl":38,"repositoryHomepageUrl":39,"ownerHtmlUrl":40,"ownerBlogUrl":41,"ownerDescription":42,"updatedAt":43,"install":44,"resources":57},"01M71V503B4Y4FHMKGDFWHC79A","primitives",null,"Guide for assistant-ui UI primitives - ThreadPrimitive, ComposerPrimitive, MessagePrimitive. Use when customizing chat UI components.","AkaraChen\u002Fangel-engine","AkaraChen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F85140972?v=4","01M6E197RY34TPAFK03227R387","01M71V2QPZM89DQ8R1AB7021P4",19,"MIT","https:\u002F\u002Fgithub.com\u002FAkaraChen\u002Fangel-engine\u002Fblob\u002Fmaster\u002F.agents\u002Fskills\u002Fprimitives\u002FSKILL.md",[],[5,18,19,20,21,22,23,24,25,26,27],"assistant","components","ui","guide","use","chat","ui components","chat ui","for","when","2026-11-10 13:02:02",false,"---\nname: primitives\ndescription: Guide for assistant-ui UI primitives - ThreadPrimitive, ComposerPrimitive, MessagePrimitive. Use when customizing chat UI components.\nversion: 0.0.1\nlicense: MIT\n---\n\n# assistant-ui Primitives\n\n**Always consult [assistant-ui.com\u002Fllms.txt](https:\u002F\u002Fassistant-ui.com\u002Fllms.txt) for latest API.**\n\nComposable, unstyled components following Radix UI patterns.\n\n## References\n\n- [.\u002Freferences\u002Fthread.md](.\u002Freferences\u002Fthread.md) -- ThreadPrimitive deep dive\n- [.\u002Freferences\u002Fcomposer.md](.\u002Freferences\u002Fcomposer.md) -- ComposerPrimitive deep dive\n- [.\u002Freferences\u002Fmessage.md](.\u002Freferences\u002Fmessage.md) -- MessagePrimitive deep dive\n- [.\u002Freferences\u002Faction-bar.md](.\u002Freferences\u002Faction-bar.md) -- ActionBarPrimitive deep dive\n\n## Import\n\n```tsx\nimport {\n  AuiIf,\n  ThreadPrimitive,\n  ComposerPrimitive,\n  MessagePrimitive,\n  ActionBarPrimitive,\n  BranchPickerPrimitive,\n  AttachmentPrimitive,\n  ThreadListPrimitive,\n  ThreadListItemPrimitive,\n} from \"@assistant-ui\u002Freact\";\n```\n\n## Primitive Parts\n\n| Primitive | Key Parts |\n|-----------|-----------|\n| `ThreadPrimitive` | `.Root`, `.Viewport`, `.Messages`, `.Empty`, `.ScrollToBottom` |\n| `ComposerPrimitive` | `.Root`, `.Input`, `.Send`, `.Cancel`, `.Attachments` |\n| `MessagePrimitive` | `.Root`, `.Parts`\u002F`.Content`, `.If`, `.Error` |\n| `ActionBarPrimitive` | `.Copy`, `.Edit`, `.Reload`, `.Speak`, `.FeedbackPositive`, `.FeedbackNegative`, `.ExportMarkdown` |\n| `BranchPickerPrimitive` | `.Previous`, `.Next`, `.Number`, `.Count` |\n\n## Custom Thread Example\n\n```tsx\nfunction CustomThread() {\n  return (\n    \u003CThreadPrimitive.Root className=\"flex flex-col h-full\">\n      \u003CThreadPrimitive.Empty>\n        \u003Cdiv className=\"flex-1 flex items-center justify-center\">\n          Start a conversation\n        \u003C\u002Fdiv>\n      \u003C\u002FThreadPrimitive.Empty>\n\n      \u003CThreadPrimitive.Viewport className=\"flex-1 overflow-y-auto p-4\">\n        \u003CThreadPrimitive.Messages components={{\n          UserMessage: CustomUserMessage,\n          AssistantMessage: CustomAssistantMessage,\n        }} \u002F>\n      \u003C\u002FThreadPrimitive.Viewport>\n\n      \u003CComposerPrimitive.Root className=\"border-t p-4 flex gap-2\">\n        \u003CComposerPrimitive.Input className=\"flex-1 rounded-lg border px-4 py-2\" \u002F>\n        \u003CComposerPrimitive.Send className=\"bg-blue-500 text-white px-4 py-2 rounded-lg\">\n          Send\n        \u003C\u002FComposerPrimitive.Send>\n      \u003C\u002FComposerPrimitive.Root>\n    \u003C\u002FThreadPrimitive.Root>\n  );\n}\n```\n\n## Conditional Rendering\n\nPrefer `AuiIf` for new code. Primitive `.If` components still exist but are deprecated.\n\n```tsx\n\u003CAuiIf condition={({ message }) => message.role === \"user\"}>\n  User only\n\u003C\u002FAuiIf>\n\u003CAuiIf condition={({ thread }) => thread.isRunning}>\n  Generating...\n\u003C\u002FAuiIf>\n\u003CAuiIf condition={({ message }) => message.branchCount > 1}>\n  Has edit history\n\u003C\u002FAuiIf>\n\n\u003CAuiIf condition={({ thread }) => thread.isRunning}>\n  \u003CComposerPrimitive.Cancel>Stop\u003C\u002FComposerPrimitive.Cancel>\n\u003C\u002FAuiIf>\n\n\u003CAuiIf condition={({ thread }) => thread.isEmpty}>No messages\u003C\u002FAuiIf>\n```\n\n## Content Parts\n\n```tsx\n\u003CMessagePrimitive.Content components={{\n  Text: ({ part }) => \u003Cp>{part.text}\u003C\u002Fp>,\n  Image: ({ part }) => \u003Cimg src={part.image} alt=\"\" \u002F>,\n  ToolCall: ({ part }) => \u003Cdiv>Tool: {part.toolName}\u003C\u002Fdiv>,\n  Reasoning: ({ part }) => \u003Cdetails>\u003Csummary>Thinking\u003C\u002Fsummary>{part.text}\u003C\u002Fdetails>,\n}} \u002F>\n```\n\n## Branch Picker\n\n```tsx\n\u003CMessagePrimitive.If hasBranches>\n  \u003CBranchPickerPrimitive.Root className=\"flex items-center gap-1\">\n    \u003CBranchPickerPrimitive.Previous>←\u003C\u002FBranchPickerPrimitive.Previous>\n    \u003Cspan>\u003CBranchPickerPrimitive.Number \u002F> \u002F \u003CBranchPickerPrimitive.Count \u002F>\u003C\u002Fspan>\n    \u003CBranchPickerPrimitive.Next>→\u003C\u002FBranchPickerPrimitive.Next>\n  \u003C\u002FBranchPickerPrimitive.Root>\n\u003C\u002FMessagePrimitive.If>\n```\n\n## Common Gotchas\n\n**Primitives not rendering**\n- Wrap in `AssistantRuntimeProvider`\n- Ensure parent primitive provides context\n\n**Styles not applying**\n- Primitives are unstyled by default\n- Add `className` and style with your app's Tailwind\u002FCSS system\n","# assistant-ui Primitives\n\n**Always consult [assistant-ui.com\u002Fllms.txt](https:\u002F\u002Fassistant-ui.com\u002Fllms.txt) for latest API.**\n\nComposable, unstyled components following Radix UI patterns.\n\n## References\n\n- [.\u002Freferences\u002Fthread.md](.\u002Freferences\u002Fthread.md) -- ThreadPrimitive deep dive\n- [.\u002Freferences\u002Fcomposer.md](.\u002Freferences\u002Fcomposer.md) -- ComposerPrimitive deep dive\n- [.\u002Freferences\u002Fmessage.md](.\u002Freferences\u002Fmessage.md) -- MessagePrimitive deep dive\n- [.\u002Freferences\u002Faction-bar.md](.\u002Freferences\u002Faction-bar.md) -- ActionBarPrimitive deep dive\n\n## Import\n\n```tsx\nimport {\n  AuiIf,\n  ThreadPrimitive,\n  ComposerPrimitive,\n  MessagePrimitive,\n  ActionBarPrimitive,\n  BranchPickerPrimitive,\n  AttachmentPrimitive,\n  ThreadListPrimitive,\n  ThreadListItemPrimitive,\n} from \"@assistant-ui\u002Freact\";\n```\n\n## Primitive Parts\n\n| Primitive | Key Parts |\n|-----------|-----------|\n| `ThreadPrimitive` | `.Root`, `.Viewport`, `.Messages`, `.Empty`, `.ScrollToBottom` |\n| `ComposerPrimitive` | `.Root`, `.Input`, `.Send`, `.Cancel`, `.Attachments` |\n| `MessagePrimitive` | `.Root`, `.Parts`\u002F`.Content`, `.If`, `.Error` |\n| `ActionBarPrimitive` | `.Copy`, `.Edit`, `.Reload`, `.Speak`, `.FeedbackPositive`, `.FeedbackNegative`, `.ExportMarkdown` |\n| `BranchPickerPrimitive` | `.Previous`, `.Next`, `.Number`, `.Count` |\n\n## Custom Thread Example\n\n```tsx\nfunction CustomThread() {\n  return (\n    \u003CThreadPrimitive.Root className=\"flex flex-col h-full\">\n      \u003CThreadPrimitive.Empty>\n        \u003Cdiv className=\"flex-1 flex items-center justify-center\">\n          Start a conversation\n        \u003C\u002Fdiv>\n      \u003C\u002FThreadPrimitive.Empty>\n\n      \u003CThreadPrimitive.Viewport className=\"flex-1 overflow-y-auto p-4\">\n        \u003CThreadPrimitive.Messages components={{\n          UserMessage: CustomUserMessage,\n          AssistantMessage: CustomAssistantMessage,\n        }} \u002F>\n      \u003C\u002FThreadPrimitive.Viewport>\n\n      \u003CComposerPrimitive.Root className=\"border-t p-4 flex gap-2\">\n        \u003CComposerPrimitive.Input className=\"flex-1 rounded-lg border px-4 py-2\" \u002F>\n        \u003CComposerPrimitive.Send className=\"bg-blue-500 text-white px-4 py-2 rounded-lg\">\n          Send\n        \u003C\u002FComposerPrimitive.Send>\n      \u003C\u002FComposerPrimitive.Root>\n    \u003C\u002FThreadPrimitive.Root>\n  );\n}\n```\n\n## Conditional Rendering\n\nPrefer `AuiIf` for new code. Primitive `.If` components still exist but are deprecated.\n\n```tsx\n\u003CAuiIf condition={({ message }) => message.role === \"user\"}>\n  User only\n\u003C\u002FAuiIf>\n\u003CAuiIf condition={({ thread }) => thread.isRunning}>\n  Generating...\n\u003C\u002FAuiIf>\n\u003CAuiIf condition={({ message }) => message.branchCount > 1}>\n  Has edit history\n\u003C\u002FAuiIf>\n\n\u003CAuiIf condition={({ thread }) => thread.isRunning}>\n  \u003CComposerPrimitive.Cancel>Stop\u003C\u002FComposerPrimitive.Cancel>\n\u003C\u002FAuiIf>\n\n\u003CAuiIf condition={({ thread }) => thread.isEmpty}>No messages\u003C\u002FAuiIf>\n```\n\n## Content Parts\n\n```tsx\n\u003CMessagePrimitive.Content components={{\n  Text: ({ part }) => \u003Cp>{part.text}\u003C\u002Fp>,\n  Image: ({ part }) => \u003Cimg src={part.image} alt=\"\" \u002F>,\n  ToolCall: ({ part }) => \u003Cdiv>Tool: {part.toolName}\u003C\u002Fdiv>,\n  Reasoning: ({ part }) => \u003Cdetails>\u003Csummary>Thinking\u003C\u002Fsummary>{part.text}\u003C\u002Fdetails>,\n}} \u002F>\n```\n\n## Branch Picker\n\n```tsx\n\u003CMessagePrimitive.If hasBranches>\n  \u003CBranchPickerPrimitive.Root className=\"flex items-center gap-1\">\n    \u003CBranchPickerPrimitive.Previous>←\u003C\u002FBranchPickerPrimitive.Previous>\n    \u003Cspan>\u003CBranchPickerPrimitive.Number \u002F> \u002F \u003CBranchPickerPrimitive.Count \u002F>\u003C\u002Fspan>\n    \u003CBranchPickerPrimitive.Next>→\u003C\u002FBranchPickerPrimitive.Next>\n  \u003C\u002FBranchPickerPrimitive.Root>\n\u003C\u002FMessagePrimitive.If>\n```\n\n## Common Gotchas\n\n**Primitives not rendering**\n- Wrap in `AssistantRuntimeProvider`\n- Ensure parent primitive provides context\n\n**Styles not applying**\n- Primitives are unstyled by default\n- Add `className` and style with your app's Tailwind\u002FCSS system\n",{"name":5,"license":14,"version":33,"description":7},"0.0.1","master","48a57981043dbb2c534a27f410715a205f50bcfb",".agents\u002Fskills\u002Fprimitives",2,"https:\u002F\u002Fgithub.com\u002FAkaraChen\u002Fangel-engine","https:\u002F\u002Fangel-engine.vercel.app\u002F","https:\u002F\u002Fgithub.com\u002FAkaraChen","https:\u002F\u002Fakr.moe","button painter, string concatenator, log alchemist.\r\n\r\nNo slop, no lag.","2026-09-09 08:58:26",{"source":8,"skillName":5,"commands":45,"prompt":55,"zipAvailable":56},[46,49,52],{"tool":47,"command":48},"npx","npx skills add AkaraChen\u002Fangel-engine --skill primitives",{"tool":50,"command":51},"bunx","bunx skills add AkaraChen\u002Fangel-engine --skill primitives",{"tool":53,"command":54},"pnpm","pnpm dlx skills add AkaraChen\u002Fangel-engine --skill primitives","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FAkaraChen\u002Fangel-engine\u002Fblob\u002Fmaster\u002F.agents\u002Fskills\u002Fprimitives\u002FSKILL.md",true,[58,64,68,72],{"path":59,"resourceType":60,"resourceTypeDesc":61,"sizeBytes":62,"sourceHtmlUrl":63},"references\u002Faction-bar.md","REFERENCE","参考文档",6351,"https:\u002F\u002Fgithub.com\u002FAkaraChen\u002Fangel-engine\u002Fblob\u002Fmaster\u002F.agents\u002Fskills\u002Fprimitives\u002Freferences\u002Faction-bar.md",{"path":65,"resourceType":60,"resourceTypeDesc":61,"sizeBytes":66,"sourceHtmlUrl":67},"references\u002Fcomposer.md",7281,"https:\u002F\u002Fgithub.com\u002FAkaraChen\u002Fangel-engine\u002Fblob\u002Fmaster\u002F.agents\u002Fskills\u002Fprimitives\u002Freferences\u002Fcomposer.md",{"path":69,"resourceType":60,"resourceTypeDesc":61,"sizeBytes":70,"sourceHtmlUrl":71},"references\u002Fmessage.md",5705,"https:\u002F\u002Fgithub.com\u002FAkaraChen\u002Fangel-engine\u002Fblob\u002Fmaster\u002F.agents\u002Fskills\u002Fprimitives\u002Freferences\u002Fmessage.md",{"path":73,"resourceType":60,"resourceTypeDesc":61,"sizeBytes":74,"sourceHtmlUrl":75},"references\u002Fthread.md",5385,"https:\u002F\u002Fgithub.com\u002FAkaraChen\u002Fangel-engine\u002Fblob\u002Fmaster\u002F.agents\u002Fskills\u002Fprimitives\u002Freferences\u002Fthread.md",[77,89,112,128,141,155],{"skillNo":78,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":83,"publishedAt":28},"01M71V8NX6JM9719CJM1R07JNF","update","Update assistant-ui and AI SDK to latest versions. Detects current versions, identifies breaking changes, and executes migrations.","https:\u002F\u002Fgithub.com\u002FAkaraChen\u002Fangel-engine\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fupdate\u002FSKILL.md",[],[79,84,85,86,87,20,88,18],"changes","latest","migrations","ai sdk","sdk",{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":100,"publishedAt":28},"01M71V8GA53EWDYMKDCE95JN9M","tools","Guide for tool registration and tool UI in assistant-ui. Use when implementing LLM tools, tool call rendering, or human-in-the-loop patterns.","https:\u002F\u002Fgithub.com\u002FAkaraChen\u002Fangel-engine\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Ftools\u002FSKILL.md",[95],{"categoryNo":96,"categoryName":97,"taxonomyType":98,"taxonomyTypeDesc":99},"01JBSEEDCAT000000000000010","后端与接口","SCENARIO","使用场景",[101,102,20,18,103,104,27,26,105,106,107,108,109,110,111,22,21],"Tools","human-in-the-loop","tool","implementing","loop","rendering","human","llm tools","call","patterns","registration",{"skillNo":113,"name":114,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":118,"publishedAt":28},"01M71V8EK5HG1TY1JSJA9ZG6RA","thread-list","Guide for multi-thread management in assistant-ui. Use when implementing thread lists, switching threads, or managing conversation history.","https:\u002F\u002Fgithub.com\u002FAkaraChen\u002Fangel-engine\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fthread-list\u002FSKILL.md",[],[119,120,121,122,27,26,104,123,124,125,22,21,126,127,20,18],"list","thread list","thread","multi","threads","switching","conversation","management","history",{"skillNo":129,"name":130,"nameZh":6,"description":131,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":134,"publishedAt":28},"01M71V8CQ30TTQP2KHPYCGCR3R","streaming","Guide for assistant-stream package and streaming protocols. Use when implementing streaming backends, custom protocols, or debugging stream issues.","https:\u002F\u002Fgithub.com\u002FAkaraChen\u002Fangel-engine\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fstreaming\u002FSKILL.md",[],[130,135,136,27,137,26,104,22,21,138,139,140,18],"custom","issues","stream","protocols","package","debugging",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":147,"publishedAt":28},"01M71V86CFGGT33XS5FCVAYPVG","setup","Setup and configure assistant-ui in a project. Use when installing packages, configuring runtimes, setting up chat UI, or troubleshooting setup issues.","https:\u002F\u002Fgithub.com\u002FAkaraChen\u002Fangel-engine\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fsetup\u002FSKILL.md",[],[143,148,149,20,136,150,18,22,151,27,25,152,153,23,154],"troubleshooting","configure","packages","setting","runtimes","project","up",{"skillNo":156,"name":157,"nameZh":6,"description":158,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":159,"categories":160,"keywords":161,"publishedAt":28},"01M71V84DGS3SN4VJ829MHNBB8","runtime","Guide for assistant-ui runtime system and state management. Use when working with runtimes, accessing state, or managing thread\u002Fmessage data.","https:\u002F\u002Fgithub.com\u002FAkaraChen\u002Fangel-engine\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fruntime\u002FSKILL.md",[],[157,152,27,121,26,162,163,22,21,126,164,165,20,166,167,18],"with","message","system","data","state","state management"]