supermemory/apps/web/components/settings
Dhravya 3487666481
feat(web): add MCP connector directory (#1461)
<!-- VORFLUX_AGENT_PR_BODY_BEGIN -->
Adds the full 654-entry MCP directory without bundling records into client JavaScript, with explicit capability status and connector branding that degrades safely when no authoritative logo is available.

## Changes

- Lazy-load and validate the searchable, filterable, progressively rendered MCP catalog.
- Render same-origin proxied provider icons for 543 entries, with a reviewed domain allowlist and deterministic fallback marks for 111 unresolved or unbranded entries.
- Record OAuth discovery capability separately from end-to-end support; all directory setup actions remain suppressed until their authentication flow is verified.
- Add a reproducible OAuth metadata probe with HTTPS/private-network protections, stable URL keys, authorization-server scanning, and catalog fingerprint validation.
- Add Google Drive branding for the curated built-in connector.

## Testing

- **Passed:** Deterministic generation and catalog assertions.
  ```bash
  PATH="$HOME/.bun/bin:$PATH" python3 apps/web/scripts/generate-mcp-directory.py --output
  cmp apps/web/public/mcp-directory.json
  ```
  Verified 654 entries, 254 DCR discoveries, 27 preregistered OAuth discoveries, 373 unclassified entries, and zero directory setup actions.
- **Passed:** Stale OAuth metadata fingerprint is rejected by the generator.
- **Passed:** Touched-file Biome checks and `git diff --check`.
- **Passed:** Icon proxy returned 200 for an allowlisted domain and 400 for an unknown valid-looking domain.
- **Passed:** Authenticated desktop/mobile browser inspection and conservative capability labels.
- **Passed:** Public preview returned HTTP 200 and rendered the real app. Authentication cookies do not transfer to the public hostname, so the public screenshot shows login.
- **Partial:** Repository-wide TypeScript checks remain blocked by unrelated existing errors outside the touched MCP files.
- **Partial:** 111 entries intentionally retain deterministic fallback marks; endpoint-derived domains may not always be the canonical brand logo.
- **Blocked:** Google rejected the local HTTP OAuth callback, so live Google Drive consent, callback, persistence, tool discovery, disconnect, and reconnect were not completed.

Public preview: https://ar8ruchhbi65.preview.us1.vorflux.com/configure/tools

---
**Attached Images**

*[288.csv]*

*[mcp-directory-final.json]*

![mcp-directory-branding-desktop.png](https://api.us1.vorflux.com/assets/artifacts/c3VwZXJtZW1vcnk6Zjo4MDA0.3_UzR_OP9Jk228FYbrAPTXyqybRBlqwn5Uv4tksf_Y0.png)

![mcp-directory-branding-mobile.png](https://api.us1.vorflux.com/assets/artifacts/c3VwZXJtZW1vcnk6Zjo4MDA1.b5G6nsOBVm2s6DlEFWFiMFCcULAkV0MCCGZ8XVsA5js.png)

![mcp-directory-public-preview.png](https://api.us1.vorflux.com/assets/artifacts/c3VwZXJtZW1vcnk6Zjo4MDA2.ZrBAeBi62JX1xavAtaDLQ0fuixgBjN7x1NrqIxtdmKw.png)
<!-- VORFLUX_AGENT_PR_BODY_END -->

---
**Session Details**
- Session: [View Session](https://supermemory.us1.vorflux.com/agent-sessions/1cd0aab9-2a45-4818-aa13-f9bfe032ddba)
- Requested by: Dhravya Shah (dhravya@supermemory.com)
- Address comments on this PR. Add `(aside)` to your comment to have me ignore it.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Changes how users pick MCP URLs and auth (OAuth vs API key) before hitting existing connect endpoints; no new backend auth logic in this diff, but misconfiguration or trusting bad URLs remains a user-risk surface.
>
> **Overview**
> Adds a **browseable MCP directory** on the Company Brain connectors page: the catalog is **not bundled in JS**—it loads from static **`/mcp-directory.json`** only after the user opens the directory (with validation, caching, and abort handling).
>
> The new **`McpDirectoryBrowser`** supports search, category/availability filters, and progressive “show more” rendering. Supported remote entries route into the existing custom MCP flow via **Set up**, which pre-fills name/URL and opens the connector dialog with context-specific copy.
>
> The custom connector dialog now uses an explicit **OAuth vs API key** toggle; API key fields only appear for API-key mode, and directory-backed connections get **stable slugs** (`-dir-` suffix) so names display cleanly on connected cards. **Middleware** excludes `mcp-directory.json` from the auth matcher so the asset can be fetched publicly.
>
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 8b59bae84a. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
2026-08-20 22:58:39 +00:00
..
company-brain-skills feat(skills): surface Company Brain-created skills (#1412) 2026-08-05 03:42:37 +00:00
account.tsx feat(web): take a card before the Company Brain trial starts (#1459) 2026-08-13 06:58:47 +00:00
api-keys.tsx feat(web): add API Keys management in settings (#1426) 2026-08-07 12:44:40 -07:00
billing.tsx feat(web): support discount code checkout (#1523) 2026-08-16 13:43:53 -07:00
cancel-reasons.ts feat(billing): cancel flow with reason capture + book-a-call (#1077) 2026-06-10 13:34:33 +05:30
company-brain-automations.tsx feat(web): automation connection warnings and calmer automations page (#1396) 2026-08-10 00:02:50 +00:00
company-brain-connections.tsx feat(web): add MCP connector directory (#1461) 2026-08-20 22:58:39 +00:00
company-brain-models.tsx Add consent flow for Slack workspace reassignment (#1369) 2026-07-30 16:42:15 -07:00
company-brain-proactivity.tsx feat(web): search channels in proactivity exceptions picker (#1377) 2026-07-30 18:08:16 +00:00
company-brain-skills.tsx feat(skills): surface Company Brain-created skills (#1412) 2026-08-05 03:42:37 +00:00
connections-mcp.tsx feat(web): support discount code checkout (#1523) 2026-08-16 13:43:53 -07:00
integrations.tsx fix settings/integrations responsiveness (#1003) 2026-05-30 14:56:51 -07:00
mcp-directory-browser.tsx feat(web): add MCP connector directory (#1461) 2026-08-20 22:58:39 +00:00
org-context.tsx feat(settings): settings modal overhaul (#1069) 2026-06-09 12:07:47 +05:30
proactiveness-icon.tsx feat(web): Company Brain proactivity settings UI (#1374) 2026-07-29 21:47:29 +00:00
proactiveness.tsx feat(web): Company Brain proactiveness (automations) settings (#1207) 2026-07-07 21:20:50 +00:00
settings-content.tsx feat(web): add API Keys management in settings (#1426) 2026-08-07 12:44:40 -07:00
settings-modal.tsx Fix settings organization flows (#1159) 2026-06-27 14:27:36 +00:00
settings-org-switcher.tsx Fix settings organization flows (#1159) 2026-06-27 14:27:36 +00:00
support.tsx feat(web): redesign settings layout + split billing into its own tab (#980) 2026-05-20 14:56:10 +05:30
sync-history-panel.tsx mobile responsiveness pass + connections reauth fix (#959) 2026-05-17 21:49:23 +00:00
sync-status-badge.tsx mobile responsiveness pass + connections reauth fix (#959) 2026-05-17 21:49:23 +00:00
sync-utils.ts feat/granola connector (#1007) 2026-06-03 15:19:49 +00:00
workspace-prompt.tsx Add Nova workspace prompt settings (#1323) 2026-07-29 21:13:59 +00:00