Skip to content

feat: add Quick Add dialog to Connect MCP Server form for open MCP servers only. - #87

Open
marekdano wants to merge 1 commit into
mainfrom
4681-quick-dialog-mcp-catalog-items
Open

feat: add Quick Add dialog to Connect MCP Server form for open MCP servers only.#87
marekdano wants to merge 1 commit into
mainfrom
4681-quick-dialog-mcp-catalog-items

Conversation

@marekdano

Copy link
Copy Markdown
Contributor

Summary

Implements a "Quick Add" dialog on the Add MCP Server flow (#4681): a curated shortlist of catalog servers you can pick from, which pre-fills the standard Connect MCP Server form.

  • Added QuickAddServerDialog — a radiogroup grid of curated catalog cards (logo/name/description), with Cancel/Continue actions and a link out to the full server catalog.
  • Curated list (src/config/quickAddServers.ts): deepwiki, exa-search, ferryhopper, hugging-face, remote-mcp, aws-knowledge, context-awesome, javadocs — all auth_type: "Open", no credentials required. The Figma design's original 8 servers are all OAuth2.1-only, and OAuth catalog registration still dead-ends today (blocked upstream on #5967); this swap keeps the feature fully functional end-to-end now, with no backend changes required.
  • Quick Add itself is scoped to no-auth servers, but it isn't an OAuth-only vs. everything-else split: submission goes through the existing /gateways create flow, so the picked defaults land in the same MCPServerForm used everywhere else — including AdvancedSettings, where a user can still add an API token/bearer auth (or basic/custom headers) by hand for a server that needs one. Only the automated OAuth handshake is unbuilt; manual API-key/token auth already works today.
  • useMCPServerForm gains an optional initialValues param so a picked catalog entry (name/url/description/transport) seeds a fresh create-mode form, fully editable before the server is actually created.
  • New "Quick add from catalog" trigger on MCPServerForm, next to the existing catalog link.
  • Extracted CatalogLogo out of CatalogResults into a shared component (src/components/server-catalog/CatalogLogo.tsx) so both surfaces render logos identically. Also fixed a latent bug in its URL validator: root-relative bundled asset paths (e.g. /static/catalog-icons/deepwiki.png) were being rejected as invalid URLs and silently falling back to the generic icon.
  • i18n: new mcpServer.quickAdd.* keys added to en-US, es-ES, and pt-BR.

Test plan

  • npx tsc -b --noEmit — clean
  • npm run lint — clean
  • npx vitest run — 3232 passed, 1 skipped (198 files), including the i18n locale-parity check
  • npx playwright test e2e/quick-add-server.spec.ts — open trigger → pick a curated server → Continue → form pre-filled (name/url/description/transport) → submit → POST /gateways fires with the expected body; and the "browse full catalog" link closes the dialog/form and navigates away
  • npx playwright test e2e/server-catalog.spec.ts — re-ran to confirm the CatalogLogo extraction didn't regress the existing catalog page (10/10 pass)

DEMO

add-quick-dialog-mcp-servers_dsxZtQCv.mp4

…rvers only

Signed-off-by: Marek Dano <mk.dano@gmail.com>
@marekdano
marekdano requested review from a-effort, gcgoncalves and vishu-bh and removed request for a-effort and vishu-bh August 27, 2026 14:52

@a-effort a-effort left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Nice work getting this kicked off! There are some changes to the user experience to implement before this is merged (Figma that I'll add detail for.

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.

2 participants