Agent Toolkit
A comprehensive tool management interface that displays available agent tools with categories, search, usage statistics, and enable/disable functionality.
Features
- Tool Categorization: Organize tools by data, creative, utility, and communication categories
- Search & Filter: Find tools quickly with search and category filtering
- Usage Statistics: Track tool usage count and last used time
- Enable/Disable Tools: Toggle individual tools on/off
- Grid & List Views: Flexible display options
- Tool Parameters: View input parameters and requirements
- Smart Icons: Automatic icon assignment based on tool type
Examples
Toolkit with Stats
A complete tool palette showing usage statistics and management options.
Available Tools
Code Generator
156 uses
Email Composer
67 uses
Web Search
42 uses
Image Analysis
23 uses
Database Query
8 uses
Disabled
Music Generator
3 uses
Disabled
6 of 6 tools4 enabled
Installation
npx shadcn add "https://agents-ui-kit.com/c/agent-toolkit.json"API Reference
AgentToolkit
| Prop | Type | Default | Description |
|---|---|---|---|
| tools | AgentTool[] | - | Array of available tools |
| onToolClick | (tool: AgentTool) => void | - | Callback when a tool is clicked |
| onToolToggle | (toolId: string, enabled: boolean) => void | - | Callback when tool is enabled/disabled |
| showUsageStats | boolean | false | Show usage statistics |
| gridView | boolean | true | Display as grid (false for list) |
| className | string | - | Additional CSS classes |
AgentTool
| Property | Type | Required | Description |
|---|---|---|---|
| id | string | Yes | Unique tool identifier |
| name | string | Yes | Tool name |
| description | string | Yes | Tool description |
| category | ToolCategory | Yes | Tool category |
| icon | ReactNode | No | Custom icon (auto-assigned if not provided) |
| enabled | boolean | No | Whether tool is enabled (default: true) |
| usageCount | number | No | Number of times used |
| lastUsed | Date | No | Last usage timestamp |
| parameters | ToolParameter[] | No | Tool input parameters |
ToolCategory
type ToolCategory = "all" | "data" | "creative" | "utility" | "communication"
ToolParameter
| Property | Type | Required | Description |
|---|---|---|---|
| name | string | Yes | Parameter name |
| type | string | Yes | Parameter type |
| required | boolean | Yes | Whether parameter is required |
| description | string | No | Parameter description |