From 44c7feac9d9e1e54dc4024f8b76f13c66c137304 Mon Sep 17 00:00:00 2001
From: vvnsrzn <vivian.sarazin@gmail.com>
Date: Sat, 21 Mar 2026 22:39:00 +0100
Subject: [PATCH 1/2] feat: implement MCP server search functionality and
 registry integration

---
 src/lib/components/mcp/AddServerForm.svelte   | 114 +++++++----
 .../components/mcp/MCPServerManager.svelte    | 139 +++++++++++--
 src/lib/components/mcp/MCPServerSearch.svelte |  95 +++++++++
 .../components/mcp/RegistryResultCard.svelte  |  66 +++++++
 src/lib/components/mcp/ServerCard.svelte      |  11 +-
 src/lib/types/Tool.ts                         |  23 +++
 src/routes/api/mcp/registry/+server.ts        | 121 ++++++++++++
 src/routes/api/mcp/registry/registry.spec.ts  | 182 ++++++++++++++++++
 8 files changed, 690 insertions(+), 61 deletions(-)
 create mode 100644 src/lib/components/mcp/MCPServerSearch.svelte
 create mode 100644 src/lib/components/mcp/RegistryResultCard.svelte
 create mode 100644 src/routes/api/mcp/registry/+server.ts
 create mode 100644 src/routes/api/mcp/registry/registry.spec.ts

diff --git a/src/lib/components/mcp/AddServerForm.svelte b/src/lib/components/mcp/AddServerForm.svelte
index a5bc035d5bf..0b80663aca0 100644
--- a/src/lib/components/mcp/AddServerForm.svelte
+++ b/src/lib/components/mcp/AddServerForm.svelte
@@ -16,6 +16,7 @@
 		oncancel: () => void;
 		initialName?: string;
 		initialUrl?: string;
+		initialDescription?: string;
 		initialHeaders?: KeyValuePair[];
 		submitLabel?: string;
 	}
@@ -25,6 +26,7 @@
 		oncancel,
 		initialName = "",
 		initialUrl = "",
+		initialDescription = "",
 		initialHeaders = [],
 		submitLabel = "Add Server",
 	}: Props = $props();
@@ -32,11 +34,13 @@
 	let name = $state("");
 	let url = $state("");
 	let headers = $state<KeyValuePair[]>([]);
+	let headersOpen = $state(false);
 
 	$effect.pre(() => {
 		name = initialName;
 		url = initialUrl;
 		headers = initialHeaders.length > 0 ? [...initialHeaders] : [];
+		headersOpen = initialHeaders.length > 0;
 	});
 	let showHeaderValues = $state<Record<number, boolean>>({});
 	let error = $state<string | null>(null);
@@ -80,7 +84,11 @@
 			if (header.key.trim() || header.value.trim()) {
 				const headerError = validateHeader(header.key, header.value);
 				if (headerError) {
-					error = `Header ${i + 1}: ${headerError}`;
+					const key = header.key.trim();
+					error =
+						key && headerError === "Header value is required"
+							? `"${key}" value is required`
+							: headerError;
 					return false;
 				}
 			}
@@ -99,12 +107,20 @@
 		onsubmit({
 			name: name.trim(),
 			url: url.trim(),
-			headers: filteredHeaders.length > 0 ? filteredHeaders : undefined,
+			headers:
+				filteredHeaders.length > 0
+					? filteredHeaders.map(({ key, value }) => ({ key, value }))
+					: undefined,
 		});
 	}
 </script>
 
 <div class="space-y-4">
+	<!-- Description (from registry) -->
+	{#if initialDescription}
+		<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-300">{initialDescription}</p>
+	{/if}
+
 	<!-- Server Name -->
 	<div>
 		<label
@@ -140,51 +156,63 @@
 	</div>
 
 	<!-- HTTP Headers -->
-	<details class="rounded-lg border border-gray-200 dark:border-gray-700">
+	<details
+		class="rounded-lg border border-gray-200 dark:border-gray-700"
+		open={headersOpen}
+		ontoggle={(e) => (headersOpen = (e.currentTarget as HTMLDetailsElement).open)}
+	>
 		<summary class="cursor-pointer px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300">
-			HTTP Headers (Optional)
+			HTTP Headers {#if headers.some((h) => h.description)}<span class="text-red-500">*</span
+				>{:else}(Optional){/if}
 		</summary>
 		<div class="space-y-2 border-t border-gray-200 p-4 dark:border-gray-700">
 			{#if headers.length === 0}
 				<p class="text-sm text-gray-500 dark:text-gray-400">No headers configured</p>
 			{:else}
 				{#each headers as header, i}
-					<div class="flex gap-2">
-						<input
-							bind:value={header.key}
-							placeholder="Header name (e.g., Authorization)"
-							class="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-						/>
-						<div class="relative flex-1">
+					<div class="flex flex-col gap-1">
+						<div class="flex gap-2">
 							<input
-								bind:value={header.value}
-								type={showHeaderValues[i] ? "text" : "password"}
-								placeholder="Value"
-								class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 pr-10 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+								bind:value={header.key}
+								placeholder="Header name (e.g., Authorization)"
+								class="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white"
 							/>
-							{#if isSensitiveHeader(header.key)}
+							<div class="relative flex-1">
+								<input
+									bind:value={header.value}
+									type={showHeaderValues[i] ? "text" : "password"}
+									placeholder="Value"
+									class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 pr-10 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+								/>
+								{#if isSensitiveHeader(header.key)}
+									<button
+										type="button"
+										onclick={() => toggleHeaderVisibility(i)}
+										class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+										title={showHeaderValues[i] ? "Hide value" : "Show value"}
+									>
+										{#if showHeaderValues[i]}
+											<IconEyeOff class="size-4" />
+										{:else}
+											<IconEye class="size-4" />
+										{/if}
+									</button>
+								{/if}
+							</div>
+							{#if !header.description}
 								<button
 									type="button"
-									onclick={() => toggleHeaderVisibility(i)}
-									class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-									title={showHeaderValues[i] ? "Hide value" : "Show value"}
+									onclick={() => removeHeader(i)}
+									class="rounded-lg bg-red-100 p-2 text-red-600 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50"
+									title="Remove header"
 								>
-									{#if showHeaderValues[i]}
-										<IconEyeOff class="size-4" />
-									{:else}
-										<IconEye class="size-4" />
-									{/if}
+									<IconTrash class="size-4" />
 								</button>
 							{/if}
 						</div>
-						<button
-							type="button"
-							onclick={() => removeHeader(i)}
-							class="rounded-lg bg-red-100 p-2 text-red-600 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50"
-							title="Remove header"
-						>
-							<IconTrash class="size-4" />
-						</button>
+						{#if header.description}
+							<p class="pl-1 text-xs text-gray-500 dark:text-gray-400">{header.description}</p>
+						{/if}
 					</div>
 				{/each}
 			{/if}
@@ -198,15 +226,17 @@
 				Add Header
 			</button>
 
-			<p class="text-xs text-gray-500 dark:text-gray-400">
-				Common examples:<br />
-				• Bearer token:
-				<code class="rounded bg-gray-100 px-1 dark:bg-gray-700"
-					>Authorization: Bearer YOUR_TOKEN</code
-				><br />
-				• API key:
-				<code class="rounded bg-gray-100 px-1 dark:bg-gray-700">X-API-Key: YOUR_KEY</code>
-			</p>
+			{#if !headers.some((h) => h.description)}
+				<p class="text-xs text-gray-500 dark:text-gray-400">
+					Common examples:<br />
+					• Bearer token:
+					<code class="rounded bg-gray-100 px-1 dark:bg-gray-700"
+						>Authorization: Bearer YOUR_TOKEN</code
+					><br />
+					• API key:
+					<code class="rounded bg-gray-100 px-1 dark:bg-gray-700">X-API-Key: YOUR_KEY</code>
+				</p>
+			{/if}
 		</div>
 	</details>
 
@@ -221,7 +251,7 @@
 				<p class="mt-1 text-[13px] text-amber-800 dark:text-yellow-100/90">
 					They receive your requests (including conversation context and any headers you add) and
 					can run powerful tools on your behalf. Only add servers you trust and review their source.
-					Never share confidental informations.
+					Never share confidential information.
 				</p>
 			</div>
 		</div>
diff --git a/src/lib/components/mcp/MCPServerManager.svelte b/src/lib/components/mcp/MCPServerManager.svelte
index 68d7dd69fa3..e0db5819731 100644
--- a/src/lib/components/mcp/MCPServerManager.svelte
+++ b/src/lib/components/mcp/MCPServerManager.svelte
@@ -3,15 +3,17 @@
 	import Modal from "$lib/components/Modal.svelte";
 	import ServerCard from "./ServerCard.svelte";
 	import AddServerForm from "./AddServerForm.svelte";
+	import MCPServerSearch from "./MCPServerSearch.svelte";
 	import {
 		allMcpServers,
 		selectedServerIds,
 		enabledServersCount,
 		addCustomServer,
+		updateCustomServer,
 		refreshMcpServers,
 		healthCheckServer,
 	} from "$lib/stores/mcpServers";
-	import type { KeyValuePair } from "$lib/types/Tool";
+	import type { KeyValuePair, MCPRegistryEntry, MCPServer } from "$lib/types/Tool";
 	import IconAddLarge from "~icons/carbon/add-large";
 	import IconRefresh from "~icons/carbon/renew";
 	import LucideHammer from "~icons/lucide/hammer";
@@ -26,22 +28,73 @@
 	let { onclose }: Props = $props();
 
 	type View = "list" | "add";
+	type AddTab = "search" | "manual";
+
 	let currentView = $state<View>("list");
+	let addTab = $state<AddTab>("search");
 	let isRefreshing = $state(false);
 
+	let prefillName = $state("");
+	let prefillUrl = $state("");
+	let prefillDescription = $state("");
+	let prefillHeaders = $state<KeyValuePair[]>([]);
+	let editingServer = $state<MCPServer | null>(null);
+
 	const baseServers = $derived($allMcpServers.filter((s) => s.type === "base"));
 	const customServers = $derived($allMcpServers.filter((s) => s.type === "custom"));
 	const enabledCount = $derived($enabledServersCount);
 
 	function handleAddServer(serverData: { name: string; url: string; headers?: KeyValuePair[] }) {
-		addCustomServer(serverData);
+		if (editingServer) {
+			updateCustomServer(editingServer.id, serverData);
+		} else {
+			addCustomServer(serverData);
+		}
+		resetAddState();
 		currentView = "list";
 	}
 
+	function resetAddState() {
+		prefillName = "";
+		prefillUrl = "";
+		prefillDescription = "";
+		prefillHeaders = [];
+		editingServer = null;
+		addTab = "search";
+	}
+
 	function handleCancel() {
+		resetAddState();
 		currentView = "list";
 	}
 
+	function handleEditServer(server: MCPServer) {
+		editingServer = server;
+		prefillName = server.name;
+		prefillUrl = server.url;
+		prefillDescription = "";
+		prefillHeaders = server.headers ?? [];
+		addTab = "manual";
+		currentView = "add";
+	}
+
+	function handleRegistryAdd(entry: MCPRegistryEntry) {
+		prefillName = entry.title ?? entry.name;
+		prefillUrl = entry.url;
+		prefillDescription = entry.description;
+		prefillHeaders = (entry.requiredHeaders ?? []).map((h) => ({
+			key: h.name,
+			value: "",
+			description: h.description,
+		}));
+		addTab = "manual";
+	}
+
+	function switchToAdd() {
+		resetAddState();
+		currentView = "add";
+	}
+
 	async function handleRefresh() {
 		if (isRefreshing) return;
 		isRefreshing = true;
@@ -63,6 +116,8 @@
 			<h2 class="mb-1 text-xl font-semibold text-gray-900 dark:text-gray-200">
 				{#if currentView === "list"}
 					MCP Servers
+				{:else if editingServer}
+					Edit MCP server
 				{:else}
 					Add MCP server
 				{/if}
@@ -70,8 +125,10 @@
 			<p class="text-sm text-gray-600 dark:text-gray-400">
 				{#if currentView === "list"}
 					Manage MCP servers to extend {publicConfig.PUBLIC_APP_NAME} with external tools.
+				{:else if editingServer}
+					Update the configuration for {editingServer.name}.
 				{:else}
-					Add a custom MCP server to {publicConfig.PUBLIC_APP_NAME}.
+					Search the MCP Registry or add a custom server URL.
 				{/if}
 			</p>
 		</div>
@@ -93,7 +150,7 @@
 					<div>
 						<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
 							{$allMcpServers.length}
-							{$allMcpServers.length === 1 ? "server" : "servers"} configured
+							{$allMcpServers.length > 1 ? "servers" : "server"} configured
 						</p>
 						<p class="text-xs text-gray-600 dark:text-gray-400">
 							{enabledCount} enabled
@@ -102,17 +159,19 @@
 				</div>
 
 				<div class="flex gap-2">
+					{#if $allMcpServers.length > 0}
+						<button
+							onclick={handleRefresh}
+							disabled={isRefreshing}
+							class="btn gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+						>
+							<IconRefresh class="size-4 {isRefreshing ? 'animate-spin' : ''}" />
+							{isRefreshing ? "Refreshing…" : "Refresh"}
+						</button>
+					{/if}
 					<button
-						onclick={handleRefresh}
-						disabled={isRefreshing}
-						class="btn gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-					>
-						<IconRefresh class="size-4 {isRefreshing ? 'animate-spin' : ''}" />
-						{isRefreshing ? "Refreshing…" : "Refresh"}
-					</button>
-					<button
-						onclick={() => (currentView = "add")}
-						class="btn flex items-center gap-0.5 rounded-lg bg-blue-600 py-1.5 pl-2 pr-3 text-sm font-medium text-white hover:bg-blue-600"
+						onclick={switchToAdd}
+						class="btn flex items-center gap-0.5 rounded-lg bg-blue-600 py-1.5 pl-2 pr-3 text-sm font-medium text-white hover:bg-blue-700"
 					>
 						<IconAddLarge class="size-4" />
 						Add Server
@@ -151,8 +210,8 @@
 								Add your own MCP servers with custom tools
 							</p>
 							<button
-								onclick={() => (currentView = "add")}
-								class="flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-600"
+								onclick={switchToAdd}
+								class="flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
 							>
 								<IconAddLarge class="size-4" />
 								Add Your First Server
@@ -161,7 +220,11 @@
 					{:else}
 						<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
 							{#each customServers as server (server.id)}
-								<ServerCard {server} isSelected={$selectedServerIds.has(server.id)} />
+								<ServerCard
+									{server}
+									isSelected={$selectedServerIds.has(server.id)}
+									onedit={handleEditServer}
+								/>
 							{/each}
 						</div>
 					{/if}
@@ -179,7 +242,47 @@
 				</div>
 			</div>
 		{:else if currentView === "add"}
-			<AddServerForm onsubmit={handleAddServer} oncancel={handleCancel} />
+			<!-- Tabs -->
+			<div class="mb-4 flex border-b border-gray-200 dark:border-gray-700">
+				<button
+					onclick={() => (addTab = "search")}
+					class="border-b-2 px-4 py-2 text-sm font-medium transition-colors {addTab === 'search'
+						? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+						: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'}"
+				>
+					Search
+				</button>
+				<button
+					onclick={() => (addTab = "manual")}
+					class="border-b-2 px-4 py-2 text-sm font-medium transition-colors {addTab === 'manual'
+						? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+						: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'}"
+				>
+					Add
+				</button>
+			</div>
+
+			{#if addTab === "search"}
+				<MCPServerSearch existingServers={$allMcpServers} onadd={handleRegistryAdd} />
+				<div class="mt-3 flex justify-start">
+					<button
+						onclick={handleCancel}
+						class="rounded-lg bg-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+					>
+						Cancel
+					</button>
+				</div>
+			{:else}
+				<AddServerForm
+					onsubmit={handleAddServer}
+					oncancel={handleCancel}
+					initialName={prefillName}
+					initialUrl={prefillUrl}
+					initialDescription={prefillDescription}
+					initialHeaders={prefillHeaders}
+					submitLabel={editingServer ? "Save Changes" : undefined}
+				/>
+			{/if}
 		{/if}
 	</div>
 </Modal>
diff --git a/src/lib/components/mcp/MCPServerSearch.svelte b/src/lib/components/mcp/MCPServerSearch.svelte
new file mode 100644
index 00000000000..923c560d82f
--- /dev/null
+++ b/src/lib/components/mcp/MCPServerSearch.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import type { MCPRegistryEntry, MCPServer } from "$lib/types/Tool";
+	import RegistryResultCard from "./RegistryResultCard.svelte";
+	import IconSearch from "~icons/carbon/search";
+
+	interface Props {
+		existingServers: MCPServer[];
+		onadd: (entry: MCPRegistryEntry) => void;
+	}
+
+	let { existingServers, onadd }: Props = $props();
+
+	let query = $state("");
+	let results = $state<MCPRegistryEntry[]>([]);
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+	const existingUrls = $derived(new Set(existingServers.map((s) => s.url).filter(Boolean)));
+
+	function isAlreadyAdded(entry: MCPRegistryEntry): boolean {
+		return !!entry.url && existingUrls.has(entry.url);
+	}
+
+	async function fetchResults(q: string) {
+		loading = true;
+		error = null;
+		try {
+			const params = new URLSearchParams({ limit: "20" });
+			if (q) params.set("search", q);
+			const res = await fetch(`/api/mcp/registry?${params}`);
+			if (!res.ok) throw new Error(await res.text());
+			results = (await res.json()) as MCPRegistryEntry[];
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Failed to load registry";
+			results = [];
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleInput() {
+		if (debounceTimer) clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => {
+			fetchResults(query);
+		}, 300);
+	}
+
+	onMount(() => {
+		fetchResults("");
+		return () => {
+			if (debounceTimer) clearTimeout(debounceTimer);
+		};
+	});
+</script>
+
+<div class="flex flex-col gap-3">
+	<!-- Search input -->
+	<div class="relative">
+		<IconSearch class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
+		<input
+			type="search"
+			bind:value={query}
+			oninput={handleInput}
+			placeholder="Search MCP servers (e.g. github, web search, database…)"
+			class="w-full rounded-lg border border-gray-300 bg-white py-2 pl-9 pr-3 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+		/>
+	</div>
+
+	<!-- States -->
+	{#if loading}
+		<div class="flex items-center justify-center py-8 text-sm text-gray-500 dark:text-gray-400">
+			<span class="animate-pulse">Searching registry…</span>
+		</div>
+	{:else if error}
+		<div
+			class="rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20"
+		>
+			<p class="text-sm text-red-800 dark:text-red-200">
+				Registry unavailable: {error}
+			</p>
+		</div>
+	{:else if results.length === 0 && query}
+		<div class="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
+			No servers found for "<strong>{query}</strong>". Try the Manual tab to add a custom URL.
+		</div>
+	{:else}
+		<div class="scrollbar-custom flex max-h-[420px] flex-col gap-2 overflow-y-auto pr-0.5">
+			{#each results as entry (entry.name)}
+				<RegistryResultCard {entry} alreadyAdded={isAlreadyAdded(entry)} {onadd} />
+			{/each}
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/mcp/RegistryResultCard.svelte b/src/lib/components/mcp/RegistryResultCard.svelte
new file mode 100644
index 00000000000..74a96e30120
--- /dev/null
+++ b/src/lib/components/mcp/RegistryResultCard.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { MCPRegistryEntry } from "$lib/types/Tool";
+	import IconAdd from "~icons/carbon/add";
+	import IconCheckmark from "~icons/carbon/checkmark";
+	import IconGlobe from "~icons/carbon/globe";
+
+	interface Props {
+		entry: MCPRegistryEntry;
+		alreadyAdded: boolean;
+		onadd: (entry: MCPRegistryEntry) => void;
+	}
+
+	let { entry, alreadyAdded, onadd }: Props = $props();
+</script>
+
+<div
+	class="flex items-start gap-2 rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-700 dark:bg-gray-800"
+>
+	<!-- Icon -->
+	{#if entry.icons?.[0]?.src}
+		<img
+			src={entry.icons[0].src}
+			alt={entry.name}
+			class="mt-0.5 size-8 shrink-0 rounded object-contain"
+			loading="lazy"
+		/>
+	{:else}
+		<div
+			class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded bg-gray-100 dark:bg-gray-700"
+		>
+			<IconGlobe class="size-4 text-blue-500" />
+		</div>
+	{/if}
+
+	<div class="min-w-0 flex-1">
+		<!-- Title -->
+		<span class="text-sm font-medium text-gray-900 dark:text-gray-100">
+			{entry.title ?? entry.name}
+		</span>
+
+		<!-- Description -->
+		<p class="mt-0.5 line-clamp-2 text-xs text-gray-600 dark:text-gray-400">
+			{entry.description}
+		</p>
+	</div>
+
+	<!-- Action -->
+	<div class="shrink-0">
+		{#if alreadyAdded}
+			<span
+				class="flex items-center gap-1 rounded-lg bg-green-100 px-2.5 py-1.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400"
+			>
+				<IconCheckmark class="size-3" />
+				Added
+			</span>
+		{:else}
+			<button
+				onclick={() => onadd(entry)}
+				class="flex items-center gap-1 rounded-lg bg-blue-600 px-2.5 py-1.5 text-xs font-medium text-white hover:bg-blue-700"
+			>
+				<IconAdd class="size-3" />
+				Add
+			</button>
+		{/if}
+	</div>
+</div>
diff --git a/src/lib/components/mcp/ServerCard.svelte b/src/lib/components/mcp/ServerCard.svelte
index 694cd1ee803..19bb6643333 100644
--- a/src/lib/components/mcp/ServerCard.svelte
+++ b/src/lib/components/mcp/ServerCard.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { MCPServer } from "$lib/types/Tool";
 	import { toggleServer, healthCheckServer, deleteCustomServer } from "$lib/stores/mcpServers";
+	import IconEdit from "~icons/carbon/edit";
 	import IconCheckmark from "~icons/carbon/checkmark-filled";
 	import IconWarning from "~icons/carbon/warning-filled";
 	import IconPending from "~icons/carbon/pending-filled";
@@ -14,9 +15,10 @@
 	interface Props {
 		server: MCPServer;
 		isSelected: boolean;
+		onedit?: (server: MCPServer) => void;
 	}
 
-	let { server, isSelected }: Props = $props();
+	let { server, isSelected, onedit }: Props = $props();
 
 	let isLoadingHealth = $state(false);
 
@@ -171,6 +173,13 @@
 			{/if}
 
 			{#if server.type === "custom"}
+				<button
+					onclick={() => onedit?.(server)}
+					class="flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-2.5 py-[.29rem] text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+				>
+					<IconEdit class="size-3" />
+					Edit
+				</button>
 				<button
 					onclick={handleDelete}
 					class="flex items-center gap-1.5 rounded-lg border border-red-500/15 bg-red-50 px-2.5 py-[.29rem] text-xs font-medium text-red-600 hover:bg-red-100 dark:border-red-500/25 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50"
diff --git a/src/lib/types/Tool.ts b/src/lib/types/Tool.ts
index e2172e17ce0..ccbc845de02 100644
--- a/src/lib/types/Tool.ts
+++ b/src/lib/types/Tool.ts
@@ -43,6 +43,7 @@ export interface ToolFront {
 export interface KeyValuePair {
 	key: string;
 	value: string;
+	description?: string;
 }
 
 export type ServerStatus = "connected" | "connecting" | "disconnected" | "error";
@@ -72,3 +73,25 @@ export interface MCPServerApi {
 	url: string;
 	headers?: KeyValuePair[];
 }
+
+export interface MCPRegistryIcon {
+	src: string;
+	mimeType?: "image/png" | "image/jpeg" | "image/jpg" | "image/svg+xml" | "image/webp";
+	sizes?: string[];
+	theme?: "light" | "dark";
+}
+
+export interface MCPRegistryHeader {
+	name: string;
+	description?: string;
+	isSecret?: boolean;
+}
+
+export interface MCPRegistryEntry {
+	name: string;
+	title?: string;
+	description: string;
+	url: string;
+	icons?: MCPRegistryIcon[];
+	requiredHeaders?: MCPRegistryHeader[];
+}
diff --git a/src/routes/api/mcp/registry/+server.ts b/src/routes/api/mcp/registry/+server.ts
new file mode 100644
index 00000000000..9bf0c31429c
--- /dev/null
+++ b/src/routes/api/mcp/registry/+server.ts
@@ -0,0 +1,121 @@
+import type { MCPRegistryEntry, MCPRegistryIcon } from "$lib/types/Tool";
+
+const REGISTRY_BASE_URL = "https://registry.modelcontextprotocol.io";
+const CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes
+
+interface CacheEntry {
+	data: MCPRegistryEntry[];
+	timestamp: number;
+}
+
+// Raw shapes returned by the official MCP Registry API
+interface RegistryRemoteHeader {
+	name: string;
+	description?: string;
+	isRequired?: boolean;
+	isSecret?: boolean;
+}
+
+interface RegistryRemote {
+	type: string;
+	url: string;
+	headers?: RegistryRemoteHeader[];
+}
+
+export interface RegistryServer {
+	name: string;
+	title?: string;
+	description?: string;
+	remotes?: RegistryRemote[];
+	icons?: MCPRegistryIcon[];
+}
+
+interface RegistryResponseItem {
+	server: RegistryServer;
+	_meta?: unknown;
+}
+
+interface RegistryResponse {
+	servers: RegistryResponseItem[];
+	metadata?: { nextCursor?: string; count?: number };
+}
+
+const cache = new Map<string, CacheEntry>();
+
+function normalizeServer(server: RegistryServer): MCPRegistryEntry | null {
+	// Prefer StreamableHTTP, fall back to SSE, then any remote
+	const remote =
+		server.remotes?.find((r) => r.type === "streamable-http" || r.type === "http") ??
+		server.remotes?.find((r) => r.type === "sse") ??
+		server.remotes?.[0];
+
+	// Only include servers with a remote URL (skip package-only servers)
+	if (!remote?.url) return null;
+
+	const requiredHeaders = remote.headers
+		?.filter((h) => h.isRequired)
+		.map((h) => ({ name: h.name, description: h.description, isSecret: h.isSecret }));
+
+	return {
+		name: server.name,
+		title: server.title,
+		description: server.description ?? "",
+		url: remote.url,
+		icons: server.icons,
+		...(requiredHeaders?.length ? { requiredHeaders } : {}),
+	};
+}
+
+async function fetchFromRegistry(search: string, limit: number): Promise<MCPRegistryEntry[]> {
+	// Request more entries than needed since we filter to remote-only
+	const fetchLimit = Math.min(limit * 5, 100);
+	const url = new URL(`${REGISTRY_BASE_URL}/v0.1/servers`);
+	if (search) url.searchParams.set("search", search);
+	url.searchParams.set("limit", String(fetchLimit));
+
+	const response = await fetch(url.toString(), {
+		headers: { Accept: "application/json" },
+		signal: AbortSignal.timeout(10_000),
+	});
+
+	if (!response.ok) {
+		throw new Error(`Registry API returned ${response.status}`);
+	}
+
+	const data = (await response.json()) as RegistryResponse;
+	const entries: MCPRegistryEntry[] = [];
+
+	const seen = new Set<string>();
+	for (const item of data.servers) {
+		const entry = normalizeServer(item.server);
+		if (entry && !seen.has(entry.name)) {
+			seen.add(entry.name);
+			entries.push(entry);
+			if (entries.length >= limit) break;
+		}
+	}
+
+	return entries;
+}
+
+export async function GET({ url }: { url: URL }) {
+	const search = url.searchParams.get("search") ?? "";
+	const limit = Math.min(100, Number(url.searchParams.get("limit")) || 20);
+
+	const cacheKey = `${search}|${limit}`;
+	const cached = cache.get(cacheKey);
+	const now = Date.now();
+
+	if (cached && now - cached.timestamp < CACHE_TTL_MS) {
+		return Response.json(cached.data);
+	}
+
+	try {
+		const entries = await fetchFromRegistry(search, limit);
+		cache.set(cacheKey, { data: entries, timestamp: now });
+		return Response.json(entries);
+	} catch (err) {
+		console.error("MCP registry fetch failed:", err);
+		return Response.json({ error: "Registry unavailable" }, { status: 502 });
+	}
+}
diff --git a/src/routes/api/mcp/registry/registry.spec.ts b/src/routes/api/mcp/registry/registry.spec.ts
new file mode 100644
index 00000000000..41953cd772f
--- /dev/null
+++ b/src/routes/api/mcp/registry/registry.spec.ts
@@ -0,0 +1,182 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import type { RegistryServer } from "./+server";
+
+const mockFetch = vi.fn();
+vi.stubGlobal("fetch", mockFetch);
+
+function makeRegistryResponse(servers: RegistryServer[]) {
+	return {
+		ok: true,
+		json: async () => ({
+			servers: servers.map((s) => ({ server: s, _meta: {} })),
+			metadata: { count: servers.length },
+		}),
+	};
+}
+
+describe("GET /api/mcp/registry", () => {
+	beforeEach(() => {
+		vi.resetModules();
+		mockFetch.mockReset();
+	});
+
+	it("returns normalized entries with remote URL", async () => {
+		mockFetch.mockResolvedValueOnce(
+			makeRegistryResponse([
+				{
+					name: "io.github/test-server",
+					title: "Test Server",
+					description: "A test MCP server",
+					remotes: [{ type: "streamable-http", url: "https://test.example.com/mcp" }],
+				},
+			])
+		);
+
+		const { GET } = await import("./+server");
+		const url = new URL("http://localhost/api/mcp/registry?search=test");
+		const response = await GET({ url });
+		const data = await response.json();
+
+		expect(data).toHaveLength(1);
+		expect(data[0].name).toBe("io.github/test-server");
+		expect(data[0].title).toBe("Test Server");
+		expect(data[0].url).toBe("https://test.example.com/mcp");
+	});
+
+	it("excludes servers with no remote URL", async () => {
+		mockFetch.mockResolvedValueOnce(
+			makeRegistryResponse([
+				{
+					name: "io.github/npm-only",
+					description: "NPM only server",
+					remotes: [],
+				},
+				{
+					name: "io.github/with-remote",
+					description: "Has a remote",
+					remotes: [{ type: "sse", url: "https://remote.example.com/mcp" }],
+				},
+			])
+		);
+
+		const { GET } = await import("./+server");
+		const url = new URL("http://localhost/api/mcp/registry?search=exclude-pkg-test");
+		const response = await GET({ url });
+		const data = await response.json();
+
+		expect(data).toHaveLength(1);
+		expect(data[0].name).toBe("io.github/with-remote");
+	});
+
+	it("returns 502 when registry is unavailable and no cache", async () => {
+		mockFetch.mockRejectedValueOnce(new Error("Network failure"));
+
+		const { GET } = await import("./+server");
+		const url = new URL("http://localhost/api/mcp/registry?search=unique-query-no-cache-xyz");
+		const response = await GET({ url });
+
+		expect(response.status).toBe(502);
+		const body = await response.json();
+		expect(body.error).toBeDefined();
+	});
+
+	it("prefers SSE transport when no streamable-http remote", async () => {
+		mockFetch.mockResolvedValueOnce(
+			makeRegistryResponse([
+				{
+					name: "io.github/sse-server",
+					description: "SSE server",
+					remotes: [{ type: "sse", url: "https://sse.example.com/mcp" }],
+				},
+			])
+		);
+
+		const { GET } = await import("./+server");
+		const url = new URL("http://localhost/api/mcp/registry?search=sse-server-unique-xyz");
+		const response = await GET({ url });
+		const data = await response.json();
+
+		expect(data[0].url).toBe("https://sse.example.com/mcp");
+	});
+
+	it("prefers streamable-http over sse when both present", async () => {
+		mockFetch.mockResolvedValueOnce(
+			makeRegistryResponse([
+				{
+					name: "io.github/multi-transport",
+					description: "Multiple transports",
+					remotes: [
+						{ type: "sse", url: "https://sse.example.com/mcp" },
+						{ type: "streamable-http", url: "https://http.example.com/mcp" },
+					],
+				},
+			])
+		);
+
+		const { GET } = await import("./+server");
+		const url = new URL("http://localhost/api/mcp/registry?search=multi-transport-unique-xyz");
+		const response = await GET({ url });
+		const data = await response.json();
+
+		expect(data[0].url).toBe("https://http.example.com/mcp");
+	});
+
+	it("includes required headers from selected remote", async () => {
+		mockFetch.mockResolvedValueOnce(
+			makeRegistryResponse([
+				{
+					name: "io.github/auth-server",
+					description: "Server requiring auth",
+					remotes: [
+						{
+							type: "streamable-http",
+							url: "https://auth.example.com/mcp",
+							headers: [
+								{
+									name: "Authorization",
+									description: "Bearer token",
+									isRequired: true,
+									isSecret: true,
+								},
+								{
+									name: "X-Optional",
+									description: "Optional header",
+									isRequired: false,
+								},
+							],
+						},
+					],
+				},
+			])
+		);
+
+		const { GET } = await import("./+server");
+		const url = new URL("http://localhost/api/mcp/registry?search=auth-server-unique-xyz");
+		const response = await GET({ url });
+		const data = await response.json();
+
+		expect(data[0].requiredHeaders).toHaveLength(1);
+		expect(data[0].requiredHeaders[0].name).toBe("Authorization");
+		expect(data[0].requiredHeaders[0].description).toBe("Bearer token");
+		expect(data[0].requiredHeaders[0].isSecret).toBe(true);
+	});
+
+	it("omits requiredHeaders when remote has none", async () => {
+		mockFetch.mockResolvedValueOnce(
+			makeRegistryResponse([
+				{
+					name: "io.github/no-auth-server",
+					description: "No auth needed",
+					remotes: [{ type: "streamable-http", url: "https://noauth.example.com/mcp" }],
+				},
+			])
+		);
+
+		const { GET } = await import("./+server");
+		const url = new URL("http://localhost/api/mcp/registry?search=no-auth-unique-xyz");
+		const response = await GET({ url });
+		const data = await response.json();
+
+		expect(data[0].requiredHeaders).toBeUndefined();
+	});
+});

From 7316cce931de9e089183251fae5cc8a286eb915a Mon Sep 17 00:00:00 2001
From: vvnsrzn <vivian.sarazin@gmail.com>
Date: Sun, 22 Mar 2026 13:52:19 +0100
Subject: [PATCH 2/2] refactor: update server header handling to use
 HeaderEntry type and add required field

---
 src/lib/components/mcp/AddServerForm.svelte   | 33 +++++++++++--------
 .../components/mcp/MCPServerManager.svelte    |  1 +
 src/lib/types/Tool.ts                         | 10 ++++--
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/mcp/AddServerForm.svelte b/src/lib/components/mcp/AddServerForm.svelte
index 0b80663aca0..faea7dace05 100644
--- a/src/lib/components/mcp/AddServerForm.svelte
+++ b/src/lib/components/mcp/AddServerForm.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { KeyValuePair } from "$lib/types/Tool";
+	import type { HeaderEntry } from "$lib/types/Tool";
 	import {
 		validateMcpServerUrl,
 		validateHeader,
@@ -12,12 +12,12 @@
 	import IconWarning from "~icons/carbon/warning";
 
 	interface Props {
-		onsubmit: (server: { name: string; url: string; headers?: KeyValuePair[] }) => void;
+		onsubmit: (server: { name: string; url: string; headers?: HeaderEntry[] }) => void;
 		oncancel: () => void;
 		initialName?: string;
 		initialUrl?: string;
 		initialDescription?: string;
-		initialHeaders?: KeyValuePair[];
+		initialHeaders?: HeaderEntry[];
 		submitLabel?: string;
 	}
 
@@ -33,7 +33,7 @@
 
 	let name = $state("");
 	let url = $state("");
-	let headers = $state<KeyValuePair[]>([]);
+	let headers = $state<HeaderEntry[]>([]);
 	let headersOpen = $state(false);
 
 	$effect.pre(() => {
@@ -79,15 +79,20 @@
 		}
 
 		// Validate headers
-		for (let i = 0; i < headers.length; i++) {
-			const header = headers[i];
-			if (header.key.trim() || header.value.trim()) {
-				const headerError = validateHeader(header.key, header.value);
+		for (const header of headers) {
+			const { key, value, required } = header;
+			const keyInput = key.trim();
+			const valueInput = value.trim();
+			if (required && !valueInput) {
+				error = `"${keyInput}" is required`;
+				return false;
+			}
+			if (keyInput || valueInput) {
+				const headerError = validateHeader(key, value);
 				if (headerError) {
-					const key = header.key.trim();
 					error =
-						key && headerError === "Header value is required"
-							? `"${key}" value is required`
+						keyInput && headerError === "Header value is required"
+							? `${keyInput} value is required`
 							: headerError;
 					return false;
 				}
@@ -162,7 +167,7 @@
 		ontoggle={(e) => (headersOpen = (e.currentTarget as HTMLDetailsElement).open)}
 	>
 		<summary class="cursor-pointer px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300">
-			HTTP Headers {#if headers.some((h) => h.description)}<span class="text-red-500">*</span
+			HTTP Headers {#if headers.some((h) => h.required)}<span class="text-red-500">*</span
 				>{:else}(Optional){/if}
 		</summary>
 		<div class="space-y-2 border-t border-gray-200 p-4 dark:border-gray-700">
@@ -199,7 +204,7 @@
 									</button>
 								{/if}
 							</div>
-							{#if !header.description}
+							{#if !header.required}
 								<button
 									type="button"
 									onclick={() => removeHeader(i)}
@@ -226,7 +231,7 @@
 				Add Header
 			</button>
 
-			{#if !headers.some((h) => h.description)}
+			{#if !headers.some((h) => h.required)}
 				<p class="text-xs text-gray-500 dark:text-gray-400">
 					Common examples:<br />
 					• Bearer token:
diff --git a/src/lib/components/mcp/MCPServerManager.svelte b/src/lib/components/mcp/MCPServerManager.svelte
index e0db5819731..a0785ec9078 100644
--- a/src/lib/components/mcp/MCPServerManager.svelte
+++ b/src/lib/components/mcp/MCPServerManager.svelte
@@ -86,6 +86,7 @@
 			key: h.name,
 			value: "",
 			description: h.description,
+			required: true,
 		}));
 		addTab = "manual";
 	}
diff --git a/src/lib/types/Tool.ts b/src/lib/types/Tool.ts
index ccbc845de02..2d3c104c2bd 100644
--- a/src/lib/types/Tool.ts
+++ b/src/lib/types/Tool.ts
@@ -39,11 +39,15 @@ export interface ToolFront {
 	timeToUseMS?: number;
 }
 
-// MCP Server types
 export interface KeyValuePair {
 	key: string;
 	value: string;
+}
+
+// MCP Server types
+export interface HeaderEntry extends KeyValuePair {
 	description?: string;
+	required?: boolean;
 }
 
 export type ServerStatus = "connected" | "connecting" | "disconnected" | "error";
@@ -59,7 +63,7 @@ export interface MCPServer {
 	name: string;
 	url: string;
 	type: "base" | "custom";
-	headers?: KeyValuePair[];
+	headers?: HeaderEntry[];
 	env?: KeyValuePair[];
 	status?: ServerStatus;
 	isLocked?: boolean;
@@ -71,7 +75,7 @@ export interface MCPServer {
 
 export interface MCPServerApi {
 	url: string;
-	headers?: KeyValuePair[];
+	headers?: HeaderEntry[];
 }
 
 export interface MCPRegistryIcon {