在 Vercel 上部署 MCP Apps：从 MCP 服务器到交互式界面

Vercel 在 3 月 4 日宣布原生支持 MCP Apps 部署。这不是 Vercel 第一次拥抱 MCP - 他们之前已经支持了 MCP 服务器部署，还推出了自己的 @vercel/mcp-adapter 适配包。但 MCP Apps 的支持意味着一个完整的闭环：从后端的 MCP 工具，到前端的交互式界面，都可以在 Vercel 上一站式完成。

Vercel 上的 MCP 全景

在动手之前，先理清 Vercel MCP 体系里的三个层次：

MCP 服务器：暴露工具给 AI 模型调用的后端服务。比如一个查数据库的工具、一个发邮件的工具。Vercel 用 mcp-handler 包让你在 Next.js API Route 里定义这些工具。

MCP 客户端：AI 应用（Host）连接到 MCP 服务器的那一侧。Vercel 的 AI SDK 提供了初始化 MCP 客户端的能力。

MCP Apps：MCP 工具返回的交互式 UI，通过 iframe 嵌入对话窗口。Vercel 现在支持用 Next.js 构建和部署这些 Apps，利用 SSR 和 React Server Components 实现高性能渲染。

三者的关系：MCP 服务器提供能力，MCP 客户端调用能力，MCP Apps 把能力可视化。Vercel 现在三个都支持。

部署 MCP 服务器

有了全景认知，从最基础的开始 - 用 mcp-handler 部署一个 MCP 服务器。以 Next.js App Router 为例，只需要一个 API Route：

// app/api/mcp/route.ts
import { z } from 'zod';
import { createMcpHandler } from 'mcp-handler';

const handler = createMcpHandler(
  (server) => {
    server.tool(
      'roll_dice',
      'Rolls an N-sided die',
      { 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}!` }],
        };
      },
    );
  },
  {},
  { basePath: '/api' },
);

export { handler as GET, handler as POST, handler as DELETE };

部署后，任何 MCP 客户端只需要配置你的 URL 就能连接：

{
  "mcpServers": {
    "my-server": {
      "url": "https://my-mcp-server.vercel.app/api/mcp"
    }
  }
}

mcp-handler 支持 Streamable HTTP 传输协议，这是 MCP 最新的标准传输方式 - 比旧的 SSE 方式更高效，也更适合 Serverless 环境。

加上 OAuth

服务器能跑了，下一步是安全。生产环境的 MCP 服务器必须有认证，mcp-handler 内置了 OAuth 支持：

// app/api/[transport]/route.ts
import { withMcpAuth } from 'mcp-handler';
import { AuthInfo } from '@modelcontextprotocol/sdk/server/auth/types.js';

const verifyToken = async (
  req: Request,
  bearerToken?: string,
): Promise<AuthInfo | undefined> => {
  if (!bearerToken) return undefined;

  // 在这里验证 token - 实际项目中对接你的认证服务
  const isValid = await validateWithYourAuthService(bearerToken);
  if (!isValid) return undefined;

  return {
    token: bearerToken,
    scopes: ['read:data', 'write:data'],
    clientId: 'user123',
  };
};

const authHandler = withMcpAuth(handler, verifyToken, {
  required: true,
  requiredScopes: ['read:data'],
  resourceMetadataPath: '/.well-known/oauth-protected-resource',
});

export { authHandler as GET, authHandler as POST };

还需要暴露 OAuth 元数据端点，让 MCP 客户端知道如何进行授权：

// app/.well-known/oauth-protected-resource/route.ts
import {
  protectedResourceHandler,
  metadataCorsOptionsRequestHandler,
} from 'mcp-handler';

const handler = protectedResourceHandler({
  authServerUrls: ['https://your-auth-server.com'],
});
const corsHandler = metadataCorsOptionsRequestHandler();

export { handler as GET, corsHandler as OPTIONS };

这遵循了 MCP 规范中的授权发现机制，客户端会自动找到这个端点来了解如何认证。

Vercel 的独特优势

服务器和认证都搞定了，为什么还要特别选 Vercel？因为 MCP 的使用模式恰好踩中了 Vercel 几个核心能力。

Fluid Compute

MCP 服务器的使用模式很特殊 - 长时间空闲，突然一阵密集调用，然后又空闲。传统的 Serverless 按请求计费，每次冷启动都浪费时间和钱。

Vercel 的 Fluid Compute 模型针对这种模式做了优化：

• 优化并发：一个实例可以同时处理多个 MCP 请求
• 动态伸缩：根据实际负载自动调整实例数
• 实例共享：空闲的计算资源被复用，而不是销毁

有用户报告说用 Fluid Compute 比传统 Serverless 节省了超过 90% 的成本。

Next.js SSR + React Server Components

MCP Apps 本质是 Web 页面。用 Next.js 构建意味着你可以用 Server Components 在服务端渲染数据密集的部分，只把交互逻辑发送到客户端。对于数据可视化、报表这类 MCP App 场景，这带来的性能提升很明显。

部署即生产

Vercel 的 Preview Deployments 让你可以在合并代码之前测试 MCP 服务器和 Apps。Instant Rollback 在出问题时可以秒级回滚。Rolling Releases 可以灰度发布。这些对生产环境的 MCP 部署很重要 - 你的 MCP 服务器可能被很多 AI Agent 依赖，一次挂掉影响面很大。

本地开发和测试

开发过程中，Vercel 提供了 MCP Inspector 来测试你的 MCP 服务器：

1. 本地启动应用（http://localhost:3000）
2. 运行 MCP Inspector
3. 打开 http://127.0.0.1:6274
4. 选择 Streamable HTTP 传输方式
5. 输入 http://localhost:3000/api/mcp
6. 点击 Connect，然后 List Tools 测试你的工具

这个流程比自己搭测试环境方便很多。Inspector 会显示所有工具的定义、参数和返回值，方便调试。

现有模板

如果想快速上手，Vercel 提供了几个开箱即用的模板：

• Next.js MCP Server：标准的 MCP 服务器模板，带工具定义和 OAuth
• Vercel Functions MCP：轻量级的 Serverless Function 方式
• xMCP Boilerplate：扩展 MCP 功能的模板
• Next.js MCP Apps Starter：用于构建交互式 MCP Apps 的起步模板

所有模板都支持一键部署到 Vercel。

实际部署建议

基于 Vercel 的 MCP 支持，一个典型的架构是这样的：

Vercel 项目
├── app/
│   ├── api/mcp/route.ts          ← MCP 服务器（工具定义）
│   ├── .well-known/              ← OAuth 元数据
│   └── mcp-app/                  ← MCP App UI（交互界面）
├── lib/
│   └── tools/                    ← 工具的业务逻辑
└── package.json

几个建议：

1. 工具和 UI 同仓库：MCP 服务器和 MCP App 的代码放在同一个 Next.js 项目里，共享类型定义和业务逻辑。

2. 先做纯文本工具，再加 UI：不是每个工具都需要 MCP App。先确保工具本身好用，再为需要可视化的工具添加 UI 资源。

3. 用 Fluid Compute：MCP 的使用模式天然适合 Fluid Compute。确保你的 Vercel 项目启用了这个功能。

4. 注意 OAuth：任何面向公网的 MCP 服务器都应该有认证。mcp-handler 的内置 OAuth 让这件事变得简单。

Vercel 对 MCP 的支持经历了三个阶段：先是 MCP 服务器部署，然后是 AI SDK 的 MCP 客户端集成，现在是 MCP Apps 的原生支持。三个加在一起，形成了一个完整的 MCP 开发和部署平台。对于已经在用 Next.js 和 Vercel 的团队来说，这降低了 MCP 的入门门槛 - 你不需要学新的部署方式，不需要管理额外的基础设施，用你熟悉的技术栈就能构建从后端工具到前端交互的完整 MCP 体验。