feat(web): Next.js 15 shell — design tokens, landing, auth pages

apps/web/app/(marketing)/layout.tsx

@@ -0,0 +1,68 @@
+import Link from 'next/link';
+import { Logo } from '@/components/logo';
+
+export default function MarketingLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <header className="sticky top-0 z-50 border-b border-[--color-border] bg-[--color-bg]/80 backdrop-blur-md">
+        <div className="mx-auto flex h-12 max-w-6xl items-center justify-between px-6">
+          <div className="flex items-center gap-6">
+            <Logo />
+            <nav className="hidden items-center gap-5 text-[13px] text-[--color-fg-muted] md:flex">
+              <Link href="/#how" className="transition-colors hover:text-[--color-fg]">
+                How it works
+              </Link>
+              <Link href="/#pricing" className="transition-colors hover:text-[--color-fg]">
+                Pricing
+              </Link>
+              <Link href="/docs" className="transition-colors hover:text-[--color-fg]">
+                Docs
+              </Link>
+              <Link href="/changelog" className="transition-colors hover:text-[--color-fg]">
+                Changelog
+              </Link>
+            </nav>
+          </div>
+          <div className="flex items-center gap-2">
+            <Link
+              href="/login"
+              className="rounded-md px-3 py-1.5 text-[13px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
+            >
+              Sign in
+            </Link>
+            <Link
+              href="/login"
+              className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
+            >
+              Start building
+            </Link>
+          </div>
+        </div>
+      </header>
+      <main className="flex-1">{children}</main>
+      <footer className="border-t border-[--color-border] py-8">
+        <div className="mx-auto flex max-w-6xl flex-col gap-4 px-6 text-[12px] text-[--color-fg-subtle] md:flex-row md:items-center md:justify-between">
+          <div className="flex items-center gap-2">
+            <span className="size-1.5 animate-pulse rounded-full bg-emerald-400" />
+            <span>All systems operational</span>
+          </div>
+          <div className="flex flex-wrap gap-x-5 gap-y-1">
+            <Link href="/docs" className="transition-colors hover:text-[--color-fg]">
+              Docs
+            </Link>
+            <Link href="/security" className="transition-colors hover:text-[--color-fg]">
+              Security
+            </Link>
+            <Link href="/privacy" className="transition-colors hover:text-[--color-fg]">
+              Privacy
+            </Link>
+            <Link href="/terms" className="transition-colors hover:text-[--color-fg]">
+              Terms
+            </Link>
+          </div>
+          <div>&copy; {new Date().getFullYear()} BuildMyMCPServer</div>
+        </div>
+      </footer>
+    </div>
+  );
+}

apps/web/app/(marketing)/page.tsx

@@ -0,0 +1,262 @@
+import Link from 'next/link';
+import { CodeBlock } from '@/components/code-block';
+
+const PROMPT_EXAMPLE = `Create an MCP server that searches our Notion workspace.
+Tools: search_pages, get_page_content.
+Auth: NOTION_API_KEY.`;
+
+const OUTPUT_EXAMPLE = `> Generating spec...               OK  (2 tools)
+> Static checks                    OK
+> Building image bmm-mcp-notion    OK  17.2s
+> Deploying container              OK
+> Live at https://notion-x9.mcp.buildmymcpserver.com
+> First request: 401 → token → 200 OK`;
+
+const INSTALL_SNIPPET = `{
+  "mcpServers": {
+    "notion": {
+      "url": "https://notion-x9.mcp.buildmymcpserver.com/mcp",
+      "auth": "oauth2"
+    }
+  }
+}`;
+
+const EXAMPLES: { title: string; desc: string }[] = [
+  { title: 'Postgres reader', desc: 'Read-only access to your tables with schema introspection.' },
+  { title: 'Salesforce', desc: 'Query opportunities, accounts and leads from Claude.' },
+  { title: 'Notion', desc: 'Search pages, read content, append blocks.' },
+  { title: 'GitHub', desc: 'List issues, search code, post comments — scoped to one repo.' },
+  { title: 'Stripe', desc: 'Look up charges, customers, refunds (read-only by default).' },
+  { title: 'Custom REST', desc: 'Wrap any HTTP API behind one prompt-defined tool surface.' },
+];
+
+const FAQ: { q: string; a: string }[] = [
+  {
+    q: 'What is MCP?',
+    a: 'Model Context Protocol — an open standard from Anthropic for connecting AI assistants to external tools, data and APIs over a transport like Streamable HTTP.',
+  },
+  {
+    q: 'Do I need to write code?',
+    a: 'No. You describe the tool in natural language. We generate the TypeScript server, run static checks, build a Docker image and deploy it to a public OAuth-protected URL.',
+  },
+  {
+    q: 'Which clients work?',
+    a: 'Claude Desktop, Cursor, ChatGPT Custom Connectors, VS Code Copilot, Continue.dev — anything that speaks the MCP spec.',
+  },
+  {
+    q: 'How is auth handled?',
+    a: 'Every generated server is an OAuth 2.1 Resource Server. Our control plane is the Authorization Server (PKCE + Dynamic Client Registration + Resource Indicators per RFC 8707).',
+  },
+  {
+    q: 'Can I self-host?',
+    a: 'Yes. The runner is a plain Docker container; the control plane is open to BYO Postgres + Redis. See the self-hosting guide in docs.',
+  },
+  {
+    q: 'What about secrets?',
+    a: 'AES-256-GCM at rest in Postgres, injected as environment variables into the runtime container. Never logged, never echoed back.',
+  },
+  {
+    q: 'Cold starts?',
+    a: 'No cold starts. Containers stay warm. Sub-50ms tool-call overhead on average for in-region requests.',
+  },
+  {
+    q: 'Rate limits?',
+    a: 'Default 100 requests/min/IP per tool. Configurable per server. Quota enforced at the Traefik layer before hitting your container.',
+  },
+  {
+    q: 'How fast is generation?',
+    a: 'Spec → image → live URL typically completes in 45-90 seconds.',
+  },
+  {
+    q: 'Logs and metrics?',
+    a: 'Live log streaming to the dashboard, structured tool-call metrics (P50/P95/P99 latency, error rate, per-tool throughput) — all retained for 30 days.',
+  },
+  {
+    q: 'What if I cancel?',
+    a: 'You can export the full TypeScript source of every server you built. No vendor lock-in.',
+  },
+  {
+    q: 'Custom domain?',
+    a: 'Pro plan and above. Add a CNAME, we provision Let’s Encrypt automatically.',
+  },
+];
+
+const TIERS = [
+  { name: 'Hobby', price: '€0', tag: 'Forever free', features: ['1 server', '100k calls/mo', 'BMM subdomain', 'Community support'] },
+  { name: 'Pro', price: '€49', tag: '/ month', features: ['5 servers', '1M calls/mo', 'Custom domain', 'Priority build queue', 'Email support'] },
+  { name: 'Team', price: '€149', tag: '/ month', features: ['25 servers', '10M calls/mo', 'RBAC + audit log', 'SLA 99.9%', 'Slack support'] },
+  { name: 'Enterprise', price: '€499+', tag: '/ month', features: ['Unlimited', 'BYOC', 'SSO / SAML', 'Dedicated cluster', 'Customer success'] },
+];
+
+export default function Landing() {
+  return (
+    <>
+      {/* Hero */}
+      <section className="relative border-b border-[--color-border]">
+        <div className="mx-auto grid max-w-6xl gap-12 px-6 py-20 md:grid-cols-[1.05fr_1fr] md:items-center md:py-28">
+          <div>
+            <span className="mono inline-block rounded-full border border-[--color-border] bg-[--color-bg-elevated] px-2.5 py-0.5 text-[11px] tracking-wide text-[--color-fg-muted]">
+              v0.1 — MCP spec 2025-11-25
+            </span>
+            <h1 className="mt-6 text-balance text-[44px] font-semibold leading-[1.05] tracking-tight md:text-[56px]">
+              Describe your tool.
+              <br />
+              We host the server.
+              <br />
+              <span className="text-[--color-fg-muted]">AI uses it.</span>
+            </h1>
+            <p className="mt-5 max-w-md text-[15px] leading-relaxed text-[--color-fg-muted]">
+              From prompt to production MCP server in 60 seconds. OAuth 2.1, Streamable HTTP, ready
+              for Claude, Cursor and ChatGPT.
+            </p>
+            <div className="mt-7 flex flex-wrap items-center gap-3">
+              <Link
+                href="/login"
+                className="inline-flex h-9 items-center justify-center rounded-md bg-[--color-accent] px-4 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
+              >
+                Start building free
+              </Link>
+              <Link
+                href="/docs"
+                className="inline-flex h-9 items-center justify-center rounded-md border border-[--color-border] bg-[--color-bg-elevated] px-4 text-[13px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
+              >
+                Read the docs
+              </Link>
+            </div>
+            <div className="mt-10 flex flex-wrap gap-x-6 gap-y-2 text-[12px] text-[--color-fg-subtle]">
+              <span className="inline-flex items-center gap-1.5">
+                <span className="size-1.5 rounded-full bg-emerald-400" /> OAuth 2.1 + PKCE
+              </span>
+              <span className="inline-flex items-center gap-1.5">
+                <span className="size-1.5 rounded-full bg-emerald-400" /> Streamable HTTP
+              </span>
+              <span className="inline-flex items-center gap-1.5">
+                <span className="size-1.5 rounded-full bg-emerald-400" /> AES-256 secrets
+              </span>
+              <span className="inline-flex items-center gap-1.5">
+                <span className="size-1.5 rounded-full bg-emerald-400" /> Per-server isolation
+              </span>
+            </div>
+          </div>
+
+          <div className="relative">
+            <div className="absolute -inset-px rounded-lg border border-[--color-border-strong]" />
+            <div className="space-y-3">
+              <CodeBlock label="prompt.txt" code={PROMPT_EXAMPLE} />
+              <CodeBlock label="build.log" code={OUTPUT_EXAMPLE} />
+              <CodeBlock label="claude_desktop_config.json" code={INSTALL_SNIPPET} />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* How it works */}
+      <section id="how" className="border-b border-[--color-border] py-20">
+        <div className="mx-auto max-w-6xl px-6">
+          <div className="mb-12 max-w-2xl">
+            <h2 className="text-[28px] font-semibold tracking-tight">How it works</h2>
+            <p className="mt-2 text-[14px] text-[--color-fg-muted]">
+              Three steps. No JSON to write, no Docker to manage.
+            </p>
+          </div>
+          <div className="grid gap-6 md:grid-cols-3">
+            {[
+              { n: '01', t: 'Describe your tool', d: 'A sentence is enough. List your secrets and which APIs to call.' },
+              { n: '02', t: 'We generate, check, deploy', d: 'Claude writes the spec. We render TypeScript, run static checks, build a container, deploy to your subdomain.' },
+              { n: '03', t: 'Install in your client', d: 'Copy the snippet into Claude Desktop, Cursor or ChatGPT. OAuth flow on first use.' },
+            ].map((s) => (
+              <div key={s.n} className="panel p-5">
+                <div className="mono text-[11px] tracking-widest text-[--color-fg-subtle]">{s.n}</div>
+                <h3 className="mt-4 text-[15px] font-semibold tracking-tight">{s.t}</h3>
+                <p className="mt-2 text-[13px] leading-relaxed text-[--color-fg-muted]">{s.d}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Works with */}
+      <section className="border-b border-[--color-border] py-16">
+        <div className="mx-auto max-w-6xl px-6">
+          <h2 className="text-center text-[13px] uppercase tracking-[0.18em] text-[--color-fg-subtle]">
+            Works with the clients you already use
+          </h2>
+          <div className="mt-8 flex flex-wrap items-center justify-center gap-x-12 gap-y-4 text-[14px] text-[--color-fg-muted]">
+            {['Claude Desktop', 'Cursor', 'ChatGPT', 'VS Code Copilot', 'Continue.dev'].map((t) => (
+              <span key={t} className="inline-flex items-center gap-2">
+                <span className="size-1.5 rounded-full bg-[--color-fg-subtle]" />
+                {t}
+              </span>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Examples */}
+      <section className="border-b border-[--color-border] py-20">
+        <div className="mx-auto max-w-6xl px-6">
+          <div className="mb-10 max-w-2xl">
+            <h2 className="text-[28px] font-semibold tracking-tight">Built for the work you actually have</h2>
+            <p className="mt-2 text-[14px] text-[--color-fg-muted]">
+              Anything with an HTTP API or a database, in minutes.
+            </p>
+          </div>
+          <div className="grid gap-3 md:grid-cols-3">
+            {EXAMPLES.map((e) => (
+              <div key={e.title} className="panel p-4 transition-colors hover:border-[--color-border-strong]">
+                <div className="text-[13px] font-semibold tracking-tight">{e.title}</div>
+                <p className="mt-1 text-[12.5px] leading-relaxed text-[--color-fg-muted]">{e.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing */}
+      <section id="pricing" className="border-b border-[--color-border] py-20">
+        <div className="mx-auto max-w-6xl px-6">
+          <div className="mb-10 max-w-2xl">
+            <h2 className="text-[28px] font-semibold tracking-tight">Pricing</h2>
+            <p className="mt-2 text-[14px] text-[--color-fg-muted]">
+              Pay for tool calls, not for boilerplate.
+            </p>
+          </div>
+          <div className="grid gap-3 md:grid-cols-4">
+            {TIERS.map((t, i) => (
+              <div
+                key={t.name}
+                className={`panel p-5 ${i === 1 ? 'border-[--color-accent]/40' : ''}`}
+              >
+                <div className="text-[12px] uppercase tracking-wider text-[--color-fg-subtle]">{t.name}</div>
+                <div className="mt-2 flex items-baseline gap-1">
+                  <span className="text-[26px] font-semibold tracking-tight">{t.price}</span>
+                  <span className="text-[12px] text-[--color-fg-subtle]">{t.tag}</span>
+                </div>
+                <ul className="mt-4 space-y-1.5 text-[12.5px] text-[--color-fg-muted]">
+                  {t.features.map((f) => (
+                    <li key={f}>— {f}</li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <section className="py-20">
+        <div className="mx-auto max-w-6xl px-6">
+          <h2 className="text-[28px] font-semibold tracking-tight">FAQ</h2>
+          <div className="mt-8 grid gap-x-12 gap-y-6 md:grid-cols-2">
+            {FAQ.map((f) => (
+              <div key={f.q}>
+                <h3 className="text-[14px] font-semibold tracking-tight">{f.q}</h3>
+                <p className="mt-1.5 text-[13px] leading-relaxed text-[--color-fg-muted]">{f.a}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

apps/web/app/globals.css

@@ -0,0 +1,123 @@
+@import 'tailwindcss';
+
+@theme {
+  --color-bg: #0a0a0b;
+  --color-bg-elevated: #111114;
+  --color-bg-subtle: #16161a;
+  --color-fg: #fafafa;
+  --color-fg-muted: #a1a1aa;
+  --color-fg-subtle: #71717a;
+  --color-border: #1f1f22;
+  --color-border-strong: #2a2a2e;
+  --color-accent: #6366f1;
+  --color-accent-fg: #ffffff;
+  --color-success: #22c55e;
+  --color-warn: #f59e0b;
+  --color-danger: #ef4444;
+  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+}
+
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+  html {
+    color-scheme: dark;
+    background: var(--color-bg);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+  body {
+    background: var(--color-bg);
+    color: var(--color-fg);
+    font-family: var(--font-sans);
+    font-feature-settings: 'cv11', 'ss01';
+  }
+  ::selection {
+    background: rgba(99, 102, 241, 0.3);
+    color: var(--color-fg);
+  }
+  /* Focus rings */
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+  /* Scrollbars */
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-border-strong);
+    border-radius: 5px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-fg-subtle);
+  }
+}
+
+@layer components {
+  .panel {
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+  }
+  .panel-subtle {
+    background: var(--color-bg-subtle);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+  }
+  .mono {
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    letter-spacing: -0.01em;
+  }
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.001ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.001ms !important;
+    }
+  }
+}
+
+@keyframes pulse-dot {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(0.9);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

apps/web/app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import { GeistSans } from 'geist/font/sans';
+import { GeistMono } from 'geist/font/mono';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'BuildMyMCPServer — Describe your tool. We host the server.',
+  description:
+    'From prompt to production MCP server in 60 seconds. OAuth 2.1, Streamable HTTP, ready for Claude, Cursor & ChatGPT.',
+  metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? 'http://localhost:3000'),
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`} suppressHydrationWarning>
+      <body>{children}</body>
+    </html>
+  );
+}

apps/web/app/login/callback/page.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Logo } from '@/components/logo';
+import { apiFetch } from '@/lib/api';
+
+export default function CallbackPage() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const token = params.get('token');
+  const [state, setState] = useState<'verifying' | 'ok' | 'error'>('verifying');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!token) {
+      setState('error');
+      setError('Missing token');
+      return;
+    }
+    (async () => {
+      try {
+        await apiFetch('/v1/auth/verify', {
+          method: 'POST',
+          body: JSON.stringify({ token }),
+        });
+        setState('ok');
+        setTimeout(() => router.replace('/dashboard'), 200);
+      } catch (err) {
+        setState('error');
+        setError((err as Error).message);
+      }
+    })();
+  }, [token, router]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center px-6">
+      <div className="w-full max-w-sm text-center">
+        <Logo className="mx-auto mb-8" />
+        {state === 'verifying' && (
+          <p className="text-[13px] text-[--color-fg-muted]">Verifying your magic link…</p>
+        )}
+        {state === 'ok' && (
+          <p className="text-[13px] text-emerald-300">Signed in. Redirecting…</p>
+        )}
+        {state === 'error' && (
+          <>
+            <p className="text-[13px] text-[--color-danger]">Could not verify magic link.</p>
+            {error && <p className="mt-2 mono text-[11px] text-[--color-fg-subtle]">{error}</p>}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/app/login/page.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { Logo } from '@/components/logo';
+import { Button } from '@/components/ui/button';
+import { Input, Label } from '@/components/input';
+import { apiFetch } from '@/lib/api';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [state, setState] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
+  const [error, setError] = useState<string | null>(null);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setState('sending');
+    setError(null);
+    try {
+      await apiFetch('/v1/auth/magic-link', {
+        method: 'POST',
+        body: JSON.stringify({ email }),
+      });
+      setState('sent');
+    } catch (err) {
+      setState('error');
+      setError((err as Error).message);
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center px-6">
+      <div className="w-full max-w-sm">
+        <Logo className="mb-10" />
+        <h1 className="text-[20px] font-semibold tracking-tight">Sign in to your workspace</h1>
+        <p className="mt-1 text-[13px] text-[--color-fg-muted]">
+          We&apos;ll email you a magic link. No password.
+        </p>
+
+        {state !== 'sent' ? (
+          <form onSubmit={submit} className="mt-7 space-y-3">
+            <div className="space-y-1.5">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                required
+                autoComplete="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="you@company.com"
+              />
+            </div>
+            <Button
+              type="submit"
+              variant="primary"
+              size="lg"
+              className="w-full"
+              disabled={state === 'sending'}
+            >
+              {state === 'sending' ? 'Sending…' : 'Send magic link'}
+            </Button>
+            {error && <p className="text-[12px] text-[--color-danger]">{error}</p>}
+          </form>
+        ) : (
+          <div className="panel mt-7 p-4">
+            <p className="text-[13px]">
+              Magic link sent to <span className="mono">{email}</span>.
+            </p>
+            <p className="mt-1.5 text-[12px] text-[--color-fg-muted]">
+              In dev mode the link is printed to the API console output. Check the terminal.
+            </p>
+          </div>
+        )}
+
+        <div className="mt-8 text-[12px] text-[--color-fg-subtle]">
+          <Link href="/" className="transition-colors hover:text-[--color-fg]">
+            ← Back to home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}