Community图像github.com

assistant-ui/primitives

从可组合、无样式的 @assistant-ui/react 原语（遵循 Radix 式部分组合）构建和定制 assistant-ui 聊天 UI。用于从构建块组装或设计自定义的 Thread、Composer、消息渲染、操作栏或分支选择器。

primitives 是什么？

assistant-ui/primitives 技能专注于使用 @assistant-ui/react 提供的无样式、可组合原语来构建高度可定制的聊天界面。它遵循 Radix UI 的部分组合模式，提供一系列底层构建块，如 ThreadPrimitive、ComposerPrimitive、MessagePrimitive 等，允许开发者精确控制 UI 的每个部分，而无需受限于预设样式。该技能支持多种平台，包括 Claude Code、Cursor 和 Codex，通过提供详细的 API 文档和常见陷阱说明（如必须包裹在 AssistantRuntimeProvider 中、原语无样式需手动添加 className），帮助开发者高效地组装自定义的 Thread、Composer、消息渲染、操作栏和分支选择器。它还涵盖了 MessagePrimitive.Parts 的子元素渲染函数（用于文本、图像、推理和工具调用部分）以及条件渲染（AuiIf，已弃用）。对于需要快速集成预建 UI 或多线程侧边栏的场景，建议使用 setup 或 thread-list 相关技能。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/assistant-ui/skills/tree/main/skills/primitives

Installed? Explore more 图像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

primitives 是做什么的？

从可组合、无样式的 @assistant-ui/react 原语（遵循 Radix 式部分组合）构建和定制 assistant-ui 聊天 UI。用于从以下构建块组装或设计自定义的 Thread、Composer、消息渲染、操作栏或分支选择器：ThreadPrimitive（.Root、.Viewport、.Messages、.Empty、.ScrollToBottom）、ComposerPrimitive（.Input、.Send、.Cancel、.Attachments）、MessagePrimitive（.Parts/.Content、.Error）、ActionBarPrimitive（.Copy、.Edit、.Reload、.Speak、反馈、.ExportMarkdown）、BranchPickerPrimitive、AttachmentPrimitive、ThreadListPrimitive、ThreadListItemPrimitive。涵盖了 MessagePrimitive.Parts 子元素渲染函数（用于文本、图像、推理和工具调用部分）；使用 AuiIf（已弃用的 .If）进行条件渲染；以及常见陷阱，例如必须包裹在 AssistantRuntimeProvider 中，并且由于原语无样式，需要手动添加 className。对于预建的可直接使用的 UI 和脚手架搭建，请使用 setup；对于多线程侧边栏行为，请使用 thread-list。

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

assistant-ui/assistant-ui

Overview and router for assistant-ui, the React library for building AI chat interfaces from composable primitives. Use for high-level, cross-cutting, or architecture-overview questions: choosing packages, picking a runtime, or understanding the layered model (RuntimeCore, Runtime, context hooks, primitives) and message model. Covers the `@assistant-ui/react` core plus `@assistant-ui/react-ai-sdk`, `@assistant-ui/react-langgraph`, `assistant-stream`, and `assistant-cloud`; `AssistantRuntimeProvider`; the primitives `ThreadPrimitive`, `MessagePrimitive`, `ComposerPrimitive`; the hooks `useAui`, `useAuiState`, `useAuiEvent`; and runtime selection across `useChatRuntime`, `useExternalStoreRuntime`, `useLangGraphRuntime`, `useLocalRuntime`. For a specific area route to a focused sibling instead: setup, runtime, primitives, tools, streaming, cloud, thread-list, or update. Not for hands-on tasks already owned by those siblings.

assistant-ui/runtime

Guide for assistant-ui runtime system and state management. Use when working with runtimes, accessing state, or managing thread/message data.

assistant-ui/setup

Installs and configures assistant-ui in a project via the CLI, and picks the right runtime for a backend. Use for first-time install, scaffold, or config: `npx assistant-ui@latest create my-app` (templates default, minimal, cloud, cloud-clerk, langgraph, mcp), `npx assistant-ui@latest init [--yes] [--overwrite]` in an existing Next.js app, or `npx assistant-ui@latest add` registry components (markdown-text, thread-list). Also use to choose a runtime hook for a backend: useChatRuntime (AI SDK), useLangGraphRuntime, useAgUiRuntime, useA2ARuntime, useLocalRuntime (custom streaming API), or useExternalStoreRuntime (Redux/Zustand). Covers Vite/TanStack Start setup, shadcn styling, the playground --preset flag, and avoiding the deprecated @assistant-ui/styles and @assistant-ui/react-ui packages. For upgrading an existing install or post-upgrade breakage use update; for building UI from raw parts use primitives.

assistant-ui/streaming

Streaming backends and wire protocols for assistant-ui via the assistant-stream package. Use when building a custom (non-AI-SDK) streaming endpoint with createAssistantStreamResponse or createAssistantStreamController, emitting parts through appendText/appendReasoning/appendSource/appendFile/addToolCallPart and setResponse; choosing between the AI SDK Data Stream format (toUIMessageStreamResponse) and the native Assistant Transport format; encoding or decoding streams with DataStreamEncoder/DataStreamDecoder, AssistantTransportEncoder/AssistantTransportDecoder, PlainTextEncoder, or UIMessageStreamDecoder; or wiring streamed chunks into useLocalRuntime or useChatRuntime. Use specifically for debugging stream wire issues: text-delta, part-start, result events, text/event-stream content-type, SSE format, tool calls not rendering, or partial text not showing. For general non-stream debugging route to the relevant focused skill, not the parent overview.

assistant-ui/thread-list

Implements multi-thread (conversation history) management in assistant-ui apps: rendering the prebuilt `ThreadList` next to `Thread`, or building a custom sidebar with `ThreadListPrimitive` and `ThreadListItemPrimitive` (Root, New, Items, Trigger, Title, Archive, Unarchive, Delete). Covers thread CRUD through the `useAui()`/`useAuiState()` API: `switchToThread`, `switchToNewThread`, and per item `rename`, `archive`, `unarchive`, `delete`, `generateTitle`, `initialize`, plus reading `s.threads.threadIds`/`archivedThreadIds`/`mainThreadId`. Includes cloud-backed persistence via `useChatRuntime` + `AssistantCloud` and a local `useRemoteThreadListRuntime` + `InMemoryThreadListAdapter` path. Use when a user wants a thread list/sidebar, switching, searching, sorting, drag-and-drop, or renaming/archiving/deleting conversations. For single-thread state, messages, or composer use runtime; for cloud auth/persistence setup use cloud.

assistant-ui/tools

Registers LLM tools and renders custom tool-call UI in assistant-ui (@assistant-ui/react). Use when adding frontend-only tools with makeAssistantTool / useAssistantTool (browser actions like clipboard, navigation, localStorage, async-generator streaming, AbortSignal), rendering backend AI SDK tool() calls with makeAssistantToolUI / useAssistantToolUI (status.type running/complete/incomplete/requires-action, args, result, artifact via ToolCallMessagePartProps), building generative UI from tool results, or implementing human-in-the-loop and approval flows (addResult, resume with context.human(), respondToApproval for server-side needsApproval gates). Covers registering tool components inside AssistantRuntimeProvider and the case-sensitive toolName matching that connects a tool to its UI. Reach for this when tool UI is not rendering, a tool is not being called, or a result is not showing.

assistant-ui/update

Upgrades an existing assistant-ui project to current releases and executes the resulting migrations. Use when the user wants to update, upgrade, bump, or migrate @assistant-ui/react, @assistant-ui/react-ai-sdk, ai, or @ai-sdk/react, hits peer-dependency conflicts or post-upgrade type errors, or must apply renamed APIs after a version jump. Detects installed versus latest versions via npm ls / npm view, then routes through breaking-change references for each jump (AI SDK v4/v5 to v6; assistant-ui 0.8.x to 0.14.x): useAssistantApi to useAui, runtime.threadList to runtime.threads, ThreadPrimitive.ViewportSlack removal, the primitives components prop to children render functions, toDataStreamResponse to toUIMessageStreamResponse, maxSteps to stopWhen: stepCountIs(n). Runs npx assistant-ui@latest upgrade, pnpm/npm add @latest, and npx tsc --noEmit to verify. For a first-time install or fresh scaffold (not an upgrade) use setup instead.

相关技能

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More 图像 skills