NexoreUIv1.4
InstallationComponents41IconsNexore MakeAI
Create ProjectSTUDIOGitHub
NexoreUI
41 comps
Create Project
Studio
Installation
Components Overview
40+
Icons
300+
Categories6 groups
Button
Input
Switch
Slider
Rating
File Upload
Card
Accordion
Tabs
Table
Stepper
Scroll Area
Navigation
Dock
Data Display
Thinking Indicator
AI
Tool Call Card
AI
Agent Status Pill
AI
Command
Theme: indigo
Studio
DocsTool Call Card

Tool Call Card

Agentic AI function execution card with live status and collapsible payload drawer.

NextAgent Status Pill
On This Page
Quick Actions
Project Studio
New
Nexore Make (AI)Source on GitHub

Interactive Playground

Live CanvasInteractive
tool:search_knowledge_base
Running...
320ms
Arguments
{
  "query": "Neural architecture search algorithms",
  "top_k": 5,
  "filters": {
    "domain": "ai-reasoning",
    "verified_only": true
  }
}
Controls(5)
variant
select

Visual aesthetic preset matching NexoreUI indicator themes.

status
select

Live execution status with animated indicators.

toolName
text

Name of the tool or function invoked.

duration
text

Execution time label.

isCollapsedByDefault
boolean
Toggle state:

Whether the drawer starts collapsed.

Generated JSX
Source
import { ToolCallCard } from "nexoreui"

<ToolCallCard />

API Reference (Props)

PropTypeDefaultDescription
toolName*string—Name of the tool or function invoked by the AI agent (e.g. 'read_file', 'query_db').
status"pending" | "running" | "success" | "error""running"Execution state with live orbital animations and status badge transitions.
variant"default" | "neon" | "glow" | "cyberpunk""default"Visual aesthetic preset matching NexoreUI indicator themes.
argsRecord<string, any> | stringundefinedKey-value object or raw string arguments passed to the tool function.
resultRecord<string, any> | string | ReactNodeundefinedExecution payload or response returned by the tool execution.
durationstring | numberundefinedExecution duration label (e.g. '340ms', '1.2s') or milliseconds number.
isCollapsedByDefaultbooleanfalseWhether the arguments and result drawer start in a collapsed state.
onToggle(isOpen: boolean) => voidundefinedCallback invoked when the card drawer is toggled open or closed.
iconReact.ComponentType<{ className?: string }>WrenchCustom icon rendered on the left badge of the card header.
classNamestring—Additional CSS classes applied to the root card container.

Usage Examples

Running Web Search Tool (Default Variant)

tool:search_web
Running...
fetching...
Arguments
{
  "query": "React 19 Server Actions best practices 2026",
  "max_results": 5,
  "search_depth": "advanced"
}
component.tsx

Completed Database Query (Neon Electric Theme)

tool:execute_sql
Completed
142ms
Arguments
{
  "table": "analytics_events",
  "filters": {
    "environment": "production",
    "latency_ms": {
      "$gt": 200
    }
  },
  "limit": 3
}
Result
{
  "status": 200,
  "rows_returned": 3,
  "scanned_partitions": 14,
  "execution_engine": "vector-accelerated"
}
component.tsx

Semantic Vector Search (Warm Glow Theme)

tool:query_knowledge_graph
Completed
38ms
Arguments
{
  "similarity_threshold": 0.88,
  "embedding_model": "text-embedding-3-large",
  "nodes": [
    "Authentication",
    "SessionTokens",
    "OAuth2"
  ]
}
Result
{
  "matched_nodes": 7,
  "top_relevance_score": 0.964,
  "cached": true
}
component.tsx
Page 1 of 2