scriptoriumadmin/supermemory
1
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-09-06 08:16:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: support project-specific installation commands (#390)

Browse source 
This PR simply updates the installation dialog to allow you to choose a project which the command installs the MCP for.
![image.png](https://app.graphite.dev/user-attachments/assets/f1136780-2005-40a2-96bb-31b98791600d.png)
This commit is contained in:
alexf37 2025-08-27 17:15:26 +00:00 • committed by Mahesh Sanikommmu
parent a10baaefbd
commit f826cbcf07
1 changed files with 107 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
apps/web/components/views/mcp/installation-dialog-content.tsx
View file

@ -13,10 +13,13 @@ import {
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 { useQuery } from "@tanstack/react-query";
const clients = {
cursor: "Cursor",
@ -30,44 +33,124 @@ const clients = {
"claude-code": "Claude Code",
} as const;
interface Project {
id: string;
name: string;
containerTag: string;
createdAt: string;
updatedAt: string;
isExperimental?: boolean;
}
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://api.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 you want to install supermemory MCP to, then run the
Select the app and project you want to install supermemory MCP to, then run the
following command:
</DialogDescription>
</DialogHeader>
<div className="flex gap-2 items-center">
<Input
className="font-mono text-xs!"
readOnly
value={`npx -y install-mcp@latest https://api.supermemory.ai/mcp --client ${client} --oauth=yes`}
/>
<Select
onValueChange={(value) => setClient(value as keyof typeof clients)}
value={client}
>
<SelectTrigger className="w-48">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
{Object.entries(clients).map(([key, value]) => (
<SelectItem key={key} value={key}>
{value}
<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>
))}
</SelectContent>
</Select>
<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={() => {
navigator.clipboard.writeText(
`npx -y install-mcp@latest https://api.supermemory.ai/mcp --client ${client} --oauth=yes`,
);
const command = generateInstallCommand();
navigator.clipboard.writeText(command);
analytics.mcpInstallCmdCopied();
toast.success("Copied to clipboard!");
}}