Community이미지github.com

assistant-ui/primitives

컴포저블하고 스타일이 적용되지 않은 @assistant-ui/react 프리미티브를 사용하여 assistant-ui 채팅 UI를 구축하고 커스터마이즈합니다. Radix 스타일의 부분 조합을 따르며, 사용자 지정 Thread, Composer, 메시지 렌더링, 액션 바 또는 분기 선택기를 조립하거나 스타일링할 때 사용합니다.

primitives란 무엇인가요?

이 스킬은 `@assistant-ui/react` 라이브러리의 언스타일드(unstyled) 프리미티브를 조합하여 완전히 맞춤형 채팅 인터페이스를 구축하는 방법을 설명합니다. Radix UI의 'Part' 합성 패턴을 따르며, Thread, Composer, Message, ActionBar, BranchPicker 등 각 주요 UI 영역을 독립적인 프리미티브(`.Root`, `.Viewport`, `.Messages`, `.Input`, `.Send`, `.Copy`, `.Edit` 등)로 제공합니다. 이를 통해 개발자는 기성 UI에 의존하지 않고도 스타일과 동작을 세밀하게 제어할 수 있습니다. 스킬은 프리미티브의 모든 조합 가능한 부분과 함께 `MessagePrimitive.Parts` 내에서 텍스트, 이미지, 추론, 도구 호출 부분을 렌더링하는 방법, 조건부 렌더링을 위한 `AuiIf` (구 `.If`), 그리고 `AssistantRuntimeProvider`로 감싸야 하며 `className`을 직접 추가해야 하는 등의 주의사항을 다룹니다. 즉시 사용 가능한 완성형 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에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

primitives은(는) 무엇을 하나요?

컴포저블하고 스타일이 적용되지 않은 @assistant-ui/react 프리미티브를 사용하여 assistant-ui 채팅 UI를 구축하고 커스터마이즈합니다. Radix 스타일의 부분 조합을 따릅니다. 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의 children 렌더 함수를 사용하여 텍스트, 이미지, 추론 및 도구 호출 부분을 처리합니다. 조건부 렌더링은 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