From bf2d8e2f5f9705787601bf2199eb2599712b7bfd Mon Sep 17 00:00:00 2001
From: MaheshtheDev <38828053+MaheshtheDev@users.noreply.github.com>
Date: Mon, 1 Sep 2025 23:43:54 +0000
Subject: [PATCH] feat: add mcp url to clients in connect ai modal (#406)

![image.png](https://app.graphite.dev/user-attachments/assets/7f4136fc-2d10-46e9-a837-b09d2d6486f8.png)
---
 apps/web/components/connect-ai-modal.tsx | 120 ++++++++++++++---------
 apps/web/public/mcp-icon.svg             |   5 +
 2 files changed, 81 insertions(+), 44 deletions(-)
 create mode 100644 apps/web/public/mcp-icon.svg

diff --git a/apps/web/components/connect-ai-modal.tsx b/apps/web/components/connect-ai-modal.tsx
index 5099deed..f3008796 100644
--- a/apps/web/components/connect-ai-modal.tsx
+++ b/apps/web/components/connect-ai-modal.tsx
@@ -35,6 +35,7 @@ const clients = {
 	cline: "Cline",
 	"gemini-cli": "Gemini CLI",
 	"claude-code": "Claude Code",
+	"mcp-url": "MCP URL",
 	"roo-cline": "Roo Cline",
 	witsy: "Witsy",
 	enconvo: "Enconvo",
@@ -195,9 +196,9 @@ export function ConnectAIModal({
 							<h3 className="text-sm font-medium">Select Your AI Client</h3>
 						</div>
 
-						<div className="space-x-2">
+						<div className="space-x-2 space-y-2">
 							{Object.entries(clients)
-								.slice(0, 6)
+								.slice(0, 7)
 								.map(([key, clientName]) => (
 									<button
 										className={`pr-3 pl-1 rounded-full border cursor-pointer transition-all ${
@@ -215,7 +216,7 @@ export function ConnectAIModal({
 											<div className="w-8 h-8 flex items-center justify-center">
 												<Image
 													alt={clientName}
-													className="rounded object-contain"
+													className="rounded object-contain text-white fill-white"
 													height={20}
 													onError={(e) => {
 														const target = e.target as HTMLImageElement;
@@ -234,7 +235,7 @@ export function ConnectAIModal({
 															parent.appendChild(fallback);
 														}
 													}}
-													src={`/mcp-supported-tools/${key === "claude-code" ? "claude" : key}.png`}
+													src={key === "mcp-url" ? "/mcp-icon.svg" : `/mcp-supported-tools/${key === "claude-code" ? "claude" : key}.png`}
 													width={20}
 												/>
 											</div>
@@ -247,7 +248,7 @@ export function ConnectAIModal({
 						</div>
 					</div>
 
-					{/* Step 2: Project Selection */}
+					{/* Step 2: Project Selection or MCP URL */}
 					{selectedClient && (
 						<div className="space-y-4">
 							<div className="flex items-center gap-3">
@@ -255,53 +256,84 @@ export function ConnectAIModal({
 									2
 								</div>
 								<h3 className="text-sm font-medium">
-									Select Target Project (Optional)
+									{selectedClient === "mcp-url"
+										? "MCP Server URL"
+										: "Select Target Project (Optional)"}
 								</h3>
 							</div>
 
-							<div className="max-w-md">
-								<Select
-									disabled={isLoadingProjects}
-									onValueChange={setSelectedProject}
-									value={selectedProject || "none"}
-								>
-									<SelectTrigger className="w-full">
-										<SelectValue placeholder="Select project" />
-									</SelectTrigger>
-									<SelectContent className="bg-black/90 backdrop-blur-xl border-white/10">
-										<SelectItem
-											className="text-white hover:bg-white/10"
-											value="none"
+							{selectedClient === "mcp-url" ? (
+								<div className="space-y-2">
+									<div className="relative">
+										<Input
+											className="font-mono text-xs w-full pr-10"
+											readOnly
+											value="https://api.supermemory.ai/mcp"
+										/>
+										<Button
+											className="absolute top-[-1px] right-0 cursor-pointer"
+											onClick={() => {
+												navigator.clipboard.writeText(
+													"https://api.supermemory.ai/mcp",
+												);
+												analytics.mcpInstallCmdCopied();
+												toast.success("Copied to clipboard!");
+											}}
+											variant="ghost"
 										>
-											Auto-select project
-										</SelectItem>
-										<SelectItem
-											className="text-white hover:bg-white/10"
-											value="sm_project_default"
-										>
-											Default Project
-										</SelectItem>
-										{projects
-											.filter(
-												(p: Project) => p.containerTag !== "sm_project_default",
-											)
-											.map((project: Project) => (
-												<SelectItem
-													className="text-white hover:bg-white/10"
-													key={project.id}
-													value={project.containerTag}
-												>
-													{project.name}
-												</SelectItem>
-											))}
-									</SelectContent>
-								</Select>
-							</div>
+											<CopyIcon className="size-4" />
+										</Button>
+									</div>
+									<p className="text-xs text-white/50">
+										Use this URL to configure supermemory in your AI assistant
+									</p>
+								</div>
+							) : (
+								<div className="max-w-md">
+									<Select
+										disabled={isLoadingProjects}
+										onValueChange={setSelectedProject}
+										value={selectedProject || "none"}
+									>
+										<SelectTrigger className="w-full">
+											<SelectValue placeholder="Select project" />
+										</SelectTrigger>
+										<SelectContent className="bg-black/90 backdrop-blur-xl border-white/10">
+											<SelectItem
+												className="text-white hover:bg-white/10"
+												value="none"
+											>
+												Auto-select project
+											</SelectItem>
+											<SelectItem
+												className="text-white hover:bg-white/10"
+												value="sm_project_default"
+											>
+												Default Project
+											</SelectItem>
+											{projects
+												.filter(
+													(p: Project) =>
+														p.containerTag !== "sm_project_default",
+												)
+												.map((project: Project) => (
+													<SelectItem
+														className="text-white hover:bg-white/10"
+														key={project.id}
+														value={project.containerTag}
+													>
+														{project.name}
+													</SelectItem>
+												))}
+										</SelectContent>
+									</Select>
+								</div>
+							)}
 						</div>
 					)}
 
 					{/* Step 3: Command Line */}
-					{selectedClient && (
+					{selectedClient && selectedClient !== "mcp-url" && (
 						<div className="space-y-4">
 							<div className="flex items-center gap-3">
 								<div className="w-8 h-8 rounded-full bg-white/10 text-white/60 flex items-center justify-center text-sm font-medium">
diff --git a/apps/web/public/mcp-icon.svg b/apps/web/public/mcp-icon.svg
new file mode 100644
index 00000000..fd3ed5db
--- /dev/null
+++ b/apps/web/public/mcp-icon.svg
@@ -0,0 +1,5 @@
+<svg fill="white" fillRule="evenodd" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<title>ModelContextProtocol</title>
+	<path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z" />
+	<path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z" />
+</svg>
\ No newline at end of file