Skip to content
Log InContact
Sign Up
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