Implementation:Microsoft Autogen Studio Common Fields

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

Overview

Description

The NodeEditorFields component (exported from fields.tsx) is a routing component that dispatches to type-specific field editors based on the component type being edited. It acts as a central coordinator that examines the component type and renders the appropriate specialized field editor (TeamFields, AgentFields, ModelFields, etc.). This component ensures consistent field editing across all component types within the team builder.

The file also provides shared utilities and the DetailGroup component for organizing field sections.

Usage

Used within ComponentEditor or other editing contexts to automatically render the correct field editor based on component type. It eliminates the need for parent components to implement type checking and field routing logic, providing a single unified interface for all component types.

Code Reference

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

Signature:

export interface NodeEditorFieldsProps {
  component: Component<ComponentConfig>;
  onNavigate: (componentType: string, id: string, parentField: string) => void;
  workingCopy: Component<ComponentConfig> | null;
  setWorkingCopy: (component: Component<ComponentConfig> | null) => void;
  editPath: EditPath[];
  updateComponentAtPath: (
    root: Component<ComponentConfig>,
    path: EditPath[],
    updates: Partial<Component<ComponentConfig>>
  ) => Component<ComponentConfig>;
  getCurrentComponent: (
    root: Component<ComponentConfig>
  ) => Component<ComponentConfig> | null;
}

const NodeEditorFields: React.FC<NodeEditorFieldsProps> = ({
  component,
  onNavigate,
  workingCopy,
  setWorkingCopy,
  editPath,
  updateComponentAtPath,
  getCurrentComponent,
}) => { /* ... */ }

Import:

import NodeEditorFields from "./fields/fields";

I/O Contract

Props/Inputs

Parameter	Type	Required	Description
component	Component<ComponentConfig>	Yes	Component to edit (any type)
onNavigate	(type: string, id: string, field: string) => void	Yes	Navigate to nested components
workingCopy	null	Yes	Working copy root for nested editing
setWorkingCopy	(component) => void	Yes	Update working copy
editPath	EditPath[]	Yes	Current navigation path
updateComponentAtPath	Function	Yes	Update nested component helper
getCurrentComponent	Function	Yes	Get current component from path helper

Outputs

Output	Type	Description
Field updates	via setWorkingCopy	Updates propagated through working copy mechanism
Navigation events	via onNavigate	Nested component navigation requests

Key Features

Type-Based Routing

The component uses type guards to determine which field editor to render:

if (isTeamComponent(component)) {
  return <TeamFields ... />;
} else if (isAgentComponent(component)) {
  return <AgentFields ... />;
} else if (isModelComponent(component)) {
  return <ModelFields ... />;
} else if (isToolComponent(component)) {
  return <ToolFields ... />;
} else if (isWorkbenchComponent(component)) {
  return <WorkbenchFields ... />;
} else if (isTerminationComponent(component)) {
  return <TerminationFields ... />;
}

Working Copy Propagation

All field editors receive consistent update handlers that: 1. Accept partial component updates 2. Apply updates via updateComponentAtPath 3. Update the working copy via setWorkingCopy

Example update handler:

onChange={(updates) => {
  if (workingCopy && setWorkingCopy && editPath && updateComponentAtPath) {
    const updatedCopy = updateComponentAtPath(workingCopy, editPath, updates);
    setWorkingCopy(updatedCopy);
  }
}}

Consistent Interface

All field editors wrapped in DetailGroup with consistent title:

• Teams: "Configuration"
• Agents: "Configuration"
• Models: "Configuration"
• Workbenches: "Workbench Configuration"
• Termination: "Configuration"

Deprecated Tool Support

The component includes commented-out code for individual tool editing:

• Tools are now managed within workbenches
• Individual tool components are deprecated
• Code kept for backward compatibility reference

Supported Component Types

Component Type	Field Editor	Description
team	TeamFields	Team structure, participants, termination
agent	AgentFields	Agent configuration, models, tools, workbenches
model	ModelFields	Model API settings and parameters
workbench	WorkbenchFields	Workbench-specific configuration
tool	ToolFields	Function tool source code (deprecated, use workbench)
termination	TerminationFields	Termination conditions and logic

Type Guards Used

The component relies on type guard functions:

• isTeamComponent(component) - Checks for team type
• isAgentComponent(component) - Checks for agent type
• isModelComponent(component) - Checks for model type
• isToolComponent(component) - Checks for tool type
• isWorkbenchComponent(component) - Checks for workbench type
• isTerminationComponent(component) - Checks for termination type

Usage Examples

Basic Usage

import NodeEditorFields from "./fields/fields";

function ComponentForm({
  component,
  workingCopy,
  editPath,
  onUpdate,
  onNavigate
}) {
  return (
    <NodeEditorFields
      component={component}
      onNavigate={onNavigate}
      workingCopy={workingCopy}
      setWorkingCopy={onUpdate}
      editPath={editPath}
      updateComponentAtPath={updateComponentAtPath}
      getCurrentComponent={getCurrentComponent}
    />
  );
}

Within ComponentEditor

This component is typically used within ComponentEditor:

// Inside ComponentEditor render method
{!isJsonEditing && (
  <NodeEditorFields
    component={currentComponent}
    onNavigate={handleNavigate}
    workingCopy={workingCopy}
    setWorkingCopy={setWorkingCopy}
    editPath={editPath}
    updateComponentAtPath={updateComponentAtPath}
    getCurrentComponent={getCurrentComponent}
  />
)}

Custom Routing Extension

To add support for a new component type:

else if (isCustomComponent(component)) {
  specificFields = (
    <DetailGroup title="Custom Configuration">
      <CustomFields
        component={component}
        onChange={(updates) => {
          if (workingCopy && setWorkingCopy && editPath && updateComponentAtPath) {
            const updatedCopy = updateComponentAtPath(workingCopy, editPath, updates);
            setWorkingCopy(updatedCopy);
          }
        }}
      />
    </DetailGroup>
  );
}

DetailGroup Component

The file likely includes a DetailGroup utility component for consistent field grouping:

// Typical DetailGroup usage
<DetailGroup title="Configuration">
  <FieldComponent ... />
</DetailGroup>

DetailGroup provides:

• Consistent styling across field groups
• Collapsible sections
• Icon support
• Title formatting

Integration Points

Field Editor Components

Component	Import Path
TeamFields	./team-fields
AgentFields	./agent-fields
ModelFields	./model-fields
ToolFields	./tool-fields
WorkbenchFields	./workbench
TerminationFields	./termination-fields

Type Guards

All type guards imported from:

import {
  isTeamComponent,
  isAgentComponent,
  isModelComponent,
  isToolComponent,
  isTerminationComponent,
  isWorkbenchComponent,
} from "../../../../../types/guards";

Data Types

import {
  Component,
  ComponentConfig,
} from "../../../../../types/datamodel";

Design Pattern

This component implements the Strategy Pattern:

• Context: NodeEditorFields (this component)
• Strategies: TeamFields, AgentFields, ModelFields, etc.
• Selection Logic: Type guard checks
• Benefits:
  • Single entry point for all field editing
  • Type-safe dispatch based on component type
  • Consistent update handling across all editors
  • Easy to extend with new component types

Related Pages

• Studio Component Editor - Parent editor component
• Studio Agent Fields - Agent field editor
• Studio Model Fields - Model field editor
• Studio Tool Fields - Tool field editor
• Studio Termination Fields - Termination editor
• Studio Team Fields - Team field editor
• Studio Workbench Fields - Workbench editor
• Detail Group - Field grouping component
• Component Guards - Type checking functions