Communitygithub.com

assistant-ui/업데이트

기존 assistant-ui 프로젝트를 최신 릴리스로 업그레이드하고 결과적인 마이그레이션을 실행합니다. 사용자가 @assistant-ui/react, @assistant-ui/react-ai-sdk, ai, @ai-sdk/react를 업데이트, 업그레이드, 범프 또는 마이그레이션하려고 하거나, 피어 종속성 충돌이나 업그레이드 후 타입 오류가 발생하거나, 버전 점프 후 이름이 변경된 API를 적용해야 할 때 사용합니다.

업데이트란 무엇인가요?

이 스킬은 assistant-ui 기반 프로젝트를 최신 버전으로 업그레이드하는 과정을 자동화합니다. 사용자가 `@assistant-ui/react`, `@assistant-ui/react-ai-sdk`, `ai` 또는 `@ai-sdk/react`와 같은 핵심 패키지를 업데이트하려고 할 때, 또는 피어 종속성 충돌이나 업그레이드 후 타입 오류(예: TypeScript 컴파일 오류)를 겪을 때 유용합니다. 또한 버전 점프로 인해 이름이 변경된 API(예: `useAssistantApi`에서 `useAui`로, `runtime.threadList`에서 `runtime.threads`로)를 자동으로 감지하고 마이그레이션합니다. 이 스킬은 `npm ls`와 `npm view` 명령어를 사용하여 현재 설치된 버전과 최신 버전을 비교한 후, 각 버전 점프에 필요한 중대한 변경 사항(breaking changes)을 참조하여 마이그레이션 경로를 결정합니다. 지원되는 주요 점프 경로로는 AI SDK v4/v5에서 v6, assistant-ui 0.8.x에서 0.14.x가 있습니다. 자동화된 마이그레이션 단계로는 `npx assistant-ui@latest upgrade` 실행, `pnpm/npm add @latest`로 패키지 업데이트, 그리고 `npx tsc --noEmit`을 통한 타입 검증이 포함됩니다. 최초 설치나 새로운 프로젝트 생성(업그레이드가 아닌 경우)에는 `setup` 스킬을 대신 사용해야 합니다.

지원 대상~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/assistant-ui/skills/tree/main/skills/update
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

업데이트은(는) 무엇을 하나요?

기존 assistant-ui 프로젝트를 최신 릴리스로 업그레이드하고 결과적인 마이그레이션을 실행합니다. 사용자가 @assistant-ui/react, @assistant-ui/react-ai-sdk, ai, @ai-sdk/react를 업데이트, 업그레이드, 범프 또는 마이그레이션하려고 하거나, 피어 종속성 충돌이나 업그레이드 후 타입 오류가 발생하거나, 버전 점프 후 이름이 변경된 API를 적용해야 할 때 사용합니다. npm ls / npm view를 통해 설치된 버전과 최신 버전을 감지한 후, 각 버전 점프에 대한 중대한 변경 사항 참조(AI SDK v4/v5에서 v6; assistant-ui 0.8.x에서 0.14.x)를 통해 경로를 결정합니다: useAssistantApi에서 useAui로, runtime.threadList에서 runtime.threads로, ThreadPrimitive.ViewportSlack 제거, 프리미티브 컴포넌트 props에서 children 렌더 함수로, toDataStreamResponse에서 toUIMessageStreamResponse로, maxSteps에서 stopWhen: stepCountIs(n)으로. npx assistant-ui@latest upgrade, pnpm/npm add @latest, npx tsc --noEmit을 실행하여 검증합니다. 최초 설치 또는 새로운 프로젝트 생성(업그레이드가 아닌 경우)에는 setup을 대신 사용하세요.

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/primitives

Builds and customizes assistant-ui chat UI from composable, unstyled @assistant-ui/react primitives that follow Radix-style part composition. Use when assembling or styling a custom Thread, Composer, message rendering, action bar, or branch picker from building blocks: ThreadPrimitive (.Root, .Viewport, .Messages, .Empty, .ScrollToBottom), ComposerPrimitive (.Input, .Send, .Cancel, .Attachments), MessagePrimitive (.Parts/.Content, .Error), ActionBarPrimitive (.Copy, .Edit, .Reload, .Speak, feedback, .ExportMarkdown), BranchPickerPrimitive, AttachmentPrimitive, ThreadListPrimitive, ThreadListItemPrimitive. Covers MessagePrimitive.Parts children render functions for text, image, reasoning, and tool-call parts; conditional rendering with AuiIf (deprecated .If); and gotchas like wrapping in AssistantRuntimeProvider and adding className since primitives ship unstyled. For prebuilt drop-in UI and scaffolding use setup; for multi-thread sidebar behavior use thread-list.

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.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community