Implementation:Microsoft Autogen Studio Component Templates

Knowledge Sources	python/packages/autogen-studio/frontend/src/components/types/component-templates.ts
Domains	Frontend, Templates, Component Factory, Configuration
Last Updated	2026-02-11

Overview

The Component Templates module provides pre-configured templates and factory functions for creating AutoGen components including teams, agents, models, tools, workbenches, and termination conditions.

Description

This TypeScript module serves as a comprehensive template registry for all AutoGen Studio component types. It includes:

• Template Collections: Pre-defined configurations for teams (Round Robin, Selector), agents (Assistant, User Proxy, Web Surfer), models (OpenAI, Azure OpenAI, Anthropic), tools (Function, Code Execution), workbenches (Static, MCP), and termination conditions (Text Mention, Max Message, OR/AND combinations)
• Component Factory Functions: Helper functions to create new components from templates with automatic labeling and versioning
• Dropdown Options: Specialized functions to generate UI dropdown options for each component type
• Template Interface: Standardized structure ensuring all templates include id, label, description, provider, component_type, and configuration
• Default Configurations: Production-ready settings for common use cases like GPT-4o-mini models, calculator tools, and basic termination conditions

The module uses TypeScript generics to provide type-safe template definitions and factory functions. Each template includes version information for component evolution and migration. The templates follow the provider-based architecture defined in the datamodel, mapping AutoGen Python class paths to TypeScript configurations.

Key template categories:

• Teams: 2 templates (Round Robin, Selector)
• Agents: 3 templates (Assistant, User Proxy, Web Surfer)
• Models: 4 templates (OpenAI GPT-4o variants, Azure OpenAI, Anthropic Claude)
• Tools: 2 templates (Function Tool, Python Code Execution)
• Workbenches: 4 templates (Static, MCP Stdio/SSE/HTTP)
• Terminations: 11 templates (various conditions including combinations)

Usage

This module is imported throughout the AutoGen Studio frontend when creating new components, populating UI dropdowns, or initializing default configurations in the Team Builder and Gallery views.

import {
  createAgentFromTemplate,
  getAgentTemplatesForDropdown,
  COMPONENT_TEMPLATES
} from "./types/component-templates";

Code Reference

Source Location: /tmp/kapso_repo_2mr4n2g4/python/packages/autogen-studio/frontend/src/components/types/component-templates.ts

Key Type Signatures:

export interface ComponentTemplate<T extends ComponentConfig> {
  id: string;
  label: string;
  description: string;
  provider: string;
  component_type: ComponentTypes;
  config: T;
  version?: number;
  component_version?: number;
}

export interface ComponentDropdownOption {
  key: string;
  label: string;
  description: string;
  templateId: string;
}

export const COMPONENT_TEMPLATES = {
  team: TEAM_TEMPLATES,
  agent: AGENT_TEMPLATES,
  model: MODEL_TEMPLATES,
  tool: TOOL_TEMPLATES,
  workbench: WORKBENCH_TEMPLATES,
  termination: TERMINATION_TEMPLATES,
} as const;

Import Statement:

import {
  ComponentTemplate,
  COMPONENT_TEMPLATES,
  getTemplatesForType,
  getTemplateById,
  createComponentFromTemplate,
  // Type-specific helpers
  createAgentFromTemplate,
  createModelFromTemplate,
  createToolFromTemplate,
  getAgentTemplatesForDropdown,
  getModelTemplatesForDropdown,
  // ... other exports
} from "./types/component-templates";

I/O Contract

Template Constants

Constant	Type	Description
TEAM_TEMPLATES	ComponentTemplate<TeamConfig>[]	Array of 2 pre-configured team templates
AGENT_TEMPLATES	ComponentTemplate<AgentConfig>[]	Array of 3 pre-configured agent templates
MODEL_TEMPLATES	ComponentTemplate<ModelConfig>[]	Array of 4 pre-configured model templates
TOOL_TEMPLATES	ComponentTemplate<ToolConfig>[]	Array of 2 pre-configured tool templates
WORKBENCH_TEMPLATES	ComponentTemplate<WorkbenchConfig>[]	Array of 4 pre-configured workbench templates
TERMINATION_TEMPLATES	ComponentTemplate<TerminationConfig>[]	Array of 11 pre-configured termination templates
COMPONENT_TEMPLATES	Object	Consolidated object containing all template arrays

Factory Functions

Function	Parameters	Returns	Description
getTemplatesForType	componentType: ComponentTypes	ComponentTemplate[]	Retrieves all templates for a specific component type
getTemplateById	componentType: ComponentTypes, templateId: string	undefined	Retrieves a specific template by ID
getDefaultTemplate	componentType: ComponentTypes	undefined	Returns the first (default) template for a type
createComponentFromTemplate	templateId: string, componentType: ComponentTypes, overrides?: Partial<Component>	Component<ComponentConfig>	Creates a component instance from a template with optional overrides
createAgentFromTemplate	templateId: string, customLabel?: string	Component<ComponentConfig>	Creates an agent component from template
createModelFromTemplate	templateId: string, customLabel?: string	Component<ComponentConfig>	Creates a model component from template
createToolFromTemplate	templateId: string, customLabel?: string	Component<ComponentConfig>	Creates a tool component from template
createWorkbenchFromTemplate	templateId: string, customLabel?: string	Component<ComponentConfig>	Creates a workbench component from template
createTerminationFromTemplate	templateId: string, customLabel?: string	Component<ComponentConfig>	Creates a termination component from template
getAgentTemplatesForDropdown	(none)	ComponentDropdownOption[]	Returns agent templates formatted for UI dropdowns
getModelTemplatesForDropdown	(none)	ComponentDropdownOption[]	Returns model templates formatted for UI dropdowns
getToolTemplatesForDropdown	(none)	ComponentDropdownOption[]	Returns tool templates formatted for UI dropdowns
getWorkbenchTemplatesForDropdown	(none)	ComponentDropdownOption[]	Returns workbench templates formatted for UI dropdowns
getTerminationTemplatesForDropdown	(none)	ComponentDropdownOption[]	Returns termination templates formatted for UI dropdowns

Template IDs

Template ID	Component Type	Description
round-robin-team	team	Team where agents take turns in fixed order
selector-team	team	Team with model-based speaker selection
assistant-agent	agent	AI assistant with tool capabilities
user-proxy-agent	agent	Human user proxy for input
web-surfer-agent	agent	Web browsing agent with vision
openai-gpt-4o-mini	model	OpenAI GPT-4o Mini model
openai-gpt-4o	model	OpenAI GPT-4o model
azure-openai-gpt-4o-mini	model	Azure-hosted OpenAI model
anthropic-claude-3-sonnet	model	Anthropic Claude-3 Sonnet
function-tool	tool	Custom Python function tool
code-execution-tool	tool	Python code execution environment
static-workbench	workbench	Static tool collection
mcp-stdio-workbench	workbench	MCP server via command line
mcp-sse-workbench	workbench	MCP server via SSE
mcp-http-workbench	workbench	MCP server via HTTP
text-mention-termination	termination	Terminate on specific text
max-message-termination	termination	Terminate after max messages
stop-message-termination	termination	Terminate on StopMessage
token-usage-termination	termination	Terminate on token limit
timeout-termination	termination	Terminate after duration
handoff-termination	termination	Terminate on handoff
external-termination	termination	Externally controlled termination
source-match-termination	termination	Terminate on source match
text-message-termination	termination	Terminate on TextMessage
or-termination	termination	Terminate when any condition met
and-termination	termination	Terminate when all conditions met

Usage Examples

Creating a Component from Template

import { createAgentFromTemplate } from "./types/component-templates";

// Create a new assistant agent with custom label
const newAgent = createAgentFromTemplate(
  "assistant-agent",
  "My Custom Assistant"
);

console.log(newAgent);
// {
//   provider: "autogen_agentchat.agents.AssistantAgent",
//   component_type: "agent",
//   version: 2,
//   config: { name: "assistant_agent", model_client: {...}, ... },
//   label: "My Custom Assistant"
// }

Populating a Dropdown Menu

import { getModelTemplatesForDropdown } from "./types/component-templates";

function ModelSelector() {
  const modelOptions = getModelTemplatesForDropdown();

  return (
    <Select>
      {modelOptions.map(option => (
        <Select.Option key={option.key} value={option.templateId}>
          {option.label} - {option.description}
        </Select.Option>
      ))}
    </Select>
  );
}

Accessing Template Registry

import { COMPONENT_TEMPLATES, getTemplateById } from "./types/component-templates";

// Get all agent templates
const allAgents = COMPONENT_TEMPLATES.agent;
console.log(`Available agents: ${allAgents.length}`);

// Get specific template
const roundRobinTemplate = getTemplateById("team", "round-robin-team");
if (roundRobinTemplate) {
  console.log(`Template: ${roundRobinTemplate.label}`);
  console.log(`Config:`, roundRobinTemplate.config);
}

Creating Custom Workbench

import { createWorkbenchFromTemplate } from "./types/component-templates";

// Create MCP workbench with custom server
const mcpWorkbench = createWorkbenchFromTemplate(
  "mcp-stdio-workbench",
  "GitHub MCP Server"
);

// Customize the server parameters
mcpWorkbench.config.server_params.command = "npx";
mcpWorkbench.config.server_params.args = ["@modelcontextprotocol/server-github"];

Building Complex Termination

import { createTerminationFromTemplate } from "./types/component-templates";

// Create OR termination combining multiple conditions
const complexTermination = createTerminationFromTemplate(
  "or-termination",
  "Flexible Termination"
);

// The template includes both text mention and max message conditions
console.log(complexTermination.config.conditions.length); // 2

Related Pages

• Studio Datamodel Types - Type definitions for all component configurations
• Studio Type Guards - Runtime type checking for components
• Studio Component Editor - UI for editing component instances
• Studio Team Builder - Interface using templates to build teams
• Studio Default Gallery - Gallery using these templates