Jump to content

Connect SuperML | Leeroopedia MCP: Equip your AI agents with best practices, code verification, and debugging knowledge. Powered by Leeroo — building Organizational Superintelligence. Contact us at founders@leeroo.com.

Implementation:Microsoft Autogen Studio Agent Fields

From Leeroopedia
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

Page Connections

Double-click a node to navigate. Hold to expand connections.
Principle
Implementation
Heuristic
Environment
Retrieved from "https://leeroopedia.com/index.php?title=Implementation:Microsoft_Autogen_Studio_Agent_Fields&oldid=3563"