Vercel MCP Adapter

@vercel/mcp-adapter

A Vercel adapter for the Model Context Protocol (MCP), enabling real-time communication between your applications and AI models. Currently supports Next.js with more framework adapters coming soon.

Warning

This package is pinned to @modelcontextprotocol/sdk@1.12.0 to ensure compatibility and stability. Using a different version may cause unexpected behavior.

Installation

npm install @vercel/mcp-adapter @modelcontextprotocol/sdk
# or
yarn add @vercel/mcp-adapter @modelcontextprotocol/sdk
# or
pnpm add @vercel/mcp-adapter @modelcontextprotocol/sdk
# or
bun add @vercel/mcp-adapter @modelcontextprotocol/sdk

Next.js Usage

// app/api/[transport]/route.ts
import { createMcpHandler } from '@vercel/mcp-adapter';
const handler = createMcpHandler(
  server => {
    server.tool(
      'roll_dice',
      'Rolls an N-sided die',
      {
        sides: z.number().int().min(2)
      },
      async ({ sides }) => {
        const value = 1 + Math.floor(Math.random() * sides);
        return {
          content: [{ type: 'text', text: `🎲 You rolled a ${value}!` }],
        };
      }
    );
  },
  {
    // Optional server options
  },
  {
    // Optional redis config
    redisUrl: process.env.REDIS_URL,
    // You need these endpoints
    basePath: '/api', // this needs to match where the [transport] is located.
    // @deprecated use 'basePath' instead
    streamableHttpEndpoint?: string; // Endpoint for streamable HTTP transport
    // @deprecated use 'basePath' instead
    sseEndpoint?: string; // Endpoint for SSE transport
    // @deprecated use 'basePath' instead
    sseMessageEndpoint?: string; // Endpoint for SSE message transport
    maxDuration: 60,
    verboseLogs: true,
  }
);
export { handler as GET, handler as POST };

Integrating into your client

When you want to use it in your MCP client of choice:

Claude Desktop

Official Docs

In order to add an MCP server to Claude Desktop you need to edit the configuration file located at:

"remote-example": {
  "command": "npx",
  "args": [
    "mcp-remote",
    "http://localhost:3000/api/mcp" // this is your app/api/[transport]/route.ts
  ]
}

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json If it does not exist yet, you may need to enable it under Settings > Developer.

Restart Claude Desktop to pick up the changes in the configuration file. Upon restarting, you should see a hammer icon in the bottom right corner of the input box.

Cursor

Official Docs

The configuration file is located at ~/.cursor/mcp.json.

As of version 0.48.0, Cursor supports unauthed SSE servers directly. If your MCP server is using the official MCP OAuth authorization protocol, you still need to add a "command" server and call mcp-remote.

Windsurf

Official Docs

The configuration file is located at ~/.codeium/windsurf/mcp_config.json.

Usage in your app

Use the MCP client in your application:

// app/components/YourComponent.tsx
import { McpClient } from "@modelcontextprotocol/sdk/client";

const client = new McpClient({
  // When using basePath, the SSE endpoint will be automatically derived
  transport: new SSEClientTransport("/api/mcp/mcp"),
});

// Use the client to make requests
const result = await client.request("yourMethod", { param: "value" });

Configuration Options

The initializeMcpApiHandler function accepts the following configuration options:

interface Config {
  redisUrl?: string; // Redis connection URL for pub/sub
  basePath?: string; // string; // Base path for MCP endpoints
  maxDuration?: number; // Maximum duration for SSE connections in seconds
  verboseLogs?: boolean; // Log debugging information
}

Features

Framework Support: Currently supports Next.js with more framework adapters coming soon
Multiple Transport Options: Supports both Streamable HTTP and Server-Sent Events (SSE) transports
Redis Integration: For SSE transport resumability
TypeScript Support: Full TypeScript support with type definitions

Requirements

Next.js 13 or later (for Next.js adapter)
Node.js 18 or later
Redis (optional, for SSE transport)

License

Apache-2.0

This server cannot be installed

security - not tested

license - not found

quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Enables real-time communication between applications and AI models using the Model Context Protocol, supporting features like custom tools and multiple transport options for Next.js applications.

Related MCP Servers

MCP Server
freedanfan
-
security
A
license
-
quality
A FastAPI-based implementation of the Model Context Protocol that enables standardized interaction between AI models and development environments, making it easier for developers to integrate and manage AI tasks.
Last updated 3 months ago
10
Python
MIT License
Bankless Onchain MCP Serverofficial
Bankless
A
security
F
license
A
quality
Implements the Model Context Protocol to allow AI models to access and interact with blockchain data, including reading contract states, retrieving events, and accessing transaction information across various networks.
Last updated 6 days ago
10
570
54
TypeScript
MCP Server Demo
tian1ll1
-
security
F
license
-
quality
A demonstration implementation of the Model Context Protocol server that facilitates communication between AI models and external tools while maintaining context awareness.
Last updated 4 months ago
Python
RL-MCP
rlefko
-
security
F
license
-
quality
A Model Context Protocol server that provides AI models with structured access to external data and services, acting as a bridge between AI assistants and applications, databases, and APIs in a standardized, secure way.
Last updated 2 months ago
1
Python

View all related MCP servers

Vercel MCP Adapter