feat(mcp): surface better errors for MCP connection failures

[waleedlatif1]

Summary

• surface better errors for MCP connection failures instead of generically saying connection failed
• use a single component for when there are servers and when there are no servers, add-server-form

Type of Change

• New feature

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 3, 2025 2:32am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR improves MCP connection error handling by surfacing specific error messages instead of generic "connection failed" messages, and refactors the add server form into a reusable component.

Key Changes:

• Enhanced use-mcp-server-test.ts to extract and display specific error messages from API responses (result.data.error)
• Created new types.ts file to centralize McpServerFormData and McpServerTestResult type definitions
• Extracted AddServerForm component from mcp.tsx for better code organization and reusability
• Form now displays detailed error messages via testResult.error || testResult.message pattern
• Unified form rendering logic for both empty state (no servers) and when servers exist

Impact:
Users will now see specific error messages (e.g., "Invalid MCP server URL: must start with https://", "URL is required for HTTP-based transports") instead of generic failure messages, improving debugging experience.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• This is a well-structured refactoring that improves error visibility without introducing new logic bugs. The changes are primarily extracting existing functionality into a dedicated component and enhancing error message surfacing. All error handling paths are preserved, and the component interface is well-typed.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/mcp/types.ts	5/5	Added McpServerFormData and McpServerTestResult type definitions, extracting them from inline types for better reusability
apps/sim/hooks/use-mcp-server-test.ts	5/5	Enhanced error handling to surface specific error messages from API responses instead of generic "Connection failed" message
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/mcp/components/add-server-form.tsx	5/5	New component extracted from mcp.tsx for add server form, displays error messages via `testResult.error
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/mcp/mcp.tsx	5/5	Refactored to use extracted AddServerForm component, consolidating form rendering logic for both empty state and existing servers state

Sequence Diagram

sequenceDiagram
participant User
participant AddServerForm
participant useMcpServerTest
participant API as /api/mcp/servers/test-connection
participant McpClient
User->>AddServerForm: Clicks "Test Connection"
AddServerForm->>useMcpServerTest: testConnection(config)
useMcpServerTest->>API: POST /test-connection
API->>McpClient: new McpClient(config)
McpClient->>McpClient: connect()
alt Connection Successful
McpClient-->>API: Connected
API->>McpClient: listTools()
McpClient-->>API: tools[]
API-->>useMcpServerTest: { success: true, toolCount, error }
useMcpServerTest-->>AddServerForm: testResult
AddServerForm-->>User: Display "✓ Connected"
else Connection Failed
McpClient-->>API: Error (specific message)
API-->>useMcpServerTest: { success: false, error: "specific error" }
useMcpServerTest-->>AddServerForm: testResult with error
AddServerForm-->>User: Display specific error message
end
User->>AddServerForm: Clicks "Add Server"
AddServerForm->>useMcpServerTest: (reuse testResult if exists)
AddServerForm->>AddServerForm: createServer()

Loading

_{4 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}