How we turned our Next.js App Router API into an MCP Server (Model Context Protocol) for local and remote LLM orchestration

Revised Main Feed Post Body:

Hey r/nextjs,

We recently refactored our Next.js + Supabase CMS AI pipeline away from in-browser chat generation into a Model Context Protocol (MCP) Server.

The goal was to let developers control database schemas and JSONB layouts directly from external tools like Claude Code, Cursor, or ChatGPT without needing a custom UI wrapper.

The Architecture Setup

We exposed a Route Handler at /api/mcp using Streamable HTTP/SSE transport following the JSON-RPC 2.0 MCP specification.

Here is the general execution loop:

[Claude Code / Cursor / ChatGPT]
               │
               │ Streamable HTTP/SSE (Bearer Token / OAuth)
               ▼
┌──────────────────────────────────────────────┐
│       Next.js 16 Route Handler (/api/mcp)    │
├──────────────────────────────────────────────┤
│               MCP Tool Registry              │
│  - get_database_schema                       │
│  - generate_jsonb_layout                     │
│  - query_site_analytics                      │
│  - update_navigation                         │
└──────────────────────┬───────────────────────┘
                       │
                       ▼
┌──────────────────────────────────────────────┐
│            Supabase / PostgreSQL             │
└──────────────────────────────────────────────┘