Marco Sadjadi 7a32385e2b
All checks were successful
Deploy to Production / deploy (push) Successful in 1m2s
feat(marketing): give each below-the-fold section its own visual archetype
Owner: "die sektionen unter dem video sehen viel zu ähnlich aus — das
kannst du besser." Correct — every section was the same `panel + 3-col
grid` pattern, no page rhythm. Each section now reads as its own type
of moment:

- **Clients** ("Connects everywhere your AI lives"): typographic logo
  row, no panels. Each client carries a small mono mark in a 7×7 box
  (C, ⌘, ✦, <>, →) plus a 17px tracking-tight wordmark. Group hover
  flips the mark and label to the accent colour so the row reads as
  interactive trust signal, not a wall of text. Generous py-20/24
  spacing — this is a beat between sections, not a feature card.

- **Examples** ("Wrap any HTTP API. In minutes."): asymmetric 2-col
  header (h2 left, supporting copy right) over a 3-col card grid
  where each integration carries a coloured 48×48 brand mark —
  Postgres `#336791`, Salesforce `#00a1e0`, Notion black-on-white,
  GitHub `#181717`, Stripe `#635bff`, Custom REST `#6366f1`. The marks
  give each card its own visual identity, breaking the uniform-card
  pattern. h2 sized 32/40 px (was a flat 28 px).

- **Marketplace** ("Skip the prompt. Fork what works."): split layout.
  Left column: eyebrow + headline + supporting paragraph + bullet
  list of the three selling points (no longer equal-weight cards) +
  PulseLink CTA. Right column: new `MarketplaceMock` — a faux-browser
  frame containing four realistic template cards (notion-search /
  github-issues / stripe-readonly / linear-tasks) with author chips,
  ✓ verified badges, tool counts, and a fork glyph. Visitor SEES the
  marketplace instead of reading copy about it.

- **Pricing** ("Pay for tool calls. Not for boilerplate."): 4-card
  row but Pro is featured — indigo border, indigo glow shadow
  `0 0 0 4px rgba(99,102,241,0.12)`, "RECOMMENDED" pill floating at
  -top-3, and accent-coloured feature bullets. Other tiers stay
  calm so the eye lands on Pro first. Price typography enlarged from
  26 px to 40 px so prices read as the headline of each card.

Spacing rhythm: every section is now py-20/28 sm:py-24/28 (was
py-12-14 sm:py-16-20) — gives the below-the-fold the breathing room
it needed; the page no longer feels like a stack of crammed cards.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-28 16:36:06 +02:00

BuildMyMCPServer

Describe your tool. We host the server. AI uses it.

Prompt-to-production MCP servers with OAuth 2.1 and Streamable HTTP. Production-grade infrastructure for hosting Model Context Protocol servers your AI clients (Claude Desktop, Cursor, ChatGPT) can install with a copy-paste snippet.

Quick start

# 1. Install
pnpm install

# 2. Copy env. Defaults work for local dev. Set ANTHROPIC_API_KEY if you want real generation.
cp .env.example .env

# 3. Boot everything
pnpm dev

pnpm dev will:

  1. Load .env.
  2. docker compose up -d --wait postgres + redis.
  3. Push the Drizzle schema (drizzle-kit push --force).
  4. Start the full stack in parallel: web (Next.js, :3000), api (Fastify, :4000), generator (BullMQ worker).

Then open:

Click Start building, enter your email, copy the magic-link URL printed to the api terminal output, paste it in your browser. You land on /dashboard. Click New server, paste a prompt, and watch the build stream live over WebSocket.

If ANTHROPIC_API_KEY is unset, the generator returns a deterministic mock spec (an echo and a now tool) so the full end-to-end flow stays demoable.

If Docker is unavailable, the build will fail at the deploy step with a clear error. Otherwise: a fresh container is launched on a host port from RUNNER_PORT_RANGE_START…RUNNER_PORT_RANGE_END, the server is marked live, and the dashboard renders install snippets for Claude Desktop, Cursor and ChatGPT.

Architecture

See BuildMyMCPServer_MASTER_PROMPT.md for the full specification and CHOICES.md for decisions made during this Sprints 13 build.

apps/
  web/              Next.js 15 dashboard + marketing landing
  api/              Fastify control plane (auth, server CRUD, OAuth 2.1 AS, JWKS, WS stream)
  generator/        BullMQ worker — Claude → spec → render → docker build → local deploy
  runner-template/  Hosted MCP server template (Streamable HTTP + OAuth 2.1 RS)
packages/
  db/               Drizzle schema + client
  auth/             Magic-link + session
  types/            Shared Zod contracts

Scripts

Command Effect
pnpm dev Bootstrap + parallel dev for web, api, generator
pnpm dev:no-docker Skip docker-compose (assumes postgres + redis already up)
pnpm build Turbo build all apps
pnpm typecheck Turbo typecheck all apps
pnpm lint Biome check
pnpm lint:fix Biome check --write
pnpm db:push Push schema to postgres (drizzle-kit)
pnpm db:generate Generate SQL migration files
pnpm db:migrate Apply pending migrations
pnpm stop docker compose down

Acceptance check

After pnpm dev is up:

  • http://localhost:3000 renders the landing page.
  • http://localhost:4000/health returns { "ok": true }.
  • Sign in via magic link (URL printed in the api terminal).
  • New Server → paste prompt → live WebSocket stream queued → generating → building → deploying → live.
  • If Docker is running, a container is launched and http://localhost:<port>/mcp responds 401 + WWW-Authenticate without a token, 200 with a valid token issued by /oauth/token.
  • Install snippets render with copy buttons for Claude Desktop, Cursor, ChatGPT.

Repo conventions

  • TypeScript strict, zero any (Biome lints noExplicitAny as error).
  • ESM-only, Node 20 LTS.
  • Conventional commits.
  • Tailwind v4 (@import 'tailwindcss').
  • Geist + Geist Mono.
Description
No description provided
Readme 54 MiB
Languages
TypeScript 96.2%
Shell 1.9%
JavaScript 0.7%
Dockerfile 0.6%
CSS 0.6%