belt CLI 스킬 설치:
npx skills add belt-sh/cli
도구 UI 컴포넌트
ui.inference.sh의 도구 수명주기 컴포넌트입니다.
빠른 시작
npx shadcn@latest add https://ui.inference.sh/r/tools.json
도구 상태
| 상태 | 설명 |
|---|---|
pending | 도구 호출이 요청되었으며, 실행 대기 중입니다. |
running | 도구가 현재 실행 중입니다. |
approval | 실행 전 사람의 승인이 필요합니다. |
success | 도구가 성공적으로 완료되었습니다. |
error | 도구 실행이 실패했습니다. |
컴포넌트
도구 호출 표시
import { ToolCall } from "@/registry/blocks/tools/tool-call"
<ToolCall
name="search_web"
args={{ query: "latest AI news" }}
status="running"
/>
도구 결과
import { ToolResult } from "@/registry/blocks/tools/tool-result"
<ToolResult
name="search_web"
result={{ results: [...] }}
status="success"
/>
도구 승인
import { ToolApproval } from "@/registry/blocks/tools/tool-approval"
<ToolApproval
name="send_email"
args={{ to: "[email protected]", subject: "Hello" }}
onApprove={() => executeTool()}
onDeny={() => cancelTool()}
/>
전체 예제
import { ToolCall, ToolResult, ToolApproval } from "@/registry/blocks/tools"
function ToolDisplay({ tool }) {
if (tool.status === 'approval') {
return (
<ToolApproval
name={tool.name}
args={tool.args}
onApprove={tool.approve}
onDeny={tool.deny}
/>
)
}
if (tool.result) {
return (
<ToolResult
name={tool.name}
result={tool.result}
status={tool.status}
/>
)
}
return (
<ToolCall
name={tool.name}
args={tool.args}
status={tool.status}
/>
)
}
도구 카드 스타일링
<ToolCall
name="read_file"
args={{ path: "/src/index.ts" }}
status="running"
className="border-blue-500"
/>
도구 아이콘
도구 이름에 따라 자동으로 아이콘이 할당됩니다:
| 패턴 | 아이콘 |
|---|---|
search*, find* | 검색 |
read*, get* | 파일 |
write*, create* | 연필 |
delete*, remove* | 휴지통 |
send*, email* | 메일 |
| 기본 | 렌치 |
에이전트 컴포넌트와 함께 사용
Agent 컴포넌트는 도구 수명주기를 자동으로 처리합니다:
import { Agent } from "@/registry/blocks/agent/agent"
<Agent
proxyUrl="/api/inference/proxy"
config={{
core_app: { ref: 'openrouter/claude-sonnet-45@0fkg6xwb' },
tools: [
{
name: 'search_web',
description: '웹 검색',
parameters: { query: { type: 'string' } },
requiresApproval: true, // 승인 흐름 활성화
},
],
}}
/>
관련 스킬
# 전체 에이전트 컴포넌트 (권장)
npx skills add inference-sh/skills@agent-ui
# 채팅 UI 블록
npx skills add inference-sh/skills@chat-ui
# 도구 결과 위젯
npx skills add inference-sh/skills@widgets-ui
문서
- 에이전트에 도구 추가하기 - 에이전트에 도구 장착하기
- 인간-인-더-루프 - 승인 흐름
- 도구 승인 게이트 - 승인 구현하기
컴포넌트 문서: ui.inference.sh/blocks/tools