Communitygithub.com

assistant-ui/tools

assistant-ui(@assistant-ui/react)에서 LLM 도구를 등록하고 사용자 정의 도구 호출 UI를 렌더링합니다. 프론트엔드 전용 도구(makeAssistantTool/useAssistantTool)나 백엔드 AI SDK tool() 호출을 UI에 연결할 때 사용합니다.

tools란 무엇인가요?

이 스킬은 assistant-ui 라이브러리(@assistant-ui/react)에서 LLM 도구(tool)를 등록하고, 도구 호출 결과를 커스텀 UI로 렌더링하는 방법을 설명합니다. 프론트엔드 전용 도구는 `makeAssistantTool`과 `useAssistantTool`을 사용하여 클립보드, 탐색, localStorage, 비동기 제너레이터 스트리밍, AbortSignal 같은 브라우저 액션을 구현합니다. 백엔드 AI SDK의 `tool()` 호출은 `makeAssistantToolUI`와 `useAssistantToolUI`를 통해 UI와 연결하며, 실행 중(running), 완료(complete), 불완전(incomplete), 추가 조치 필요(requires-action) 상태와 인자(args), 결과(result), 아티팩트(artifact)를 `ToolCallMessagePartProps`로 전달합니다. 또한 도구 결과로 생성적 UI(Generative UI)를 구성하거나, `addResult`와 `resume(context.human())`을 사용한 Human-in-the-Loop 흐름, 서버 측 `needsApproval` 게이트에 대응하는 `respondToApproval`을 통한 승인 흐름을 지원합니다. 도구 컴포넌트는 `AssistantRuntimeProvider` 내부에 등록되며, 도구 이름은 대소문자를 구분하여 UI와 연결됩니다. 이 스킬은 도구 UI가 렌더링되지 않거나, 도구가 호출되지 않거나, 결과가 표시되지 않는 문제가 있을 때 참고해야 합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/assistant-ui/skills/tree/main/skills/tools

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

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

문서

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

assistant-ui(@assistant-ui/react)에서 LLM 도구를 등록하고 사용자 정의 도구 호출 UI를 렌더링합니다. makeAssistantTool / useAssistantTool을 사용하여 프론트엔드 전용 도구(클립보드, 탐색, localStorage, 비동기 제너레이터 스트리밍, AbortSignal 같은 브라우저 액션)를 추가할 때, makeAssistantToolUI / useAssistantToolUI를 사용하여 백엔드 AI SDK tool() 호출(status.type이 running/complete/incomplete/requires-action이고 args, result, artifact를 ToolCallMessagePartProps로 전달)을 렌더링할 때, 도구 결과로 생성적 UI(Generative UI)를 구축할 때, 또는 addResult, resume(context.human()), 서버 측 needsApproval 게이트에 대응하는 respondToApproval을 통한 Human-in-the-Loop 및 승인 흐름을 구현할 때 사용합니다. 도구 컴포넌트를 AssistantRuntimeProvider 내부에 등록하고, 대소문자를 구분하는 toolName을 통해 도구와 UI를 연결하는 방법을 다룹니다. 도구 UI가 렌더링되지 않거나, 도구가 호출되지 않거나, 결과가 표시되지 않는 상황에서 이 스킬을 참고하세요.

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

관련 스킬