Skip to content
Log InContact
Sign Up
← Back to Templates
Avatar of vercel-labsvercel-labs/mcp-for-next.js

Model Context Protocol (MCP) with Next.js

Run an MCP server on Vercel with Next.js.

Deploy
View Demo
Framework
Next.js
Use Case
StarterAI
CSS
None
Database
RedisUpstash
MCP

Example Next.js MCP Server

Uses @vercel/mcp-adapter

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
  • 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
← Back to Templates
MCP
Avatar of vercel-labsvercel-labs/mcp-for-next.js

Model Context Protocol (MCP) with Next.js

Run an MCP server on Vercel with Next.js.

Deploy
View Demo
Framework
Next.js
Use Case
StarterAI
CSS
None
Database
RedisUpstash

Example Next.js MCP Server

Uses @vercel/mcp-adapter

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
  • 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

Related Templates

Liveblocks Notion-like AI Editor

Liveblocks Notion-like AI Editor

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

by Liveblocks

AI SDK Image Generator

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)

by ▲ Vercel

Block AI Bots Firewall Rule

Block AI Bots Firewall Rule

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

by ▲ Vercel

Next.js AI Chatbot

Next.js AI Chatbot

A full-featured, hackable Next.js AI chatbot built by Vercel

by ▲ Vercel

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential