How do I use Next.js MCP Server Template?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Next.js MCP Server Template deploy a new MCP server with a weather tool and a prompt for data analysis" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

Example Next.js MCP Server

Uses

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