ToolCallCard

AI 에이전트의 도구 호출 상태를 표시하는 컴포넌트입니다.

Installation

bash

npx axis-cli add tool-call-card

Interactive Demo

Status States

Pending

Running

Completed

Error

tsx

// Pending
<ToolCallCard toolName="fetch_data" status="pending" />

// Running
<ToolCallCard toolName="analyze" status="running" args={{ data: "..." }} />

// Completed
<ToolCallCard
  toolName="search"
  status="completed"
  result={{ count: 10 }}
  duration={500}
/>

// Error
<ToolCallCard
  toolName="api_call"
  status="error"
  error="Connection timeout"
/>

Usage

tsx

import { ToolCallCard } from '@ax/ui'

export function Example() {
  return (
    <ToolCallCard
      toolName="search_documents"
      status="completed"
      args={{ query: "AI 기술 동향", limit: 10 }}
      result={{ results: 5, documents: [...] }}
      duration={1234}
    />
  )
}

Props

Prop	Type	Default	Description
`toolName*`	`string`	-	도구 이름
`status*`	`"pending" \| "running" \| "completed" \| "error"`	-	실행 상태
`args`	`Record<string, unknown>`	-	도구 호출 인자
`result`	`unknown`	-	실행 결과
`error`	`string`	-	에러 메시지
`duration`	`number`	-	실행 시간 (ms)
`defaultExpanded`	`boolean`	false	기본 접힘 상태