Implementation:Microsoft Autogen Studio Model Fields

Sources	Microsoft_Autogen
Domains	Frontend, React, Model Configuration, API Settings
Last Updated	2026-02-11 17:00 GMT

Overview

Description

The ModelFields component provides a comprehensive form interface for configuring language model clients in AutoGen Studio. It supports multiple model providers (OpenAI, Azure OpenAI, Anthropic) with provider-specific fields rendered dynamically based on the selected model type. The component uses a declarative field specification system to ensure type-safe, reusable field definitions with consistent UI patterns.

Key features include:

• Provider-specific field rendering (OpenAI, Azure OpenAI, Anthropic)
• Dynamic field visibility based on model type
• Field specification system with tooltips and validation
• Collapsible sections for organized configuration (Details, API Settings, Model Parameters, Advanced)
• Transform functions for value normalization

Usage

Used within ComponentEditor to render model-specific configuration fields. It automatically detects the model provider and renders appropriate API configuration fields, model parameters, and advanced settings. The component handles value transformations (e.g., array/string conversions for stop sequences) transparently.

Code Reference

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

Signature:

interface ModelFieldsProps {
  component: Component<ModelConfig>;
  onChange: (updates: Partial<Component<ComponentConfig>>) => void;
}

export const ModelFields: React.FC<ModelFieldsProps> = ({
  component,
  onChange,
}) => { /* ... */ }

Import:

import { ModelFields } from "./fields/model-fields";

I/O Contract

Props/Inputs

Parameter	Type	Required	Description
component	Component<ModelConfig>	Yes	Model component to configure
onChange	(updates: Partial<Component<ComponentConfig>>) => void	Yes	Callback for component updates

Outputs

Output	Type	Description
onChange callback	Partial<Component<ComponentConfig>>	Emits model configuration updates

Field Specification System

The component uses a declarative field specification approach:

interface FieldSpec {
  label: string;
  tooltip: string;
  component: React.ComponentType<any>;
  props: Record<string, any>;
  transform?: {
    fromConfig: (value: any) => any;
    toConfig: (value: any, origValue?: any) => any;
  };
}

const fieldSpecs: Record<FieldName, FieldSpec> = {
  temperature: {
    label: "Temperature",
    tooltip: "Controls randomness in the model's output...",
    component: InputNumber,
    props: { min: 0, max: 2, step: 0.1, className: "w-full" },
  },
  // ... more fields
};

This system provides:

• Type Safety: FieldName type ensures only valid fields
• Reusability: Field specs used across multiple providers
• Consistency: Same field rendered identically everywhere
• Tooltips: Built-in help text for each field
• Validation: Props include min/max/step constraints
• Transforms: Optional value conversion (e.g., array to string)

Supported Model Providers

OpenAI Models

Provider check: isOpenAIModel(component)

API Settings:

• api_key: API key (password input)
• organization: Organization ID (optional)
• base_url: Custom API base URL (optional)
• timeout: Request timeout in seconds
• max_retries: Maximum retry attempts

Model Parameters:

• model: Model name (required)
• temperature: Randomness control (0-2)
• max_tokens: Maximum output length
• top_p: Nucleus sampling (0-1)
• frequency_penalty: Repetition penalty (-2 to 2)
• presence_penalty: Topic diversity penalty (-2 to 2)
• stop: Stop sequences (array/string)

Azure OpenAI Models

Provider check: isAzureOpenAIModel(component)

API Settings:

• azure_endpoint: Azure service endpoint (required)
• api_key: API key (password input)
• azure_deployment: Deployment name
• api_version: API version (required, e.g., "2023-05-15")
• azure_ad_token: Azure AD token (optional, password input)
• timeout: Request timeout
• max_retries: Retry attempts

Model Parameters:

• Same as OpenAI (temperature, max_tokens, top_p, etc.)

Anthropic Models

Provider check: isAnthropicModel(component)

API Settings:

• api_key: Anthropic API key (password input)
• base_url: Custom base URL (optional)
• timeout: Request timeout
• max_retries: Retry attempts

Model Parameters:

• model: Model name (required)
• temperature: Randomness control (0-2)
• max_tokens: Maximum output length
• top_p: Nucleus sampling (0-1)
• top_k: Top-K sampling (Anthropic-specific)
• stop_sequences: Stop sequences (array, Anthropic-specific)

UI Structure

The component uses Ant Design Collapse for organized sections:

Details Section

• Icon: User icon (blue)
• Fields: Label, Description
• Editable component metadata

API Settings Section

• Icon: Settings icon (green)
• Provider-specific API configuration fields
• Credentials (API keys, endpoints)
• Connection settings (timeout, retries)

Model Parameters Section

• Icon: Wrench icon (purple)
• Common parameters (temperature, max_tokens, top_p)
• Provider-specific parameters (top_k for Anthropic)
• Model name field

Advanced Settings Section

• Icon: Settings icon (orange)
• Advanced/optional fields
• Provider-specific advanced options

Field Rendering Logic

Dynamic Field Rendering

const renderField = (fieldName: FieldName) => {
  const spec = fieldSpecs[fieldName];
  const currentValue = component.config[fieldName];

  // Apply fromConfig transform if present
  const displayValue = spec.transform?.fromConfig
    ? spec.transform.fromConfig(currentValue)
    : currentValue;

  const handleChange = (value: any) => {
    // Apply toConfig transform if present
    const configValue = spec.transform?.toConfig
      ? spec.transform.toConfig(value, currentValue)
      : value;

    handleConfigUpdate(fieldName, configValue);
  };

  return (
    <InputWithTooltip label={spec.label} tooltip={spec.tooltip}>
      <spec.component
        value={displayValue}
        onChange={handleChange}
        {...spec.props}
      />
    </InputWithTooltip>
  );
};

Value Transforms

Some fields use transform functions for normalization:

Stop Sequences (OpenAI):

transform: {
  fromConfig: (value) => Array.isArray(value) ? value : [],
  toConfig: (value) => value, // Keep as array
}

This ensures stop sequences are always arrays in the UI, even if stored differently.

InputWithTooltip Wrapper

All fields wrapped in a consistent tooltip component:

const InputWithTooltip: React.FC<{
  label: string;
  tooltip: string;
  children: React.ReactNode;
}> = ({ label, tooltip, children }) => (
  <label className="block">
    <div className="flex items-center gap-2 mb-1">
      <span className="text-sm font-medium text-primary">{label}</span>
      <Tooltip title={tooltip}>
        <HelpCircle className="w-4 h-4 text-secondary" />
      </Tooltip>
    </div>
    {children}
  </label>
);

Field Groups by Provider

Common Fields (All Providers)

• label: Component label
• description: Component description
• model: Model name
• temperature: Temperature parameter
• max_tokens: Max token limit
• top_p: Top-p sampling

OpenAI-Specific Fields

• organization: OpenAI organization ID
• frequency_penalty: Frequency penalty
• presence_penalty: Presence penalty
• stop: Stop sequences (array)

Azure-Specific Fields

• azure_endpoint: Azure endpoint URL
• azure_deployment: Deployment name
• api_version: API version string
• azure_ad_token: Azure AD authentication

Anthropic-Specific Fields

• top_k: Top-k sampling parameter
• stop_sequences: Stop sequences (array, different from OpenAI)

Usage Examples

Basic Model Configuration

import { ModelFields } from "./fields/model-fields";

function ModelEditor({ modelComponent, onUpdate }) {
  return (
    <ModelFields
      component={modelComponent}
      onChange={onUpdate}
    />
  );
}

OpenAI Model Configuration

const openAIModel = {
  provider: "autogen_ext.models.OpenAIChatCompletionClient",
  component_type: "model",
  label: "GPT-4",
  config: {
    model: "gpt-4",
    api_key: "sk-...",
    temperature: 0.7,
    max_tokens: 2000,
  }
};

<ModelFields
  component={openAIModel}
  onChange={(updates) => {
    updateModel({ ...openAIModel, ...updates });
  }}
/>

Azure OpenAI Configuration

const azureModel = {
  provider: "autogen_ext.models.AzureOpenAIChatCompletionClient",
  component_type: "model",
  label: "Azure GPT-4",
  config: {
    model: "gpt-4",
    azure_endpoint: "https://my-resource.openai.azure.com/",
    api_key: "...",
    api_version: "2023-05-15",
    azure_deployment: "gpt-4-deployment",
  }
};

<ModelFields component={azureModel} onChange={handleUpdate} />

Anthropic Configuration

const anthropicModel = {
  provider: "autogen_ext.models.AnthropicChatCompletionClient",
  component_type: "model",
  label: "Claude",
  config: {
    model: "claude-3-opus-20240229",
    api_key: "sk-ant-...",
    temperature: 1.0,
    max_tokens: 4096,
    top_k: 40,
  }
};

<ModelFields component={anthropicModel} onChange={handleUpdate} />

Type Guards

The component uses provider-specific type guards:

import {
  isOpenAIModel,
  isAzureOpenAIModel,
  isAnthropicModel,
} from "../../../../../types/guards";

// Usage
if (isOpenAIModel(component)) {
  // Render OpenAI-specific fields
} else if (isAzureOpenAIModel(component)) {
  // Render Azure-specific fields
} else if (isAnthropicModel(component)) {
  // Render Anthropic-specific fields
}

Related Pages

• Studio Component Editor - Parent editor component
• Studio Agent Fields - Agent field editor
• Studio Common Fields - Field routing component
• Model Guards - isOpenAIModel, isAzureOpenAIModel, isAnthropicModel
• Model Config - ModelConfig type definitions
• Input With Tooltip - Reusable field wrapper