Remote MCP Server auf Vercel deployen: Komplette Schritt-für-Schritt-Anleitung 2025
Ein Remote MCP Server, also ein über das Internet erreichbarer Model Context Protocol-Server, ermöglicht KI-Anwendungen den Zugriff auf externe Tools und Datenquellen. Das Model Context Protocol (MCP) revolutioniert die Art und Weise, wie KI-Anwendungen mit externen Tools und Datenquellen interagieren. In dieser umfassenden Anleitung zeigen wir Ihnen Schritt für Schritt, wie Sie Ihren eigenen Remote-MCP-Server auf Vercels Serverless-Plattform deployen – mit unserem produktiven my-mcp-server Server als Praxisbeispiel.
Was ist das Model Context Protocol (MCP)?
MCP ist ein offener Standard, der von Anthropic entwickelt wurde und es Large Language Models (LLMs) ermöglicht, nahtlos mit externen Systemen zu kommunizieren.
Stellen Sie es sich als universellen Adapter vor, der KI-Assistenten wie Claude, ChatGPT und anderen den standardisierten Zugriff auf Ihre eigenen Tools, Datenbanken und APIs ermöglicht.
Hauptvorteile von MCP
- Standardisierte Kommunikation: Ein Protokoll für alle – keine individuellen Integrationen mehr für jede KI-Plattform
- Tool-Discovery: KI-Clients können automatisch erkennen, welche Tools Ihr Server bereitstellt
- Typsicherheit: Integrierte Schemas gewährleisten Datenvalidierung und ordnungsgemäße Fehlerbehandlung
- Erweiterbarkeit: Einfaches Hinzufügen neuer Tools ohne Änderung der Kernarchitektur
Warum einen Remote MCP Server auf Vercel deployen?
Vercel hat im Mai 2025 offiziell die Unterstützung für MCP-Server angekündigt und ist damit die führende Plattform für das Hosting von Remote-MCP-Servern. Die Gründe:
- Serverless-Architektur: Zahlen Sie nur für das, was Sie nutzen, mit automatischer Skalierung
- Globales Edge-Netzwerk: Niedrige Latenz weltweit
- Native Unterstützung: Integrierter Streamable HTTP Transport Support
- Einfaches Deployment: Push zu Git und automatisch deployen
- Fluid Compute: Effiziente Ressourcennutzung für KI-Workloads
Architektur-Übersicht
Bevor wir in den Code eintauchen, verstehen wir die Architektur:
┌──────────────────┐ HTTPS ┌──────────────────────┐
│ │ ◄────────────► │ │
│ MCP Client │ Streamable │ Vercel Function │
│ (Claude Code, │ HTTP │ (MCP Server) │
│ Cursor, etc.) │ │ │
│ │ │ ┌────────────────┐ │
└──────────────────┘ │ │ Tool Handler │ │
│ ├────────────────┤ │
│ │ Tool Handler │ │
│ ├────────────────┤ │
│ │ Tool Handler │ │
│ └────────────────┘ │
│ │
└──────────────────────┘
Streamable HTTP Transport
Der Streamable HTTP Transport (eingeführt in der MCP-Spezifikation 2025-03-26) ist das empfohlene Protokoll für Remote-MCP-Server. Er bietet:
- Effiziente Verbindungswiederverwendung
- Bessere Parallelitätsbehandlung als SSE
- Zustandslose oder zustandsbehaftete Betriebsmodi
- Geringerer TCP-Verbindungs-Overhead
Schritt 1: Projekt-Setup
Erstellen Sie zunächst ein neues Projekt oder verwenden Sie ein bestehendes Next.js/Node.js-Projekt:
# Neues Projekt erstellen
mkdir mein-mcp-server
cd mein-mcp-server
npm init -y
# Abhängigkeiten installieren
npm install @modelcontextprotocol/sdk zod
npm install -D @vercel/node typescript @types/node
Erstellen Sie Ihre tsconfig.json:
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"esModuleInterop": true,
"strict": true,
"outDir": "dist",
"declaration": true
},
"include": ["src/**/*", "api/**/*"]
}
Schritt 2: MCP Server Handler erstellen
Erstellen Sie den Haupt-API-Handler unter api/index.ts. Hier geschieht die Magie:
import type { VercelRequest, VercelResponse } from "@vercel/node";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
import { z } from "zod";
// MCP Server Factory erstellen
function createMcpServer(): McpServer {
const server = new McpServer({
name: "mein-mcp-server",
version: "1.0.0",
});
// Erstes Tool registrieren
server.registerTool("hallo_welt", {
title: "Hallo Welt",
description: "Ein einfaches Begrüßungs-Tool",
inputSchema: {
name: z.string().describe("Name zum Begrüßen"),
},
}, async ({ name }) => {
return {
content: [{
type: "text",
text: JSON.stringify({
nachricht: `Hallo, ${name}! Willkommen bei MCP.`,
zeitstempel: new Date().toISOString(),
}, null, 2),
}],
};
});
return server;
}
// Haupt-API-Handler
export default async function handler(
req: VercelRequest,
res: VercelResponse
) {
// CORS-Header für Cross-Origin-Anfragen
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, OPTIONS");
res.setHeader("Access-Control-Allow-Headers",
"Content-Type, Authorization, mcp-session-id, mcp-protocol-version");
// Preflight-Anfragen behandeln
if (req.method === "OPTIONS") {
return res.status(200).end();
}
// MCP-Protokollanfragen verarbeiten
try {
const server = createMcpServer();
const transport = new StreamableHTTPServerTransport({
sessionIdGenerator: undefined, // Zustandsloser Modus
});
await server.connect(transport);
await transport.handleRequest(req, res, req.body);
// Cleanup nach Response
res.on("finish", async () => {
try {
await transport.close();
await server.close();
} catch {
// Cleanup-Fehler ignorieren
}
});
} catch (error) {
if (!res.headersSent) {
return res.status(500).json({
jsonrpc: "2.0",
error: {
code: -32603,
message: `Interner Serverfehler: ${error}`,
},
id: req.body?.id || null,
});
}
}
}
Schritt 3: Vercel-Deployment konfigurieren
Erstellen Sie vercel.json für die richtige Konfiguration:
{
"$schema": "https://openapi.vercel.sh/vercel.json",
"version": 2,
"buildCommand": "npm run build",
"functions": {
"api/index.ts": {
"maxDuration": 60
}
},
"headers": [
{
"source": "/api/(.*)",
"headers": [
{ "key": "Access-Control-Allow-Origin", "value": "*" },
{ "key": "Access-Control-Allow-Methods", "value": "GET, POST, OPTIONS" }
]
}
]
}
Schritt 4: Echte Tools hinzufügen – Das my-mcp-server Beispiel
Schauen wir uns an, wie unser produktiver my-mcp-server Server echte Tools implementiert. Dieser Server bietet Websuche, Social-Media-Publishing, Bildgenerierung und mehr:
Websuche-Tool
// Websuche-Tool
server.registerTool("search_web", {
title: "Websuche",
description: "Durchsucht das Web mit Tavily AI",
inputSchema: {
query: z.string().describe("Suchanfrage"),
maxResults: z.number().optional().describe("Maximale Ergebnisse (Standard: 5)"),
},
}, async ({ query, maxResults }) => {
const result = await tavilySearch(query, { maxResults });
return {
content: [{
type: "text",
text: JSON.stringify({
query: result.query,
answer: result.answer,
results: result.results,
}, null, 2),
}],
};
});
Bildgenerierungs-Tool
// Bildgenerierungs-Tool
server.registerTool("generate_hero_image", {
title: "Hero-Bild generieren",
description: "Generiert ein Hero-Bild mit Gemini AI",
inputSchema: {
topic: z.string().describe("Bildthema/Beschreibung"),
style: z.enum([
"modern-professional",
"tech-gradient",
"minimal-abstract"
]).describe("Visueller Stil"),
},
}, async ({ topic, style }) => {
const image = await generateImageWithGemini(topic, style);
return {
content: [{
type: "text",
text: JSON.stringify({
status: "success",
base64Data: image.base64Data,
}, null, 2),
}],
};
});
Schritt 5: Umgebungsvariablen
Richten Sie Ihre Umgebungsvariablen in Vercel ein:
# Erforderlich für verschiedene Integrationen
TAVILY_API_KEY=ihr_tavily_key
GOOGLE_API_KEY=ihr_google_key
TYPEFULLY_API_KEY=ihr_typefully_key
Schritt 6: Auf Vercel deployen
Deployen Sie Ihren MCP-Server:
# Vercel CLI installieren
npm install -g vercel
# Deployen
vercel
# Für Produktion
vercel --prod
Nach dem Deployment ist Ihr Server unter folgender Adresse verfügbar:
https://ihr-projekt.vercel.app/api
Schritt 7: Clients mit Ihrem MCP-Server verbinden
Claude Code / Claude Desktop verbinden
Fügen Sie zu Ihrer Claude-Konfiguration hinzu:
{
"mcpServers": {
"mein-mcp-server": {
"command": "npx",
"args": [
"-y",
"mcp-remote",
"https://ihr-projekt.vercel.app/api"
]
}
}
}
Schritt 8: Server testen
Testen Sie, ob Ihr Server funktioniert:
# Health Check
curl https://ihr-projekt.vercel.app/api?action=health
# Tools auflisten
npx mcp-remote https://ihr-projekt.vercel.app/api --list-tools
Best Practices
1. Zustandsloses Design
Vercel Functions sind zustandslos. Gestalten Sie Ihre Tools entsprechend:
const transport = new StreamableHTTPServerTransport({
sessionIdGenerator: undefined, // Zustandslos
});
2. Fehlerbehandlung
Geben Sie immer korrekte JSON-RPC-Fehlerantworten zurück.
3. Timeout-Management
Setzen Sie angemessene Timeouts in vercel.json:
{
"functions": {
"api/index.ts": {
"maxDuration": 60
}
}
}
4. Input-Validierung mit Zod
Validieren Sie Eingaben immer mit Zod-Schemas.
Nächste Schritte
Jetzt, da Sie wissen, wie man einen MCP-Server auf Vercel deployt, hier einige Ideen für Tools, die Sie bauen könnten:
- Recherche-Tools: Websuche, Nachrichtensammlung, Themenrecherche
- Content-Tools: Blog-Gliederungsgenerierung, SEO-Optimierung
- Bild-Tools: KI-Bildgenerierung mit verschiedenen Stilen
- Datenbank-Tools: Abfragen und Verwalten Ihrer Datenbanken
- API-Integrationen: Verbindung zu Drittanbieter-Services
Fazit
Das Deployen eines MCP-Servers auf Vercel kombiniert die Leistungsfähigkeit von Serverless-Computing mit der Flexibilität des Model Context Protocols. Mit dieser Anleitung können Sie produktionsreife KI-Tool-Integrationen erstellen, die mit Claude, ChatGPT und anderen MCP-kompatiblen Clients funktionieren.
Das MCP-Ökosystem wächst rasant, mit großen Unternehmen wie Booking.com, Expedia, Morningstar und Microsoft, die das Protokoll übernehmen. Jetzt ist der perfekte Zeitpunkt, eigene MCP-Integrationen zu erstellen und diesem wachsenden Ökosystem beizutreten.
Ressourcen
Bereit, Ihren eigenen MCP-Server zu deployen? Beginnen Sie mit unserem Template und haben Sie Ihre KI-gestützten Tools in wenigen Minuten live!