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

Event	When it fires	Canvas effect
`step_change`	Agent advances to a new step	Highlights the new step node
`tool_call`	Agent calls an MCP tool or Exa search	Shows tool activity indicator
`tool_result`	Tool returns a result	Clears 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

Getting Started

Building Flows

AI-Powered Generation

Testing Your Agent

Tools

Post-Processing

Deployment

Step Highlighting

Step Highlighting

How it works

Event types

Event payload

What you see

Use cases

​Step Highlighting

​How it works

​Event types

​Event payload

​What you see

​Use cases

Step Highlighting

How it works

Event types

Event payload

What you see

Use cases