MCP Manager for Claude Desktop

A simple web GUI to manage Model Context Protocol (MCP) servers for the Claude Desktop app on MacOS easily. Just follow the instructions and paste a few commands to give your Claude app instant superpowers.

MCP Manager for Claude Desktop

} > }>({ mcpServers: {} }) const [uploadStatus, setUploadStatus] = useState< "idle" | "success" | "error" >("idle") const [isInstructionsOpen, setIsInstructionsOpen] = useState(true) const handleJsonInput = (e: React.ChangeEvent) => { try { const content = JSON.parse(e.target.value) setJsonContent(content) setUploadStatus("success") setIsInstructionsOpen(false) // Close accordion on successful upload } catch (error) { console.error("Error parsing JSON:", error) setUploadStatus("error") } } const handleServerAdd = (serverType: keyof typeof SERVER_CONFIGS) => { const serverConfig = SERVER_CONFIGS[serverType] // Ensure we only add servers with required properties const newServer = { command: serverConfig.command as string, args: serverConfig.args as string[], ...(serverConfig.env && { env: serverConfig.env }) } setJsonContent({ ...jsonContent, mcpServers: { ...jsonContent.mcpServers, [serverType]: newServer } }) } const handleServerRemove = (serverType: string) => { // Remove from mcpServers if present if (jsonContent.mcpServers[serverType]) { const { [serverType]: _, ...rest } = jsonContent.mcpServers setJsonContent({ ...jsonContent, mcpServers: rest }) } } return (

MCP Manager for Claude Desktop

Give Claude access to private data, APIs, and other services using the Model Context Protocol so it can answer questions and perform actions on your behalf.{" "}

In a nutshell, MCP servers are like plugins that give Claude (the "client") prompts, resources, and tools to perform actions on your behalf. Read the{" "} MCP docs {" "} or check out{" "} Anthropic's announcement {" "} to learn more.

This is a simple, web-based GUI to help you install and manage MCP servers in your Claude App.
This runs client-side in your browser so your data will never leave your computer.

{Object.keys(jsonContent).length > 0 && uploadStatus === "success" && (

} > }} onUpdate={setJsonContent} onServerAdd={handleServerAdd} onServerRemove={handleServerRemove} /> {Object.keys(jsonContent.mcpServers).length > 0 && ( )}

)}

This project is not affiliated with Anthropic. All logos are trademarks of their respective owners.

) } export default App ================================================ FILE: src/components/applying-instructions.tsx ================================================ import { TerminalCommand } from "@/components/terminal-command" import { SERVER_CONFIGS } from "@/server-configs" import type { ServerConfig } from "@/server-configs" type RuntimeServerConfig = { command: string args: string[] env?: Record } type ApplyingInstructionsProps = { jsonContent: { mcpServers: Record cloudflare?: unknown } } export function ApplyingInstructions({ jsonContent }: ApplyingInstructionsProps) { const serversNeedingSetup = Object.keys(jsonContent.mcpServers).filter( (serverType) => SERVER_CONFIGS[serverType as keyof typeof SERVER_CONFIGS] ?.setupCommands ) // Helper function to modify the JSON content with absolute paths const getJsonWithAbsolutePaths = () => { const { cloudflare: _, ...modifiedContent } = jsonContent for (const [serverType, config] of Object.entries( modifiedContent.mcpServers )) { const serverConfig = SERVER_CONFIGS[serverType as keyof typeof SERVER_CONFIGS] if (serverConfig?.setupCommands) { // Update the args to use the shell variable expansion syntax config.args = config.args?.map((arg) => { if (arg.includes("index.js")) { switch (serverType) { case "exa": return "$HOME_DIR/mcp-servers/exa-mcp-server-main/build/index.js" case "browserbase": return "$HOME_DIR/mcp-servers/mcp-server-browserbase-main/browserbase/dist/index.js" default: return arg } } return arg }) } } return modifiedContent } return (

Apply your changes

Step 1: Install Node.js and uv by running these commands (if not already installed)

> ~/.zshrc && source ~/.zshrc && fnm use --install-if-missing 22 && node -v' } /> If the command above fails, install Node.js by downloading the installer from{" "} https://nodejs.org/en/download/prebuilt-installer

Step 2: Save your MCP servers to Claude by running:

"$HOME_DIR/Library/Application Support/Claude/claude_desktop_config.json"`} />

{serversNeedingSetup.length > 0 && (

Step 3: Some servers require additional setup. Run the following commands:

{serversNeedingSetup.map((serverType) => (

{serverType.charAt(0).toUpperCase() + serverType.slice(1)} :

))}

)}

Step {serversNeedingSetup.length > 0 ? "4" : "3"}: Restart Claude.app

) } ================================================ FILE: src/components/loading-instructions.tsx ================================================ import { TerminalCommand } from "@/components/terminal-command" import { Check, XCircle } from "lucide-react" import type { ChangeEvent } from "react" interface LoadingInstructionsProps { isOpen: boolean onOpenChange: (isOpen: boolean) => void onJsonInput: (e: ChangeEvent) => void uploadStatus: "idle" | "success" | "error" } export function LoadingInstructions({ isOpen, onOpenChange, onJsonInput, uploadStatus }: LoadingInstructionsProps) { const command = "test -f ~/Library/Application\\ Support/Claude/claude_desktop_config.json && pbcopy < ~/Library/Application\\ Support/Claude/claude_desktop_config.json || (echo '{\\n \"mcpServers\": {}\\n}' | tee ~/Library/Application\\ Support/Claude/claude_desktop_config.json | pbcopy)" return (

onOpenChange(e.target.checked)} aria-label="MacOS Instructions" />

MacOS Instructions

Step 1: Run this terminal command to copy your current MCP config to the clipboard.

If you've never used MCP before, this will create a blank config file and copy its contents.

Step 2: Paste your config below.

{uploadStatus === "success" && (
										<div className="mt-2 flex items-center text-primary">
											<Check className="w-5 h-5" />
											<span className="ml-2">
												Valid MCP Configuration
											</span>
										</div>
									)}
									{uploadStatus === "error" && (
										<div className="mt-2 flex items-center text-error">
											<XCircle className="w-5 h-5" />
											<span className="ml-2">
												Error: Please ensure the content
												is valid JSON.
											</span>
										</div>
									)}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}

================================================
FILE: src/components/mcp-server-card.tsx
================================================
import { EnvConfig } from "@/components/server-configs/env-config"
import { FilesystemConfig } from "@/components/server-configs/filesystem-config"
import { ObsidianConfig } from "@/components/server-configs/obsidian-config"
import { PostgresConfig } from "@/components/server-configs/postgres-config"
import { SentryConfig } from "@/components/server-configs/sentry-config"
import { SQLiteConfig } from "@/components/server-configs/sqlite-config"
import { TerminalCommand } from "@/components/terminal-command"
import { SERVER_CONFIGS } from "@/server-configs"
import { ArrowUpRight, Trash2 } from "lucide-react"

type MCPServerConfig = {
	command: string
	args: string[]
	env?: Record<string, string>
}

type MCPServerCardProps = {
	serverName: string
	config: MCPServerConfig
	icon?: string
	onUpdate: (name: string, newConfig: MCPServerConfig) => void
	onDelete: (name: string) => void
}

export function MCPServerCard({
	serverName,
	config,
	icon,
	onUpdate,
	onDelete
}: MCPServerCardProps) {
	const handleFilesystemUpdate = (paths: string[]) => {
		const newConfig = {
			...config,
			args: [...config.args.slice(0, 2), ...paths]
		}
		onUpdate(serverName, newConfig)
	}

const handlePostgresUpdate = (url: string) => {
		const newConfig = {
			...config,
			args: [...config.args.slice(0, 2), url]
		}
		onUpdate(serverName, newConfig)
	}

const handleEnvUpdate = (key: string, value: string) => {
		const newConfig = {
			...config,
			env: {
				...(config.env || {}),
				[key]: value
			}
		}
		onUpdate(serverName, newConfig)
	}

const handleSqliteUpdate = (dbPath: string) => {
		const newConfig = {
			...config,
			args: [
				"--directory",
				"parent_of_servers_repo/servers/src/sqlite",
				"run",
				"mcp-server-sqlite",
				"--db-path",
				dbPath
			]
		}
		onUpdate(serverName, newConfig)
	}

const handleObsidianUpdate = (path: string) => {
		const newConfig = {
			...config,
			args: [...config.args.slice(0, 2), path]
		}
		onUpdate(serverName, newConfig)
	}

const handleSentryUpdate = (token: string) => {
		const newConfig = {
			...config,
			args: [...config.args.slice(0, 2), token]
		}
		onUpdate(serverName, newConfig)
	}

const handleDelete = (e: React.MouseEvent) => {
		e.stopPropagation()
		onDelete(serverName)
	}

const serverConfig =
		SERVER_CONFIGS[serverName as keyof typeof SERVER_CONFIGS]
	const isFilesystemServer = serverName === "filesystem"
	const isPostgresServer = serverName === "postgres"
	const isSqliteServer = serverName === "sqlite"
	const isObsidianServer = serverName === "obsidian"
	const isSentryServer = serverName === "sentry"
	const iconUrl = icon || serverConfig?.icon

return (
		<div className="join join-vertical w-full">
			<div className="collapse collapse-arrow join-item border border-base-300 bg-white p-4">
				<input type="checkbox" defaultChecked />
				<div className="collapse-title">
					<div className="flex items-center">
						<div className="flex items-center gap-2">
							{iconUrl && (
								<img
									src={iconUrl}
									alt={`${serverName} icon`}
									className="w-20 h-12 object-contain"
									onError={(e) => {
										e.currentTarget.style.display = "none"
									}}
								/>
							)}
							<h3 className="text-lg capitalize">{serverName}</h3>
						</div>
					</div>
				</div>
				<div className="collapse-content">
					{isFilesystemServer ? (
						<FilesystemConfig
							initialPaths={[config.args[2] || "/Users/"]}
							onUpdate={handleFilesystemUpdate}
						/>
					) : isPostgresServer ? (
						<PostgresConfig
							initialUrl={config.args[2]}
							onUpdate={handlePostgresUpdate}
						/>
					) : isSqliteServer ? (
						<SQLiteConfig
							initialPath={config.args[5]}
							onUpdate={handleSqliteUpdate}
						/>
					) : isObsidianServer ? (
						<ObsidianConfig
							initialPath={config.args[2]}
							onUpdate={handleObsidianUpdate}
						/>
					) : isSentryServer ? (
						<SentryConfig
							initialToken={config.args[2]}
							onUpdate={handleSentryUpdate}
						/>
					) : serverConfig?.env &&
						Object.keys(serverConfig.env).length > 0 ? (
						<EnvConfig
							env={serverConfig.env}
							initialValues={config.env || {}}
							onUpdate={handleEnvUpdate}
						/>
					) : null}

{serverConfig?.docsUrl ===
						"https://github.com/cloudflare/mcp-server-cloudflare" && (
						<div className="bg-base-200 rounded-xl p-4 space-y-4">
							<p className="text-sm text-gray-600">
								MCP Manager can't update this server directly,
								please run this terminal command to modify this
								server.
							</p>
							<TerminalCommand
								command={
									serverConfig?.setupCommands?.command ?? ""
								}
							/>
						</div>
					)}
				</div>
				<div className="flex justify-end">
					<div className="flex gap-2 mb-4 mr-2">
						<button
							type="button"
							onClick={() =>
								window.open(serverConfig?.docsUrl, "_blank")
							}
							className="btn btn-sm btn-secondary"
						>
							<ArrowUpRight className="w-4 h-4" />
							<span>Docs</span>
						</button>
					</div>
					<div className="flex gap-2 mb-4 mr-4 justify-end">
						<button
							type="button"
							onClick={handleDelete}
							className="btn btn-sm bg-red-50 hover:bg-red-100"
						>
							<Trash2 className="w-4 h-4" />
							<span>Delete</span>
						</button>
					</div>
				</div>
			</div>
		</div>
	)
}

================================================
FILE: src/components/mcp-servers.tsx
================================================
import { MCPServerCard } from "@/components/mcp-server-card"
import { SERVER_CONFIGS } from "@/server-configs"
import { capitalizeFirstLetter } from "@/utils"
import { Plus, Save, X } from "lucide-react"

type MCPServer = {
	command: string
	args: string[]
}

type MCPServers = {
	[key: string]: MCPServer
}

type MCPConfig = {
	mcpServers: MCPServers
}

type MCPServersProps = {
	jsonContent: MCPConfig
	onUpdate: (newContent: MCPConfig) => void
	onServerAdd: (serverType: keyof typeof SERVER_CONFIGS) => void
	onServerRemove: (serverType: string) => void
}

export function MCPServers({
	jsonContent,
	onUpdate,
	onServerAdd,
	onServerRemove
}: MCPServersProps) {
	const handleServerUpdate = (name: string, newConfig: MCPServer) => {
		const updatedContent = {
			...jsonContent,
			mcpServers: {
				...jsonContent.mcpServers,
				[name]: newConfig
			}
		}
		onUpdate(updatedContent)
	}

const handleServerDelete = (name: string) => {
		onServerRemove(name)
	}

const hasServers = Object.keys(jsonContent.mcpServers).length > 0

return (
		<div className="space-y-4 my-32">
			<div className="flex justify-between items-center mb-8">
				<div className="flex items-center gap-4">
					<h2 className="text-2xl text-center">Your MCP Servers</h2>
					<button
						type="button"
						className="btn btn-primary btn-sm"
						onClick={() =>
							(
								document.getElementById(
									"add_server_modal"
								) as HTMLDialogElement
							)?.showModal()
						}
					>
						<Plus className="w-4 h-4" />
						<span>Add Server</span>
					</button>
				</div>
			</div>

<dialog id="add_server_modal" className="modal backdrop-blur-sm">
				<div className="modal-box rounded-3xl">
					<div className="flex justify-between items-center mb-4 sticky top-0 py-4 -mt-4 -mx-6 px-6">
						<h3 className="text-xl ml-4">Add New Server</h3>
						<button
							type="button"
							className="btn btn-square btn-ghost"
							onClick={() =>
								(
									document.getElementById(
										"add_server_modal"
									) as HTMLDialogElement
								)?.close()
							}
						>
							<X className="w-4 h-4" />
						</button>
					</div>

<div className="grid gap-4 py-4 max-h-[70vh] overflow-y-auto px-4">
						{Object.keys(SERVER_CONFIGS).map((serverType) => (
							<button
								key={serverType}
								type="button"
								className="w-full bg-base-200 hover:bg-base-300 rounded-3xl p-4 flex items-center gap-6 h-24"
								onClick={() => {
									onServerAdd(
										serverType as keyof typeof SERVER_CONFIGS
									)
									;(
										document.getElementById(
											"add_server_modal"
										) as HTMLDialogElement
									)?.close()
								}}
							>
								<div className="my-auto mx-2">
									<img
										src={
											SERVER_CONFIGS[
												serverType as keyof typeof SERVER_CONFIGS
											].icon
										}
										alt={`${serverType} icon`}
										className="w-10 h-10 object-contain"
									/>
								</div>
								<div className="flex flex-col text-left w-full">
									<span className="text-xl font-normal mb-1">
										{capitalizeFirstLetter(serverType)}
									</span>
									<p className="text-sm opacity-80">
										{
											SERVER_CONFIGS[
												serverType as keyof typeof SERVER_CONFIGS
											].description
										}
									</p>
								</div>
							</button>
						))}
					</div>
				</div>
				<form method="dialog" className="modal-backdrop">
					<button type="button">close</button>
				</form>
			</dialog>

<div className="space-y-4">
				{hasServers ? (
					Object.entries(jsonContent.mcpServers).map(
						([name, config]) => {
							const serverConfig =
								SERVER_CONFIGS[
									name as keyof typeof SERVER_CONFIGS
								]

return (
								<MCPServerCard
									key={name}
									serverName={name}
									config={config}
									icon={serverConfig?.icon}
									onUpdate={handleServerUpdate}
									onDelete={handleServerDelete}
								/>
							)
						}
					)
				) : (
					<p className=" text-gray-500 text-center">
						You currently have no MCP servers configured. Add one by
						clicking the "Add Server" button.
					</p>
				)}
			</div>
		</div>
	)
}

================================================
FILE: src/components/server-configs/env-config.tsx
================================================
import { useState } from "react"

type EnvConfigProps = {
	env: Record<string, string>
	initialValues: Record<string, string>
	onUpdate: (key: string, value: string) => void
}

export function EnvConfig({ env, initialValues, onUpdate }: EnvConfigProps) {
	const [envValues, setEnvValues] =
		useState<Record<string, string>>(initialValues)

const handleEnvChange = (key: string, value: string) => {
		setEnvValues((prev) => ({ ...prev, [key]: value }))
		onUpdate(key, value)
	}

return (
		<div className="bg-base-200 rounded-xl p-4 mb-4 space-y-4">
			<div className="space-y-2">
				{Object.entries(env).map(([key]) => (
					<div key={key} className="form-control">
						<label htmlFor={`env-${key}`} className="label">
							<span className="label-text mb-2">{key}</span>
						</label>
						<input
							id={`env-${key}`}
							type="text"
							placeholder={`Paste your ${key} here`}
							className="input input-bordered w-full"
							value={envValues[key] || ""}
							onChange={(e) =>
								handleEnvChange(key, e.target.value)
							}
						/>
					</div>
				))}
			</div>
		</div>
	)
}

================================================
FILE: src/components/server-configs/filesystem-config.tsx
================================================
import { Plus, X } from "lucide-react"
import { useState } from "react"

type FilesystemConfigProps = {
	initialPaths: string[]
	onUpdate: (paths: string[]) => void
}

export function FilesystemConfig({
	initialPaths,
	onUpdate
}: FilesystemConfigProps) {
	const [filesystemPaths, setFilesystemPaths] =
		useState<string[]>(initialPaths)

const handleFilesystemPathChange = (value: string, index: number) => {
		const newPaths = [...filesystemPaths]
		newPaths[index] = value
		setFilesystemPaths(newPaths)
	}

const handleFilesystemPathBlur = () => {
		onUpdate(filesystemPaths)
	}

const handleAddPath = () => {
		const newPaths = [...filesystemPaths, ""]
		setFilesystemPaths(newPaths)
		onUpdate(newPaths)
	}

const handleRemovePath = (index: number) => {
		const newPaths = filesystemPaths.filter((_, i) => i !== index)
		setFilesystemPaths(newPaths)
		onUpdate(newPaths)
	}

return (
		<div className="bg-base-200 rounded-xl p-4 mb-4 space-y-4">
			<div className="space-y-4">
				{filesystemPaths.map((path, index) => (
					<div key={index} className="flex items-center gap-2">
						<div className="form-control flex-1">
							<label
								htmlFor={`filesystem-path-${index}`}
								className="label"
							>
								<span className="label-text mb-2">
									Allowed Directory Path{" "}
									{filesystemPaths.length > 1
										? index + 1
										: ""}
								</span>
							</label>
							<input
								id={`filesystem-path-${index}`}
								type="text"
								placeholder="Enter the directory path (e.g., /Users/username/Documents)"
								className="input input-bordered w-full"
								value={path}
								onChange={(e) =>
									handleFilesystemPathChange(
										e.target.value,
										index
									)
								}
								onBlur={handleFilesystemPathBlur}
							/>
						</div>
						{filesystemPaths.length > 1 && (
							<button
								type="button"
								className="btn btn-ghost btn-sm mt-8"
								onClick={() => handleRemovePath(index)}
							>
								<X className="w-4 h-4" />
							</button>
						)}
					</div>
				))}
				<button
					type="button"
					className="btn btn-ghost btn-sm"
					onClick={handleAddPath}
				>
					<Plus className="w-4 h-4" />
					<span>Add Another Path</span>
				</button>
			</div>
		</div>
	)
}

================================================
FILE: src/components/server-configs/obsidian-config.tsx
================================================
import { useState } from "react"

type ObsidianConfigProps = {
	initialPath: string
	onUpdate: (path: string) => void
}

export function ObsidianConfig({ initialPath, onUpdate }: ObsidianConfigProps) {
	const [vaultPath, setVaultPath] = useState(initialPath)

const handleVaultPathChange = (value: string) => {
		setVaultPath(value)
	}

const handleVaultPathBlur = () => {
		onUpdate(vaultPath)
	}

return (
		<div className="bg-base-200 rounded-xl p-4 mb-4 space-y-4">
			<div className="form-control">
				<label htmlFor="vault-path" className="label">
					<span className="label-text mb-2">Obsidian Vault Path</span>
				</label>
				<input
					id="vault-path"
					type="text"
					placeholder="Path to your Obsidian vault, e.g. /Users/yourname/Documents/MyVault"
					className="input input-bordered w-full"
					value={vaultPath}
					onChange={(e) => handleVaultPathChange(e.target.value)}
					onBlur={handleVaultPathBlur}
				/>
			</div>
		</div>
	)
}

================================================
FILE: src/components/server-configs/postgres-config.tsx
================================================
import { useState } from "react"

type PostgresConfigProps = {
	initialUrl: string
	onUpdate: (url: string) => void
}

export function PostgresConfig({ initialUrl, onUpdate }: PostgresConfigProps) {
	const [postgresUrl, setPostgresUrl] = useState(initialUrl)

const handlePostgresUrlChange = (value: string) => {
		setPostgresUrl(value)
	}

const handlePostgresUrlBlur = () => {
		onUpdate(postgresUrl)
	}

return (
		<div className="bg-base-200 rounded-xl p-4 mb-4 space-y-4">
			<div className="form-control">
				<label htmlFor="postgres-url" className="label">
					<span className="label-text mb-2">
						PostgreSQL Connection URL
					</span>
				</label>
				<input
					id="postgres-url"
					type="text"
					placeholder="postgresql://localhost/mydb"
					className="input input-bordered w-full"
					value={postgresUrl}
					onChange={(e) => handlePostgresUrlChange(e.target.value)}
					onBlur={handlePostgresUrlBlur}
				/>
			</div>
		</div>
	)
}

================================================
FILE: src/components/server-configs/sentry-config.tsx
================================================
import { useState } from "react"

type SentryConfigProps = {
	initialToken: string
	onUpdate: (token: string) => void
}

export function SentryConfig({ initialToken, onUpdate }: SentryConfigProps) {
	const [authToken, setAuthToken] = useState(initialToken)

const handleAuthTokenChange = (value: string) => {
		setAuthToken(value)
	}

const handleAuthTokenBlur = () => {
		onUpdate(authToken)
	}

return (
		<div className="bg-base-200 rounded-xl p-4 mb-4 space-y-4">
			<div className="form-control">
				<label htmlFor="sentry-token" className="label">
					<span className="label-text mb-2">
						Sentry Authentication Token
					</span>
				</label>
				<input
					id="sentry-token"
					type="text"
					placeholder="your-auth-token"
					className="input input-bordered w-full"
					value={authToken}
					onChange={(e) => handleAuthTokenChange(e.target.value)}
					onBlur={handleAuthTokenBlur}
				/>
			</div>
		</div>
	)
}

================================================
FILE: src/components/server-configs/sqlite-config.tsx
================================================
import { useState } from "react"

type SQLiteConfigProps = {
	initialPath: string
	onUpdate: (dbPath: string) => void
}

export function SQLiteConfig({ initialPath, onUpdate }: SQLiteConfigProps) {
	const [dbPath, setDbPath] = useState(initialPath)

const handleDbPathChange = (value: string) => {
		setDbPath(value)
	}

const handleDbPathBlur = () => {
		onUpdate(dbPath)
	}

return (
		<div className="bg-base-200 rounded-xl p-4 mb-4 space-y-4">
			<div className="form-control">
				<label htmlFor="sqlite-path" className="label">
					<span className="label-text mb-2">
						SQLite Database Path
					</span>
				</label>
				<input
					id="sqlite-path"
					type="text"
					placeholder="~/my-database.db"
					className="input input-bordered w-full"
					value={dbPath}
					onChange={(e) => handleDbPathChange(e.target.value)}
					onBlur={handleDbPathBlur}
				/>
			</div>
		</div>
	)
}

================================================
FILE: src/components/terminal-command.tsx
================================================
import { Check, Copy } from "lucide-react"
import { useState } from "react"

interface TerminalCommandProps {
	command: string
	className?: string
}

export function TerminalCommand({
	command,
	className = ""
}: TerminalCommandProps) {
	const [hasCopied, setHasCopied] = useState(false)

const handleCopy = () => {
		navigator.clipboard.writeText(command)
		setHasCopied(true)
		setTimeout(() => setHasCopied(false), 2000)
	}

return (
		<div className={`bg-base-300 rounded-xl p-4 mb-4 ${className}`}>
			<p className="font-mono text-sm mb-4 break-all">{command}</p>
			<button
				type="button"
				onClick={handleCopy}
				className="btn btn-primary btn-sm"
			>
				{hasCopied ? (
					<Check className="w-4 h-4" />
				) : (
					<Copy className="w-4 h-4" />
				)}
				<span className="ml-2">
					{hasCopied ? "Copied!" : "Copy Command"}
				</span>
			</button>
		</div>
	)
}

================================================
FILE: src/index.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "Tiempos Text";
  src: url("./assets/tiempos-text-web-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Text";
  src: url("./assets/tiempos-text-web-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@layer base {
  h1 {
    @apply font-tiempos-semibold;
  }
  h2 {
    @apply font-tiempos-semibold;
  }
  h3 {
    @apply font-tiempos-regular;
  }
  p {
    @apply font-tiempos-regular;
  }
  span {
    @apply font-tiempos-regular;
    font-weight: 400;
  }
}

.collapse {
  border-radius: 1.5rem;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.05);
}

================================================
FILE: src/main.tsx
================================================
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import "@/index.css"
import App from "@/App.tsx"

const rootElement = document.getElementById("root")
if (!rootElement) throw new Error("Root element not found")

createRoot(rootElement).render(
	<StrictMode>
		<App />
	</StrictMode>
)

================================================
FILE: src/server-configs.ts
================================================
export type ServerConfig = {
	command?: string
	args?: string[]
	env?: Record<string, string>
	icon: string
	description: string
	docsUrl: string
	setupCommands?: {
		installPath: string
		command: string
	}
}

export const SERVER_CONFIGS: Record<string, ServerConfig> = {
	"brave-search": {
		icon: "https://www.svgrepo.com/show/305818/brave.svg",
		description: "Search the web with Brave Search API",

docsUrl:
			"https://github.com/modelcontextprotocol/servers/tree/main/src/brave-search/README.md",
		command: "npx",
		args: ["-y", "@modelcontextprotocol/server-brave-search"],
		env: { BRAVE_API_KEY: "" }
	},
	filesystem: {
		icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWZvbGRlci1jbG9zZWQiPjxwYXRoIGQ9Ik0yMCAyMGEyIDIgMCAwIDAgMi0yVjhhMiAyIDAgMCAwLTItMmgtNy45YTIgMiAwIDAgMS0xLjY5LS45TDkuNiAzLjlBMiAyIDAgMCAwIDcuOTMgM0g0YTIgMiAwIDAgMC0yIDJ2MTNhMiAyIDAgMCAwIDIgMloiLz48cGF0aCBkPSJNMiAxMGgyMCIvPjwvc3ZnPg==",
		description:
			"Access and manage local filesystem with specified allowed directories",
		command: "npx",
		args: ["-y", "@modelcontextprotocol/server-filesystem", "/Users/"],

docsUrl:
			"https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem/README.md"
	},
	memory: {
		icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJyYWluIj48cGF0aCBkPSJNMTIgNWEzIDMgMCAxIDAtNS45OTcuMTI1IDQgNCAwIDAgMC0yLjUyNiA1Ljc3IDQgNCAwIDAgMCAuNTU2IDYuNTg4QTQgNCAwIDEgMCAxMiAxOFoiLz48cGF0aCBkPSJNMTIgNWEzIDMgMCAxIDEgNS45OTcuMTI1IDQgNCAwIDAgMSAyLjUyNiA1Ljc3IDQgNCAwIDAgMS0uNTU2IDYuNTg4QTQgNCAwIDEgMSAxMiAxOFoiLz48cGF0aCBkPSJNMTUgMTNhNC41IDQuNSAwIDAgMS0zLTQgNC41IDQuNSAwIDAgMS0zIDQiLz48cGF0aCBkPSJNMTcuNTk5IDYuNWEzIDMgMCAwIDAgLjM5OS0xLjM3NSIvPjxwYXRoIGQ9Ik02LjAwMyA1LjEyNUEzIDMgMCAwIDAgNi40MDEgNi41Ii8+PHBhdGggZD0iTTMuNDc3IDEwLjg5NmE0IDQgMCAwIDEgLjU4NS0uMzk2Ii8+PHBhdGggZD0iTTE5LjkzOCAxMC41YTQgNCAwIDAgMSAuNTg1LjM5NiIvPjxwYXRoIGQ9Ik02IDE4YTQgNCAwIDAgMS0xLjk2Ny0uNTE2Ii8+PHBhdGggZD0iTTE5Ljk2NyAxNy40ODRBNCA0IDAgMCAxIDE4IDE4Ii8+PC9zdmc+",
		description: "Give Claude memory of previous conversations",
		command: "npx",
		args: ["-y", "@modelcontextprotocol/server-memory"],

docsUrl:
			"https://github.com/modelcontextprotocol/servers/tree/main/src/memory/README.md"
	},
	"sequential-thinking": {
		icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNwYXJrbGUiPjxwYXRoIGQ9Ik05LjkzNyAxNS41QTIgMiAwIDAgMCA4LjUgMTQuMDYzbC02LjEzNS0xLjU4MmEuNS41IDAgMCAxIDAtLjk2Mkw4LjUgOS45MzZBMiAyIDAgMCAwIDkuOTM3IDguNWwxLjU4Mi02LjEzNWEuNS41IDAgMCAxIC45NjMgMEwxNC4wNjMgOC41QTIgMiAwIDAgMCAxNS41IDkuOTM3bDYuMTM1IDEuNTgxYS41LjUgMCAwIDEgMCAuOTY0TDE1LjUgMTQuMDYzYTIgMiAwIDAgMC0xLjQzNyAxLjQzN2wtMS41ODIgNi4xMzVhLjUuNSAwIDAgMS0uOTYzIDB6Ii8+PC9zdmc+",
		description:
			"Enable step-by-step reasoning and sequential problem-solving",
		command: "npx",
		args: ["-y", "@modelcontextprotocol/server-sequential-thinking"],

docsUrl:
			"https://github.com/modelcontextprotocol/servers/tree/main/src/sequentialthinking/README.md"
	},
	slack: {
		icon: "https://icon.icepanel.io/Technology/svg/Slack.svg",
		description: "Let Claude access your Slack workspace",
		command: "npx",
		args: ["-y", "@modelcontextprotocol/server-slack"],
		env: {
			SLACK_BOT_TOKEN: "",
			SLACK_TEAM_ID: ""
		},

docsUrl:
			"https://github.com/modelcontextprotocol/servers/tree/main/src/slack/README.md"
	},
	"google-drive": {
		icon: "https://upload.wikimedia.org/wikipedia/commons/1/12/Google_Drive_icon_%282020%29.svg",
		description: "Access and search files in your Google Drive",
		command: "npx",
		args: ["-y", "@modelcontextprotocol/server-gdrive"],

docsUrl:
			"https://github.com/modelcontextprotocol/servers/tree/main/src/gdrive/README.md"
	},
	// time: {
	// 	icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNsb2NrIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwb2x5bGluZSBwb2ludHM9IjEyIDYgMTIgMTIgMTYgMTQiLz48L3N2Zz4=",
	// 	description: "Current time / time zone conversion utilities",
	// 	command: "uvx",
	// 	args: ["mcp-server-time"],
	// 	docsUrl:
	// 		"https://github.com/modelcontextprotocol/servers/tree/main/src/time/README.md"
	// },
	"google-maps": {
		icon: "https://upload.wikimedia.org/wikipedia/commons/b/bd/Google_Maps_Logo_2020.svg",
		description: "Access Google Maps API for location and mapping services",
		command: "npx",
		args: ["-y", "@modelcontextprotocol/server-google-maps"],
		env: { GOOGLE_MAPS_API_KEY: "" },

docsUrl:
			"https://github.com/modelcontextprotocol/servers/tree/main/src/google-maps/README.md"
	},
	"youtube-transcript": {
		icon: "https://www.svgrepo.com/show/13671/youtube.svg",
		description: "Access and search YouTube transcripts",
		command: "npx",
		args: ["-y", "@kimtaeyoon83/mcp-server-youtube-transcript"],

docsUrl: "https://github.com/kimtaeyoon83/mcp-server-youtube-transcript"
	},
	perplexity: {
		icon: "https://seeklogo.com/images/P/perplexity-ai-logo-13120A0AAE-seeklogo.com.png",
		description: "Search the web with Perplexity API",
		command: "uvx",
		args: ["mcp-server-perplexity"],
		env: {
			PERPLEXITY_API_KEY: "your-perplexity-api-key"
		},

docsUrl: "https://github.com/tanigami/mcp-server-perplexity"
	},
	// fetch: {
	// 	icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWdsb2JlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik0xMiAyYTE0LjUgMTQuNSAwIDAgMCAwIDIwIDE0LjUgMTQuNSAwIDAgMCAwLTIwIi8+PHBhdGggZD0iTTIgMTJoMjAiLz48L3N2Zz4=",
	// 	description: "Let Claude fetch and read a website",
	// 	command: "uvx",
	// 	args: ["mcp-server-fetch"],

// 	docsUrl:
	// 		"https://github.com/modelcontextprotocol/servers/tree/main/src/fetch/README.md"
	// },
	"apple-notes": {
		icon: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_Notes_icon.svg",
		description: "Access and search your Apple Notes",
		command: "uvx",
		args: ["apple-notes-mcp"],

docsUrl: "https://github.com/sirmews/apple-notes-mcp"
	},
	exa: {
		icon: "https://media.licdn.com/dms/image/v2/D4D0BAQEGEKPKKLiNvA/company-logo_200_200/company-logo_200_200/0/1721090778302/exa_ai_logo?e=2147483647&v=beta&t=bNJAmBL2v359QkVTUgGTEbdBOqsnYSMaOuCtMDuG920",
		description: "Search the web with Exa",
		command: "npx",
		args: ["exa-mcp-server/build/index.js"],
		env: {
			EXA_API_KEY: "your-api-key-here"
		},
		setupCommands: {
			installPath: "~/mcp-servers",
			command:
				"mkdir -p $(echo $HOME)/mcp-servers && cd $(echo $HOME)/mcp-servers && \
				curl -L https://github.com/exa-labs/exa-mcp-server/archive/refs/heads/main.zip -o exa-mcp-server.zip && \
				unzip -o exa-mcp-server.zip && \
				rm exa-mcp-server.zip && \
				cd exa-mcp-server-main && \
				npm install --save axios dotenv && \
				npm run build && \
				sudo npm link"
		},

docsUrl: "https://github.com/exa-labs/exa-mcp-server"
	},
	browserbase: {
		icon: "https://opensourcepledge.com/images/members/browserbase/logo.webp",
		description: "Let Claude explore the web with Browserbase",
		command: "node",
		args: ["mcp-server-browserbase-main/browserbase/dist/index.js"],
		env: {
			BROWSERBASE_API_KEY: "your-api-key-here",
			BROWSERBASE_PROJECT_ID: "your-project-id-here"
		},
		setupCommands: {
			installPath: "~/mcp-servers",
			command:
				"mkdir -p $(echo $HOME)/mcp-servers && cd $(echo $HOME)/mcp-servers && \
				curl -L https://github.com/browserbase/mcp-server-browserbase/archive/refs/heads/main.zip -o browserbase-mcp-server.zip && \
				unzip -o browserbase-mcp-server.zip && \
				rm browserbase-mcp-server.zip && \
				cd mcp-server-browserbase-main/browserbase && \
				npm install && \
				npm run build"
		},

docsUrl:
			"https://github.com/browserbase/mcp-server-browserbase/tree/main/browserbase"
	},
	obsidian: {
		icon: "https://upload.wikimedia.org/wikipedia/commons/1/10/2023_Obsidian_logo.svg",
		description: "Read and search files in your Obsidian vault",
		command: "npx",
		args: ["-y", "mcp-obsidian", ""],

docsUrl: "https://github.com/calclavia/mcp-obsidian"
	},
	todoist: {
		icon: "https://www.svgrepo.com/show/354452/todoist-icon.svg",
		description: "Access and search your Todoist tasks",
		command: "npx",
		args: ["-y", "@abhiz123/todoist-mcp-server"],
		env: {
			TODOIST_API_TOKEN: "your_api_token_here"
		},

docsUrl: "https://github.com/abhiz123/todoist-mcp-server"
	},
	cloudflare: {
		icon: "https://icon.icepanel.io/Technology/svg/Cloudflare.svg",
		description: "Manage your Cloudflare workers and account resources",
		docsUrl: "https://github.com/cloudflare/mcp-server-cloudflare",
		setupCommands: {
			installPath: "~/mcp-servers",
			command: "npx @cloudflare/mcp-server-cloudflare init"
		}
	},
	"aws-kb-retrieval": {
		icon: "https://icon.icepanel.io/Technology/svg/AWS.svg",
		description:
			"Access and query AWS Knowledge Base for information retrieval",
		command: "npx",
		args: ["-y", "@modelcontextprotocol/server-aws-kb-retrieval"],
		env: {
			AWS_ACCESS_KEY_ID: "",
			AWS_SECRET_ACCESS_KEY: "",
			AWS_REGION: ""
		},

docsUrl:
			"https://github.com/modelcontextprotocol/servers/tree/main/src/aws-kb-retrieval/README.md"
	},
	everart: {
		icon: "https://pbs.twimg.com/profile_images/1717719314369789952/AmXarABn_400x400.png",
		description:
			"Interface with Everart API for digital art and design tools",
		command: "npx",
		args: ["-y", "@modelcontextprotocol/server-everart"],
		env: { EVERART_API_KEY: "" },

docsUrl:
			"https://github.com/modelcontextprotocol/servers/tree/main/src/everart/README.md"
	},
	github: {
		icon: "https://icon.icepanel.io/Technology/svg/GitHub.svg",
		description: "Let Claude access your GitHub repositories",
		command: "npx",
		args: ["-y", "@modelcontextprotocol/server-github"],
		env: { GITHUB_PERSONAL_ACCESS_TOKEN: "" },

docsUrl:
			"https://github.com/modelcontextprotocol/servers/blob/main/src/github/README.md"
	},
	gitlab: {
		icon: "https://icon.icepanel.io/Technology/svg/GitLab.svg",
		description: "Manage GitLab repositories and resources",
		command: "npx",
		args: ["-y", "@modelcontextprotocol/server-gitlab"],
		env: {
			GITLAB_PERSONAL_ACCESS_TOKEN: "",
			GITLAB_API_URL: "https://gitlab.com/api/v4"
		},

docsUrl:
			"https://github.com/modelcontextprotocol/servers/blob/main/src/gitlab/README.md"
	},
	postgres: {
		icon: "https://www.svgrepo.com/show/303301/postgresql-logo.svg",
		description: "Connect and interact with PostgreSQL databases",
		command: "npx",
		args: [
			"-y",
			"@modelcontextprotocol/server-postgres",
			"postgresql://localhost/mydb"
		],

docsUrl:
			"https://github.com/modelcontextprotocol/servers/tree/main/src/postgres/README.md"
	},
	puppeteer: {
		icon: "https://www.svgrepo.com/show/354228/puppeteer.svg",
		description: "Automate browser interactions with Puppeteer",
		command: "npx",
		args: ["-y", "@modelcontextprotocol/server-puppeteer"],

docsUrl:
			"https://github.com/modelcontextprotocol/servers/tree/main/src/puppeteer/README.md"
	},
	sqlite: {
		icon: "https://icon.icepanel.io/Technology/svg/SQLite.svg",
		description: "Manage SQLite databases in local file storage",
		command: "uv",
		args: [
			"--directory",
			"parent_of_servers_repo/servers/src/sqlite",
			"run",
			"mcp-server-sqlite",
			"--db-path",
			"~/test.db"
		],

docsUrl:
			"https://github.com/modelcontextprotocol/servers/tree/main/src/sqlite/README.md"
	}
	// sentry: {
	// 	icon: "https://www.svgrepo.com/show/306716/sentry.svg",
	// 	description: "Retrieve and analyze issues from Sentry for debugging",
	// 	command: "uvx",
	// 	args: ["mcp-server-sentry", "--auth-token", ""],

// 	docsUrl:
	// 		"https://github.com/modelcontextprotocol/servers/tree/main/src/sentry"
	// }
}

================================================
FILE: src/utils.ts
================================================
export const capitalizeFirstLetter = (str: string): string => {
	return str.charAt(0).toUpperCase() + str.slice(1)
}

================================================
FILE: src/vite-env.d.ts
================================================
/// <reference types="vite/client" />

================================================
FILE: tailwind.config.ts
================================================
import daisyui from "daisyui"
import { light } from "daisyui/src/theming/themes"
import type { Config } from "tailwindcss"

export default {
	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
	theme: {
		extend: {
			fontFamily: {
				"tiempos-semibold": ["Tiempos Text", "serif"],
				"tiempos-regular": ["Tiempos Text", "serif"]
			}
		}
	},
	plugins: [daisyui],
	daisyui: {
		themes: [
			{
				light: {
					...light,
					primary: "#da7756",
					"primary-content": "#ffffff",
					secondary: "#f2f1e9",
					"secondary-content": "#000000"
				}
			}
		]
	}
} satisfies Config

================================================
FILE: tsconfig.app.json
================================================
{
	"compilerOptions": {
		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
		"target": "ES2020",
		"useDefineForClassFields": true,
		"lib": ["ES2020", "DOM", "DOM.Iterable"],
		"module": "ESNext",
		"skipLibCheck": true,

/* Bundler mode */
		"moduleResolution": "bundler",
		"allowImportingTsExtensions": true,
		"isolatedModules": true,
		"moduleDetection": "force",
		"noEmit": true,
		"jsx": "react-jsx",

/* Linting */
		"strict": true,
		"noUnusedLocals": false,
		"noUnusedParameters": true,
		"noFallthroughCasesInSwitch": true,
		"noUncheckedSideEffectImports": true,

/* Path Aliases */
		"baseUrl": ".",
		"paths": {
			"@/*": ["src/*"]
		}
	},
	"include": ["src"]
}

================================================
FILE: tsconfig.json
================================================
{
	"files": [],
	"references": [
		{ "path": "./tsconfig.app.json" },
		{ "path": "./tsconfig.node.json" }
	]
}

================================================
FILE: tsconfig.node.json
================================================
{
	"compilerOptions": {
		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
		"target": "ES2022",
		"lib": ["ES2023"],
		"module": "ESNext",
		"skipLibCheck": true,

/* Bundler mode */
		"moduleResolution": "bundler",
		"allowImportingTsExtensions": true,
		"isolatedModules": true,
		"moduleDetection": "force",
		"noEmit": true,

/* Linting */
		"strict": true,
		"noUnusedLocals": false,
		"noUnusedParameters": true,
		"noFallthroughCasesInSwitch": true,
		"noUncheckedSideEffectImports": true,

/* Path Aliases */
		"baseUrl": ".",
		"paths": {
			"@/*": ["src/*"]
		}
	},
	"include": ["vite.config.ts"]
}

================================================
FILE: vite.config.ts
================================================
import { dirname } from "node:path"
import path from "node:path"
import { fileURLToPath } from "node:url"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

const __dirname = dirname(fileURLToPath(import.meta.url))

// https://vite.dev/config/
export default defineConfig({
	plugins: [react()],
	resolve: {
		alias: {
			"@": path.resolve(__dirname, "./src")
		}
	}
})