Skip to content
Back to Templates

MCP with Next.js

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

DeployView Demo
MCP

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
StarterAI
Stack
Next.js
Database
RedisUpstash

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

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

Block AI Bots Firewall Rule

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