mcp-deploy 0.1.0

package/src/components/ClaudeConfigSnippet.tsx

@@ -0,0 +1,225 @@
+"use client";
+
+import { useState } from "react";
+import { EyeIcon } from "./EyeIcon";
+
+interface ClaudeConfigSnippetProps {
+  mcpUrl: string;
+  mcpUrlWithToken: string;
+  bearerToken: string | null;
+  slug: string;
+  authMode?: "bearer" | "oauth" | "open";
+  oauthPassword?: string | null;
+}
+
+export function ClaudeConfigSnippet({
+  mcpUrl,
+  mcpUrlWithToken,
+  bearerToken,
+  slug,
+  authMode = "bearer",
+  oauthPassword,
+}: ClaudeConfigSnippetProps) {
+  const [tab, setTab] = useState<"ui" | "json">("ui");
+  const [copied, setCopied] = useState(false);
+  const [pwVisible, setPwVisible] = useState(false);
+  const [pwCopied, setPwCopied] = useState(false);
+
+  const urlToShow = authMode === "bearer" ? mcpUrlWithToken : mcpUrl;
+
+  // Config for mcp-remote
+  const jsonConfig = authMode === "bearer"
+    ? {
+      mcpServers: {
+        [slug]: {
+          command: "npx",
+          args: [
+            "mcp-remote",
+            mcpUrl,
+            "--header",
+            "Authorization:${AUTH_HEADER}",
+          ],
+          env: {
+            AUTH_HEADER: `Bearer ${bearerToken ?? ""}`,
+          },
+        },
+      },
+    }
+    : {
+      mcpServers: {
+        [slug]: {
+          command: "npx",
+          args: ["mcp-remote", mcpUrl],
+        },
+      },
+    };
+
+  const jsonConfigText = JSON.stringify(jsonConfig, null, 2);
+
+  async function copy(text: string) {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      // Fallback for insecure contexts (HTTP dev server)
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  async function copyPassword() {
+    if (!oauthPassword) return;
+    try {
+      await navigator.clipboard.writeText(oauthPassword);
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = oauthPassword;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+    }
+    setPwCopied(true);
+    setTimeout(() => setPwCopied(false), 2000);
+  }
+
+  const tabs = [
+    { id: "ui" as const, label: "Claude Desktop UI" },
+    { id: "json" as const, label: "JSON Config" },
+  ];
+
+  const passwordBlock = oauthPassword && authMode === "oauth" && (
+    <div className="mt-3 pt-3 border-t border-edge-subtle/50">
+      <p className="text-xs text-fg-faint mb-2">
+        OAuth password
+      </p>
+      <div className="flex items-center gap-2">
+        <div className="relative flex-1">
+          <div className="w-full px-4 py-2.5 pr-10 bg-surface-raised border border-edge-subtle rounded-lg text-sm text-fg font-mono break-all">
+            {pwVisible ? oauthPassword : "\u2022".repeat(24)}
+          </div>
+          <button
+            onClick={() => setPwVisible(!pwVisible)}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-fg-faint hover:text-fg-secondary transition-colors"
+            title={pwVisible ? "Hide password" : "Show password"}
+          >
+            <EyeIcon open={pwVisible} />
+          </button>
+        </div>
+        <button
+          onClick={copyPassword}
+          className="px-3 py-2.5 bg-surface-overlay hover:bg-edge-subtle rounded-lg text-xs text-fg-secondary transition-colors shrink-0"
+        >
+          {pwCopied ? "Copied!" : "Copy"}
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="border border-edge rounded-xl overflow-hidden">
+      <div className="flex border-b border-edge">
+        {tabs.map((t) => (
+          <button
+            key={t.id}
+            onClick={() => setTab(t.id)}
+            className={`px-4 py-2.5 text-xs font-medium transition-colors ${tab === t.id
+              ? "bg-surface-raised text-accent-fg border-b-2 border-accent-fg"
+              : "text-fg-faint hover:text-fg-secondary"
+              }`}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="p-4">
+        {tab === "ui" && (
+          <div className="space-y-3">
+            <p className="text-sm text-fg-muted">
+              Go to{" "}
+              <strong>
+                Settings &rarr; Connectors &rarr; Add custom connector
+              </strong>{" "}
+              and paste this URL:
+            </p>
+            <div className="flex items-center gap-2">
+              <code className="flex-1 px-3 py-2 bg-surface-raised border border-edge-subtle rounded-lg text-sm text-accent-fg break-all">
+                {urlToShow}
+              </code>
+              <button
+                onClick={() => copy(urlToShow)}
+                className="px-3 py-2 bg-surface-overlay hover:bg-edge-subtle rounded-lg text-xs text-fg-secondary transition-colors shrink-0"
+              >
+                {copied ? "Copied!" : "Copy"}
+              </button>
+            </div>
+            {authMode === "bearer" && (
+              <p className="text-xs text-fg-faint">
+                Your bearer token is embedded in the URL. Keep it private.
+              </p>
+            )}
+            {authMode === "oauth" && (
+              <p className="text-xs text-fg-faint">
+                After adding the connector, click <strong>Configure</strong> when
+                prompted. Enter the password below in the authorization dialog.
+              </p>
+            )}
+            {authMode === "open" && (
+              <p className="text-xs text-danger">
+                This MCP is deployed without authentication. Anyone with the URL can access it.
+              </p>
+            )}
+            {passwordBlock}
+          </div>
+        )}
+
+        {tab === "json" && (
+          <div className="space-y-3">
+            <p className="text-sm text-fg-muted">
+              Add to your{" "}
+              <code className="text-accent-fg">claude_desktop_config.json</code>:
+            </p>
+            <div className="relative">
+              <pre className="px-4 py-3 bg-surface-raised rounded-lg text-xs text-fg-secondary overflow-x-auto">
+                {jsonConfigText}
+              </pre>
+              <button
+                onClick={() => copy(jsonConfigText)}
+                className="absolute top-2 right-2 px-2 py-1 bg-surface-overlay hover:bg-edge-subtle rounded text-xs text-fg-muted transition-colors"
+              >
+                {copied ? "Copied!" : "Copy"}
+              </button>
+            </div>
+            {authMode === "bearer" && (
+              <p className="text-xs text-fg-faint">
+                Uses <code>mcp-remote</code> with bearer token authentication.
+              </p>
+            )}
+            {authMode === "oauth" && (
+              <p className="text-xs text-fg-faint">
+                On first connect, your browser will open for OAuth authorization.
+                Enter the password below when prompted.
+              </p>
+            )}
+            {authMode === "open" && (
+              <p className="text-xs text-danger">
+                This MCP is open. No authentication headers are sent.
+              </p>
+            )}
+            {passwordBlock}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/CloudflareSetup.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+export function CloudflareSetup() {
+  const [status, setStatus] = useState<{
+    configured: boolean;
+    accountId: string | null;
+  } | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch("/api/cloudflare/status")
+      .then((r) => r.json())
+      .then(setStatus)
+      .catch(() => {});
+  }, []);
+
+  async function handleConnect() {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch("/api/cloudflare/setup", {
+        method: "POST",
+      });
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error ?? "Login failed");
+        return;
+      }
+
+      setStatus({ configured: true, accountId: data.account ?? null });
+    } catch {
+      setError("Failed to connect to server");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="border border-edge rounded-xl p-6 bg-surface">
+      <h2 className="text-lg font-semibold mb-2">Cloudflare Account</h2>
+
+      <div className="flex items-center justify-between">
+        <div>
+          {status === null ? (
+            <div className="flex items-center gap-2 text-sm">
+              <span className="w-2 h-2 rounded-full bg-fg-faint animate-pulse" />
+              <span className="text-fg-faint">Checking...</span>
+            </div>
+          ) : status.configured ? (
+            <div className="flex items-center gap-2 text-sm">
+              <span className="w-2 h-2 rounded-full bg-success" />
+              <span className="text-success">Connected</span>
+              {status.accountId && (
+                <span className="text-fg-faint">
+                  {status.accountId}
+                </span>
+              )}
+            </div>
+          ) : (
+            <div className="flex items-center gap-2 text-sm">
+              <span className="w-2 h-2 rounded-full bg-fg-faint" />
+              <span className="text-fg-muted">Not connected</span>
+            </div>
+          )}
+
+          <p className="text-xs text-fg-faint mt-1">
+            Authentication via <code className="text-fg-muted">wrangler login</code> (opens browser)
+          </p>
+        </div>
+
+        <button
+          onClick={handleConnect}
+          disabled={loading || status === null}
+          className="px-4 py-2 bg-surface-raised hover:bg-surface-overlay border border-edge-subtle rounded-lg text-sm text-fg-secondary transition-colors disabled:opacity-50"
+        >
+          {loading
+            ? "Connecting..."
+            : status?.configured
+              ? "Reconnect"
+              : "Connect"}
+        </button>
+      </div>
+
+      {error && (
+        <p className="mt-3 text-sm text-danger bg-danger-mid/10 border border-danger-mid/20 rounded-lg px-4 py-2">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/ExternalLinkIcon.tsx

@@ -0,0 +1,17 @@
+export function ExternalLinkIcon({ className = "w-3 h-3 inline-block ml-0.5" }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
+      <polyline points="15 3 21 3 21 9" />
+      <line x1="10" y1="14" x2="21" y2="3" />
+    </svg>
+  );
+}

package/src/components/EyeIcon.tsx

@@ -0,0 +1,40 @@
+export function EyeIcon({ open }: { open: boolean }) {
+  if (open) {
+    return (
+      <svg
+        className="w-4 h-4"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+        />
+      </svg>
+    );
+  }
+  return (
+    <svg
+      className="w-4 h-4"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+      />
+    </svg>
+  );
+}

package/src/components/McpCard.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import Link from "next/link";
+import { StatusBadge } from "./StatusBadge";
+
+interface McpCardProps {
+  slug: string;
+  name: string;
+  description: string;
+  version: string;
+  deployedVersion?: string | null;
+  latestVersion?: string | null;
+  updateAvailable?: boolean;
+  status: string;
+  workerUrl: string | null;
+  deployedAt: string | null;
+}
+
+export function McpCard({
+  slug,
+  name,
+  description,
+  version,
+  deployedVersion,
+  latestVersion,
+  updateAvailable,
+  status,
+  deployedAt,
+}: McpCardProps) {
+  return (
+    <Link href={`/mcps/${slug}`}>
+      <div className="group border border-edge rounded-xl p-6 bg-surface hover:border-edge-subtle transition-colors cursor-pointer overflow-hidden">
+        <div className="flex items-start justify-between mb-3">
+          <h3 className="font-semibold text-fg group-hover:text-accent-fg transition-colors line-clamp-1">
+            {name}
+          </h3>
+          <div className="flex items-center gap-2">
+            {updateAvailable && (
+              <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-info-mid/10 text-info border border-info-mid/20">
+                Update
+              </span>
+            )}
+            <StatusBadge status={status} />
+          </div>
+        </div>
+        <p className="text-sm text-fg-muted mb-4 line-clamp-2 min-h-[2.5rem]">
+          {description}
+        </p>
+        <div className="flex items-center justify-between text-xs text-fg-faint">
+          <div className="flex items-center gap-2">
+            <span>v{version}</span>
+            {updateAvailable && deployedVersion && latestVersion && (
+              <span className="text-info">
+                ({deployedVersion} → {latestVersion})
+              </span>
+            )}
+          </div>
+          {deployedAt && (
+            <span>
+              Deployed{" "}
+              {new Date(deployedAt).toLocaleDateString()}
+            </span>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}

package/src/components/McpConfigForm.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useState } from "react";
+import type { ConfigField } from "@/lib/types";
+
+interface McpConfigFormProps {
+  fields: ConfigField[];
+  values: Record<string, string>;
+  onChange: (values: Record<string, string>) => void;
+}
+
+export function McpConfigForm({ fields, values, onChange }: McpConfigFormProps) {
+  if (fields.length === 0) return null;
+
+  return (
+    <div className="space-y-4">
+      {fields.map((field) => (
+        <div key={field.key}>
+          <label className="block text-sm font-medium text-fg-secondary mb-1.5">
+            {field.label}
+          </label>
+          {field.helpText && (
+            <p className="text-xs text-fg-faint mb-2">{field.helpText}</p>
+          )}
+
+          {field.type === "multiselect" && field.options ? (
+            <MultiselectField
+              field={field}
+              value={values[field.key] ?? field.default ?? ""}
+              onChange={(val) => onChange({ ...values, [field.key]: val })}
+            />
+          ) : field.type === "select" && field.options ? (
+            <select
+              value={values[field.key] ?? field.default ?? ""}
+              onChange={(e) =>
+                onChange({ ...values, [field.key]: e.target.value })
+              }
+              className="w-full px-4 py-2.5 bg-surface-raised border border-edge-subtle rounded-lg text-sm text-fg focus:outline-none focus:border-accent-edge focus:ring-1 focus:ring-accent-edge"
+            >
+              {field.options.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          ) : (
+            <input
+              type="text"
+              value={values[field.key] ?? field.default ?? ""}
+              onChange={(e) =>
+                onChange({ ...values, [field.key]: e.target.value })
+              }
+              className="w-full px-4 py-2.5 bg-surface-raised border border-edge-subtle rounded-lg text-sm text-fg focus:outline-none focus:border-accent-edge focus:ring-1 focus:ring-accent-edge"
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function MultiselectField({
+  field,
+  value,
+  onChange,
+}: {
+  field: ConfigField;
+  value: string;
+  onChange: (val: string) => void;
+}) {
+  const [selected, setSelected] = useState<Set<string>>(
+    new Set(value.split(",").filter(Boolean)),
+  );
+
+  function toggle(opt: string) {
+    const next = new Set(selected);
+    if (next.has(opt)) {
+      next.delete(opt);
+    } else {
+      next.add(opt);
+    }
+    setSelected(next);
+    onChange(Array.from(next).join(","));
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {field.options?.map((opt) => (
+        <button
+          key={opt.value}
+          type="button"
+          onClick={() => toggle(opt.value)}
+          className={`px-3 py-1.5 rounded-lg text-sm border transition-colors ${
+            selected.has(opt.value)
+              ? "bg-accent-edge/15 border-accent-edge/40 text-accent-fg"
+              : "bg-surface-raised border-edge-subtle text-fg-muted hover:border-fg-disabled"
+          }`}
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/NavLinks.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const links = [
+  { href: "/", label: "Dashboard" },
+  { href: "/setup", label: "Settings" },
+] as const;
+
+export function NavLinks() {
+  const pathname = usePathname();
+
+  return (
+    <div className="flex gap-6 text-sm">
+      {links.map(({ href, label }) => {
+        const isActive = href === "/" ? pathname === "/" : pathname.startsWith(href);
+        return (
+          <Link
+            key={href}
+            href={href}
+            className={`font-medium transition-colors pb-0.5 ${
+              isActive
+                ? "text-fg border-b-2 border-accent-fg"
+                : "text-fg-muted hover:text-fg"
+            }`}
+          >
+            {label}
+          </Link>
+        );
+      })}
+    </div>
+  );
+}