Click on "Install 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., "@Vercel MCP Server Templateroll a 20-sided die"
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.
Run an MCP Server on Vercel
Usage
Update api/server.js with your tools, prompts, and resources following the MCP TypeScript SDK documentation.
There is also a Next.js version of this template
MCP Client Integration
When adding this server to an MCP client application, use your deployment URL followed by /mcp (Streamable HTTP). The SSE transport is available at /sse:
MCP Apps UI hook
This template registers an MCP Apps UI resource at ui://hello_app_panel and links it to the hello_world tool via _meta.ui.resourceUri. MCP hosts that support MCP Apps will render the panel inline and forward tool calls initiated from the UI.
Example Tools
The template includes one example tool to get you started:
hello_world- Returns a hello message with an allowlistedstyleinput.
Notes for running on Vercel
Make sure you have Fluid compute enabled for efficient execution
After enabling Fluid compute, open
vercel.jsonand adjust max duration to 800 if you using a Vercel Pro or Enterprise account
Local dev
Run
vercel devfor local developmentAlternatively, integrate the system into the server framework of your choice.
Testing & validation
You can list tools via the included clients:
Or for SSE transport:
To manually call the tool via Streamable HTTP, use a simple JSON-RPC request (replace the origin as needed):
Sample Client
scripts/test-client.mjs contains a sample client to try invocations.