Implementation:Microsoft Autogen Studio MCP Tools Tab

Sources	Microsoft_Autogen
Domains	Frontend React MCP Tools JSON Schema UI Components
Last Updated	2026-02-11 17:00 GMT

Overview

Description

The McpToolsTab component provides a comprehensive interface for discovering, configuring, and executing tools from MCP servers. It features dynamic form generation based on JSON schemas, tool search functionality, and rich result visualization supporting text, images, and embedded resources.

Key features include:

• List and search tools by name/description
• Auto-select first tool on load
• Dynamic form generation from tool input schemas
• Default value initialization from schemas
• Tool execution with argument validation
• Multi-format result display (text, images, embedded content)
• Raw/parsed result view toggling
• Auto-scroll to forms and results
• Activity message clearing per operation

Usage

This tab appears in the MCP Capabilities Panel when the connected MCP server exposes a tools capability. It enables developers to test and validate tool functionality before integrating them into agent workflows.

Code Reference

Source Location

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

Signature

interface McpToolsTabProps {
  serverParams: McpServerParams;
  wsClient: McpWebSocketClient | null;
  connected: boolean;
  capabilities: ServerCapabilities | null;
}

const McpToolsTabComponent: React.FC<McpToolsTabProps> = ({
  serverParams,
  wsClient,
  connected,
  capabilities,
}) => { /* ... */ }

export const McpToolsTab = React.memo(McpToolsTabComponent);

Import

import { McpToolsTab } from "./mcp-tools-tab";

I/O Contract

Props/Inputs

• serverParams (McpServerParams) - MCP server configuration
• wsClient (McpWebSocketClient | null) - Active WebSocket client for operations
• connected (boolean) - Connection status flag
• capabilities (ServerCapabilities | null) - Server capability information

Data Types

interface Tool {
  name: string;
  description?: string;
  inputSchema?: {
    type: string;
    properties?: Record<string, any>;
    required?: string[];
  };
}

interface CallToolResult {
  content: Array<{
    type: "text" | "image" | "resource";
    text?: string;
    data?: string;
    mimeType?: string;
    uri?: string;
    blob?: string;
  }>;
  isError?: boolean;
}

Outputs

The component displays tool results but does not return values. It manages:

• List of available tools with search filtering
• Dynamically generated argument forms
• Execution results in multiple formats
• Error states and loading indicators

Usage Examples

// Used within McpCapabilitiesPanel
<McpToolsTab
  serverParams={serverParams}
  wsClient={wsClient}
  connected={connected}
  capabilities={capabilities}
/>

Operation Flow

1. Component auto-loads tools when connected
2. First tool is auto-selected
3. Argument form generates from tool's inputSchema
4. User fills in required/optional arguments
5. Click "Execute Tool" to run
6. Results display with appropriate formatting
7. Toggle between raw/parsed views
8. Search tools or select different tool

Dynamic Form Generation

The component generates forms from JSON schemas:

// Initialize default values from schema
const initialArgs: Record<string, any> = {};
const properties = tool.inputSchema?.properties || {};

Object.entries(properties).forEach(([key, propSchema]: [string, any]) => {
  if (propSchema.default !== undefined) {
    initialArgs[key] = propSchema.default;
  }
});

// Render form fields
{Object.entries(properties).map(([argName, argSchema]: [string, any]) => (
  <Form.Item
    label={argSchema.description || argName}
    required={requiredArgs.includes(argName)}
  >
    {renderInputField(argName, argSchema)}
  </Form.Item>
))}

Supported Schema Types

• string - Text input or textarea (for long descriptions)
• number - Numeric input with step controls
• integer - Integer input
• boolean - Checkbox
• enum - Select dropdown
• array - JSON input with validation
• object - JSON input with validation

Tool Execution

const handleExecuteTool = async () => {
  if (!selectedTool || !wsClient) return;

  setExecutingTool(true);
  setError(null);

  try {
    const result = await wsClient.executeOperation({
      operation: "call_tool",
      tool_name: selectedTool.name,
      arguments: toolArguments,
    });

    setToolResult(result);
  } catch (err: any) {
    setError(`Failed to execute tool: ${err.message}`);
  } finally {
    setExecutingTool(false);
  }
};

Result Visualization

The component supports multiple content types:

Text Content

{content.type === "text" && (
  <pre className="bg-gray-50 p-3 rounded overflow-x-auto">
    <code>{content.text}</code>
  </pre>
)}

Image Content

{content.type === "image" && content.data && (
  <Image
    src={`data:${content.mimeType || "image/png"};base64,${content.data}`}
    alt="Tool result"
    className="max-w-full"
  />
)}

Resource Content

{content.type === "resource" && (
  <div className="border rounded p-3">
    <Text strong>Resource:</Text> {content.uri}
    {content.text && <pre>{content.text}</pre>}
    {content.blob && <Text>Binary data ({content.mimeType})</Text>}
  </div>
)}

Search Functionality

const filteredTools = tools.filter(
  (tool) =>
    tool.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    tool.description?.toLowerCase().includes(searchQuery.toLowerCase())
);

Auto-Loading Behavior

// Auto-load tools once when connected
const hasLoadedToolsRef = useRef(false);

useEffect(() => {
  if (connected && capabilities?.tools && wsClient && !hasLoadedToolsRef.current) {
    hasLoadedToolsRef.current = true;
    handleListTools();
  } else if (!connected || !capabilities?.tools) {
    hasLoadedToolsRef.current = false;
  }
}, [connected, capabilities?.tools, handleListTools]);

Related Pages

• Implementation: Studio_MCP_Capabilities_Panel - Parent container component
• Implementation: Studio_MCP_Resources_Tab - Sister tab for resource capabilities
• Implementation: Studio_MCP_Prompts_Tab - Sister tab for prompt capabilities
• Implementation: Studio_UseMcpWebSocket - WebSocket client for MCP operations