Si has estado construyendo productos SaaS en 2025-2026, probablemente hayas notado que todo gerente de producto ahora quiere "funciones de IA". Justo. Pero la verdadera pregunta no es si agregar IA -- es cómo dar a los modelos de IA acceso estructurado y seguro a los datos y capacidades de tu aplicación. Eso es exactamente lo que resuelve el Model Context Protocol (MCP), e implementar servidores MCP en Vercel con Next.js se ha convertido en uno de los patrones más prácticos que he visto para equipos de SaaS que quieren moverse rápido sin configurar nueva infraestructura.

He pasado los últimos meses construyendo servidores MCP para clientes -- algunos con configuraciones simples de servicio de herramientas, otros con flujos de autenticación multi-tenant complejos. Este artículo cubre todo lo que he aprendido sobre construir, desplegar y escalar servidores MCP en Vercel con Next.js.

Desarrollo de MCP Server: Deploy en Vercel con Next.js para SaaS

Tabla de Contenidos

Qué es MCP y por qué los equipos de SaaS deberían importarle

El Model Context Protocol (MCP) es un estándar abierto -- originalmente desarrollado por Anthropic y ahora ampliamente adoptado -- que define cómo los modelos de IA interactúan con herramientas externas y fuentes de datos. Piénsalo como un puerto USB-C para IA: una interfaz estandarizada que cualquier cliente de IA puede usar para conectarse a cualquier servidor compatible con MCP.

Antes de MCP, si querías que Claude, GPT, o cualquier otro modelo interactuara con tu aplicación SaaS, construirías integraciones personalizadas para cada proveedor de IA. La invocación de funciones con OpenAI lucía diferente al uso de herramientas con Anthropic. MCP cambia eso. Construyes un servidor, y cualquier cliente compatible con MCP puede usarlo.

Para equipos de SaaS, esto importa porque:

  • Tus usuarios esperan integraciones de IA. A mediados de 2026, aproximadamente el 68% de los usuarios de SaaS B2B reportan usar asistentes de IA junto con sus herramientas principales (Gartner, Q1 2026).
  • MCP se está convirtiendo en el estándar. Claude Desktop, Cursor, Windsurf, VS Code Copilot, y docenas de otros clientes ahora soportan MCP de forma nativa.
  • Construir un servidor MCP es más barato que construir integraciones personalizadas para cada proveedor de IA.

MCP vs. Integraciones de API Tradicionales

Aspecto API Tradicional Servidor MCP
Compatibilidad de clientes Uno a uno por proveedor Cualquier cliente compatible con MCP
Descubrimiento Lectura manual de docs Descubrimiento automático de herramientas/recursos
Flujo de autenticación Personalizado por integración OAuth 2.1 / Claves API estandarizadas
Carga de mantenimiento Alto (N integraciones) Bajo (1 servidor)
Datos en tiempo real Polling o webhooks Eventos enviados por servidor / streaming
Tiempo de configuración Días a semanas por cliente Horas para el servidor, minutos por cliente

Resumen de Arquitectura: MCP en Vercel

Aquí está la arquitectura en la que he llegado después de iterar a través de varios enfoques:

┌─────────────────┐     ┌──────────────────────┐     ┌─────────────────┐
│  Clientes MCP   │     │  Vercel (Next.js)    │     │  Tu Backend     │
│                 │     │                      │     │  SaaS           │
│  - Claude       │────▶│  /api/mcp (HTTP+SSE) │────▶│  - Base de datos│
│  - Cursor       │     │  /api/mcp/sse        │     │  - APIs         │
│  - Apps Custom  │◀────│  /api/auth/[...mcp]  │     │  - Servicios    │
└─────────────────┘     └──────────────────────┘     └─────────────────┘

La idea clave: tu servidor MCP no reemplaza tu API existente. Se sienta enfrente como una capa de traducción. El servidor MCP expone herramientas y recursos que se asignan a tu funcionalidad SaaS existente, pero en un formato que los modelos de IA pueden descubrir y usar.

En Vercel, esto se ejecuta como funciones serverless. La especificación MCP más reciente (v2025-12) soporta HTTP con Server-Sent Events (SSE) como transporte, que funciona bien con el soporte de streaming de Vercel en manejadores de rutas de Next.js.

¿Por qué Next.js en Vercel?

Podrías construir un servidor MCP con cualquier framework -- Express, Fastify, Hono, lo que sea. Pero Next.js en Vercel te da algunas ventajas reales para SaaS:

  1. Tu sitio de marketing, aplicación y servidor MCP viven en un repositorio. Menos infraestructura que gestionar.
  2. Middleware de Edge maneja la autenticación antes de que las solicitudes lleguen a tus puntos finales MCP.
  3. Soporte de streaming de Vercel funciona bien con transporte basado en SSE.
  4. Escalado automático -- no piensas en servidores.
  5. Si ya estás ejecutando Next.js (y estadísticamente, probablemente lo estés), no hay nueva infraestructura.

Hacemos mucho desarrollo en Next.js en Social Animal, y este patrón se ha convertido en una de nuestras arquitecturas más solicitadas.

Desarrollo de MCP Server: Deploy en Vercel con Next.js para SaaS - arquitectura

Configurando tu Servidor MCP con Next.js

Vamos a construir esto. Asumo que estás en Next.js 15+ con App Router.

Instalando Dependencias

pnpm add @modelcontextprotocol/sdk zod
pnpm add -D @types/node

El paquete @modelcontextprotocol/sdk (v1.12+ a partir de principios de 2026) incluye todo lo que necesitas para transporte HTTP+SSE. Las versiones anteriores solo soportaban stdio, que no funciona en serverless.

Creando el Manejador de Ruta MCP

// app/api/mcp/route.ts
import { McpServer } from '@modelcontextprotocol/sdk/server';
import { httpTransport } from '@modelcontextprotocol/sdk/server/http';
import { z } from 'zod';

const server = new McpServer({
  name: 'your-saas-mcp',
  version: '1.0.0',
  description: 'MCP server for YourSaaS platform',
});

// Registra herramientas (las completaremos a continuación)
server.tool(
  'get-projects',
  'List all projects for the authenticated user',
  {
    status: z.enum(['active', 'archived', 'all']).optional().default('active'),
    limit: z.number().min(1).max(100).optional().default(20),
  },
  async ({ status, limit }, context) => {
    // Tu lógica de negocio real aquí
    const projects = await fetchProjects(context.auth.userId, { status, limit });
    return {
      content: [
        {
          type: 'text',
          text: JSON.stringify(projects, null, 2),
        },
      ],
    };
  }
);

const handler = httpTransport(server, {
  sessionManagement: true,
  cors: {
    origin: '*', // Restringe esto en producción
  },
});

export const GET = handler;
export const POST = handler;
export const DELETE = handler;

Punto Final SSE para Streaming

Algunos clientes MCP prefieren el transporte SSE para operaciones de larga duración:

// app/api/mcp/sse/route.ts
import { sseTransport } from '@modelcontextprotocol/sdk/server/sse';
import { server } from '../mcp-server'; // Extrae la configuración del servidor a módulo compartido

export const GET = sseTransport(server, {
  // Vercel tiene un timeout de 30 segundos en Hobby, 300s en Pro
  // Para herramientas de larga duración, necesitarás un plan Pro mínimo
  keepAliveInterval: 15000,
});

Implementando Herramientas y Recursos MCP

Aquí es donde ocurre el verdadero trabajo. MCP distingue entre herramientas (acciones que la IA puede tomar) y recursos (datos que la IA puede leer). Hacerlo bien es la diferencia entre un servidor MCP que los clientes de IA aman y uno con el que luchan.

Diseñando Buenas Herramientas

El error más grande que veo: herramientas que son demasiado granulares o demasiado amplias. Si expones 50 herramientas pequeñas, los modelos de IA se sienten abrumados. Si expones 3 mega-herramientas que cada una toma 20 parámetros, los modelos cometen errores.

Mi regla general: una herramienta por intención del usuario. Si un usuario diría "muéstrame mis facturas recientes", eso es una herramienta. No la dividas en list-invoices + filter-invoices + format-invoices.

// Bueno: intención clara, parámetros razonables
server.tool(
  'search-customers',
  'Search for customers by name, email, or account ID. Returns matching customer profiles with recent activity.',
  {
    query: z.string().describe('Search term - can be name, email, or account ID'),
    includeInactive: z.boolean().optional().default(false),
  },
  async ({ query, includeInactive }, context) => {
    const customers = await customerService.search({
      query,
      tenantId: context.auth.tenantId,
      includeInactive,
    });
    
    return {
      content: [{
        type: 'text',
        text: JSON.stringify(customers.map(c => ({
          id: c.id,
          name: c.name,
          email: c.email,
          plan: c.plan,
          mrr: c.mrr,
          lastActive: c.lastActiveAt,
        })), null, 2),
      }],
    };
  }
);

Exponiendo Recursos

Los recursos son datos de solo lectura que los clientes de IA pueden extraer como contexto. Piénsalos como archivos que el modelo puede referenciar:

server.resource(
  'api-docs',
  'Your SaaS API documentation',
  'text/markdown',
  async () => {
    const docs = await fs.readFile('./docs/api-reference.md', 'utf-8');
    return { content: docs };
  }
);

// Recurso dinámico con plantilla de URI
server.resourceTemplate(
  'project/{projectId}/analytics',
  'Analytics summary for a specific project',
  'application/json',
  async ({ projectId }, context) => {
    const analytics = await analyticsService.getSummary(projectId, context.auth.tenantId);
    return { content: JSON.stringify(analytics) };
  }
);

Autenticación y Multi-Tenancy

Esta es la parte que todos hacen mal en el primer intento. MCP soporta OAuth 2.1 para autenticación, y si estás construyendo un SaaS multi-tenant, absolutamente necesitas esto.

Flujo OAuth 2.1 para MCP

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/api/mcp')) {
    const authHeader = request.headers.get('authorization');
    
    if (!authHeader?.startsWith('Bearer ')) {
      return NextResponse.json(
        { error: 'Missing or invalid authorization header' },
        { status: 401 }
      );
    }
    
    // Valida el token e inyecta contexto de tenant
    // Aquí es donde se conecta tu sistema de autenticación existente
  }
}

export const config = {
  matcher: '/api/mcp/:path*',
};

Para el punto final de descubrimiento OAuth que los clientes MCP necesitan:

// app/.well-known/oauth-authorization-server/route.ts
export function GET() {
  return Response.json({
    issuer: 'https://your-saas.com',
    authorization_endpoint: 'https://your-saas.com/oauth/authorize',
    token_endpoint: 'https://your-saas.com/api/oauth/token',
    registration_endpoint: 'https://your-saas.com/api/oauth/register',
    scopes_supported: ['mcp:read', 'mcp:write', 'mcp:admin'],
    response_types_supported: ['code'],
    code_challenge_methods_supported: ['S256'],
  });
}

Aislamiento Multi-Tenant

Cada invocación de herramienta MCP debe estar limitada al tenant autenticado. Uso un patrón donde el contexto de autenticación se inyecta en cada manejador de herramienta automáticamente:

const withTenant = (handler) => async (params, context) => {
  const tenant = await resolveTenant(context.auth.token);
  if (!tenant) throw new McpError('Invalid tenant');
  return handler(params, { ...context, tenant });
};

Nunca confíes en parámetros de herramientas para la identificación de tenant. Siempre derívalo del token de autenticación.

Desplegando en Vercel: Configuración y Trampas

Configuración de vercel.json

{
  "functions": {
    "app/api/mcp/route.ts": {
      "maxDuration": 60
    },
    "app/api/mcp/sse/route.ts": {
      "maxDuration": 300
    }
  },
  "headers": [
    {
      "source": "/api/mcp/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-store" }
      ]
    }
  ]
}

Las Trampas que Nadie te Cuenta

1. Timeouts de función. El plan Hobby de Vercel maxea en 30 segundos. Pro te da 300 segundos. Para herramientas MCP que llaman APIs lentas o procesan datos, necesitas Pro como mínimo. A $20/mes por miembro del equipo, no es gran cosa para la mayoría de equipos de SaaS.

2. Arranques en frío. Los arranques en frío de serverless pueden agregar 200-800ms a la primera solicitud. Los clientes MCP generalmente manejan esto bien -- no esperan respuestas sub-50ms. Pero si te molesta, usa cron de Vercel para mantener las funciones calientes.

3. SSE y streaming. Vercel soporta respuestas de streaming, pero hay casos extremos con su capa CDN. Establece Cache-Control: no-store en todas las rutas MCP. Aprendí esto por las malas cuando las respuestas SSE en caché hacían que los clientes recibieran listas de herramientas obsoletas.

4. Tamaño del cuerpo de la solicitud. Vercel limita los cuerpos de solicitud a 4.5MB en funciones serverless. Si tus herramientas MCP manejan cargas de archivos o payloads grandes, necesitarás usar URLs de carga firmadas en su lugar.

5. Variables de entorno. No olvides establecer la URL pública del servidor MCP como una variable de entorno. Durante el desarrollo, usarás algo como ngrok o URLs de vista previa de Vercel, pero en producción, necesita ser tu dominio canónico.

# .env.production
MCP_SERVER_URL=https://your-saas.com/api/mcp
MCP_SERVER_NAME=your-saas-mcp

Optimización de Rendimiento y Escalado

Estrategias de Caché

Las respuestas de herramientas MCP pueden ser cacheadas cuando los datos no cambian frecuentemente:

import { unstable_cache } from 'next/cache';

const getCachedAnalytics = unstable_cache(
  async (tenantId: string, projectId: string) => {
    return analyticsService.getSummary(tenantId, projectId);
  },
  ['analytics-summary'],
  { revalidate: 300 } // 5 minutos
);

Connection Pooling

Si tus herramientas MCP golpean una base de datos, usa connection pooling. En Vercel, cada invocación de función obtiene su propio contexto de ejecución, así que sin pooling, agotarás las conexiones de base de datos rápidamente.

import { Pool } from '@neondatabase/serverless';

// El driver serverless de Neon maneja pooling automáticamente
const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
});

Recomendaría Neon o PlanetScale para herramientas MCP respaldadas por base de datos en Vercel. Ambas manejan bien el modelo de conexión serverless.

Benchmarks

Aquí está lo que hemos medido en varios despliegues MCP en producción en Vercel Pro:

Métrica Arranque en Frío Caliente P99
Herramienta simple (sin BD) 420ms 45ms 180ms
Herramienta respaldada por BD (Neon) 680ms 95ms 320ms
Herramienta con API externa 850ms 280ms 1200ms
Configuración de conexión SSE 520ms 60ms 250ms
Descubrimiento de herramientas (listar) 380ms 30ms 120ms

Estos números son buenos para interacciones de clientes de IA. Los modelos toman segundos para generar respuestas de todas formas -- tu servidor MCP no será el cuello de botella.

Monitoreo y Observabilidad

Necesitas saber qué está sucediendo en producción. Los servidores MCP tienen necesidades de observabilidad únicas porque los "usuarios" son modelos de IA, no humanos.

Qué Rastrear

  • Frecuencia de invocación de herramientas -- ¿qué herramientas están usando realmente los modelos?
  • Tasas de error por herramienta -- ¿una herramienta específica está fallando más que otras?
  • Distribución de token/tenant -- ¿un tenant está golpeando tu servidor?
  • Tamaños de payload de respuesta -- las respuestas de tamaño excesivo desperdician ventanas de contexto de modelo
// Middleware de logging simple para herramientas MCP
const withLogging = (toolName: string, handler: Function) => {
  return async (params: any, context: any) => {
    const start = performance.now();
    try {
      const result = await handler(params, context);
      const duration = performance.now() - start;
      
      console.log(JSON.stringify({
        type: 'mcp_tool_invocation',
        tool: toolName,
        tenant: context.auth?.tenantId,
        duration,
        success: true,
        responseSize: JSON.stringify(result).length,
      }));
      
      return result;
    } catch (error) {
      console.error(JSON.stringify({
        type: 'mcp_tool_error',
        tool: toolName,
        tenant: context.auth?.tenantId,
        error: error.message,
      }));
      throw error;
    }
  };
};

Canaliza estos logs a Axiom (logging integrado de Vercel), Datadog, o lo que ya estés usando. Los Log Drains integrados de Vercel hacen esto directo.

Análisis de Costos: Ejecutar Servidores MCP en Vercel

Hablemos de dinero. Aquí está un desglose de costos realista para un SaaS de tamaño medio ejecutando un servidor MCP en Vercel en 2026:

Componente Hobby Pro Enterprise
Plan base $0/mes $20/mes por usuario Personalizado
Invocaciones de función (incluidas) 100K 1M Personalizado
Invocaciones adicionales N/A $0.60 por 1M Negociable
Ancho de banda (incluido) 100GB 1TB Personalizado
Duración máxima de función 30s 300s 900s
Middleware de Edge Incluido Incluido Incluido
Estimado mensual (10K solicitudes MCP/día) No viable ~$25-40 Personalizado

Para la mayoría de productos SaaS, el plan Pro maneja bien el tráfico MCP. En 10,000 invocaciones de herramientas MCP por día (que es bastante activo), buscas ~300K ejecuciones de función por mes -- bien dentro de la asignación incluida de Pro.

Compáralo con ejecutar un servidor MCP dedicado en AWS: necesitarías como mínimo una instancia EC2 ($30-50/mes), balanceador de carga ($18/mes), y tu tiempo administrando infraestructura. Vercel gana en simplicidad operacional.

Si estás evaluando la arquitectura correcta para tu SaaS, podemos ayudarte a delinear esto. Revisa nuestra página de precios o comunícate directamente.

Preguntas Frecuentes

¿Qué es el Model Context Protocol (MCP) y en qué se diferencia de la invocación de funciones? MCP es un estándar abierto para conectar modelos de IA a herramientas y datos externos. A diferencia de la invocación de funciones específica del proveedor (invocación de funciones de OpenAI, uso de herramientas de Anthropic), MCP es universal. Construyes un servidor MCP, y cualquier cliente compatible -- Claude, Cursor, apps personalizadas -- puede descubrir y usar tus herramientas automáticamente. La invocación de funciones requiere que definas herramientas por separado para cada proveedor de IA.

¿Puedo desplegar un servidor MCP en el plan Hobby gratuito de Vercel? Técnicamente sí, pero no lo recomendaría para producción. El timeout de función de 30 segundos es demasiado restrictivo para herramientas MCP que consultan bases de datos o llaman APIs externas. También obtienes invocaciones limitadas (100K/mes). El plan Pro a $20/mes por usuario es el mínimo que sugeriría para cualquier carga de trabajo real.

¿Cómo manejo la autenticación entre clientes MCP y mi SaaS? La especificación MCP soporta OAuth 2.1. Expones un punto final .well-known/oauth-authorization-server que los clientes MCP descubren automáticamente. Cuando un usuario se conecta a través de un cliente de IA como Claude, se redirigen a tu flujo OAuth estándar, conceden permisos, y el cliente recibe un token de acceso limitado. Este token se envía con cada solicitud MCP.

¿Cuál es la diferencia entre herramientas MCP y recursos MCP? Las herramientas son acciones -- cosas que la IA puede hacer (crear un proyecto, enviar un email, ejecutar una consulta). Los recursos son datos -- cosas que la IA puede leer para contexto (documentación, archivos de configuración, resúmenes de analítica). Las herramientas se invocan bajo demanda; los recursos se cargan en la ventana de contexto del modelo. Diseña herramientas para acciones, recursos para material de referencia.

¿Cuántas herramientas MCP debería exponer mi servidor? De mi experiencia, 5-15 herramientas es el punto dulce para la mayoría de productos SaaS. Menos de 5 y tu servidor MCP no es muy útil. Más de 20 y los modelos de IA comienzan a tomar decisiones pobres de selección de herramientas. Agrupa operaciones relacionadas en herramientas únicas con opciones de parámetros en lugar de exponer cada operación CRUD por separado.

¿Esto funciona con frameworks otros que Next.js? Absolutamente. El @modelcontextprotocol/sdk funciona con cualquier framework de Node.js. Podrías usar Hono, Express, o incluso Astro con puntos finales SSR. Next.js en Vercel es solo una combinación particularmente conveniente debido al soporte de streaming incorporado, middleware de edge, y despliegue sin configuración. Si estás usando un stack diferente, nuestro equipo de desarrollo de headless CMS ha construido servidores MCP en múltiples frameworks.

¿Cómo pruebo mi servidor MCP durante el desarrollo? El MCP Inspector (parte del toolkit oficial de MCP) es tu mejor amigo. Se conecta a tu servidor local y te permite invocar herramientas, navegar recursos, y depurar respuestas interactivamente. Para pruebas automatizadas, escribe pruebas de integración que instantíen tu servidor MCP en proceso e invoquen herramientas programáticamente -- el SDK soporta esto sin necesidad de transporte HTTP.

¿Qué sucede cuando las funciones de Vercel arrancan en frío durante una solicitud MCP? Los clientes MCP están diseñados para ser tolerantes a la latencia -- típicamente están esperando respuestas de modelos de IA que toman segundos de todas formas. Un arranque en frío de 400-800ms es imperceptible en la práctica. Si te preocupa, el plan Pro de Vercel te permite configurar calentamiento basado en cron, y el SDK incluye lógica automática de reintento para fallos transitorios. En seis meses de uso en producción, los arranques en frío nunca han sido un problema reportado por usuarios para nuestros clientes.