feat(mcp): add multi-step flow for adding MCP servers (#240)

echobt · factorydroid · web-flow · commit 1358370079c5 · 2026-01-27T14:47:09.000+01:00
Implement a guided multi-step process when adding MCP servers:

Step 1: Choose source
  - Custom Server (manual configuration)
  - From Registry (placeholder for future integration)

Step 2: Choose transport type (for Custom)
  - stdio (local process with command/args)
  - HTTP (remote server with URL/API key)

Step 3: Fill appropriate form
  - stdio form: name, command, args
  - HTTP form: name, URL, API key (optional)

Changes:
- Add build_mcp_source_selector() for source selection
- Add build_mcp_transport_selector() for transport type selection
- Add build_mcp_stdio_form() and build_mcp_http_form()
- Add build_mcp_registry_browser() placeholder
- Wire up multi-step navigation in event_loop.rs
- Update form handlers for both server types

Co-authored-by: Droid Agent &lt;droid@factory.ai&gt;
diff --git a/cortex-tui/src/interactive/builders/mcp.rs b/cortex-tui/src/interactive/builders/mcp.rs
@@ -76,10 +76,55 @@ pub fn build_mcp_selector(servers: &[McpServerInfo]) -> InteractiveState {
         ])
 }
 
-/// Build an inline form for adding a new MCP server.
-/// This form is displayed within the MCP panel, not as a separate modal.
-pub fn build_mcp_add_server_form() -> InlineFormState {
-    InlineFormState::new("Add MCP Server", "mcp-add")
+/// Build a selector for choosing MCP server source (Custom or Registry).
+/// This is the first step when adding an MCP server.
+pub fn build_mcp_source_selector() -> InteractiveState {
+    let items = vec![
+        InteractiveItem::new("custom", "Custom Server")
+            .with_description("Configure a server with command/URL manually")
+            .with_shortcut('c'),
+        InteractiveItem::new("registry", "From Registry")
+            .with_description("Browse and install from MCP server registry")
+            .with_shortcut('r'),
+    ];
+
+    InteractiveState::new(
+        "Add MCP Server",
+        items,
+        InteractiveAction::Custom("mcp-source".to_string()),
+    )
+    .with_hints(vec![
+        ("Enter".to_string(), "select".to_string()),
+        ("Esc".to_string(), "back".to_string()),
+    ])
+}
+
+/// Build a selector for choosing MCP transport type (stdio or HTTP).
+/// This is shown after selecting "Custom Server".
+pub fn build_mcp_transport_selector() -> InteractiveState {
+    let items = vec![
+        InteractiveItem::new("stdio", "stdio (Local Process)")
+            .with_description("Run a local command (npx, uvx, binary)")
+            .with_shortcut('s'),
+        InteractiveItem::new("http", "HTTP (Remote Server)")
+            .with_description("Connect to a remote MCP server via HTTP/SSE")
+            .with_shortcut('h'),
+    ];
+
+    InteractiveState::new(
+        "Transport Type",
+        items,
+        InteractiveAction::Custom("mcp-transport".to_string()),
+    )
+    .with_hints(vec![
+        ("Enter".to_string(), "select".to_string()),
+        ("Esc".to_string(), "back".to_string()),
+    ])
+}
+
+/// Build an inline form for adding a stdio MCP server.
+pub fn build_mcp_stdio_form() -> InlineFormState {
+    InlineFormState::new("Add stdio Server", "mcp-add-stdio")
         .with_field(
             InlineFormField::new("name", "Name")
                 .required()
@@ -93,6 +138,45 @@ pub fn build_mcp_add_server_form() -> InlineFormState {
         .with_field(InlineFormField::new("args", "Args").with_placeholder("arg1 arg2 ..."))
 }
 
+/// Build an inline form for adding an HTTP MCP server.
+pub fn build_mcp_http_form() -> InlineFormState {
+    InlineFormState::new("Add HTTP Server", "mcp-add-http")
+        .with_field(
+            InlineFormField::new("name", "Name")
+                .required()
+                .with_placeholder("server-name"),
+        )
+        .with_field(
+            InlineFormField::new("url", "URL")
+                .required()
+                .with_placeholder("https://api.example.com/mcp"),
+        )
+        .with_field(InlineFormField::new("api_key", "API Key").with_placeholder("optional"))
+}
+
+/// Build a selector for browsing MCP registry (placeholder).
+pub fn build_mcp_registry_browser() -> InteractiveState {
+    // TODO: Fetch real registry data
+    let items = vec![
+        InteractiveItem::new("__coming_soon__", "Registry Coming Soon")
+            .with_description("MCP registry integration is under development")
+            .with_disabled(true),
+    ];
+
+    InteractiveState::new(
+        "MCP Registry",
+        items,
+        InteractiveAction::Custom("mcp-registry".to_string()),
+    )
+    .with_hints(vec![("Esc".to_string(), "back".to_string())])
+}
+
+/// Build an inline form for adding a new MCP server (legacy - kept for compatibility).
+/// This form is displayed within the MCP panel, not as a separate modal.
+pub fn build_mcp_add_server_form() -> InlineFormState {
+    build_mcp_stdio_form()
+}
+
 /// Build an interactive state for MCP server actions (for a specific server).
 pub fn build_mcp_server_actions(server: &McpServerInfo) -> InteractiveState {
     let mut items = Vec::new();
diff --git a/cortex-tui/src/interactive/builders/mod.rs b/cortex-tui/src/interactive/builders/mod.rs
@@ -28,7 +28,10 @@ pub use files::{build_context_list, build_context_remove, build_file_browser};
 pub use login::{
     LoginFlowState, LoginStatus, build_already_logged_in_selector, build_login_selector,
 };
-pub use mcp::{build_mcp_add_server_form, build_mcp_selector};
+pub use mcp::{
+    build_mcp_add_server_form, build_mcp_http_form, build_mcp_registry_browser, build_mcp_selector,
+    build_mcp_source_selector, build_mcp_stdio_form, build_mcp_transport_selector,
+};
 pub use model::build_model_selector;
 // pub use provider::build_provider_selector; // REMOVED (single Cortex provider)
 pub use resume_picker::build_resume_picker;
diff --git a/cortex-tui/src/runner/event_loop.rs b/cortex-tui/src/runner/event_loop.rs
@@ -6009,8 +6009,8 @@ impl EventLoop {
         values: std::collections::HashMap<String, String>,
     ) {
         match action_id {
-            "mcp-add" => {
-                // Add new MCP server from inline form
+            "mcp-add" | "mcp-add-stdio" => {
+                // Add new stdio MCP server from inline form
                 let name = values.get("name").cloned().unwrap_or_default();
                 let command = values.get("command").cloned().unwrap_or_default();
                 let args_str = values.get("args").cloned().unwrap_or_default();
@@ -6040,16 +6040,50 @@ impl EventLoop {
                 self.app_state.mcp_servers.push(server_info);
                 self.app_state
                     .toasts
-                    .success(&format!("Added MCP server: {}", name));
+                    .success(&format!("Added stdio MCP server: {}", name));
 
                 // TODO: Actually register with MCP integration
                 tracing::info!(
-                    "Added MCP server: {} (command: {}, args: {:?})",
+                    "Added stdio MCP server: {} (command: {}, args: {:?})",
                     name,
                     command,
                     args
                 );
             }
+            "mcp-add-http" => {
+                // Add new HTTP MCP server from inline form
+                let name = values.get("name").cloned().unwrap_or_default();
+                let url = values.get("url").cloned().unwrap_or_default();
+                let api_key = values.get("api_key").cloned().unwrap_or_default();
+
+                if name.is_empty() || url.is_empty() {
+                    self.app_state.toasts.error("Name and URL are required");
+                    return;
+                }
+
+                // Create new server info
+                let server_info = crate::modal::mcp_manager::McpServerInfo {
+                    name: name.clone(),
+                    status: crate::modal::mcp_manager::McpStatus::Stopped,
+                    tool_count: 0,
+                    error: None,
+                    requires_auth: !api_key.is_empty(),
+                };
+
+                // Add to app state
+                self.app_state.mcp_servers.push(server_info);
+                self.app_state
+                    .toasts
+                    .success(&format!("Added HTTP MCP server: {}", name));
+
+                // TODO: Actually register with MCP integration (store URL and API key)
+                tracing::info!(
+                    "Added HTTP MCP server: {} (url: {}, has_api_key: {})",
+                    name,
+                    url,
+                    !api_key.is_empty()
+                );
+            }
             _ => {
                 tracing::warn!("Unhandled inline form submission: {}", action_id);
             }
@@ -6210,13 +6244,11 @@ impl EventLoop {
                 // Handle MCP server selection
                 match item_id.as_str() {
                     "__add__" => {
-                        // Open inline form for adding MCP server (stays in same panel)
-                        if let Some(state) = self.app_state.input_mode.interactive_mut() {
-                            let form =
-                                crate::interactive::builders::mcp::build_mcp_add_server_form();
-                            state.open_form(form);
-                        }
-                        return true; // Stay in interactive mode with form
+                        // Step 1: Show source selector (Custom vs Registry)
+                        let source_selector =
+                            crate::interactive::builders::mcp::build_mcp_source_selector();
+                        self.app_state.enter_interactive_mode(source_selector);
+                        return true; // Stay in interactive mode
                     }
                     "__tools__" => {
                         // Show all MCP tools
@@ -6578,6 +6610,57 @@ impl EventLoop {
                             _ => {}
                         }
                     }
+                    "mcp-source" => {
+                        // Step 1 result: Custom vs Registry
+                        match item_id.as_str() {
+                            "custom" => {
+                                // Step 2: Show transport selector (stdio vs HTTP)
+                                let transport_selector =
+                                    crate::interactive::builders::mcp::build_mcp_transport_selector(
+                                    );
+                                self.app_state.enter_interactive_mode(transport_selector);
+                                return true;
+                            }
+                            "registry" => {
+                                // Show registry browser (placeholder for now)
+                                let registry_browser =
+                                    crate::interactive::builders::mcp::build_mcp_registry_browser();
+                                self.app_state.enter_interactive_mode(registry_browser);
+                                return true;
+                            }
+                            _ => {}
+                        }
+                    }
+                    "mcp-transport" => {
+                        // Step 2 result: stdio vs HTTP
+                        match item_id.as_str() {
+                            "stdio" => {
+                                // Show stdio form
+                                if let Some(state) = self.app_state.input_mode.interactive_mut() {
+                                    let form =
+                                        crate::interactive::builders::mcp::build_mcp_stdio_form();
+                                    state.open_form(form);
+                                }
+                                return true;
+                            }
+                            "http" => {
+                                // Show HTTP form
+                                if let Some(state) = self.app_state.input_mode.interactive_mut() {
+                                    let form =
+                                        crate::interactive::builders::mcp::build_mcp_http_form();
+                                    state.open_form(form);
+                                }
+                                return true;
+                            }
+                            _ => {}
+                        }
+                    }
+                    "mcp-registry" => {
+                        // Registry browser - nothing selectable for now
+                        self.app_state
+                            .toasts
+                            .info("Registry integration coming soon");
+                    }
                     _ if custom_action.starts_with("mcp:") => {
                         // Handle MCP server actions - format: "mcp:<server_name>"
                         let server_name = custom_action.strip_prefix("mcp:").unwrap_or("");
