Next.js MCP Server

[!CAUTION] Este proyecto está archivado y ya no recibe soporte. Consulta la documentación para obtener la información más reciente sobre cómo conectar tu agente a las APIs de la plataforma LlamaParse. Nuestro endpoint MCP de producción alojado se encuentra aquí.

Servidor MCP OAuth 2.1 como aplicación Next.js en Vercel

Esta es una aplicación basada en Next.js que proporciona un servidor MCP (Model Context Protocol) con soporte de autenticación OAuth 2.1. Está pensada como modelo para construir tu propio servidor MCP en un contexto Next.js. Utiliza @vercel/mcp-adapter para manejar el protocolo MCP, con el fin de soportar tanto los transportes SSE como Streamable HTTP.

Además de ser un servidor OAuth, también requiere que el usuario se autentique. Actualmente está configurado para usar Google como proveedor, pero puedes autenticar a los usuarios como quieras (X, GitHub, tu propia base de datos de usuarios/contraseñas, etc.) sin romper el flujo OAuth.

Uso con

Claude Desktop y Claude.ai

Claude actualmente solo soporta el transporte SSE más antiguo, por lo que debes darle una URL diferente a la de todos los demás clientes listados aquí.

Usa el botón "Connect Apps" y selecciona "Add Integration". Proporciona la URL como https://example.com/mcp/sse (¡el /sse al final es importante!). Ten en cuenta que Claude Desktop y Web no aceptarán una URL localhost.

Cursor

Edita tu mcp.json para que se vea así:

{
  "mcpServers": {
      "MyServer": {
        "name": "LlamaIndex MCP Demo",
        "url": "https://example.com/mcp/mcp",
        "transport": "http-stream"
      },
  }
}

VSCode

VSCode actualmente no expulsa correctamente el ID de cliente, por lo que el registro del cliente falla si accidentalmente eliminas el cliente (la solución en ese problema lo resolverá). Por lo demás, funciona bien. Añade esto a tu settings.json:

"mcp": {
    "servers": {
        "My Server": {
            "url": "https://example.com/mcp/mcp"
        }
    }
}

MCP Inspector

Dile a Inspector que se conecte a https://example.com/mcp/mcp, con transporte Streamable HTTP. También puedes usar el transporte SSE conectándote a https://example.com/mcp/sse en su lugar.

Ejecutar el servidor

npm install
prisma generate
npm run dev

La primera vez también necesitarás ejecutar prisma db push para crear las tablas de la base de datos.

Variables de entorno

Las variables de entorno requeridas deben estar en .env: (no .env.local porque Prisma no lo soporta)

DATABASE_URL="postgresql://user:pass@server/database"
AUTH_SECRET="any random string"
GOOGLE_CLIENT_ID="a Google OAuth client ID"
GOOGLE_CLIENT_SECRET="a Google OAuth client secret"
REDIS_URL="rediss://user:pass@host:6379"

DATABASE_URL es necesario para que la autenticación OAuth funcione; aquí es donde viven las sesiones, etc.

REDIS_URL es necesario si necesitas que el transporte SSE funcione (es decir, quieres soportar Claude Desktop y Web).

Arquitectura

Si estás usando esto como plantilla para tu propia aplicación Next.js, las partes importantes son:

• /src/app/api/oauth/* - estos implementan el registro de clientes OAuth y el intercambio de tokens
• /src/app/oauth/authorize/page.tsx - esto implementa la pantalla de consentimiento OAuth (es extremadamente básica por ahora)
• /src/mcp/[transport]/route.ts - esto implementa el propio servidor MCP. Tus herramientas, recursos, etc. deben definirse aquí.

Para manejar OAuth, tu aplicación necesita poder persistir clientes, tokens de acceso, etc. Para ello, utiliza una base de datos PostgreSQL accedida mediante Prisma. Puedes cambiarla por otra base de datos si quieres (será más fácil si es otra base de datos compatible con Prisma).

También notarás:

• src/app/auth.ts - esto implementa la autenticación Auth.js para tu propia aplicación. Está configurado para usar Google como proveedor, pero puedes cambiarlo para usar cualquier otro proveedor compatible con Auth.js. Esto no es necesario para que el servidor MCP funcione, pero es una buena idea tenerlo en tu aplicación.
• src/app/api/auth/[...nextauth]/route.ts - esto integra la autenticación Auth.js, y tampoco forma parte de la implementación OAuth.

Despliegue en producción

Esta aplicación solo funciona si se despliega en Vercel actualmente, debido a su dependencia del paquete @vercel/mcp-adapter, que a su vez es necesario para soportar el antiguo transporte SSE. No quisimos implementar un protocolo adicional completo solo para Claude Desktop.

Despliega como de costumbre. Necesitarás añadir prisma generate a tu comando de compilación y, por supuesto, necesitarás todas las mismas variables de entorno que en el entorno de desarrollo.