Implementation:Microsoft Autogen Studio MCP Resources Tab

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

Overview

Description

The McpResourcesTab component provides an interface for discovering and reading resources from MCP servers. Resources are structured data (text or binary) that MCP servers can expose, such as configuration files, documentation, or data files.

Key features include:

• List all resources available from the MCP server
• Display resource metadata (URI, name, description, MIME type)
• Read resource content on demand
• Support for both text and binary (base64) content
• MIME type badges for content identification
• Auto-scroll to resource content on load
• Automatic loading when connected

Usage

This tab appears in the MCP Capabilities Panel when the connected MCP server exposes a resources capability. It enables developers to browse and inspect resources provided by the MCP server.

Code Reference

Source Location

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

Signature

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

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

export const McpResourcesTab = React.memo(McpResourcesTabComponent);

Import

import { McpResourcesTab } from "./mcp-resources-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 Resource {
  uri: string;
  name?: string;
  description?: string;
  mimeType?: string;
}

interface ResourceContent {
  type: string;
  text?: string;
  blob?: string;
  mimeType?: string;
}

Outputs

The component displays resource data but does not return values. It manages:

• List of available resources from the server
• Selected resource content (text or binary)
• Error and loading states
• Activity message clearing for clean operation tracking

Usage Examples

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

Operation Flow

1. Component auto-loads resources when connected
2. Resources list displays with metadata
3. User clicks "View Content" button
4. Component executes read_resource operation
5. Content displays based on type (text/blob)
6. Auto-scroll brings content into view

Resource Operations

List Resources

const handleListResources = async () => {
  const result = await wsClient.executeOperation({
    operation: "list_resources",
  });

  if (result?.resources) {
    setResources(result.resources);
  }
};

Read Resource

const handleGetResource = async (resource: Resource) => {
  const result = await wsClient.executeOperation({
    operation: "read_resource",
    uri: resource.uri,
  });

  if (result?.contents) {
    setResourceContent(result.contents);
  }
};

UI Components

Resources List

• Header - "Available Resources" with icon
• Load Button - Refresh resources list
• Resource Cards:
  • Resource name or URI
  • MIME type badge (if available)
  • Description text
  • URI display
  • "View Content" button

Resource Content Display

• Content Header - Selected resource information
• Content Body:
  • Text content in pre-formatted blocks
  • Blob content as base64 display
  • MIME type indicators
• Actions:
  • "Clear Result" button
  • Auto-scroll functionality

Error Handling

• Loading error alerts with retry button
• Connection error messages
• Empty state when no resources available

Auto-Loading Behavior

The component automatically loads resources when connected:

useEffect(() => {
  if (connected && capabilities?.resources) {
    handleListResources();
  }
}, [connected, capabilities?.resources, handleListResources]);

Related Pages

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