Vercel MCP Adapter: MCP Server for JS Frameworks

Overview

The Vercel MCP Adapter provides a small TypeScript server implementation of the Model Context Protocol (MCP) that you can mount inside JavaScript meta-frameworks such as Next.js, Nuxt, SvelteKit and others. Instead of running a separate service process, the adapter exposes an MCP-compatible HTTP handler you can wire into your existing server routes, serverless functions, or edge handlers. This makes it easy to serve model contexts and metadata alongside your application code without additional infrastructure.

The adapter is framework-agnostic and focuses on a simple integration surface: a request handler factory and a few configuration options. It’s useful for local development, middleware-style deployments, and environments where you want to expose model context endpoints from the same runtime as your application (for example in serverless or edge deployments). The package is written in TypeScript and aims to be lightweight and easy to drop into popular JS frameworks.

Features

• Framework-agnostic request handler for the Model Context Protocol (MCP)
• Written in TypeScript with type definitions for IDE support
• Small API surface: create a handler and mount in your framework routes
• Works in serverful, serverless, and edge runtime environments
• Configurable models/context providers and authentication hooks
• Optimized for developer workflows (local dev, testing)

Installation / Configuration

Install the adapter package (npm or yarn):

# npm
npm install @vercel/mcp-adapter

# yarn
yarn add @vercel/mcp-adapter

Basic TypeScript initialization:

// src/mcp.ts
import { createMCPServer } from "@vercel/mcp-adapter";

export const mcpHandler = createMCPServer({
  // Provide a map or function that returns model context/metadata
  getModelContext: async (modelId) => {
    // return context object for given modelId
    return {
      id: modelId,
      name: "example-model",
      capabilities: ["completion", "embeddings"],
      // extra metadata...
    };
  },

  // Optional: auth hook to validate incoming requests
  authorize: async (req) => {
    const token = req.headers.get("authorization")?.replace("Bearer ", "");
    return token === process.env.MCP_SECRET;
  },

  // Optional runtime / feature flags
  allowDebugEndpoints: process.env.NODE_ENV !== "production",
});

Mounting for different frameworks:

• Next.js (App Router route.ts)

// app/api/mcp/route.ts
import { NextRequest, NextResponse } from "next/server";
import { mcpHandler } from "@/mcp";

export async function GET(req: NextRequest) {
  return mcpHandler.handleRequest(req);
}

export async function POST(req: NextRequest) {
  return mcpHandler.handleRequest(req);
}

• SvelteKit (src/routes/mcp/+server.ts)

import type { RequestHandler } from "@sveltejs/kit";
import { mcpHandler } from "$lib/mcp";

export const GET: RequestHandler = async ({ request }) => {
  return mcpHandler.handleRequest(request);
};

export const POST: RequestHandler = GET;

• Nuxt (server/api/mcp.post.ts)

import { defineEventHandler } from "h3";
import { mcpHandler } from "~/server/mcp";

export default defineEventHandler(async (event) => {
  const req = event.node.req; // Node's IncomingMessage
  const res = event.node.res;
  await mcpHandler.handleNodeRequest(req, res);
});

Note: adapter exposes helpers to accept various request/response types (Fetch API Request, Node IncomingMessage/ServerResponse, framework-specific objects).

Available Resources

• Repository: https://github.com/vercel/mcp-adapter
• TypeScript types: included with package for autocompletion
• MCP specification: consult your MCP spec document for expected endpoints and payload formats
• Example apps: check the repo’s examples folder for Next, SvelteKit and Nuxt integrations

Use Cases

• Local development: serve MCP endpoints from the same dev server as your app to iterate quickly without running a separate context service.
• Serverless or edge deployments: include MCP handlers inside your serverless functions or edge handlers to reduce cold-start overhead and simplify deployment.
• Testing and CI: spin up an in-process MCP server to mock production model metadata during unit or integration tests.
• Multi-framework monorepo: share a single TypeScript MCP implementation across Next.js, SvelteKit and Nuxt apps by using the adapter’s framework-agnostic handler.

Integration Matrix

Tips

• Keep authentication logic in the authorize hook to centralize access control.
• Return minimal, stable metadata to reduce client parsing complexity.
• Use environment variables for secrets and flags to switch debug endpoints on/off.
• Refer to the repo examples for framework-specific edge cases (streaming, body parsing).

If you need framework-specific examples beyond the basics above, check the repository’s examples directory or open an issue on the GitHub repo for guidance.