Implementation:Microsoft Autogen Studio Agent Fields

Sources	Microsoft_Autogen
Domains	Frontend, React, Agent Configuration, Form Fields
Last Updated	2026-02-11 17:00 GMT

Overview

Description

The AgentFields component provides a comprehensive form interface for configuring AutoGen agents (AssistantAgent, UserProxyAgent, WebSurferAgent). It includes fields for agent identity (name, description), system messages, model references, tool/workbench management, and agent-specific parameters. The component supports adding, editing, and removing tools and workbenches with different types (StaticWorkbench, MCP Workbenches with Stdio/SSE/Streamable protocols).

Key capabilities:

Type-specific fields based on agent type (Assistant vs UserProxy vs WebSurfer)
Tool management within StaticWorkbench
Multiple workbench type support (Static, Stdio MCP, SSE MCP, Streamable HTTP MCP)
Model client reference editing
System message configuration
Workbench array normalization

Usage

Used within ComponentEditor to render agent-specific configuration fields. It receives an agent component and provides callbacks for updates and navigation into nested components. The component handles the complexity of workbench normalization and nested tool management transparently.

Code Reference

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

Signature:

interface AgentFieldsProps {
  component: Component<AgentConfig>;
  onChange: (updates: Partial<Component<ComponentConfig>>) => void;
  onNavigate?: (
    componentType: string,
    id: string,
    parentField: string,
    index?: number
  ) => void;
  workingCopy?: Component<ComponentConfig> | null;
  setWorkingCopy?: (component: Component<ComponentConfig> | null) => void;
  editPath?: any[];
  updateComponentAtPath?: any;
  getCurrentComponent?: any;
}

export const AgentFields: React.FC<AgentFieldsProps> = ({
  component,
  onChange,
  onNavigate,
  workingCopy,
  setWorkingCopy,
  editPath,
  updateComponentAtPath,
  getCurrentComponent,
}) => { /* ... */ }

Import:

import { AgentFields } from "./fields/agent-fields";

I/O Contract

Props/Inputs

Parameter	Type	Required	Description
component	Component<AgentConfig>	Yes	Agent component to edit
onChange	(updates: Partial<Component<ComponentConfig>>) => void	Yes	Callback for component updates
onNavigate	(type: string, id: string, field: string, index?: number) => void	No	Navigate into nested components
workingCopy	null	No	Parent working copy for nested updates
setWorkingCopy	(component) => void	No	Update working copy setter
editPath	any[]	No	Current navigation path in nested editing
updateComponentAtPath	Function	No	Helper to update nested components
getCurrentComponent	Function	No	Helper to get current component from path

Outputs

Output	Type	Description
onChange callback	Partial<Component<ComponentConfig>>	Emits agent component updates
onNavigate callback	(type, id, field, index) => void	Signals navigation to nested component

Key Features

Agent Identity Fields

Name: Agent identifier (config.name)
Label: Display name for the agent
Description: Agent purpose and capabilities description
System Message: Instructions for the agent's behavior (TextArea)

Model Configuration

Model Client Reference: Link to model component for the agent
Display: Shows model label or "No model selected"
Navigation: Click to edit referenced model (if onNavigate provided)

Tool Management

Tools are managed within a StaticWorkbench:

Add Tool Button: Creates blank FunctionTool and adds to StaticWorkbench
Tool List: Displays all tools with edit/delete actions
Automatic Workbench Creation: Creates StaticWorkbench if it doesn't exist
Tool Navigation: Click edit icon to open tool in nested editor

Default new tool template:

{
  provider: "autogen_core.tools.FunctionTool",
  component_type: "tool",
  version: 1,
  label: "New Tool",
  config: {
    source_code: "def new_function():\n    pass",
    name: "new_function",
    description: "Description of the new function",
    global_imports: [],
    has_cancellation_support: false,
  }
}

Workbench Management

Supports multiple workbench types with add/edit/delete operations:

Static Workbench:

Container for custom FunctionTools
Tools array managed directly
Label: "Static Workbench" (auto-numbered if multiple)

Stdio MCP Workbench:

Connects to local MCP servers via stdio
Config: command, args, env
Label: "Stdio MCP Workbench" (auto-numbered)

SSE MCP Workbench:

Connects to remote MCP servers via Server-Sent Events
Config: url, headers, timeout, sse_read_timeout
Label: "SSE MCP Workbench" (auto-numbered)

Streamable HTTP MCP Workbench:

Connects to remote MCP servers via HTTP streaming
Config: url, headers, timeout, sse_read_timeout, terminate_on_close
Label: "Streamable MCP Workbench" (auto-numbered)

Each workbench type:

Auto-navigates to editor after creation (if onNavigate provided)
Receives unique label with count suffix
Includes descriptive metadata

Workbench Normalization

The component handles workbench format flexibility:

const normalizeWorkbenches = (
  workbench: Component<WorkbenchConfig>[] | Component<WorkbenchConfig> | undefined
): Component<WorkbenchConfig>[] => {
  if (!workbench) return [];
  return Array.isArray(workbench) ? workbench : [workbench];
};

This ensures consistent array handling regardless of whether workbenches are stored as single object or array.

Type-Specific Configuration

AssistantAgent:

System message field
Model client reference
Tools and workbenches management

UserProxyAgent:

User proxy specific fields
Limited tool/workbench support

WebSurferAgent:

Web surfing agent specific configuration

Implementation Details

Add Tool Logic

const handleAddTool = () => {
  // Normalize existing workbenches
  let workbenches = normalizeWorkbenches(component.config.workbench);

  // Find or create StaticWorkbench
  let workbenchIndex = workbenches.findIndex(wb => isStaticWorkbench(wb));

  if (workbenchIndex === -1) {
    // Create new StaticWorkbench
    const newWorkbench = {
      provider: "autogen_core.tools.StaticWorkbench",
      component_type: "workbench",
      config: { tools: [] },
      label: "Static Workbench",
    };
    workbenches = [...workbenches, newWorkbench];
    workbenchIndex = workbenches.length - 1;
  }

  // Add tool to StaticWorkbench
  const updatedTools = [...workbench.config.tools, blankTool];
  workbenches[workbenchIndex].config.tools = updatedTools;

  handleConfigUpdate("workbench", workbenches);
};

Add Workbench Functions

Four specialized functions for adding workbenches:

addStaticWorkbench()
addStdioMcpWorkbench()
addSseMcpWorkbench()
addStreamableMcpWorkbench()

Each: 1. Checks agent type (must be AssistantAgent) 2. Normalizes existing workbenches 3. Counts existing workbenches of same type (for labeling) 4. Creates new workbench with appropriate config template 5. Updates component config 6. Navigates to newly created workbench (if onNavigate available)

Delete Tool/Workbench Logic

const handleDeleteTool = (toolIndex: number) => {
  const workbenches = normalizeWorkbenches(component.config.workbench);
  const staticWorkbench = workbenches.find(wb => isStaticWorkbench(wb));

  if (staticWorkbench) {
    const updatedTools = staticWorkbench.config.tools.filter((_, i) => i !== toolIndex);
    const updatedWorkbench = {
      ...staticWorkbench,
      config: { ...staticWorkbench.config, tools: updatedTools }
    };

    const updatedWorkbenches = workbenches.map(wb =>
      wb === staticWorkbench ? updatedWorkbench : wb
    );

    handleConfigUpdate("workbench", updatedWorkbenches);
  }
};

UI Structure

The component uses Ant Design Collapse for organized sections:

Details Panel

Icon: User icon (blue)
Fields: Name, Label, Description

Configuration Panel

Icon: Settings icon (green)
Fields: System Message, Model Client

Tools Panel (AssistantAgent only)

Icon: Wrench icon (purple)
Add Tool button with dropdown
Tool list with edit/delete actions
Navigate button for each tool

Workbenches Panel (AssistantAgent only)

Icon: Code icon (orange)
Add Workbench dropdown with types
Workbench list with edit/delete actions
Navigate button for each workbench

Usage Examples

Basic Agent Configuration

import { AgentFields } from "./fields/agent-fields";

function AgentEditor({ agent, onUpdate }) {
  return (
    <AgentFields
      component={agent}
      onChange={onUpdate}
    />
  );
}

With Navigation Support

<AgentFields
  component={agentComponent}
  onChange={handleAgentUpdate}
  onNavigate={(type, id, field, index) => {
    // Navigate to nested component editor
    navigateToNestedComponent(type, id, field, index);
  }}
/>

Within ComponentEditor Context

<AgentFields
  component={currentAgent}
  onChange={handleComponentUpdate}
  onNavigate={handleNavigate}
  workingCopy={workingCopy}
  setWorkingCopy={setWorkingCopy}
  editPath={editPath}
  updateComponentAtPath={updateComponentAtPath}
  getCurrentComponent={getCurrentComponent}
/>

This provides full support for nested editing and working copy propagation.

Related Pages

Studio Component Editor - Parent editor component
Studio Model Fields - Model configuration
Studio Tool Fields - Tool editor (for nested navigation)
Studio Common Fields - Shared field components
Agent Guards - isAssistantAgent, isUserProxyAgent, isWebSurferAgent
Agent Config - AgentConfig, AssistantAgentConfig types
Workbench Config - WorkbenchConfig, StaticWorkbenchConfig

Page Connections

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

Principle

Implementation

Heuristic

Environment