buildmymcpserver/apps/web/app/docs/page.tsx

import {
  DocsTitle,
  DocsLead,
  DocsH2,
  DocsH3,
  DocsP,
  DocsList,
  DocsLi,
  DocsCode,
  Mono,
} from '@/components/docs-page';
import { pageMetadata } from '@/lib/seo';

export const metadata = pageMetadata({
  title: 'Quickstart',
  description:
    'From first prompt to a live OAuth-protected MCP server in five minutes — sign in, describe your tool, confirm the plan, watch the build stream, install in your client.',
  path: '/docs',
});

export default function Quickstart() {
  return (
    <>
      <DocsTitle kicker="Get started">Quickstart</DocsTitle>
      <DocsLead>
        Describe the tool you want, paste in any credentials, watch the build stream, copy a snippet
        into your AI client. Five minutes from first prompt to a live OAuth-protected MCP server.
      </DocsLead>

      <DocsH2 id="prereqs">Prerequisites</DocsH2>
      <DocsList>
        <DocsLi>An AI client that speaks MCP — Claude Desktop, Cursor, ChatGPT Custom Connectors, VS Code Copilot, or Continue.dev.</DocsLi>
        <DocsLi>API credentials for whatever you want your server to access (Notion, your DB, etc.). Or pick the echo example to skip this.</DocsLi>
      </DocsList>

      <DocsH2 id="step-1">1. Sign in</DocsH2>
      <DocsP>Hit the dashboard and enter your email. We send a magic link — no password.</DocsP>
      <DocsCode label="dev mode" code={`The link is printed to the API console output.\nCheck the terminal where you ran \`pnpm dev\`.`} />

      <DocsH2 id="step-2">2. Describe your tool</DocsH2>
      <DocsP>
        Click <Mono>+ New server</Mono> and write what you want in plain language. The clearer
        you are about which APIs and which tool names, the better the spec.
      </DocsP>
      <DocsCode
        label="prompt.txt"
        code={`Search and read pages from our Notion workspace via the Notion API.
Tools: search_pages(query), get_page_content(page_id).
Auth: NOTION_API_KEY.`}
      />

      <DocsH2 id="step-3">3. Confirm the plan</DocsH2>
      <DocsP>
        Step 2 of the wizard shows you exactly which tools Claude parsed from your prompt, the
        input schemas, and which credentials we need from you. Fill them in. Skip the step
        entirely for self-contained demo servers like the <Mono>echo</Mono> template.
      </DocsP>

      <DocsH2 id="step-4">4. Watch the build stream</DocsH2>
      <DocsP>The build goes through five states live over WebSocket:</DocsP>
      <DocsList>
        <DocsLi><Mono>queued</Mono> → spec validated, job in BullMQ</DocsLi>
        <DocsLi><Mono>generating</Mono> → Claude returns spec (or cached preview is reused)</DocsLi>
        <DocsLi><Mono>building</Mono> → TypeScript rendered, static checks, Docker image built</DocsLi>
        <DocsLi><Mono>deploying</Mono> → container booted on an allocated host port</DocsLi>
        <DocsLi><Mono>live</Mono> → endpoint responds, OAuth gate is active</DocsLi>
      </DocsList>

      <DocsH2 id="step-5">5. Install in your client</DocsH2>
      <DocsP>
        The Done screen shows three tabs — Claude Desktop, Cursor, ChatGPT — each with a copy-ready
        snippet. Paste the JSON into your client&apos;s MCP config and restart. The OAuth handshake
        runs automatically on first tool call.
      </DocsP>
      <DocsCode
        label="claude_desktop_config.json"
        code={`{
  "mcpServers": {
    "notion-reader": {
      "url": "http://localhost:4103/mcp",
      "auth": "oauth2"
    }
  }
}`}
      />

      <DocsH3>What&apos;s next</DocsH3>
      <DocsP>
        Read about the <a href="/docs/concepts" className="text-[--color-accent] underline">underlying MCP concepts</a>,
        learn how the <a href="/docs/oauth" className="text-[--color-accent] underline">OAuth 2.1 flow</a> protects each server,
        or jump to <a href="/docs/authoring" className="text-[--color-accent] underline">authoring custom tools</a>.
      </DocsP>
    </>
  );
}