Skip to content
Docs

Build MCP servers and clients

Deploy Model Context Protocol (MCP) servers on Vercel with mcp-handler, then call their tools from agents built with the AI SDK, eve, or TanStack AI.
app/api/mcp/route.ts
import { createMcpHandler } from 'mcp-handler';
import { z } from 'zod';
 
const handler = createMcpHandler((server) => {
  server.registerTool(
    'roll_dice',
    {
      description: 'Roll an N-sided die',
      inputSchema: z.object({ sides: z.number().int().min(2) }),
    },
    async ({ sides }) => {
      const value = 1 + Math.floor(Math.random() * sides);
      return { content: [{ type: 'text', text: `🎲 You rolled a ${value}!` }] };
    },
  );
});
 
export { handler as GET, handler as POST };
index.mts
import { createMCPClient } from '@ai-sdk/mcp';
import { generateText, isStepCount } from 'ai';
 
const client = await createMCPClient({
  transport: { type: 'http', url: 'https://my-mcp-server.vercel.app/api/mcp' },
});
 
try {
  const { text } = await generateText({
    model: 'anthropic/claude-opus-5',
    tools: await client.tools(),
    prompt: 'Use roll_dice to roll a six-sided die once.',
    stopWhen: isStepCount(5),
  });
  console.log(text);
} finally {
  await client.close();
}

Model Context Protocol (MCP) is a standard interface that lets large language models (LLMs) communicate with external tools and data sources. It allows developers and tool providers to integrate once and interoperate with any MCP-compatible system.

The Create a server example uses mcp-handler to expose a roll_dice tool at /api/mcp. The Call tools from an agent example connects to that route with the AI SDK, and the model calls the tool. Replace https://my-mcp-server.vercel.app with your deployment's URL.

LLMs don't have access to real-time or external data by default. To provide relevant context, such as current financial data, pricing, or user-specific data, developers must connect LLMs to external systems.

Each tool or service has its own API, schema, and authentication. Managing these differences becomes difficult and error-prone as the number of integrations grows.

MCP standardizes the way LLMs interact with tools and data sources. Developers implement a single integration with MCP, and use it to manage communication with any compatible service.

Tool and data providers only need to expose an MCP interface once. After that, their system can be accessed by any MCP-enabled application.

MCP is like the USB-C standard: instead of needing different connectors for every device, you use one port to handle many types of connections.

MCP uses a client-server architecture for the AI model to external system communication. The user connects to the AI application, referred to as the MCP host, such as IDEs like Cursor, AI chat apps like ChatGPT or AI agents. To connect to external services, the host creates one connection, referred to as the MCP client, to one external service, referred to as the MCP server. Therefore, to connect to multiple MCP servers, one host needs to open and manage multiple MCP clients.

Use mcp-handler to expose your application's tools, resources, and prompts to MCP clients. The package builds on the MCP TypeScript SDK and turns your server definition into a Web-standard HTTP request handler.

You can use mcp-handler with Next.js, Nuxt, SvelteKit, Hono, and other frameworks that support Web-standard Request and Response APIs. Follow the deployment guide to create a tool, test your MCP server, and deploy it on Vercel.

An MCP server can offer three kinds of features. Tools are functions the model calls, such as creating an issue or querying a database. Resources are data, such as file contents or records, that the application attaches to the model's context. Prompts are message templates that users choose, such as a code review prompt. Clients and servers list and use these features by exchanging JSON-RPC 2.0 messages. With mcp-handler, you add each feature with registerTool, registerResource, or registerPrompt. See Server Features in the MCP specification.

Use Streamable HTTP. The MCP specification defines two standard transports. With stdio, the client starts the server as a local subprocess, so it suits servers on your own machine. With Streamable HTTP, the client sends each message as an HTTP POST to one endpoint and receives a JSON response or a server-sent events (SSE) stream for that request, which a deployed function can serve. mcp-handler v2 serves Streamable HTTP for clients on the 2026-07-28 specification and for older 2025 clients. It no longer supports the legacy HTTP+SSE transport and doesn't need Redis. If a client only supports stdio, run mcp-remote on that machine to proxy requests to your server's URL.

Yes. Vercel MCP is Vercel's official remote MCP server at https://mcp.vercel.com, and it authorizes clients with OAuth. AI tools can use it to search Vercel documentation, manage projects and deployments, analyze deployment logs, and query Web Analytics. Run vercel mcp to set up Claude Code, Claude.ai, Cursor, or VS Code with Copilot. Add --project to scope the session to your linked project.

Choose the integration for your framework. The AI SDK creates a client with createMCPClient and passes the server's tools to the model. TanStack AI accepts MCP clients in chat() and discovers their tools for you. eve loads each connection from a file in agent/connections/. All three can send model requests through AI Gateway. AI Gateway charges no markup on tokens, and you switch models by changing a model ID such as anthropic/claude-opus-5. On Vercel, eve also runs each session on Vercel Workflows, so a conversation that waits for a tool result or an approval resumes after interruptions.

MCP authorization builds on OAuth 2.1. A protected MCP server verifies access tokens and publishes Protected Resource Metadata that tells clients which authorization server issues them. To protect a server you deploy, use withMcpAuth and protectedResourceHandler from mcp-handler, as shown in Enabling authorization. To call a third-party server such as Linear, use Vercel Connect. Connect asks each user for consent and gives your code short-lived tokens, so no provider secret lives in your environment variables. Treat tool descriptions and annotations from servers you don't control as untrusted, and require approval before tools that change data.

Learn more about Model Context Protocol and explore available MCP servers.


Was this helpful?

supported.
⌂