Implementation:Microsoft Autogen Studio Builder Nodes

Sources	Microsoft_Autogen
Domains	UI Components, React Components, Flow Diagrams, Visual Builders
Last Updated	2026-02-11 17:00 GMT

Overview

Description

The Studio_Builder_Nodes module provides React components for rendering node types in the AutoGen Studio team builder's visual graph interface. This module implements custom node components for teams, agents, tools, models, and other building blocks using the React Flow library. It includes specialized rendering for different node types with drag-and-drop zones, connection handles, and interactive controls for editing and deleting nodes.

Key components include:

• TeamNode - Renders team configuration nodes with participant agents, models, and termination conditions
• AgentNode - Renders agent nodes with model clients, workbenches, and tools
• BaseNode - Shared layout component providing common node structure and actions
• DroppableZone - Drag-and-drop target areas for connecting components
• ConnectionBadge - Visual indicators for node relationships and counts

The module uses the dnd-kit library for drag-and-drop functionality and integrates with the team builder store for state management.

Usage

The nodes are used within the React Flow canvas to visualize and interact with AutoGen team configurations. Users can:

• View team structure with connected agents
• See which models and tools are attached to agents
• Drag and drop components onto nodes to connect them
• Edit node properties via inline buttons
• Delete nodes (except the root team node)
• View connection status via colored badges

Code Reference

Source Location

python/packages/autogen-studio/frontend/src/components/views/teambuilder/builder/nodes.tsx

Repository: https://github.com/microsoft/autogen

Full path: /tmp/kapso_repo_2mr4n2g4/python/packages/autogen-studio/frontend/src/components/views/teambuilder/builder/nodes.tsx

Signature

// Icon mapping for component types
export const iconMap: Record<
  Component<ComponentConfig>["component_type"],
  LucideIcon
>

// Droppable zone component
const DroppableZone: React.FC<{
  accepts: ComponentTypes[];
  children?: React.ReactNode;
  className?: string;
  id: string;
}>

// Base node component
const BaseNode: React.FC<{
  id: string;
  icon: LucideIcon;
  children?: React.ReactNode;
  headerContent?: React.ReactNode;
  descriptionContent?: React.ReactNode;
  className?: string;
  onEditClick?: (id: string) => void;
}>

// Node section wrapper
const NodeSection: React.FC<{
  title: string | React.ReactNode;
  children: React.ReactNode;
}>

// Connection status badge
const ConnectionBadge: React.FC<{
  connected: boolean;
  label: string;
}>

// Team node component
export const TeamNode: React.FC<NodeProps<CustomNode>>

// Agent node component
export const AgentNode: React.FC<NodeProps<CustomNode>>

Import

import { TeamNode, AgentNode, iconMap } from './nodes';
import type { CustomNode } from './types';

I/O Contract

Inputs

TeamNode Props (extends NodeProps<CustomNode>):

• data - Node data containing team component configuration
  • component - Component<TeamConfig> with team settings
  • label - Display label for the node
  • type - Component type identifier
• id - Unique node identifier
• selected - Boolean indicating selection state
• dragHandle - React ref for drag functionality
• position - {x, y} coordinates on canvas

AgentNode Props (extends NodeProps<CustomNode>):

• data - Node data containing agent component configuration
  • component - Component<AgentConfig> with agent settings
  • label - Display label for the node
  • type - Component type identifier
• id - Unique node identifier
• selected - Boolean indicating selection state
• dragHandle - React ref for drag functionality
• position - {x, y} coordinates on canvas

DroppableZone Props:

• id - Unique zone identifier (format: nodeId@@@zoneType-zone)
• accepts - Array of ComponentTypes that can be dropped
• children - React nodes to render inside zone
• className - Optional CSS classes

Outputs

TeamNode Renders:

• Header with team icon, label, type badge, and action buttons
• Connection badges showing team type (Swarm/Selector/RoundRobin)
• Model connection badge (for Selector teams)
• Participant count badge
• Description section with truncatable text
• Model drop zone (for Selector teams)
• Agents section with participant list and drop zone
• Terminations section with condition and drop zone
• Source handle for connecting to agent nodes

AgentNode Renders:

• Header with agent icon, label, type badge, and action buttons
• Connection badges for model and workbenches (AssistantAgent)
• Description section with agent name and details
• Model section with drop zone
• Workbenches section showing:
  • Static workbenches with tool counts
  • MCP workbenches with server types
  • Individual tool listings
• Target handle for team connections

State Updates:

• removeNode(nodeId) - Called when delete button clicked
• setSelectedNode(nodeId) - Called when edit button clicked
• Component updates propagated to store when drops occur

Usage Examples

Example 1: Rendering Nodes in React Flow

import { ReactFlow, Node } from '@xyflow/react';
import { TeamNode, AgentNode, iconMap } from './nodes';
import { CustomNode } from './types';

// Node type mapping for React Flow
const nodeTypes = {
  team: TeamNode,
  agent: AgentNode,
};

// Define nodes
const nodes: CustomNode[] = [
  {
    id: 'team-1',
    type: 'team',
    position: { x: 100, y: 200 },
    data: {
      label: 'My Team',
      type: 'team',
      component: {
        component_type: 'team',
        label: 'My Team',
        provider: 'autogen_agentchat.teams.SelectorTeam',
        config: {
          participants: [],
          model_client: null,
          termination_condition: null,
        },
      },
    },
  },
];

// Render flow
function TeamBuilderFlow() {
  return (
    <ReactFlow
      nodes={nodes}
      nodeTypes={nodeTypes}
      fitView
    />
  );
}

Example 2: Creating Droppable Zones

import { DroppableZone } from './nodes';

// Agent node with model drop zone
<NodeSection title="Model">
  <DroppableZone
    id={`${nodeId}@@@model-zone`}
    accepts={["model"]}
  >
    <div className="text-secondary text-xs my-1 text-center">
      Drop model here
    </div>
  </DroppableZone>
</NodeSection>

// Team node with agent drop zone
<NodeSection title="Agents">
  <DroppableZone
    id={`${nodeId}@@@agent-zone`}
    accepts={["agent"]}
  >
    <div className="text-secondary text-xs my-1 text-center">
      Drop agents here
    </div>
  </DroppableZone>
</NodeSection>

Example 3: Node Actions and Interactions

import { useTeamBuilderStore } from './store';

function NodeActions({ nodeId }: { nodeId: string }) {
  const removeNode = useTeamBuilderStore((state) => state.removeNode);
  const setSelectedNode = useTeamBuilderStore((state) => state.setSelectedNode);

  return (
    <div className="flex items-center gap-2">
      {/* Edit button */}
      <button
        onClick={(e) => {
          e.stopPropagation();
          setSelectedNode(nodeId);
        }}
        className="p-1 hover:bg-secondary rounded"
      >
        <Edit className="w-4 h-4 text-accent" />
      </button>

      {/* Delete button */}
      <button
        onClick={(e) => {
          e.stopPropagation();
          removeNode(nodeId);
        }}
        className="p-1 hover:bg-red-100 rounded"
      >
        <Trash2Icon className="w-4 h-4 text-red-500" />
      </button>
    </div>
  );
}

Example 4: Connection Badges

import { ConnectionBadge } from './nodes';

// Display connection status
function TeamNodeHeader({ component }) {
  const hasModel = component.config.model_client !== null;
  const participantCount = component.config.participants?.length || 0;
  const teamType = 'Selector'; // Or 'Swarm', 'RoundRobin'

  return (
    <div className="flex gap-2 mt-2">
      <ConnectionBadge connected={true} label={teamType} />
      <ConnectionBadge connected={hasModel} label="Model" />
      <ConnectionBadge
        connected={participantCount > 0}
        label={`${participantCount} Agent${participantCount > 1 ? 's' : ''}`}
      />
    </div>
  );
}

Related Pages

• Studio_Builder_Store - State management for the team builder
• Studio_Builder_Utils - Utility functions for graph layout and positioning
• Studio_TeamBuilder_Sidebar - Sidebar component for team management
• Types_Datamodel - Core type definitions for components and configurations
• Types_Guards - Type guard functions for runtime type checking