Tool Execution Animation

This animation demonstrates how a tool call flows through the state machine: a ToolCall state is pushed onto the stack, connects to a tool box which executes, then a ToolResult state is pushed with the result. The animation continues with additional states while the arrows dynamically track the ToolCall and ToolResult as they move down the stack.

Speed: 1x

Code Example

import { StateMachineAnimator } from '@gimle/state-machine-animator';

const animator = new StateMachineAnimator({
  container: '#animation',
  theme: 'light',
});

await animator.playToolExecution({
  stack: {
    id: 'main',
    label: 'Agent Stack',
    states: [
      { type: 'TaskDefinition', label: 'Analyze sales data' },
    ],
  },
  preStates: [
    { type: 'AskOracle', label: 'How should I analyze this?' },
    { type: 'OracleResponse', label: 'I will query the database...' },
  ],
  triggerState: { type: 'ToolCall', label: 'query_database' },
  tool: { id: 'db', name: 'Database', icon: '🗄️' },
  resultState: { type: 'ToolResult', label: '1000 rows returned' },
  postStates: [
    { type: 'AskOracle', label: 'What should I do next?' },
    { type: 'OracleResponse', label: 'Summarize the findings...' },
    { type: 'ToolCall', label: 'generate_report' },
    { type: 'TaskResult', label: 'Analysis complete' },
  ],
});