Implementation:Microsoft Autogen Studio MCP Capabilities Panel

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

Overview

Description

The McpCapabilitiesPanel is a comprehensive React component that provides a testing and exploration interface for Model Context Protocol (MCP) servers in AutoGen Studio. It manages WebSocket connections, discovers server capabilities, and provides tabbed interfaces for interacting with tools, resources, and prompts exposed by MCP servers.

Key features include:

• WebSocket connection management with connect/disconnect controls
• Automatic capability discovery upon connection
• Tabbed interface for tools, resources, and prompts
• Real-time activity stream showing protocol events
• Elicitation dialog handling for interactive tool requests
• Connection status indicators with retry functionality
• Skeleton loading states for smooth transitions

Usage

This panel is embedded within the Workbench Fields component when editing MCP workbench configurations. It allows developers to test and validate MCP server connections before deploying them in production workflows.

Code Reference

Source Location

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

Signature

interface McpCapabilitiesPanelProps {
  serverParams: McpServerParams;
}

export const McpCapabilitiesPanel: React.FC<McpCapabilitiesPanelProps> = ({
  serverParams,
}) => { /* ... */ }

Import

import { McpCapabilitiesPanel } from "./mcp-capabilities-panel";

I/O Contract

Props/Inputs

• serverParams (McpServerParams) - Configuration for the MCP server connection, includes:
  • type - Server type (StdioServerParams, SseServerParams, StreamableHttpServerParams)
  • command / url - Connection endpoint depending on type
  • Additional server-specific configuration

Outputs

The component manages internal state and does not return values. It:

• Establishes WebSocket connections to MCP servers
• Displays discovered capabilities in tabbed interfaces
• Streams activity messages in real-time
• Handles elicitation requests through modal dialogs

State Management

interface McpWebSocketState {
  connected: boolean;
  connecting: boolean;
  capabilities: ServerCapabilities | null;
  sessionId: string | null;
  error: string | null;
  lastActivity: Date | null;
  activityMessages: McpActivityMessage[];
  pendingElicitations: ElicitationRequest[];
}

Usage Examples

// In Workbench Fields component
import { McpCapabilitiesPanel } from "./mcp-capabilities-panel";

// Within MCP workbench configuration
<McpCapabilitiesPanel
  serverParams={{
    type: "StdioServerParams",
    command: "uvx",
    args: ["mcp-server-fetch"],
    env: { API_KEY: "..." }
  }}
/>

Connection Flow

1. User clicks "Connect to Server"
2. McpWebSocketClient establishes connection
3. Server capabilities are discovered automatically
4. Tabs appear based on available capabilities (tools/resources/prompts)
5. Activity stream displays protocol events
6. User can interact with each capability type
7. Elicitation dialogs handle interactive requests

Architecture

Component Structure

• Connection Management - Handles connect/disconnect lifecycle
• Tab System - Segmented control switches between capability types
• Activity Stream - Right panel showing real-time notifications
• Elicitation Handler - Modal dialog for user interaction requests
• Sub-components:
  • McpToolsTab - Tool discovery and execution
  • McpResourcesTab - Resource browsing and reading
  • McpPromptsTab - Prompt template management

WebSocket Client Integration

The panel instantiates McpWebSocketClient which manages:

• Connection establishment via HTTP POST to /mcp/ws/connect
• WebSocket upgrade and session management
• Operation execution (list_tools, call_tool, etc.)
• Activity message streaming
• Elicitation request/response flow

Related Pages

• Implementation: Studio_UseMcpWebSocket - WebSocket hook implementation
• Implementation: Studio_MCP_Tools_Tab - Tools capability interface
• Implementation: Studio_MCP_Resources_Tab - Resources capability interface
• Implementation: Studio_MCP_Prompts_Tab - Prompts capability interface
• Implementation: Studio_Elicitation_Dialog - Interactive request handler
• Implementation: Studio_Workbench_Fields - Parent workbench configuration