feat(web): Next.js 15 shell — design tokens, landing, auth pages
This commit is contained in:
Marco Sadjadi
parent
efa2c3f30d
commit
f2238f2e6b
68
apps/web/app/(marketing)/layout.tsx
Normal file
68
apps/web/app/(marketing)/layout.tsx
Normal file
@ -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>© {new Date().getFullYear()} BuildMyMCPServer</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
262
apps/web/app/(marketing)/page.tsx
Normal file
262
apps/web/app/(marketing)/page.tsx
Normal file
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
123
apps/web/app/globals.css
Normal file
123
apps/web/app/globals.css
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
19
apps/web/app/layout.tsx
Normal file
19
apps/web/app/layout.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
55
apps/web/app/login/callback/page.tsx
Normal file
55
apps/web/app/login/callback/page.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
84
apps/web/app/login/page.tsx
Normal file
84
apps/web/app/login/page.tsx
Normal file
@ -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'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>
|
||||
);
|
||||
}
|
||||
65
apps/web/components/code-block.tsx
Normal file
65
apps/web/components/code-block.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Check, Copy } from 'lucide-react';
|
||||
import { cn } from '@/lib/cn';
|
||||
|
||||
export interface CodeBlockProps {
|
||||
code: string;
|
||||
language?: string;
|
||||
label?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function CodeBlock({ code, language, label, className }: CodeBlockProps) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
async function onCopy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(code);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1500);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('panel-subtle relative overflow-hidden', className)}>
|
||||
{(label || language) && (
|
||||
<div className="flex items-center justify-between border-b border-[--color-border] px-3 py-2">
|
||||
<span className="mono text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
|
||||
{label ?? language}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCopy}
|
||||
aria-label="Copy"
|
||||
className="inline-flex items-center gap-1.5 rounded-sm text-[11px] text-[--color-fg-subtle] transition-colors duration-200 ease-out hover:text-[--color-fg]"
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check size={12} /> copied
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy size={12} /> copy
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{!label && !language && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCopy}
|
||||
aria-label="Copy"
|
||||
className="absolute right-2 top-2 inline-flex items-center gap-1.5 rounded-sm border border-[--color-border] bg-[--color-bg-elevated] px-2 py-1 text-[11px] text-[--color-fg-subtle] transition-colors duration-200 ease-out hover:text-[--color-fg]"
|
||||
>
|
||||
{copied ? <Check size={12} /> : <Copy size={12} />}
|
||||
</button>
|
||||
)}
|
||||
<pre className="mono overflow-x-auto px-3 py-3 text-[12.5px] leading-relaxed text-[--color-fg]">
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
apps/web/components/input.tsx
Normal file
53
apps/web/components/input.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import * as React from 'react';
|
||||
import { cn } from '@/lib/cn';
|
||||
|
||||
export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
|
||||
function Input({ className, ...props }, ref) {
|
||||
return (
|
||||
<input
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'h-8 w-full rounded-md border border-[--color-border] bg-[--color-bg-subtle] px-2.5 text-[13px] text-[--color-fg] placeholder:text-[--color-fg-subtle] transition-colors duration-200 ease-out focus:border-[--color-accent] focus:outline-none focus:ring-1 focus:ring-[--color-accent]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
|
||||
function Textarea({ className, ...props }, ref) {
|
||||
return (
|
||||
<textarea
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'mono w-full rounded-md border border-[--color-border] bg-[--color-bg-subtle] p-3 text-[13px] leading-relaxed text-[--color-fg] placeholder:text-[--color-fg-subtle] transition-colors duration-200 ease-out focus:border-[--color-accent] focus:outline-none focus:ring-1 focus:ring-[--color-accent]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export function Label({
|
||||
children,
|
||||
hint,
|
||||
className,
|
||||
htmlFor,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
hint?: string;
|
||||
className?: string;
|
||||
htmlFor?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={cn('flex items-baseline justify-between', className)}>
|
||||
<label htmlFor={htmlFor} className="text-[12px] font-medium text-[--color-fg]">
|
||||
{children}
|
||||
</label>
|
||||
{hint && <span className="mono text-[11px] text-[--color-fg-subtle]">{hint}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
14
apps/web/components/logo.tsx
Normal file
14
apps/web/components/logo.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import Link from 'next/link';
|
||||
import { cn } from '@/lib/cn';
|
||||
|
||||
export function Logo({ className }: { className?: string }) {
|
||||
return (
|
||||
<Link href="/" className={cn('inline-flex items-center gap-2 text-[--color-fg]', className)}>
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden>
|
||||
<rect x="1" y="1" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="1.25" />
|
||||
<path d="M5 12V6L9 9.5L13 6V12" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
<span className="text-[13px] font-semibold tracking-tight">BuildMyMCPServer</span>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
38
apps/web/components/status-pill.tsx
Normal file
38
apps/web/components/status-pill.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import type { ServerStatus, BuildStatus } from '@bmm/types';
|
||||
import { cn } from '@/lib/cn';
|
||||
|
||||
type AnyStatus = ServerStatus | BuildStatus;
|
||||
|
||||
const map: Record<string, { label: string; dot: string; fg: string; bg: string; pulse?: boolean }> = {
|
||||
draft: { label: 'Draft', dot: 'bg-zinc-500', fg: 'text-zinc-400', bg: 'bg-zinc-500/10' },
|
||||
queued: { label: 'Queued', dot: 'bg-zinc-400', fg: 'text-zinc-300', bg: 'bg-zinc-400/10' },
|
||||
generating: { label: 'Generating', dot: 'bg-amber-400', fg: 'text-amber-300', bg: 'bg-amber-400/10', pulse: true },
|
||||
building: { label: 'Building', dot: 'bg-amber-400', fg: 'text-amber-300', bg: 'bg-amber-400/10', pulse: true },
|
||||
deploying: { label: 'Deploying', dot: 'bg-indigo-400', fg: 'text-indigo-300', bg: 'bg-indigo-400/10', pulse: true },
|
||||
live: { label: 'Live', dot: 'bg-emerald-400', fg: 'text-emerald-300', bg: 'bg-emerald-400/10', pulse: true },
|
||||
success: { label: 'Success', dot: 'bg-emerald-400', fg: 'text-emerald-300', bg: 'bg-emerald-400/10' },
|
||||
failed: { label: 'Failed', dot: 'bg-red-400', fg: 'text-red-300', bg: 'bg-red-400/10' },
|
||||
cancelled: { label: 'Cancelled', dot: 'bg-zinc-500', fg: 'text-zinc-400', bg: 'bg-zinc-500/10' },
|
||||
paused: { label: 'Paused', dot: 'bg-zinc-500', fg: 'text-zinc-400', bg: 'bg-zinc-500/10' },
|
||||
};
|
||||
|
||||
export function StatusPill({ status, className }: { status: AnyStatus; className?: string }) {
|
||||
const s = map[status] ?? map.draft;
|
||||
if (!s) return null;
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 rounded-full border border-[--color-border] px-2 py-0.5 text-[11px] font-medium tracking-tight',
|
||||
s.bg,
|
||||
s.fg,
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn('size-1.5 rounded-full', s.dot)}
|
||||
style={s.pulse ? { animation: 'pulse-dot 1.6s ease-in-out infinite' } : undefined}
|
||||
/>
|
||||
{s.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
45
apps/web/components/ui/button.tsx
Normal file
45
apps/web/components/ui/button.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import * as React from 'react';
|
||||
import { cn } from '@/lib/cn';
|
||||
|
||||
type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
|
||||
type Size = 'sm' | 'md' | 'lg';
|
||||
|
||||
const variants: Record<Variant, string> = {
|
||||
primary:
|
||||
'bg-[--color-accent] text-[--color-accent-fg] hover:bg-[#5557e8] active:bg-[#4f51d8] border border-transparent',
|
||||
secondary:
|
||||
'bg-[--color-bg-elevated] text-[--color-fg] hover:bg-[--color-bg-subtle] border border-[--color-border]',
|
||||
ghost:
|
||||
'bg-transparent text-[--color-fg-muted] hover:text-[--color-fg] hover:bg-[--color-bg-subtle] border border-transparent',
|
||||
danger:
|
||||
'bg-transparent text-[--color-danger] hover:bg-[rgba(239,68,68,0.08)] border border-[--color-border]',
|
||||
};
|
||||
|
||||
const sizes: Record<Size, string> = {
|
||||
sm: 'h-7 px-2.5 text-xs gap-1.5',
|
||||
md: 'h-8 px-3 text-[13px] gap-2',
|
||||
lg: 'h-10 px-4 text-sm gap-2',
|
||||
};
|
||||
|
||||
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: Variant;
|
||||
size?: Size;
|
||||
}
|
||||
|
||||
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
|
||||
{ className, variant = 'secondary', size = 'md', ...props },
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center rounded-md font-medium tracking-tight transition-colors duration-200 ease-out disabled:opacity-50 disabled:pointer-events-none select-none',
|
||||
variants[variant],
|
||||
sizes[size],
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
33
apps/web/lib/api.ts
Normal file
33
apps/web/lib/api.ts
Normal file
@ -0,0 +1,33 @@
|
||||
const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000';
|
||||
|
||||
export async function apiFetch<T = unknown>(
|
||||
path: string,
|
||||
init: RequestInit = {},
|
||||
): Promise<T> {
|
||||
const res = await fetch(`${API_BASE}${path}`, {
|
||||
credentials: 'include',
|
||||
cache: 'no-store',
|
||||
...init,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(init.headers ?? {}),
|
||||
},
|
||||
});
|
||||
if (!res.ok) {
|
||||
let detail: unknown = undefined;
|
||||
try {
|
||||
detail = await res.json();
|
||||
} catch {}
|
||||
const err = new Error(`api_error_${res.status}`);
|
||||
(err as unknown as { detail?: unknown }).detail = detail;
|
||||
(err as unknown as { status?: number }).status = res.status;
|
||||
throw err;
|
||||
}
|
||||
return (await res.json()) as T;
|
||||
}
|
||||
|
||||
export function apiWebSocketURL(path: string): string {
|
||||
const httpBase = API_BASE;
|
||||
const wsBase = httpBase.replace(/^http/, 'ws');
|
||||
return `${wsBase}${path}`;
|
||||
}
|
||||
6
apps/web/lib/cn.ts
Normal file
6
apps/web/lib/cn.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export function cn(...inputs: ClassValue[]): string {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
2
apps/web/next-env.d.ts
vendored
Normal file
2
apps/web/next-env.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
17
apps/web/next.config.mjs
Normal file
17
apps/web/next.config.mjs
Normal file
@ -0,0 +1,17 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
experimental: {
|
||||
typedRoutes: false,
|
||||
},
|
||||
async rewrites() {
|
||||
return [
|
||||
{
|
||||
source: '/api/:path*',
|
||||
destination: `${process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000'}/:path*`,
|
||||
},
|
||||
];
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
32
apps/web/package.json
Normal file
32
apps/web/package.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "@bmm/web",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --port 3000",
|
||||
"build": "next build",
|
||||
"start": "next start --port 3000",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@bmm/types": "workspace:*",
|
||||
"clsx": "2.1.1",
|
||||
"geist": "1.3.1",
|
||||
"lucide-react": "0.469.0",
|
||||
"next": "15.1.3",
|
||||
"react": "19.0.0",
|
||||
"react-dom": "19.0.0",
|
||||
"tailwind-merge": "2.5.5",
|
||||
"zod": "3.23.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "4.0.0-beta.7",
|
||||
"@types/node": "22.10.2",
|
||||
"@types/react": "19.0.2",
|
||||
"@types/react-dom": "19.0.2",
|
||||
"postcss": "8.4.49",
|
||||
"tailwindcss": "4.0.0-beta.7",
|
||||
"typescript": "5.7.2"
|
||||
}
|
||||
}
|
||||
5
apps/web/postcss.config.mjs
Normal file
5
apps/web/postcss.config.mjs
Normal file
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
plugins: {
|
||||
'@tailwindcss/postcss': {},
|
||||
},
|
||||
};
|
||||
17
apps/web/tsconfig.json
Normal file
17
apps/web/tsconfig.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"jsx": "preserve",
|
||||
"lib": ["dom", "dom.iterable", "es2022"],
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"noEmit": true,
|
||||
"incremental": true,
|
||||
"plugins": [{ "name": "next" }],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user