Implementation:Microsoft Autogen Studio MCP Create Modal

Sources	python/packages/autogen-studio/frontend/src/components/views/mcp/create-modal.tsx
Domains	Frontend, React Component, MCP Configuration
Last Updated	2026-02-11

Overview

McpServerCreateModal is a React component that provides a comprehensive form interface for creating and configuring MCP (Model Context Protocol) servers with support for three server types: Standard I/O, Server-Sent Events, and Streamable HTTP.

Description

The McpServerCreateModal component renders a modal dialog with a multi-section form for configuring MCP servers. Key features include:

Server Type Selection: Choose from StdioServerParams, SseServerParams, or StreamableHttpServerParams
Dynamic Form Fields: Form fields adapt based on selected server type
Arguments Management: Add/remove/edit command-line arguments for stdio servers
Environment Variables: Configure environment variables with key-value pairs
Validation: Built-in form validation with Ant Design Form
Collapsible Sections: Organized sections for Basic Information and Server Configuration

The component uses React hooks for state management (useState for form state, server type, args, and env vars) and integrates with Ant Design's Form, Modal, Input, Select, and Collapse components. It supports JSON input for headers in SSE/HTTP server types and provides proper timeout configuration for all server types.

Usage

This modal is triggered when users want to add a new MCP server. It's typically opened from a parent component (like the MCP sidebar or main view) via the open prop, and calls the onCreateServer callback with the configured server parameters.

Code Reference

Source Location: /tmp/kapso_repo_2mr4n2g4/python/packages/autogen-studio/frontend/src/components/views/mcp/create-modal.tsx

Signature:

interface McpServerCreateModalProps {
  open: boolean;
  onCancel: () => void;
  onCreateServer: (server: Omit<McpServer, "id">) => void;
}

export const McpServerCreateModal: React.FC<McpServerCreateModalProps> = ({
  open,
  onCancel,
  onCreateServer,
}) => { /* ... */ }

Import:

import { McpServerCreateModal } from './create-modal';

I/O Contract

Props/Inputs

Prop	Type	Required	Description
open	boolean	Yes	Controls modal visibility state
onCancel	() => void	Yes	Callback invoked when modal is cancelled/closed
onCreateServer	(server: Omit<McpServer, "id">) => void	Yes	Callback invoked with new server configuration

Outputs

Event	Payload Type	Description
onCancel	void	Fired when user cancels or closes the modal
onCreateServer	Omit<McpServer, "id">	Fired when user submits a valid server configuration

McpServer Structure (output):

{
  name: string;
  description?: string;
  serverParams: StdioServerParams | SseServerParams | StreamableHttpServerParams;
  isConnected: boolean;
}

Usage Examples

Basic usage in a parent component:

const [modalOpen, setModalOpen] = useState(false);

const handleCreateServer = (server: Omit<McpServer, "id">) => {
  // Add server to state or call API
  console.log('New server:', server);
  setModalOpen(false);
};

return (
  <>
    <Button onClick={() => setModalOpen(true)}>Add MCP Server</Button>
    <McpServerCreateModal
      open={modalOpen}
      onCancel={() => setModalOpen(false)}
      onCreateServer={handleCreateServer}
    />
  </>
);

Handling StdioServerParams output:

const handleCreateServer = (server: Omit<McpServer, "id">) => {
  if (server.serverParams.type === "StdioServerParams") {
    console.log('Command:', server.serverParams.command);
    console.log('Args:', server.serverParams.args);
    console.log('Env:', server.serverParams.env);
  }
};

Handling SseServerParams output:

const handleCreateServer = (server: Omit<McpServer, "id">) => {
  if (server.serverParams.type === "SseServerParams") {
    console.log('URL:', server.serverParams.url);
    console.log('Timeout:', server.serverParams.timeout);
    console.log('Headers:', server.serverParams.headers);
  }
};

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment