Skip to content

feat: Update MCPServer interface to make command and args optional, e…#28

Merged
Levi-Breedlove merged 1 commit into
mainfrom
013-fix-mcp-servers
Apr 3, 2026
Merged

feat: Update MCPServer interface to make command and args optional, e…#28
Levi-Breedlove merged 1 commit into
mainfrom
013-fix-mcp-servers

Conversation

@MikePfunk28
Copy link
Copy Markdown
Owner

@MikePfunk28 MikePfunk28 commented Mar 27, 2026

…nhance transport type handling in MCP components

Summary by CodeRabbit

Release Notes

  • New Features
    • Added multi-transport support for MCP servers: stdio, SSE, HTTP, and direct modes.
    • Transport type now displays with badge indicators on server cards.
    • Configuration fields dynamically adapt based on transport selection (command/args for stdio, URL for SSE/HTTP).
    • Improved handling of optional server configuration fields.

…nhance transport type handling in MCP components
@MikePfunk28 MikePfunk28 self-assigned this Mar 27, 2026
@MikePfunk28 MikePfunk28 added the bug Something isn't working label Mar 27, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 27, 2026

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

Project Deployment Actions Updated (UTC)
agent-builder-application Ready Ready Preview, Comment Mar 27, 2026 6:58pm

@MikePfunk28 MikePfunk28 linked an issue Mar 27, 2026 that may be closed by this pull request
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Mar 27, 2026

📝 Walkthrough

Walkthrough

Three UI components are updated to support multiple MCP server transport types (stdio, sse, http, direct) by making command and args optional, introducing url and transportType fields, and implementing transport-aware rendering and helper logic.

Changes

Cohort / File(s) Summary
Transport Type Support
src/components/MCPManagementPanel.tsx, src/components/MCPServerForm.tsx, src/components/MCPServerSelector.tsx
Updated MCPServer interface across files to make command and args optional and added url?: string and transportType?: "stdio" | "sse" | "http" | "direct" fields. Updated component prop types to reflect these changes.
Transport Derivation & Labeling Functions
src/components/MCPManagementPanel.tsx, src/components/MCPServerSelector.tsx
Added getTransportType(server) helper to derive transport mode from explicit transportType or infer from url (→sse), command (→stdio), or default to direct. Added getTransportLabel() and getServerSubtitle() helpers to render human-readable transport and server configuration display strings.
Safe Null Handling & State
src/components/MCPServerForm.tsx
Updated initial state computation for argsText to safely handle optional args using optional chaining: server?.args?.join(' ') instead of server?.args.join(' ').
Transport-Aware UI Rendering
src/components/MCPManagementPanel.tsx, src/components/MCPServerSelector.tsx
Refactored card and list item rendering to conditionally display transport-specific information: Command/Args shown only for stdio transport; URL shown for sse/http; direct transport shows an informational message. Added transport type badge to status displays.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~40 minutes

Poem

🐰 A transport tale of stdio, sse, and more!
Optional fields now grace each server's store.
From URLs to commands, each type finds its place,
With helper functions keeping the rendering grace. 🚀

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main change: making command and args optional in the MCPServer interface and enhancing transport type handling, which aligns with the detailed changes across all three modified components.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch 013-fix-mcp-servers

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/components/MCPServerForm.tsx (1)

8-20: ⚠️ Potential issue | 🟠 Major

Form cannot safely edit non-stdio MCP servers due to missing transport fields.

The MCPServerFormProps interface (lines 8-20) omits url and transportType, which exist in MCPManagementPanel's server interface and are required for SSE/HTTP transport types. When editing a non-stdio server:

  1. The form lacks inputs for url and transportType, causing these fields to be lost on save (line 131 sends only command, args, etc.)
  2. The required command validation (line 72-74) conflicts with the backend design where only stdio transport requires a command
  3. The form can be invoked for any server type (line 259 passes server as any) with no filtering

This creates a data-loss vulnerability and type inconsistency. The backend's addMCPServer validates transport-specific fields conditionally, but updateMCPServer lacks this validation, allowing inconsistent state.

Either:

  • Add url and transportType fields with conditional rendering/validation based on transport type
  • Filter non-stdio servers from the edit button in MCPManagementPanel
  • Add transport-specific validation to updateMCPServer to match addMCPServer
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/MCPServerForm.tsx` around lines 8 - 20, The MCPServerFormProps
type and MCPServerForm are missing transport fields (url and transportType),
causing edits of non-stdio servers to drop required transport-specific data and
clash with validation; update the MCPServerFormProps to include url and
transportType, add conditional rendering and validation in MCPServerForm (show
url input only when transportType !== "stdio" and require command only when
transportType === "stdio"), and ensure the save path used by the form calls
updateMCPServer with transportType and url included; alternatively, if you
intend to disallow editing non-stdio servers, change MCPManagementPanel to stop
passing non-stdio servers into the form (remove the server as any cast and
filter edit button) or add matching transport-specific checks to updateMCPServer
to validate url/transportType like addMCPServer does.
🧹 Nitpick comments (4)
src/components/MCPManagementPanel.tsx (3)

43-72: Duplicated helper functions across components.

getTransportType and the transport label logic are duplicated in MCPServerSelector.tsx (lines 52-81). Consider extracting these to a shared utility module to maintain consistency and reduce duplication.

♻️ Suggested extraction

Create a shared utility, e.g., src/utils/mcpTransport.ts:

export type TransportType = "stdio" | "sse" | "http" | "direct";

export function getTransportType(server: { 
  transportType?: TransportType; 
  url?: string; 
  command?: string; 
}): TransportType {
  if (server.transportType) return server.transportType;
  if (server.url) return "sse";
  if (server.command) return "stdio";
  return "direct";
}

export function getTransportLabel(transportType: TransportType): string {
  const labels: Record<TransportType, string> = {
    stdio: "STDIO",
    sse: "SSE",
    http: "HTTP",
    direct: "Direct",
  };
  return labels[transportType];
}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/MCPManagementPanel.tsx` around lines 43 - 72, Extract the
duplicated getTransportType and getTransportLabel logic into a shared utility
(e.g., a new module exporting TransportType, getTransportType, and
getTransportLabel) and replace the local implementations in
MCPManagementPanel.tsx (functions getTransportType and getTransportLabel) and
MCPServerSelector.tsx with imports from that module; ensure the new
getTransportType signature accepts an object with optional transportType, url,
and command fields and that getTransportLabel accepts the TransportType union so
both components import the same types and functions and delete the duplicated
local functions.

198-211: IIFE pattern works but consider extracting to a named component.

The IIFE works correctly for scoping computed values (transportType, transportLabel, args), but the 180+ line inline function reduces readability. A ServerCard component would improve maintainability.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/MCPManagementPanel.tsx` around lines 198 - 211, The inline
IIFE that renders each server card is large and should be extracted into a named
presentational component (e.g., ServerCard) to improve readability and reuse;
create a ServerCard component that accepts props (server, selectedServer,
onSelect, any handlers/props used inside), move the computed values and JSX
(transportType via getTransportType, transportLabel via getTransportLabel, args,
className logic referencing selectedServer._id, etc.) into that component,
replace the IIFE with a simple <ServerCard key={server._id} server={server}
selectedServer={selectedServer} .../> invocation, and ensure any event callbacks
or state lifts (selection/updating) are passed as props so behavior remains
identical.

69-70: Unreachable default case.

The default branch is unreachable since the parameter transportType is typed as a union of the four literal types. TypeScript will error if a new transport is added without updating the switch. Consider removing it or using satisfies for exhaustiveness checking.

♻️ Exhaustiveness check pattern
 function getTransportLabel(transportType: "stdio" | "sse" | "http" | "direct") {
   switch (transportType) {
     case "stdio":
       return "STDIO";
     case "sse":
       return "SSE";
     case "http":
       return "HTTP";
     case "direct":
       return "Direct";
-    default:
-      return "Unknown";
   }
+  // Exhaustiveness check - will error if a case is missing
+  const _exhaustive: never = transportType;
+  return _exhaustive;
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/MCPManagementPanel.tsx` around lines 69 - 70, The switch over
transportType in MCPManagementPanel currently has an unreachable default that
masks non-exhaustiveness; remove the default return "Unknown" and replace it
with an exhaustive-check pattern: add a small helper function
assertUnreachable(x: never): never and call assertUnreachable(transportType) in
the switch's fallback so TypeScript will error if a new transport literal is
added and not handled; reference the transportType switch in MCPManagementPanel
and the new assertUnreachable helper to locate where to change code.
src/components/MCPServerSelector.tsx (1)

278-280: Consider consistent label casing with MCPManagementPanel.

MCPManagementPanel uses getTransportLabel() which returns "Direct" (capitalized), but here you use transportType.toUpperCase() which returns "DIRECT" (all caps). This creates visual inconsistency between components.

♻️ Use shared label function
-                  <span className="text-xs px-2 py-0.5 bg-black/30 text-green-300 rounded border border-green-900/30">
-                    {transportType.toUpperCase()}
-                  </span>
+                  <span className="text-xs px-2 py-0.5 bg-black/30 text-green-300 rounded border border-green-900/30">
+                    {getTransportLabel(transportType)}
+                  </span>

Then add a getTransportLabel function (or import from shared utility) for consistency.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/MCPServerSelector.tsx` around lines 278 - 280, The
MCPServerSelector component renders the transport badge using
transportType.toUpperCase(), causing inconsistent casing with MCPManagementPanel
which uses getTransportLabel(); replace the direct toUpperCase() usage by
calling the shared getTransportLabel function (or import it from the shared
utility) when rendering the span so both components show the same label format;
update the span that currently contains {transportType.toUpperCase()} to use
getTransportLabel(transportType) and ensure the import or local helper is
added/used consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/MCPManagementPanel.tsx`:
- Line 259: The inline cast "server as any" hides a type mismatch between the
object passed from the MCP list and the props expected by MCPServerForm; remove
the cast and either (a) update handleEdit to accept the concrete server type and
map/transform that server into the exact props MCPServerForm expects before
opening the form, or (b) extend MCPServerForm's props (or add optional fields)
to include url and transportType so the types align; update the signature of
handleEdit and the place where it calls/opens MCPServerForm (referencing
handleEdit, MCPServerForm, and the server variable) accordingly so no `as any`
is needed.

---

Outside diff comments:
In `@src/components/MCPServerForm.tsx`:
- Around line 8-20: The MCPServerFormProps type and MCPServerForm are missing
transport fields (url and transportType), causing edits of non-stdio servers to
drop required transport-specific data and clash with validation; update the
MCPServerFormProps to include url and transportType, add conditional rendering
and validation in MCPServerForm (show url input only when transportType !==
"stdio" and require command only when transportType === "stdio"), and ensure the
save path used by the form calls updateMCPServer with transportType and url
included; alternatively, if you intend to disallow editing non-stdio servers,
change MCPManagementPanel to stop passing non-stdio servers into the form
(remove the server as any cast and filter edit button) or add matching
transport-specific checks to updateMCPServer to validate url/transportType like
addMCPServer does.

---

Nitpick comments:
In `@src/components/MCPManagementPanel.tsx`:
- Around line 43-72: Extract the duplicated getTransportType and
getTransportLabel logic into a shared utility (e.g., a new module exporting
TransportType, getTransportType, and getTransportLabel) and replace the local
implementations in MCPManagementPanel.tsx (functions getTransportType and
getTransportLabel) and MCPServerSelector.tsx with imports from that module;
ensure the new getTransportType signature accepts an object with optional
transportType, url, and command fields and that getTransportLabel accepts the
TransportType union so both components import the same types and functions and
delete the duplicated local functions.
- Around line 198-211: The inline IIFE that renders each server card is large
and should be extracted into a named presentational component (e.g., ServerCard)
to improve readability and reuse; create a ServerCard component that accepts
props (server, selectedServer, onSelect, any handlers/props used inside), move
the computed values and JSX (transportType via getTransportType, transportLabel
via getTransportLabel, args, className logic referencing selectedServer._id,
etc.) into that component, replace the IIFE with a simple <ServerCard
key={server._id} server={server} selectedServer={selectedServer} .../>
invocation, and ensure any event callbacks or state lifts (selection/updating)
are passed as props so behavior remains identical.
- Around line 69-70: The switch over transportType in MCPManagementPanel
currently has an unreachable default that masks non-exhaustiveness; remove the
default return "Unknown" and replace it with an exhaustive-check pattern: add a
small helper function assertUnreachable(x: never): never and call
assertUnreachable(transportType) in the switch's fallback so TypeScript will
error if a new transport literal is added and not handled; reference the
transportType switch in MCPManagementPanel and the new assertUnreachable helper
to locate where to change code.

In `@src/components/MCPServerSelector.tsx`:
- Around line 278-280: The MCPServerSelector component renders the transport
badge using transportType.toUpperCase(), causing inconsistent casing with
MCPManagementPanel which uses getTransportLabel(); replace the direct
toUpperCase() usage by calling the shared getTransportLabel function (or import
it from the shared utility) when rendering the span so both components show the
same label format; update the span that currently contains
{transportType.toUpperCase()} to use getTransportLabel(transportType) and ensure
the import or local helper is added/used consistently.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 22d858cc-d63d-4837-bf7e-e894fdaa10d1

📥 Commits

Reviewing files that changed from the base of the PR and between 98dd24a and 6671a54.

📒 Files selected for processing (3)
  • src/components/MCPManagementPanel.tsx
  • src/components/MCPServerForm.tsx
  • src/components/MCPServerSelector.tsx

}`} />
</button>
<button
onClick={() => handleEdit(server as any)}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Avoid as any cast — masks type mismatch with MCPServerForm.

This cast hides the fact that MCPServerForm doesn't accept url or transportType props. When the form is extended to support other transports, this cast should be removed and types aligned.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/MCPManagementPanel.tsx` at line 259, The inline cast "server
as any" hides a type mismatch between the object passed from the MCP list and
the props expected by MCPServerForm; remove the cast and either (a) update
handleEdit to accept the concrete server type and map/transform that server into
the exact props MCPServerForm expects before opening the form, or (b) extend
MCPServerForm's props (or add optional fields) to include url and transportType
so the types align; update the signature of handleEdit and the place where it
calls/opens MCPServerForm (referencing handleEdit, MCPServerForm, and the server
variable) accordingly so no `as any` is needed.

@Levi-Breedlove
Copy link
Copy Markdown
Collaborator

First, verify whether MikePfunk28 really owns a Projects v2 board numbered 4.

Second, verify whether the token used in Actions can see that board.

Third, if the board is org-owned, fix --owner.

Fourth, stop letting this step fail the entire workflow unless adding to the project is actually mission-critical.

@Levi-Breedlove
Copy link
Copy Markdown
Collaborator

Levi-Breedlove commented Apr 3, 2026

@Levi-Breedlove Levi-Breedlove merged commit 4129c9b into main Apr 3, 2026
5 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add New Branches to main

2 participants