buildmymcpserver/apps/web/app/docs/page.tsx
Marco Sadjadi 09688c1114 feat(web): real 3-step wizard, settings, audit, docs, marketing pages
Sprint 3.5: close every dead link and replace the single-step wizard with the
spec-mandated 3-step flow.

Wizard:
- Step 1 collects prompt + name + slug, calls /v1/servers/preview.
- Step 2 renders parsed tools (name, description, input schema as copyable JSON)
  + a credential field per requiredSecret Claude actually identified. Self-contained
  servers see 'No credentials needed' instead of generic Notion placeholders.
- Step 3 streams the live build over WebSocket and shows install snippets.

New dashboard pages:
- /settings — org, plan/usage, members table, API keys + billing stubs (Sprint 4),
  encryption status. Reads /v1/me/org.
- /audit — filterable table over /v1/audit with action pills, resource refs, IP,
  metadata JSON.

Docs site (/docs + 6 sub-pages):
- Sticky 240px sidebar, max-w-prose article column, shared DocsTitle/H2/Code primitives.
- Quickstart, MCP concepts, OAuth 2.1 flow (full walkthrough with curl), Authoring
  tools, Self-hosting, API reference, FAQ.

Marketing pages:
- /changelog with tagged release timeline.
- /security with 8 pillars + disclosure.
- /privacy with GDPR-aware sections.
- /terms (10 clauses).
- /pricing full page (nav now points here instead of /#pricing anchor).
- /status with live 10s probes against /api/health and /login.

Footer 'system status' badge now links to /status.

All 20 routes 200 OK in smoke crawl. Typecheck clean across packages.
2026-05-19 18:20:31 +02:00

90 lines
3.6 KiB
XML

import {
DocsTitle,
DocsLead,
DocsH2,
DocsH3,
DocsP,
DocsList,
DocsLi,
DocsCode,
Mono,
} from '@/components/docs-page';
export const metadata = { title: 'Quickstart — BuildMyMCPServer 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>
</>
);
}