Skip to main content

​
Step Highlighting

During a live test session, the canvas highlights the currently active conversation step node in real time.

​
How it works

The agent publishes voiceblox.agent.events data channel messages to the LiveKit room. The frontend subscribes to these messages and updates the canvas accordingly.

​
Event types

EventWhen it firesCanvas effect
step_changeAgent advances to a new stepHighlights the new step node
tool_callAgent calls an MCP tool or Exa searchShows tool activity indicator
tool_resultTool returns a resultClears tool activity indicator

​
Event payload

{
  type: "step_change",
  stepId: string,       // ID of the newly active step node
  stepType: string      // e.g., "burst", "ifelse", "end"
}

​
What you see

  • The active step node pulses with a colored highlight
  • When branching (If/Else, Categorize), the selected branch’s edge animates
  • Tool calls show a spinner on MCP/Exa nodes

​
Use cases

Step highlighting is especially useful for:
  • Debugging — verify the agent follows the expected path through the flow
  • Demonstrations — show stakeholders how the conversation flows visually
  • Validating branches — confirm the correct branch is taken for given user input