Wie ich einen MCP-Server mit Claude Desktop mit Typescript verbunden habe

Das Model Context Protocol (MCP) stellt einen bedeutenden Fortschritt in der Art und Weise dar, wie KI-Assistenten mit externen Tools und Datenquellen interagieren. Entwickelt von Anthropic, ermöglicht MCP Claude die nahtlose Kommunikation mit benutzerdefinierten Servern, wodurch er in der Lage ist, auf Echtzeitinformationen zuzugreifen, komplexe Workflows auszuführen und mit APIs zu interagieren, ohne den Konversationskontext zu verlassen. Diese Fähigkeit verwandelt Claude von einem eigenständigen LLM in einen vielseitigen Assistenten, der externe Funktionalität nutzen kann und gleichzeitig die Kohärenz der Konversation beibehält.

In diesem umfassenden Leitfaden führen wir Sie durch den Prozess des Erstellens eines TypeScript MCP-Servers von Grund auf und dessen Verbindung mit Claude Desktop. Durch die Implementierung dieser Integration ermöglichen Sie Claude, Aufgaben wie das Abrufen von Echtzeitdaten, das Ausführen von Berechnungen oder die Interaktion mit Ihrer benutzerdefinierten Geschäftslogik direkt innerhalb von Konversationen auszuführen.

Bevor wir uns mit der Implementierung unseres MCP-Servers befassen, ist es erwähnenswert, dass Ihre Wahl des API-Entwicklungstools Ihre Workflow-Effizienz erheblich beeinflussen kann.

Während Postman lange Zeit der Industriestandard war, hat sich Apidog als überlegene Alternative herauskristallisiert, die moderne Entwicklungsworkflows wie den, den wir erstellen, perfekt ergänzt.
Im Gegensatz zu Postmans Einschränkungen bei APIs in der Entwicklung bietet Apidog eine Echtzeitsynchronisierung zwischen Ihren API-Spezifikationen und -Anfragen, wodurch sichergestellt wird, dass Ihre Dokumentation und Tests automatisch auf dem neuesten Stand bleiben, wenn sich Ihre APIs weiterentwickeln.
Mit der visuellen Erstellung von API-Spezifikationen, unbegrenzten Sammlungsläufen (im Vergleich zu Postmans Limit von 25/Monat) und leistungsstarken Funktionen wie automatisch generierten Anfragen und Mock-Antworten rationalisiert Apidog den gesamten API-Lebenszyklus. Seine umfassenden Testfunktionen, einschließlich der visuellen Testerstellung und selbst gehosteten Runner, machen es ideal für Teams, die komplexe Integrationen wie unseren MCP-Server implementieren.

Wenn wir unseren TypeScript MCP-Server erstellen, sollten Sie berücksichtigen, wie die kollaborativen Funktionen und der entwicklungsorientierte Ansatz von Apidog die Produktivität Ihres Teams steigern und sicherstellen können, dass Ihre APIs während des gesamten Prozesses konsistent, gut getestet und gründlich dokumentiert bleiben.

button

Das Model Context Protocol verstehen

Das Model Context Protocol definiert eine standardisierte Methode für Claude zur Kommunikation mit externen Diensten. Wenn Claude feststellt, dass er Informationen von einer externen Quelle benötigt, kann er einen MCP-Server über eine speziell formatierte JSON-Anfrage aufrufen. Der Server verarbeitet diese Anfrage und gibt die angeforderten Daten zurück, die Claude dann in seine Antwort einbeziehen kann.

MCP bietet gegenüber herkömmlichen KI-Integrationsansätzen mehrere Vorteile:

Kontextuelles Bewusstsein: Claude behält den vollständigen Konversationsverlauf bei, wenn er Anfragen stellt
Bidirektionale Kommunikation: Das Protokoll unterstützt komplexe Interaktionen zwischen Claude und Ihrem Server
Sicherheit und Kontrolle: Sie bestimmen, welche Funktionalität verfügbar gemacht wird und wie Anfragen verarbeitet werden
Nahtlose Erfahrung: Benutzer interagieren auf natürliche Weise mit Claude, ohne sich über die zugrunde liegenden Integrationen informieren zu müssen

Voraussetzungen

Bevor wir mit dem Erstellen unseres MCP-Servers beginnen, stellen Sie sicher, dass Sie Folgendes haben:

Node.js (v18 oder höher) installiert
Ein Code-Editor wie Visual Studio Code
Grundkenntnisse in TypeScript
Claude Desktop-Anwendung installiert
Vertrautheit mit Express.js (für den Aufbau der Server-Endpunkte)

Einrichten Ihres TypeScript-Projekts

Beginnen wir mit der Erstellung eines neuen TypeScript-Projekts für unseren MCP-Server:

mkdir claude-mcp-server
cd claude-mcp-server
npm init -y
npm install typescript @types/node ts-node express @types/express cors @types/cors
npx tsc --init

Aktualisieren Sie als Nächstes Ihre tsconfig.json, um diese Einstellungen einzuschließen:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Implementieren des MCP-Servers

Erstellen Sie eine neue Datei namens server.ts in Ihrem Projektstammverzeichnis. Dies ist der Einstiegspunkt für unseren MCP-Server:

import express from 'express';
import cors from 'cors';
import { Request, Response } from 'express';

// Define types for the MCP protocol
interface MCPRequest {
  query: string;
  conversation_id: string;
  request_id: string;
  parameters?: Record<string, any>;
}

interface MCPResponse {
  response: string;
  status: 'success' | 'error';
  error?: string;
}

const app = express();
app.use(cors());
app.use(express.json());

// Health check endpoint
app.get('/health', (req: Request, res: Response) => {
  res.status(200).json({ status: 'healthy' });
});

// MCP endpoint
app.post('/mcp', (req: Request, res: Response) => {
  try {
    const mcpRequest = req.body as MCPRequest;
    console.log('Received MCP request:', JSON.stringify(mcpRequest, null, 2));

    // Process the request based on the query
    const response = processQuery(mcpRequest);
    
    res.status(200).json({
      status: 'success',
      response
    } as MCPResponse);
  } catch (error) {
    console.error('Error processing MCP request:', error);
    res.status(500).json({
      status: 'error',
      error: error instanceof Error ? error.message : 'Unknown error',
      response: 'Sorry, there was an error processing your request.'
    } as MCPResponse);
  }
});

// Function to process different query types
function processQuery(request: MCPRequest): string {
  const { query, parameters } = request;

  // Example query handling - customize this for your use case
  switch (query) {
    case 'getCurrentTime':
      return `The current time is ${new Date().toLocaleTimeString()}`;
    
    case 'getWeather':
      const location = parameters?.location || 'Unknown';
      // In a real app, you would call a weather API here
      return `The weather in ${location} is currently sunny and 72°F`;
    
    case 'calculateSum':
      if (parameters?.numbers && Array.isArray(parameters.numbers)) {
        const sum = parameters.numbers.reduce((a: number, b: number) => a + b, 0);
        return `The sum of the numbers is ${sum}`;
      }
      return 'Invalid parameters for sum calculation';

    default:
      return `Unrecognized query: ${query}`;
  }
}

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`MCP server running on port ${PORT}`);
});

Ausführen Ihres MCP-Servers

Um Ihren Server auszuführen, führen Sie Folgendes aus:

npx ts-node server.ts

Ihr MCP-Server sollte jetzt auf Port 3000 (oder Ihrem angegebenen Port) ausgeführt werden.

Verbinden mit Claude Desktop

Nachdem Ihr MCP-Server ausgeführt wird, müssen Sie Claude Desktop so konfigurieren, dass er sich damit verbindet. So geht's:

Öffnen Sie die Claude Desktop-Anwendung
Gehen Sie zu Einstellungen (normalerweise in der oberen rechten Ecke)
Navigieren Sie zum Abschnitt "Experimentelle Funktionen"
Aktivieren Sie den Schalter "Model Context Protocol"
Fügen Sie einen neuen MCP-Endpunkt mit der URL http://localhost:3000/mcp hinzu
Speichern Sie Ihre Einstellungen

Claude Desktop kann jetzt mit Ihrem benutzerdefinierten MCP-Server kommunizieren.

Testen der Integration

Um Ihren MCP-Server mit Claude zu testen, versuchen Sie, Claude Fragen zu stellen, die die von Ihnen implementierten spezifischen Abfragen auslösen würden. Zum Beispiel:

"Wie spät ist es gerade?" (sollte die Abfrage getCurrentTime auslösen)
"Wie ist das Wetter in San Francisco?" (sollte die Abfrage getWeather mit "San Francisco" als Standortparameter auslösen)
"Können Sie die Summe von 5, 10, 15 und 20 berechnen?" (sollte die Abfrage calculateSum auslösen)

Wenn Claude erkennt, dass er externe Informationen benötigt, um diese Fragen zu beantworten, sendet er automatisch eine MCP-Anfrage an Ihren Server und bezieht die Antwort in seine Antwort ein.

Erweitern Ihres MCP-Servers

Der von uns erstellte Basisserver ist nur ein Ausgangspunkt. Hier sind einige Ideen zur Erweiterung seiner Funktionalität:

Authentifizierung hinzufügen

Um Ihren MCP-Server zu sichern, fügen Sie eine Authentifizierung hinzu:

// Middleware for basic auth
const authenticateMCP = (req: Request, res: Response, next: Function) => {
  const apiKey = req.headers['x-api-key'];
  if (!apiKey || apiKey !== process.env.MCP_API_KEY) {
    return res.status(401).json({
      status: 'error',
      error: 'Unauthorized',
      response: 'Authentication failed'
    });
  }
  next();
};

// Apply middleware to MCP endpoint
app.post('/mcp', authenticateMCP, (req: Request, res: Response) => {
  // Existing handler code
});

Datenbankintegration implementieren

Verbinden Sie Ihren MCP-Server mit einer Datenbank, um Informationen abzurufen oder zu speichern:

import { MongoClient } from 'mongodb';

// Initialize database connection
const dbClient = new MongoClient('mongodb://localhost:27017');
let db: any;

async function connectToDb() {
  await dbClient.connect();
  db = dbClient.db('mcpDatabase');
  console.log('Connected to database');
}

connectToDb().catch(console.error);

// Add a query handler for database interactions
case 'getUserData':
  if (parameters?.userId) {
    const user = await db.collection('users').findOne({ id: parameters.userId });
    return user ? JSON.stringify(user) : 'User not found';
  }
  return 'Invalid user ID';

Webhook-Unterstützung hinzufügen

Implementieren Sie die Webhook-Funktionalität, um externe Dienste zu benachrichtigen:

case 'sendNotification':
  if (parameters?.message && parameters?.destination) {
    // Call external notification service
    await fetch('https://your-webhook-url.com', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: parameters.message })
    });
    return `Notification sent to ${parameters.destination}`;
  }
  return 'Invalid notification parameters';

Best Practices für die MCP-Serverentwicklung

Fehler ordnungsgemäß behandeln: Fangen Sie immer Ausnahmen ab und geben Sie informative Fehlermeldungen zurück
Protokollierung implementieren: Protokollieren Sie alle Anfragen und Antworten zum Debuggen und zur Überprüfung
TypeScript-Schnittstellen verwenden: Definieren Sie klare Schnittstellen für alle Datenstrukturen
Timeouts festlegen: Implementieren Sie Anforderungs-Timeouts, um hängende Operationen zu verhindern
Eingaben validieren: Validieren Sie alle Eingabeparameter sorgfältig, bevor Sie sie verarbeiten
Unit-Tests hinzufügen: Testen Sie Ihre Abfragehandler gründlich, um die Zuverlässigkeit sicherzustellen

Fazit

Das Erstellen eines TypeScript MCP-Servers eröffnet aufregende Möglichkeiten zur Erweiterung der Fähigkeiten von Claude. Indem Sie diesem Leitfaden folgen, haben Sie eine Grundlage für die Integration von Claude mit Ihren eigenen Diensten und Daten geschaffen. Das Model Context Protocol ermöglicht eine nahtlose Benutzererfahrung, bei der Claude auf externe Informationen zugreifen kann, ohne den Konversationsfluss zu unterbrechen.

Da sich MCP weiterentwickelt, können wir noch ausgefeiltere Integrationen zwischen großen Sprachmodellen und externen Systemen erwarten. Unabhängig davon, ob Sie Produktivitätstools, Wissensmanagementsysteme oder benutzerdefinierte Geschäftsanwendungen erstellen, bietet MCP eine leistungsstarke Möglichkeit, die Intelligenz von Claude mit Ihrer spezialisierten Funktionalität zu kombinieren.

Beginnen Sie mit der Erkundung der Möglichkeiten, indem Sie Ihren Server mit zusätzlichen Abfragehandlern erweitern, die für Ihre Anwendungsfälle spezifisch sind, und teilen Sie Ihre Erfahrungen mit der wachsenden Community der MCP-Entwickler.