MCP Server - Vercel AI SDK

The Vercel AI SDK wraps provider APIs with a unified interface. Register the MCP server when creating a client so you can call Xweather tools from React server actions or route handlers.


// app/api/weather/route.ts
import { experimental_buildAnthropicKit } from "ai/sdk";
 
const anthropic = experimental_buildAnthropicKit({
  apiKey: process.env.ANTHROPIC_API_KEY!,
  mcpServers: [
    {
      baseUrl: "https://mcp.api.xweather.com/mcp",
      label: "xweather",
      headers: {
        Authorization: `Bearer ${process.env.XWEATHER_API_KEY}`,
      },
      allowedTools: [
        "xweather_get_current_weather",
        "xweather_get_weather_forecast"
      ],
    },
  ],
});
 
export async function POST(req: Request) {
  const { location } = await req.json();
 
  const result = await anthropic.responses.create({
    model: "claude-3-5-sonnet-20241022",
    input: `Give me the next 6 hours of weather for ${location}`,
  });
 
  return Response.json({ answer: result.output_text });
}

Best practices

Keep MCP configuration in a separate utility and reuse it across routes.
Store XWEATHER_API_KEY in Vercel project environment variables; never expose it to the browser.
Attach logging to result.output to persist tool arguments for auditing.