Skip to content

feat(mcp): simplify MCP server form to URL-first, collapse advanced settings - #431

Closed
esafwan wants to merge 4 commits into
developfrom
feature/mcp-form-simplify
Closed

feat(mcp): simplify MCP server form to URL-first, collapse advanced settings#431
esafwan wants to merge 4 commits into
developfrom
feature/mcp-form-simplify

Conversation

@esafwan

@esafwan esafwan commented Jul 25, 2026

Copy link
Copy Markdown
Contributor

Why

The MCP server form exposed ~15 inputs up front — every OAuth value that URL-first discovery (RFC 9728/8414 + DCR + PKCE, from the MCPUrlFirst work) now fills automatically was still a visible manual field. Standard AI tool connector dialog asks only for Name + URL (with Client ID/Secret tucked into Advanced). This PR brings HUF's form to the same surface while keeping the extra capabilities (non-OAuth auth modes, custom headers) that other tools doesn't offer.

What changed

Connection tab (ConnectionTab.tsx)

  • Default view is now just MCP Server URL + Connect/Save & Connect + status — nothing else.
  • Auth mode, credential field, transport type, and custom headers move into an "Advanced Settings" card, collapsed by default.
  • The 7 manual OAuth fields (Client ID/Secret, auth/token endpoints, scope, extra authorize params, redirect URI) move into a nested "Manual OAuth Fallback" collapsible ("only for servers without automatic discovery or client registration"). The backend already treats them as optional overrides (mcp_connection_resolver.py only fills them when empty).
  • Credential field is labeled per auth mode (API Key / Token / Header Value); header name stays auto-derived and is only editable for custom_header.

Details tab (DetailsTab.tsx)

  • Default view: Server Name, Description, Enabled. Tool Namespace and Timeout move behind a collapsed "Advanced" row.

Removed field: oauth_token_response_path

  • Unused compat shim (token extraction always fell back to the standard access_token key in practice). Removed from the DocType, mcp_oauth.py::_save_tokens, and all frontend references.

DocType

  • auth_type default changed noneoauth, matching the React form, so URL-first OAuth is the out-of-box path in Desk too.
  • Note: Frappe migrate does not drop columns, so the oauth_token_response_path DB column remains as an inert orphan; it can be dropped manually later if desired.

Screenshots (bench 16_ro, huf-ro.localhost)

Default view — URL + Connect only:

Connection tab default

Advanced Settings expanded (auth mode / transport / custom headers):

Advanced expanded

Manual OAuth Fallback (nested, collapsed by default):

Manual OAuth fallback

Details tab:

Details tab

The screenshots live in docs/screenshots/mcp-form-simplify/ in a separate commit that can be dropped before merge if you don't want them in the repo history.

Test plan

  • yarn build (tsc + vite) green on host worktree and in bench container
  • Deployed to bench 16_ro (isolated validation bench), bench migrate clean
  • Browser walkthrough on huf-ro.localhost — all four states above verified live (screenshots)
  • Smoke: MCP Server insert via console — auth_type defaults to oauth, token_response_path gone from meta, delete clean
  • Connect flow against a real OAuth MCP server (e.g. mcp.higgsfield.ai) — unchanged code path, but worth one manual click-through before merge

esafwan added 4 commits July 25, 2026 05:26
…ettings

Restructure the MCP server form so the default view matches what a
URL-first OAuth client actually needs: server URL + Connect button.

- ConnectionTab: primary card is now just URL + Connect/status; auth mode,
  credential, transport, and custom headers move into a collapsed
  'Advanced Settings' card; the 7 manual OAuth fields (client id/secret,
  endpoints, scope, extra params, redirect URI) move into a nested
  'Manual OAuth Fallback' collapsible, since discovery + DCR fill them
  automatically.
- DetailsTab: tool namespace and timeout move behind a collapsed
  'Advanced' row; default view is name/description/enabled.
- Credential field labeled per auth mode; header name auto-derived
  (editable only for custom_header).
- Remove oauth_token_response_path (unused compat shim) from DocType,
  mcp_oauth.py, and all frontend references; token extraction always
  uses the standard access_token key.
- DocType auth_type default 'none' -> 'oauth' so URL-first is the
  out-of-box path in Desk as well.

DocType changed: requires bench migrate (drops the
oauth_token_response_path column; no data migration needed).
…icker modal

'Create MCP' and 'Connect MCP' were two near-synonym buttons (the
sign-in/sign-up dilemma) for the same end result: the agent gets an MCP
server. UX consult (claude opus) decided on one primary action with the
create path inside the flow:

- ToolsTab MCP card: single 'Connect MCP Server' button (secondary in
  header, primary in empty state); empty-state copy now reads
  'No MCP servers connected yet / Connect a shared server, or register
  a new one to get started.'
- SelectMCPServersModal: title 'Connect MCP servers' with subtext
  announcing the create path; quiet link button in the footer
  'Don't see it? Register a new MCP server →' (new onCreateNew prop).
- Empty-registry state in the modal promotes create to primary:
  'No MCP servers registered yet' + 'Register your first MCP server →'.
- AgentFormPage: handleCreateMCP now wired to the modal's onCreateNew
  instead of the removed ToolsTab button.
@esafwan

esafwan commented Jul 25, 2026

Copy link
Copy Markdown
Contributor Author

Update: Agent MCP section — one button, create path in the flow

Follow-up commit on this branch addressing the Create MCP / Connect MCP button pair in the Agent form's MCP card — two near-synonyms for the same end result (the sign-in/sign-up dilemma). Design validated via a claude opus UX consult.

What changed (ToolsTab.tsx, SelectMCPServersModal.tsx, AgentFormPage.tsx)

  • One button everywhere: Connect MCP Server (secondary in the card header, primary in the empty state). The separate "Create MCP" button is gone.
  • The picker modal is now titled "Connect MCP servers""Select from your registered servers, or register a new one." — and carries a quiet footer link "Don't see it? Register a new MCP server →" that routes into the existing /mcp/new?agent=<id> create flow.
  • Empty-registry edge case: if no MCP servers exist at all, the modal promotes the create path to primary — "No MCP servers registered yet" + "Register your first MCP server →" — so first-run users get a clear CTA instead of a dead-end list.
  • Empty-state copy in the card: "No MCP servers connected yet / Connect a shared server, or register a new one to get started."

Screenshots (bench 16_ro, live):

Agent MCP card — single button in header and empty state:

Agent MCP card

Picker modal, populated registry — list + footer create link:

Picker modal populated

Picker modal, empty registry — create path promoted to primary:

Picker modal empty registry

Verified: yarn build (tsc + vite) green, deployed on bench 16_ro, all three states captured live via headless Chrome. Dummy data used for the populated shot was removed afterward.

@esafwan

esafwan commented Jul 26, 2026

Copy link
Copy Markdown
Contributor Author

Superseded by consolidated MCP PR #466, now included in integration PR #468.

@esafwan esafwan closed this Jul 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant