Implementation:Microsoft Autogen Studio Agentflow

Sources	python/packages/autogen-studio/frontend/src/components/views/playground/chat/agentflow/agentflow.tsx
Domains	Frontend, React Component, Visualization, Graph Layout
Last Updated	2026-02-11

Overview

AgentFlow is a React component that visualizes agent communication patterns as an interactive flow diagram using React Flow, displaying message sequences between agents with automatic graph layout powered by Dagre.

Description

The AgentFlow component creates a visual representation of multi-agent conversations by analyzing run messages and building a directed graph. Key features include:

Automatic Layout: Uses Dagre graph library for automatic node positioning (TB or LR direction)
Node Types: Supports user nodes, agent nodes, and terminal end nodes
Edge Visualization: Custom edges showing message flow with bidirectional pattern detection
Message Analytics: Calculates message counts, token totals, and identifies conversation patterns
Interactive Elements: Clickable edges to view message details via EdgeMessageModal
Real-time Updates: Re-layouts graph when run messages change
Active State Tracking: Highlights currently active agents during run execution

The component processes AgentMessageConfig objects from the run, identifies source/target pairs, detects bidirectional communication patterns, and creates React Flow nodes and edges. It uses custom node types (AgentNode) and edge types (CustomEdge) with specialized rendering. The graph layout algorithm accounts for node dimensions, edge weights, and proper spacing to create readable visualizations.

Usage

AgentFlow is typically embedded within the RunView component to show the agent communication flow for a specific run. It requires a team configuration and run object to generate the visualization.

Code Reference

Source Location: /tmp/kapso_repo_2mr4n2g4/python/packages/autogen-studio/frontend/src/components/views/playground/chat/agentflow/agentflow.tsx

Signature:

interface AgentFlowProps {
  teamConfig: Component<TeamConfig>;
  run: Run;
}

const AgentFlow: React.FC<AgentFlowProps> = ({ teamConfig, run }) => {
  // Component implementation
}

export default AgentFlow;

Import:

import AgentFlow from './agentflow/agentflow';

I/O Contract

Props/Inputs

Prop	Type	Required	Description
teamConfig	Component<TeamConfig>	Yes	Team configuration containing agent definitions
run	Run	Yes	Run object with messages and execution status

Key Types

interface MessageSequence {
  source: string;
  target: string;
  count: number;
  totalTokens: number;
  messages: AgentMessageConfig[];
}

interface BidirectionalPattern {
  forward: MessageSequence;
  reverse: MessageSequence;
}

interface CustomEdgeData {
  source: string;
  target: string;
  count: number;
  totalTokens: number;
  messages: AgentMessageConfig[];
  isBidirectional: boolean;
  offset?: number;
}

Outputs

Output	Type	Description
Rendered Flow	JSX.Element	Interactive React Flow graph visualization
Edge Click Events	MessageSequence	Triggered when edges are clicked, opens modal with messages

Usage Examples

Basic usage in RunView:

import AgentFlow from './agentflow/agentflow';

const RunView = ({ run, teamConfig }) => {
  return (
    <div>
      {teamConfig && (
        <AgentFlow teamConfig={teamConfig} run={run} />
      )}
    </div>
  );
};

Understanding node types:

// User node - represents human user
const userNode = {
  id: "user",
  type: "agentNode",
  data: {
    type: "user",
    label: "User",
    agentType: "user",
    description: "Human user"
  }
};

// Agent node - represents an AI agent
const agentNode = {
  id: "agent_123",
  type: "agentNode",
  data: {
    type: "agent",
    label: "Assistant",
    agentType: "AssistantAgent",
    description: "Helpful assistant"
  }
};

// End node - represents termination
const endNode = {
  id: "end",
  type: "agentNode",
  data: {
    type: "end",
    label: "End",
    status: "complete"
  }
};

Custom layout configuration:

const NODE_DIMENSIONS = {
  default: { width: 170, height: 100 },
  end: { width: 170, height: 80 },
  task: { width: 170, height: 100 },
};

// Layout uses Dagre with custom settings
const layoutConfig = {
  rankdir: "TB", // Top to bottom or "LR" for left to right
  nodesep: 110,   // Horizontal spacing between nodes
  ranksep: 100,   // Vertical spacing between ranks
  ranker: "network-simplex", // Layout algorithm
  marginx: 30,
  marginy: 30,
};

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment