# Component Tool Use

> Develop ToolUseBar and ToolUseBarThink for displaying tool/API calls in @ant-design/agentic-ui. Use when showing tool invocations, API call results, cost or duration. Triggers on tool use, tool call, API call, ToolUseBar, ToolUseBarThink.

- Skill: `antdigital-ai/component-tool-use` (Agent Skill)
- Install (CLI): `npx skillmds@latest add antdigital-ai/component-tool-use`
- Raw SKILL.md: https://api.skillmd.com/api/skills/antdigital-ai/component-tool-use/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: antdigital-ai (https://skillmd.com/u/antdigital-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/antdigital-ai/component-tool-use

---


# ToolUseBar / ToolUseBarThink 组件开发

工具调用与“思考中”状态展示条，用于在对话中呈现工具名称、参数、结果与耗时等。

## 源码位置

- 工具调用条：`src/ToolUseBar/index.tsx`、`src/ToolUseBar/BarItem.tsx`
- 思考条：`src/ToolUseBarThink/index.tsx`

## 主要能力

- **ToolUseBar**：工具名称、状态、参数、结果、耗时（costMillis）等展示。
- **ToolUseBarThink**：思考中/加载状态条，常与思维链或 Bubble 配合。

## 开发规范

- 样式使用 `createStyles` 与 token，支持 `classNames`/`styles`。
- 事件与回调使用 `on` 前缀。
- 与 Bubble、ThoughtChainList 等组件协同使用时，保持展示风格一致。

修改或扩展工具调用展示时，参考 `src/ToolUseBar/`、`src/ToolUseBarThink/` 及 `AGENTS.md`。