1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
import { Button } from "@ui/components/button"
import {
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@ui/components/dialog"
import { Input } from "@ui/components/input"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@ui/components/select"
import { Label } from "@ui/components/label"
import { CopyIcon } from "lucide-react"
import { useState } from "react"
import { toast } from "sonner"
import { analytics } from "@/lib/analytics"
import { $fetch } from "@repo/lib/api"
import type { Project } from "@repo/lib/types"
import { useQuery } from "@tanstack/react-query"
const clients = {
cursor: "Cursor",
claude: "Claude Desktop",
vscode: "VSCode",
cline: "Cline",
"roo-cline": "Roo Cline",
witsy: "Witsy",
enconvo: "Enconvo",
"gemini-cli": "Gemini CLI",
"claude-code": "Claude Code",
} as const
export function InstallationDialogContent() {
const [client, setClient] = useState<keyof typeof clients>("cursor")
const [selectedProject, setSelectedProject] = useState<string | null>("none")
// Fetch projects
const { data: projects = [], isLoading: isLoadingProjects } = useQuery({
queryKey: ["projects"],
queryFn: async () => {
const response = await $fetch("@get/projects")
if (response.error) {
throw new Error(response.error?.message || "Failed to load projects")
}
return response.data?.projects || []
},
staleTime: 30 * 1000,
})
// Generate installation command based on selected project
function generateInstallCommand() {
let command = `npx -y install-mcp@latest https://mcp.supermemory.ai/mcp --client ${client} --oauth=yes`
if (selectedProject && selectedProject !== "none") {
// Remove the "sm_project_" prefix from the containerTag
const projectId = selectedProject.replace(/^sm_project_/, "")
command += ` --project ${projectId}`
}
return command
}
return (
<DialogContent>
<DialogHeader>
<DialogTitle>Install the supermemory MCP Server</DialogTitle>
<DialogDescription>
Select the app and project you want to install supermemory MCP to,
then run the following command:
</DialogDescription>
</DialogHeader>
<div className="space-y-4">
<div className="space-y-2">
<Label htmlFor="client-select">Client Application</Label>
<Select
onValueChange={(value) => setClient(value as keyof typeof clients)}
value={client}
>
<SelectTrigger id="client-select" className="w-full">
<SelectValue placeholder="Select client" />
</SelectTrigger>
<SelectContent>
{Object.entries(clients).map(([key, value]) => (
<SelectItem key={key} value={key}>
{value}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="project-select">Target Project (Optional)</Label>
<Select
onValueChange={setSelectedProject}
value={selectedProject || "none"}
disabled={isLoadingProjects}
>
<SelectTrigger id="project-select" className="w-full">
<SelectValue placeholder="Select project" />
</SelectTrigger>
<SelectContent className="bg-black/90 backdrop-blur-xl border-white/10">
<SelectItem value="none" className="text-white hover:bg-white/10">
Auto-select project
</SelectItem>
<SelectItem
value="sm_project_default"
className="text-white hover:bg-white/10"
>
Default Project
</SelectItem>
{projects
.filter((p: Project) => p.containerTag !== "sm_project_default")
.map((project: Project) => (
<SelectItem
key={project.id}
value={project.containerTag}
className="text-white hover:bg-white/10"
>
{project.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="command-input">Installation Command</Label>
<Input
id="command-input"
className="font-mono text-xs!"
readOnly
value={generateInstallCommand()}
/>
</div>
</div>
<Button
onClick={() => {
const command = generateInstallCommand()
navigator.clipboard.writeText(command)
analytics.mcpInstallCmdCopied()
toast.success("Copied to clipboard!")
}}
>
<CopyIcon className="size-4" /> Copy Installation Command
</Button>
</DialogContent>
)
}
|