refactor(ui): extract the MCP create form's logic and field groups

[yuneng-berri]

TLDR

Problem this solves:

• The MCP create form is one 1398-line component
• Payload building, OAuth state and JSX are tangled together
• Its logic can only be tested through a full render

How it solves it:

• Extracts the payload builder into a pure, typed module
• Extracts the redirect snapshot and two JSX field groups
• Changes no behavior: the existing 77 tests pass untouched

Relevant issues

Stacked on #35686; review that one first

Linear ticket

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• I have added meaningful tests
• My PR passes all CI/CD checks (e.g., lint, format, unit tests)
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have received a Greptile Confidence Score of at least 4/5 before requesting a maintainer review (Greptile reviews automatically once the PR is opened; only comment @greptileai to re-request a review after pushing changes)

Delays in PR merge?

If you're seeing a delay in your PR being merged, ping the LiteLLM Team on Slack (#pr-review).

Screenshots / Proof of Fix

Type

🧹 Refactoring

Changes

The review contract for this PR is one command:

git diff --stat origin/litellm_mcp_create_extract -- '*.test.tsx'

It returns nothing. CreateMCPServer.test.tsx is untouched, and all 77 of its tests pass against the refactored component. That is what makes this safe to read as a set of moves rather than a rewrite: the behavior is already pinned, so the question a reviewer needs to answer is only whether each moved piece is faithful, not whether the form still works

CreateMCPServer.tsx goes from 1398 lines to 896. Four modules come out of it

createServerPayload.ts holds buildCreateServerPayload, a pure function from form values plus UI state to the create payload. It replaces a 220-line stretch of handleCreate that mixed transformation with NotificationsManager calls and early returns. Failures are now a tagged union (invalid_tool_display_name, invalid_stdio_json, invalid_token_validation_json) that the component maps to the same three messages through an exhaustive switch, so the notification text is unchanged and the transformation itself is testable without a DOM. parseStdioConfig and reduceStaticHeaders come along as named exports, since both have real branch logic worth reaching directly

createOAuthUiState.ts holds the snapshot that survives the OAuth authorize redirect. The read path keeps every one of the original presence guards exactly (typeof === "boolean" for the two flags, typeof === "string" for the authorized identity, truthiness for the rest, so an explicitly empty tool allowlist still restores while an empty search string does not), still strips minted token material, and still clears the key in a finally so a corrupted payload cannot be replayed

AwsSigV4Fields.tsx and OpenApiByokFields.tsx are the two largest JSX blocks, 156 and 89 lines, moved verbatim. Verbatim is deliberate: I started rewriting the BYOK auth-format hint into a lookup table and backed it out, because a rewrite would cost the reviewer the ability to diff it as a move. Both blocks keep small oddities worth a follow-up, including an unreachable !getFieldValue("auth_type") branch nested inside a block that only renders when that value is truthy

Three things are deliberately preserved rather than fixed, so this stays a move:

The else branch that commits a browser-held token after create still fires for m2m and token_exchange servers, where the edit form deliberately restricts the same commit to passthrough and the client-forwarded modes. One of the two is wrong. Unifying them needs a decision about what the backend does with a sessionStorage token in those modes, and it is a three-line change once both sides share a module, so it is cleaner as a follow-up than as a silent behavior change buried in a refactor

mcpLogoImg is still exported from this component and imported by mcp_discovery.tsx. A static asset URL should not couple an unrelated component to the create modal, but moving it is a change to a second file's imports and belongs with the wider directory cleanup

The form values bag stays Record<string, unknown> rather than a precise interface. The payload spreads fields this module never names, so typing it properly means enumerating the whole form, which is its own change

eslint-suppressions.json gains no-restricted-imports entries for the two moved antd files. eslint . --prune-suppressions then produces an identical file, which is how I know the baseline is exact rather than approximately right

QA runbook

No files under tests/e2e/ are touched by this PR

Final Attestation

• The tests check the right things, including the edge cases, and regressions in the respective real-world customer use-cases are not possible after this PR

[greptile-apps]

Greptile Summary

This PR refactors the MCP server creation form without changing its external behavior.

• Extracts create-payload construction and validation into a typed pure module.
• Extracts OAuth redirect snapshot persistence and restoration.
• Moves the AWS SigV4 and OpenAPI BYOK field groups into dedicated components.
• Updates lint suppressions for the moved Ant Design imports.

Confidence Score: 5/5

The PR appears safe to merge, with no actionable behavioral regressions identified in the extraction.

The payload transformations remain equivalent to the former inline implementation, OAuth state retains its prior restoration and cleanup behavior, and the moved field groups remain under the same Ant Design Form context.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/CreateMCPServer.tsx	Delegates payload construction, OAuth snapshot handling, and two field groups while preserving the existing create and submit flow.
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/createServerPayload.ts	Faithfully extracts payload normalization and tagged validation failures from the former inline handler.
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/createOAuthUiState.ts	Preserves the existing single-use OAuth snapshot semantics and strips minted token credentials during restoration.
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/AwsSigV4Fields.tsx	Moves the existing SigV4 fields and cross-field validation under the unchanged parent Form context.
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/OpenApiByokFields.tsx	Moves the existing BYOK controls and conditional hints under the unchanged parent Form context.
ui/litellm-dashboard/eslint-suppressions.json	Transfers restricted-import suppression counts to the newly extracted Ant Design component files.

_{Reviews (1): Last reviewed commit: "refactor(ui): extract the MCP create for..." | Re-trigger Greptile}