Next.js MCP Server
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Next.js MCP Serverlist available tools and their descriptions"
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 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_URLand toggling thedisableSseflag tofalseinapp/mcp/route.tsMake sure you have Fluid compute enabled for efficient execution
After enabling Fluid compute, open
app/route.tsand adjustmaxDurationto 800 if you using a Vercel Pro or Enterprise account
Sample Client
script/test-client.mjs contains a sample client to try invocations.
node scripts/test-client.mjs https://mcp-for-next-js.vercel.appRelated MCP Connectors
MCP server for AI agents to plan, verify, and deploy Cloudflare-native apps.
Nifty's MCP server — exposes tasks, projects, messages, and files as tools for AI agents.
MCP server for building and testing AI agents with multi-model experimentation and insights.