mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-05-18 23:36:00 +00:00
feat: add mcp url to clients in connect ai modal (#406)
This commit is contained in:
MaheshtheDev
parent
48e23c13ed
commit
bf2d8e2f5f
2 changed files with 81 additions and 44 deletions
|
|
@ -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">
|
||||
|
|
|
|||
5
apps/web/public/mcp-icon.svg
Normal file
5
apps/web/public/mcp-icon.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 910 B |
Loading…
Add table
Add a link
Reference in a new issue