Implementation:Microsoft Autogen Studio Team Builder

Sources	Microsoft_Autogen
Domains	Frontend, React, Team Builder, Visual Editor, Drag-and-Drop
Last Updated	2026-02-11 17:00 GMT

Overview

Description

The TeamBuilder component is the main visual builder interface for creating and editing AutoGen teams in AutoGen Studio. It provides a comprehensive drag-and-drop canvas using React Flow for composing teams with agents, models, tools, workbenches, and termination conditions. The builder supports both visual and JSON editing modes, with real-time validation, undo/redo functionality, and a component library sidebar.

This is the primary orchestrator component that integrates:

• React Flow for node-based visual editing
• DnD Kit for drag-and-drop interactions
• Component library with draggable items
• Monaco editor for JSON editing
• Validation and testing capabilities
• History management with undo/redo

Usage

The TeamBuilder is used as the main interface for team composition in AutoGen Studio. It accepts a team configuration object and provides callbacks for changes and dirty state tracking. It manages the entire lifecycle of team editing including component placement, connection, configuration, and validation.

Code Reference

Source Location: python/packages/autogen-studio/frontend/src/components/views/teambuilder/builder/builder.tsx

Signature:

interface TeamBuilderProps {
  team: Team;
  onChange?: (team: Partial<Team>) => void;
  onDirtyStateChange?: (isDirty: boolean) => void;
  selectedGallery?: Gallery | null;
}

export const TeamBuilder: React.FC<TeamBuilderProps> = ({
  team,
  onChange,
  onDirtyStateChange,
  selectedGallery,
}) => { /* ... */ }

Import:

import { TeamBuilder } from "./components/views/teambuilder/builder/builder";

I/O Contract

Props/Inputs

Parameter	Type	Required	Description
team	Team	Yes	The team configuration object to edit
onChange	(team: Partial<Team>) => void	No	Callback invoked when team changes are saved
onDirtyStateChange	(isDirty: boolean) => void	No	Callback to notify parent of unsaved changes state
selectedGallery	null	No	Optional gallery context for the team

Outputs

Output	Type	Description
onChange callback	Partial<Team>	Emits the updated team configuration when saved
onDirtyStateChange callback	boolean	Emits true when there are unsaved changes, false otherwise

State Management

State	Type	Description
nodes	CustomNode[]	React Flow nodes representing team components
edges	CustomEdge[]	React Flow edges representing component connections
isJsonMode	boolean	Toggle between visual and JSON editing modes
isFullscreen	boolean	Fullscreen mode state
showGrid	boolean	Canvas grid visibility
showMiniMap	boolean	Minimap visibility
validationResults	null	Current validation status and errors
testDrawerVisible	boolean	Test drawer visibility state
activeDragItem	null	Currently dragged item from library

Key Features

Visual Builder

• React Flow Integration: Node-based canvas for visual team composition
• Drag-and-Drop: DnD Kit integration for adding components from library
• Connection Validation: Ensures only valid component connections (e.g., agents to teams, models to agents)
• Auto-layout: Automatic node positioning with layoutNodes function
• Custom Nodes: Specialized node types for different component types
• Custom Edges: Styled connection lines between components

Editing Modes

• Visual Mode: Interactive canvas with drag-and-drop and node editing
• JSON Mode: Monaco editor for direct JSON configuration editing
• Live Sync: Changes in either mode sync to the other with debouncing

History Management

• Undo/Redo: Full undo/redo support through Zustand store
• Dirty State Tracking: Tracks unsaved changes with browser beforeunload warning
• History Reset: Clear history on successful save

Validation

• Real-time Validation: Validates team configuration against backend rules
• Validation Errors Display: Visual feedback for validation failures
• Pre-save Validation: Ensures valid configuration before save

Testing

• Test Drawer: Interactive testing interface for the team
• Component Testing: Individual component testing capability

Toolbar Features

• Save Changes: Persist team configuration
• Validate: Run validation checks
• Test Team: Open test drawer
• Download: Export team configuration as JSON
• Undo/Redo: History navigation buttons
• Layout: Auto-arrange nodes
• View Controls: Toggle grid, minimap, fullscreen

Usage Examples

Basic Implementation

import { TeamBuilder } from "./components/views/teambuilder/builder/builder";
import { Team } from "./types/datamodel";

function TeamEditorPage() {
  const [team, setTeam] = useState<Team>(initialTeam);
  const [isDirty, setIsDirty] = useState(false);

  const handleTeamChange = async (updatedTeam: Partial<Team>) => {
    // Save to backend
    await saveTeam(updatedTeam);
    setTeam({ ...team, ...updatedTeam });
  };

  return (
    <TeamBuilder
      team={team}
      onChange={handleTeamChange}
      onDirtyStateChange={setIsDirty}
    />
  );
}

With Gallery Context

<TeamBuilder
  team={team}
  onChange={handleTeamChange}
  onDirtyStateChange={setIsDirty}
  selectedGallery={currentGallery}
/>

Integration Points

Store Integration

Uses useTeamBuilderStore Zustand store for:

• Node and edge state management
• History management (undo/redo)
• Node operations (add, update, delete)
• JSON serialization/deserialization
• Layout algorithms

Child Components

Component	Purpose
ComponentLibrary	Sidebar with draggable component templates
ComponentEditor	Side panel for editing selected components
TeamBuilderToolbar	Top toolbar with actions and controls
TestDrawer	Testing interface drawer
ValidationErrors	Display validation error messages
MonacoEditor	JSON editing mode
ReactFlow	Visual canvas for node-based editing

API Integration

• validationAPI.validateComponent: Validates team configuration
• Team onChange callback: Persists changes to backend

Related Pages

• Studio Component Editor - Component configuration editor
• Studio Agent Fields - Agent-specific field editor
• Studio Model Fields - Model configuration fields
• Studio Tool Fields - Tool configuration interface
• Studio Termination Fields - Termination condition editor
• Studio Common Fields - Shared field components
• Team Builder Store - Zustand state management
• React Flow Nodes - Custom node implementations