Implementation:Microsoft Autogen Studio Tool Fields

Sources	Microsoft_Autogen
Domains	Frontend, React, Tool Configuration, Function Tools, Code Editor
Last Updated	2026-02-11 17:00 GMT

Overview

Description

The ToolFields component provides a specialized editor for configuring FunctionTool components in AutoGen Studio. It offers a code-centric interface for defining Python functions that can be used as tools by agents. The component includes a Monaco editor for source code editing, import management (both direct imports and from-module imports), and function metadata configuration.

Key features:

• Monaco code editor for Python function source code
• Global imports management with two import styles (direct and from-module)
• Function name and description fields
• Cancellation support toggle
• Collapsible sections for organized editing
• Syntax highlighting and code validation

Note: Individual tool components are now deprecated in favor of managing tools within workbenches. This component is maintained for backward compatibility and for editing tools that are nested within StaticWorkbench configurations.

Usage

Used within ComponentEditor when editing FunctionTool components, typically accessed by navigating into a tool from the AgentFields workbench tool list. The component provides a full-featured code editor with import management for defining custom Python tool functions.

Code Reference

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

Signature:

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

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

Import:

import { ToolFields } from "./fields/tool-fields";

I/O Contract

Props/Inputs

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

Outputs

Output	Type	Description
onChange callback	Partial<Component<ComponentConfig>>	Emits tool configuration updates including source code

State Management

State	Type	Description
showAddImport	boolean	Controls visibility of import addition UI
importType	"fromModule"	Selected import style
directImport	string	Direct import statement (e.g., "import json")
moduleImport	ImportState	From-module import (module + imports)

Key Features

Source Code Editor

• Monaco Editor Integration: Full-featured code editor with Python syntax highlighting
• Multi-line Editing: Comfortable editing of function definitions
• Syntax Highlighting: Python-specific highlighting and indentation
• Auto-indentation: Smart indentation for Python code
• Editor Reference: useRef for accessing editor instance

Import Management

The component supports two import styles:

Direct Imports:

• Format: import module_name
• Example: import json, import os
• Stored as string in global_imports array

From-Module Imports:

• Format: from module import name1, name2
• Example: from typing import List, Dict
• Stored as object: { module: "typing", imports: ["List", "Dict"] }

Import Display

Imports displayed as tags with remove buttons:

• Format Display: Converts import objects to readable strings
• Remove Button: Delete individual imports
• Visual Feedback: Tags with background color in tertiary style

Function Configuration

• Function Name: config.name field (identifier)
• Description: config.description field (tool documentation)
• Cancellation Support: config.has_cancellation_support toggle

UI Structure

The component uses Ant Design Collapse with two main sections:

Component Details Section

• Icon: User icon (blue)
• Fields:
  • Name (label): Display name for the tool
  • Description: Tool purpose and usage documentation

Tool Configuration Section

• Icon: Settings icon (green)
• Fields:
  • Function Name: Python function identifier
  • Global Imports: List of imports with add/remove
  • Source Code: Monaco editor for function code
  • Cancellation Support: Checkbox for cancellation capability

Import Management Implementation

Import Type Definition

interface ImportState {
  module: string;
  imports: string;
}

type Import = string | { module: string; imports: string[] };

Format Import Display

const formatImport = (imp: Import): string => {
  if (!imp) return "";
  if (typeof imp === "string") {
    return imp; // Direct import
  }
  return `from ${imp.module} import ${imp.imports.join(", ")}`;
};

Add Import Logic

const handleAddImport = () => {
  const currentImports = [...(component.config.global_imports || [])];

  if (importType === "direct" && directImport) {
    // Add direct import as string
    currentImports.push(directImport);
    setDirectImport("");
  } else if (
    importType === "fromModule" &&
    moduleImport.module &&
    moduleImport.imports
  ) {
    // Add from-module import as object
    currentImports.push({
      module: moduleImport.module,
      imports: moduleImport.imports
        .split(",")
        .map((i) => i.trim())
        .filter((i) => i),
    });
    setModuleImport({ module: "", imports: "" });
  }

  handleComponentUpdate({
    config: {
      ...component.config,
      global_imports: currentImports,
    },
  });
  setShowAddImport(false);
};

Remove Import Logic

const handleRemoveImport = (index: number) => {
  const newImports = [...(component.config.global_imports || [])];
  newImports.splice(index, 1);
  handleComponentUpdate({
    config: {
      ...component.config,
      global_imports: newImports,
    },
  });
};

Add Import UI

{showAddImport ? (
  <div className="border rounded p-3 space-y-3">
    <Select
      value={importType}
      onChange={setImportType}
      options={[
        { label: "Direct Import", value: "direct" },
        { label: "From Module", value: "fromModule" },
      ]}
    />

    {importType === "direct" ? (
      <Input
        value={directImport}
        onChange={(e) => setDirectImport(e.target.value)}
        placeholder="e.g., json"
      />
    ) : (
      <>
        <Input
          value={moduleImport.module}
          onChange={(e) => setModuleImport({ ...moduleImport, module: e.target.value })}
          placeholder="Module name (e.g., typing)"
        />
        <Input
          value={moduleImport.imports}
          onChange={(e) => setModuleImport({ ...moduleImport, imports: e.target.value })}
          placeholder="Imports (comma-separated, e.g., List, Dict)"
        />
      </>
    )}

    <Button onClick={handleAddImport}>Add Import</Button>
  </div>
) : (
  <Button icon={<PlusCircle />} onClick={() => setShowAddImport(true)}>
    Add Import
  </Button>
)}

Source Code Editor Integration

<MonacoEditor
  value={component.config.source_code || ""}
  onChange={(value) =>
    handleComponentUpdate({
      config: { ...component.config, source_code: value },
    })
  }
  language="python"
  editorRef={editorRef}
  height="400px"
/>

Features:

• Python syntax highlighting
• Multi-line editing
• Auto-indentation
• Line numbers
• Code folding

FunctionTool Config Structure

interface FunctionToolConfig {
  name: string;                    // Function name/identifier
  description: string;             // Tool description
  source_code: string;             // Python function source
  global_imports: Import[];        // Array of imports
  has_cancellation_support: boolean; // Cancellation capability
}

Usage Examples

Basic Tool Editing

import { ToolFields } from "./fields/tool-fields";

function ToolEditor({ toolComponent, onUpdate }) {
  return (
    <ToolFields
      component={toolComponent}
      onChange={onUpdate}
    />
  );
}

Example Tool Configuration

const calculatorTool = {
  provider: "autogen_core.tools.FunctionTool",
  component_type: "tool",
  label: "Calculator",
  description: "Performs basic arithmetic operations",
  config: {
    name: "calculate",
    description: "Calculate arithmetic expressions",
    source_code: `def calculate(expression: str) -> float:
    """Evaluate a mathematical expression."""
    return eval(expression)`,
    global_imports: [
      "import math",
      { module: "typing", imports: ["Union", "Optional"] }
    ],
    has_cancellation_support: false,
  }
};

<ToolFields
  component={calculatorTool}
  onChange={(updates) => {
    updateTool({ ...calculatorTool, ...updates });
  }}
/>

Tool with Multiple Imports

const webScraperTool = {
  provider: "autogen_core.tools.FunctionTool",
  component_type: "tool",
  label: "Web Scraper",
  config: {
    name: "scrape_url",
    description: "Scrape content from a URL",
    source_code: `def scrape_url(url: str) -> str:
    """Fetch and return web page content."""
    response = requests.get(url)
    soup = BeautifulSoup(response.text, 'html.parser')
    return soup.get_text()`,
    global_imports: [
      "import requests",
      { module: "bs4", imports: ["BeautifulSoup"] }
    ],
    has_cancellation_support: false,
  }
};

<ToolFields component={webScraperTool} onChange={handleUpdate} />

Updating Source Code

const handleSourceChange = (updates: Partial<Component<ComponentConfig>>) => {
  // Updates include new source_code in config
  const updatedTool = { ...toolComponent, ...updates };

  // Persist to backend
  saveTool(updatedTool);

  // Update local state
  setToolComponent(updatedTool);
};

<ToolFields component={toolComponent} onChange={handleSourceChange} />

Type Guard

The component checks if it should render:

import { isFunctionTool } from "../../../../../types/guards";

export const ToolFields: React.FC<ToolFieldsProps> = ({ component, onChange }) => {
  if (!isFunctionTool(component)) return null;

  // Render tool fields...
};

This ensures the component only renders for FunctionTool components.

Deprecation Note

From the codebase comments and structure, individual tool components are being phased out:

• Current Approach: Tools managed within StaticWorkbench
• Legacy Support: ToolFields maintained for backward compatibility
• Recommended Usage: Edit tools through AgentFields > Workbenches > Tools
• Migration Path: Tools should be part of workbench config, not standalone

Related Pages

• Studio Component Editor - Parent editor
• Studio Agent Fields - Agent and workbench management
• Studio Common Fields - Field routing
• Tool Guards - isFunctionTool type guard
• Tool Config - FunctionToolConfig type definition
• Monaco Editor - Code editor component
• Function Tools - Tool concepts and architecture
• Workbenches - Modern tool management approach