Implementation:Microsoft Autogen Studio MCP Prompts Tab

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

Overview

Description

The McpPromptsTab component provides an interface for discovering and executing prompt templates from MCP servers. It allows users to list available prompts, view their arguments, fill in required parameters, and retrieve rendered prompt messages.

Features include:

• List all prompts available from the MCP server
• Display prompt metadata (name, description, arguments)
• Dynamic form generation for prompt arguments
• Real-time validation of required fields
• Prompt execution with argument substitution
• Display rendered prompt messages (user/assistant roles)
• Activity message clearing for clean operation tracking

Usage

This tab appears in the MCP Capabilities Panel when the connected MCP server exposes a prompts capability. It enables developers to test and preview prompt templates 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-prompts-tab.tsx

Signature

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

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

export const McpPromptsTab = React.memo(McpPromptsTabComponent);

Import

import { McpPromptsTab } from "./mcp-prompts-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 Prompt {
  name: string;
  description?: string;
  arguments?: Array<{
    name: string;
    description?: string;
    required?: boolean;
  }>;
}

interface PromptMessage {
  role: "user" | "assistant";
  content: {
    type: "text";
    text: string;
  };
}

interface PromptResult {
  name: string;
  description?: string;
  messages: PromptMessage[];
}

Outputs

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

• List of available prompts from the server
• Rendered prompt messages with user/assistant roles
• Error and loading states
• Validation feedback for required arguments

Usage Examples

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

Operation Flow

1. Click "Load Prompts" button
2. Component executes list_prompts operation
3. Prompts are displayed with their metadata
4. User selects a prompt to execute
5. Form fields appear for prompt arguments
6. Real-time validation checks required fields
7. Click "Get Prompt" to execute
8. Rendered messages display with role indicators

Validation Logic

The component implements comprehensive validation:

// Required field validation
const validatePromptArguments = (prompt: Prompt, promptArgs: Record<string, any>): string[] => {
  const errors: string[] = [];
  const requiredArgs = prompt.arguments?.filter((arg) => arg.required) || [];

  requiredArgs.forEach((arg) => {
    const value = promptArgs[arg.name];
    if (value === undefined || value === null ||
        (typeof value === "string" && value.trim() === "")) {
      errors.push(`Required argument '${arg.name}' is missing or empty`);
    }
  });

  return errors;
};

// Real-time field validation
const validateField = (fieldName: string, value: string, isRequired: boolean): string | null => {
  if (isRequired && (!value || value.trim() === "")) {
    return `${fieldName} is required`;
  }
  return null;
};

UI Components

Prompt List

• Card-based layout for each prompt
• Name, description, and argument count display
• "Get Prompt" button to execute

Argument Form

• Dynamic input fields based on argument definitions
• Required field indicators
• Real-time validation messages
• Clear error feedback

Result Display

• Collapsible sections for each message
• Role-based icons (User/Bot)
• Formatted text content
• "Clear Result" button for cleanup

Related Pages

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