Agentic UI/ToolCallCard

ToolCallCard

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

Installation

bash
npx axis-cli add tool-call-card

Interactive Demo

Status States

Pending

Running

Success

Error

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

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

// Success
<ToolCallCard
  toolName="search"
  status="success"
  output={{ count: 10 }}
  duration={500}
/>

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

Usage

tsx
import { ToolCallCard } from '@axis-ds/agentic-ui'

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

Props

toolNameRequired
Type:string

도구 이름

statusRequired
Type:"pending" | "running" | "success" | "error"

실행 상태

input
Type:Record<string, unknown>
Default:-

도구 입력 파라미터

output
Type:unknown
Default:-

실행 결과

error
Type:string
Default:-

에러 메시지

duration
Type:number
Default:-

실행 시간 (ms)

defaultExpanded
Type:boolean
Default:false

기본 접힘 상태