Installation
bash
npx axis-cli add tool-call-cardInteractive 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
| Prop | Type | Default | Description |
|---|---|---|---|
toolNameRequired | string | - | 도구 이름 |
statusRequired | "pending" | "running" | "success" | "error" | - | 실행 상태 |
input | Record<string, unknown> | - | 도구 입력 파라미터 |
output | unknown | - | 실행 결과 |
error | string | - | 에러 메시지 |
duration | number | - | 실행 시간 (ms) |
defaultExpanded | boolean | false | 기본 접힘 상태 |
toolNameRequiredType:
string도구 이름
statusRequiredType:
"pending" | "running" | "success" | "error"실행 상태
inputType:
Record<string, unknown>Default:
-도구 입력 파라미터
outputType:
unknownDefault:
-실행 결과
errorType:
stringDefault:
-에러 메시지
durationType:
numberDefault:
-실행 시간 (ms)
defaultExpandedType:
booleanDefault:
false기본 접힘 상태