Implementation:Microsoft Autogen Studio Workbench Fields

Sources	Microsoft_Autogen
Domains	Frontend React UI Components Configuration MCP Workbench
Last Updated	2026-02-11 17:00 GMT

Overview

Description

The WorkbenchFields component is a comprehensive configuration editor for AutoGen Studio workbenches. It provides distinct interfaces for two workbench types: Static Workbenches (with predefined function tools) and MCP Workbenches (with dynamic tool discovery from MCP servers).

Key features include:

• Dual-mode interface (edit mode vs readonly mode)
• Static workbench tool management (add, edit, delete tools)
• MCP workbench server configuration (Stdio, SSE, Streamable HTTP)
• Environment variable management for Stdio servers
• MCP server testing panel integration
• Collapsible accordion sections for organization
• Compact overview in readonly mode
• Dynamic form validation

Usage

This component is used in the Team Builder interface when configuring workbench components. It adapts its UI based on workbench type (Static vs MCP) and mode (readonly vs editable).

Code Reference

Source Location

/tmp/kapso_repo_2mr4n2g4/python/packages/autogen-studio/frontend/src/components/views/teambuilder/builder/component-editor/fields/workbench/workbench-fields.tsx

Signature

interface WorkbenchFieldsProps {
  component: Component<ComponentConfig>;
  onChange: (updates: Partial<Component<ComponentConfig>>) => void;
  defaultPanelKey?: string[];
  readonly?: boolean;
}

export const WorkbenchFields: React.FC<WorkbenchFieldsProps> = ({
  component,
  onChange,
  defaultPanelKey = ["configuration", "testing"],
  readonly = false,
}) => { /* ... */ }

export default React.memo(WorkbenchFields);

Import

import { WorkbenchFields } from "./workbench-fields";

I/O Contract

Props/Inputs

• component (Component<ComponentConfig>) - The workbench component to edit
• onChange (function) - Callback for component updates
• defaultPanelKey (string[], optional) - Default open accordion panels (default: ["configuration", "testing"])
• readonly (boolean, optional) - Display mode flag (default: false)

Workbench Types

// Static Workbench
interface StaticWorkbenchConfig {
  tools: Component<FunctionToolConfig>[];
}

// MCP Workbench
interface McpWorkbenchConfig {
  server_params: StdioServerParams | SseServerParams | StreamableHttpServerParams;
}

// Server Parameter Types
interface StdioServerParams {
  type: "StdioServerParams";
  command: string;
  args?: string[];
  env?: Record<string, string>;
  read_timeout_seconds?: number;
}

interface SseServerParams {
  type: "SseServerParams";
  url: string;
  timeout?: number;
  sse_read_timeout?: number;
}

interface StreamableHttpServerParams {
  type: "StreamableHttpServerParams";
  url: string;
  timeout?: number;
  sse_read_timeout?: number;
  terminate_on_close?: boolean;
}

Outputs

Component updates are propagated through the onChange callback with partial component updates.

Usage Examples

// Edit mode - Static Workbench
<WorkbenchFields
  component={staticWorkbenchComponent}
  onChange={handleComponentUpdate}
  defaultPanelKey={["configuration"]}
  readonly={false}
/>

// Readonly mode - MCP Workbench with testing
<WorkbenchFields
  component={mcpWorkbenchComponent}
  onChange={handleComponentUpdate}
  defaultPanelKey={["testing"]}
  readonly={true}
/>

Static Workbench Interface

Edit Mode Sections

1. Component Details Panel

• Label input field
• Description textarea
• Version number input
• Component version input

2. Configuration Panel

• Tool count display
• "Add Tool" button
• Collapsible tool list:
  • Tool name and provider display
  • Delete button (if multiple tools)
  • Nested ToolFields editor for each tool

Tool Management

// Add new tool
const handleAddTool = () => {
  const newTool: Component<FunctionToolConfig> = {
    provider: "autogen_core.tools.FunctionTool",
    component_type: "tool",
    version: 1,
    component_version: 1,
    label: "New Tool",
    description: "A new tool",
    config: {
      source_code: 'def new_tool():\n    """A new tool function"""\n    return "Hello from new tool"',
      name: "new_tool",
      description: "A new tool",
      global_imports: [],
      has_cancellation_support: false,
    },
  };

  const updatedTools = [...(staticConfig.tools || []), newTool];
  handleComponentUpdate({ config: { ...staticConfig, tools: updatedTools } });
};

// Update tool
const handleUpdateTool = (index: number, updatedTool: Partial<Component<ComponentConfig>>) => {
  const updatedTools = [...(staticConfig.tools || [])];
  updatedTools[index] = { ...updatedTools[index], ...updatedTool };
  handleComponentUpdate({ config: { ...staticConfig, tools: updatedTools } });
};

// Delete tool
const handleDeleteTool = (index: number) => {
  const updatedTools = [...(staticConfig.tools || [])];
  updatedTools.splice(index, 1);
  handleComponentUpdate({ config: { ...staticConfig, tools: updatedTools } });
};

MCP Workbench Interface

Edit Mode Sections

1. Component Details Panel (same as static)

2. Configuration Panel

• Server type display
• Server-specific fields:

Stdio Server:

• Command input
• Arguments array (add/remove)
• Read timeout input
• Environment variables (add/remove key-value pairs)
• Command preview display

SSE Server:

• Server URL input
• Timeout input
• SSE read timeout input

Streamable HTTP Server:

• Server URL input
• Timeout input
• SSE read timeout input
• Terminate on close checkbox

3. MCP Testing Panel

• Embedded McpCapabilitiesPanel component
• Live connection testing
• Tool/resource/prompt discovery

Environment Variable Management

// Add environment variable
const handleAddEnvVar = () => {
  if (!newEnvVar.key || !newEnvVar.value) return;

  const currentEnv = serverParams.env || {};
  const updatedEnv = {
    ...currentEnv,
    [newEnvVar.key]: newEnvVar.value,
  };

  handleServerParamsUpdate({ env: updatedEnv });
  setNewEnvVar({ key: "", value: "" });
  setShowAddEnvVar(false);
};

// Remove environment variable
const handleRemoveEnvVar = (key: string) => {
  if (serverParams.env) {
    const updatedEnv = { ...serverParams.env };
    delete updatedEnv[key];
    handleServerParamsUpdate({ env: updatedEnv });
  }
};

Readonly Mode

In readonly mode, the component displays:

• CompactOverview card with:
  • Workbench label
  • Type badge (Static/MCP)
  • Description
  • Key metadata (version, tool count, server info)
• MCP Testing Panel for MCP workbenches
• No edit controls

Compact Overview Component

const CompactOverview = () => {
  if (isStaticWorkbench(component)) {
    return (
      <Card className="mb-4" size="small">
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <h4 className="font-medium text-lg">
              {component.label || "Static Workbench"}
            </h4>
            <span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">
              Static
            </span>
          </div>
          {component.description && <p className="text-sm">{component.description}</p>}
          <div className="flex items-center gap-4 text-sm">
            <span>Version: {component.version || 1}</span>
            <span>Tools: {staticConfig.tools?.length || 0}</span>
          </div>
        </div>
      </Card>
    );
  }

  // Similar for MCP workbench...
};

Type Guards

The component uses type guards to determine workbench type:

if (isStaticWorkbench(component)) {
  // Render static workbench interface
}

if (isMcpWorkbench(component)) {
  // Render MCP workbench interface
}

Related Pages

• Implementation: Studio_MCP_Capabilities_Panel - Embedded testing panel for MCP workbenches
• Implementation: StaticWorkbench_McpWorkbench - Backend workbench implementations
• Component: FunctionTool - Tool configuration within static workbenches