New Project

MCP with Next.js

Run an Model Context Protocol (MCP) server on Vercel with Next.js.

DeployView Demo

Example Next.js MCP Server

Uses mcp-handler

Usage

This sample app uses the Vercel MCP Adapter that allows you to drop in an MCP server on a group of routes in any Next.js project.

Update app/[transport]/route.ts with your tools, prompts, and resources following the MCP TypeScript SDK documentation.

Notes for running on Vercel

  • To use the SSE transport, requires a Redis attached to the project under process.env.REDIS_URL and toggling the disableSse flag to false in app/mcp/route.ts
  • Make sure you have Fluid compute enabled for efficient execution
  • After enabling Fluid compute, open app/route.ts and adjust maxDuration to 800 if you using a Vercel Pro or Enterprise account
  • Deploy the Next.js MCP template

Sample Client

script/test-client.mjs contains a sample client to try invocations.

node scripts/test-client.mjs https://mcp-for-next-js.vercel.app
GitHub Repovercel-labs/mcp-for-next.js
Use Cases
Starter
AI
Stack
Next.js
None
Database
Redis
Upstash

Related Templates

Liveblocks Notion-like AI Editor

A Notion-like collaborative text editor with AI features built with Liveblocks, Lexical, Vercel AI SDK, and Next.js.
Liveblocks Notion-like AI Editor thumbnail

AI SDK Image Generator

An open-source AI image generator built with Next.js, the AI SDK, and various AI providers (Replicate, Fireworks, Google Vertex AI, OpenAI)
AI SDK Image Generator thumbnail

Block AI Bots Firewall Rule

Adds a rule to your Vercel Firewall that detects common AI Bots.
Block AI Bots Firewall Rule thumbnail
DeployView Demo