AI-Native

ToolCallBlock

에이전트의 도구 호출 표시 + JSON I/O 접힘/펼침.

에이전트가 외부 도구(read_file, web_search 등)를 호출했을 때 표시. status에 따라 자동 아이콘/색.

import { ToolCallBlock } from "@nxtgen-org/react";

Statuses

pending / running / success / error

tsx

1<ToolCallBlock name="read_file"  status="success" durationMs={12} input={{ path: "DESIGN.md" }} />
2<ToolCallBlock name="web_search" status="running" input={{ query: "Pretendard" }} />
3<ToolCallBlock name="grep"       status="error"   durationMs={840} output={{ error: "no matches" }} />
4<ToolCallBlock name="schedule"   status="pending" />

Default open with I/O

펼쳐진 상태

Input

{
  "query": "primary color",
  "scope": "semantic"
}

Output

{
  "matches": 3,
  "tokens": [
    "bg.brand",
    "text.brand",
    "border.focus"
  ]
}

tsx

1<ToolCallBlock
2  name="search_design_tokens"
3  status="success"
4  durationMs={42}
5  input={{ query: "primary color", scope: "semantic" }}
6  output={{ matches: 3, tokens: ["bg.brand", "text.brand", "border.focus"] }}
7  defaultOpen
8/>

API

Name	Type	Default	Description
name*	string	—	—
status	"pending" \| "running" \| "success" \| "error"	"success"	—
input	unknown	—	객체면 자동 stringify.
output	unknown	—	객체면 자동 stringify.
durationMs	number	—	—
defaultOpen	boolean	false	—