Tool Call Card

Card displaying AI tool/function call with name, arguments, result, and loading state. Supports expandable detail view for inspecting call arguments and results.

Installation

$ flai add tool_call_card

Import

import 'package:my_app/flai/components/tool_call_card/tool_call_card.dart';

Preview

Preview
🔧 get_weather
{"city": "San Francisco"}
Result:
{"temp": 18, "condition": "sunny", "humidity": 65}
🔧 search_web
{"query": "flutter state management"}

Usage

// In-progress tool call
FlaiToolCallCard(
  toolCall: ToolCall(
    id: 'call_123',
    name: 'search_web',
    arguments: '{"query": "Flutter state management"}',
  ),
)

// Completed tool call with result
FlaiToolCallCard(
  toolCall: ToolCall(
    id: 'call_123',
    name: 'search_web',
    arguments: '{"query": "Flutter state management"}',
    result: '{"results": [...]}',
    isComplete: true,
  ),
  onTap: (toolCall) {
    // Show detail sheet
  },
)

Properties

PropertyTypeDefaultDescription
toolCall ToolCall required The tool call data to display.
onTap Function(ToolCall)? null Called when the card is tapped (e.g., to show details).

ToolCall Model

class ToolCall {
  final String id;
  final String name;         // Function name (e.g., 'search_web')
  final String arguments;    // JSON string of arguments
  final String? result;      // JSON string of result (null while pending)
  final bool isComplete;     // false while executing, true when done
}

Visual States