Schritt für Schritt: Hinzufügen von Vonage-APIs zu Ihrem AI-Agenten mit MCP

Einführung

Wollten Sie schon immer Ihren eigenen KI-Chatbot bauen, der mehr kann als nur Fragen beantworten? Was wäre, wenn Ihr Chatbot Ihren Kontostand prüfen, Nachrichten in Ihrem Namen versenden oder mit anderen Diensten interagieren könnte? Genau das werden wir heute lernen, indem wir Claude API von Anthropic und dem neuen Vonage Model Context Protocol (MCP) API Bindings Server (auch bekannt als: Tooling Server).

In diesem Tutorial erstellen wir einen Chatbot, der mit Ihnen Gespräche führen kann und gleichzeitig in der Lage ist, externe Tools zu nutzen - insbesondere werden wir eine Integration mit dem Vonage Tooling MCP-Server integrieren, um zum Beispiel den Kontostand zu überprüfen.

TL;DR: Das komplette Arbeitsbeispiel finden Sie in unserem GitHub-Repository.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Sie alles haben:

• Node.js installiert (Version 14 oder höher)

• Grundlegende JavaScript-Kenntnisse

• Ein anthropischer API-Schlüssel

• Ein Vonage API-Konto (für das Beispiel zur Überprüfung des Kontostands)

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Verstehen der grundlegenden Concepts

Was ist die Claude API von Anthropic?

Claude ist der KI-Assistent von Anthropic, der sich durch das Verstehen und Generieren natürlicher Sprache auszeichnet. Die API ermöglicht es Ihnen, die Fähigkeiten von Claude in Ihre Anwendungen zu integrieren. Im Gegensatz zu einigen anderen KI-APIs ist Claude besonders gut in:

• Genaue Befolgung der Anweisungen

• Bearbeitung komplexer Argumentationsaufgaben

• Arbeiten mit Werkzeugen und Funktionsaufrufen

Was ist MCP (Model Context Protocol)?

Wir haben bereits darüber gesprochen was ein MCP-Server ist, haben wir in der VergangenheitEin MCP ist ein standardisierter Weg, um KI-Assistenten mit externen Datenquellen und Tools zu verbinden. Betrachten Sie ihn als universellen Adapter, mit dem Ihr KI-Assistent mit anderen Diensten wie Datenbanken, APIs oder Anwendungen "sprechen" kann.

Anstatt benutzerdefinierte Integrationen für jeden Dienst zu schreiben, bietet MCP eine Standardschnittstelle, über die KI-Assistenten Tools automatisch erkennen und mit ihnen interagieren können.

Wie unser Chatbot, Claude und MCP zusammenarbeiten

Bevor wir mit dem Programmieren beginnen, sollten wir uns vergegenwärtigen, wie alles zusammenhängt. Um mit Claude sprechen zu können, muss Ihr Chatbot alle beweglichen Teile orchestrieren:

1. Sie (der Nutzer) geben eine Nachricht ein wie: "Können Sie den Stand meines Vonage Accounts überprüfen?"

2. Der Chatbot sendet diese Nachricht zusammen mit einer Liste der verfügbaren MCP-Tools an Claude.

3. Claude (die KI) liest Ihre Nachricht und entscheidet, ob ein Tool helfen kann.

   • Wenn ja, antwortet es mit einer speziellen tool_use Anweisung.

   • Wenn nicht, antwortet sie einfach direkt.

4. Der Chatbot erkennt diese Anfrage, führt das passende MCP-Tool (in diesem Fall "Balance") aus und sammelt das Ergebnis.

5. Der MCP-Server ruft im Hintergrund die Vonage-API auf, um Ihren Kontostand zu ermitteln.

6. Das Ergebnis wird an Claude zurückgesendet, der daraufhin natürlich antwortet: "Ihr aktueller Kontostand beträgt $15,67 USD."

Visual diagram showing how a user request moves through the chatbot, Claude AI, and the Vonage MCP Server to retrieve a real account balance using the Vonage API.

Wie unsere Chatbot-Logik funktioniert

Beginnen wir damit, die Struktur unseres Chatbots zu untersuchen. Hier erkläre ich die wichtigsten Komponenten und Funktionen, aber Sie werden feststellen, dass einige Funktionen weggelassen wurden. Springen Sie zum Abschnitt Wie Sie Ihren Chatbot ausführen Abschnitt, um den Chatbot zu implementieren.

Einrichten der Chatbot-Basisklasse

import Anthropic from '@anthropic-ai/sdk';
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
import readline from 'readline';
import { promisify } from 'util';

class ClaudeChatbot {
  constructor() {
    // Initialize the Anthropic API client
    this.anthropic = new Anthropic({
      apiKey: process.env.ANTHROPIC_API_KEY
    });
    
    // Set up command line interface
    this.rl = readline.createInterface({
      input: process.stdin,
      output: process.stdout
    });
    
    this.question = promisify(this.rl.question).bind(this.rl);
    this.conversationHistory = [];
    
    // MCP-related properties
    this.mcpClients = new Map();
    this.availableTools = new Map();
    this.model = 'claude-3-5-sonnet-20241022';
  }
}

Was ist hier los?

Wir erstellen eine kleine Klasse (ClaudeChatbot), um den Chatbot-Code zu verwalten. Sie verbindet sich mit der Claude-API, richtet einige Befehlszeilen-Tools wie readline um Benutzereingaben zu lesen, und richtet dann einen Ort ein, an dem alle MCP-Server gespeichert werden, von denen unser Code weiß.

Verbindung zu MCP-Servern

Der Zauber unseres Chatbots liegt in seiner Fähigkeit, sich mit MCP-Servern zu verbinden. So machen wir es:

async loadMcpServers() {
  try {
    const configPath = path.join(process.cwd(), 'mcp-config.json');
    const configData = await fs.readFile(configPath, 'utf8');
    const config = JSON.parse(configData);
    
    console.log('📡 Connecting to MCP servers...');
    
    for (const [serverName, serverConfig] of Object.entries(config.mcpServers)) {
      await this.connectMcpServer(serverName, serverConfig);
    }
    
    console.log(`✅ Connected to ${this.mcpClients.size} server(s)`);
  } catch (error) {
    console.log('⚠️  No MCP configuration found, continuing without tools');
  }
}

async connectMcpServer(serverName, config) {
  try {
    // Create a transport layer for communication
    const transport = new StdioClientTransport({
      command: config.command,
      args: config.args,
      env: { ...process.env, ...config.env }
    });

    // Create an MCP client
    const client = new Client({
      name: `claude-chatbot-${serverName}`,
      version: '1.0.0'
    }, {
      capabilities: { tools: {} }
    });

    // Connect and discover available tools
    await client.connect(transport);
    const toolsResponse = await client.listTools();
    
    this.mcpClients.set(serverName, client);
    
    // Register each tool for later use
    for (const tool of toolsResponse.tools) {
      this.availableTools.set(tool.name, {
        serverName,
        tool,
        client
      });
    }
  } catch (error) {
    console.log(`⚠️  Failed to connect to ${serverName}: ${error.message}`);
  }
}

Wir werden eine Konfigurationsdatei einlesen, mcp-config.jsonein, die uns sagt, welche Server wir verwenden und wie wir uns mit ihnen verbinden sollen. Für jeden Server erstellen wir ein StdioClientTransport Objekt, das mit jedem MCP-Server kommunizieren wird. Dann verbinden wir uns mit dem MCP-Server und rufen die listTools() Methode auf, um alle verfügbaren Tools zurückzubekommen. All dies wird gespeichert, damit wir sie später verwenden können.

Die Vonage MCP-Server-Konfiguration

Um das Vonage Tool zur Überprüfung des Guthabens zu nutzen, müssen wir unseren MCP-Server konfigurieren. Bearbeiten Sie das Beispiel und fügen Sie Ihren Vonage API-Schlüssel und Ihr Geheimnis hinzu:

{
  "mcpServers": {
    "vonage": {
      "command": "npx",
      "args": ["-y", "@vonage/vonage-mcp-server-api-bindings"],
      "env": {
        "VONAGE_API_KEY": "abcd",
        "VONAGE_API_SECRET": "1234"
      }
    }
  }
}

Unsere Konfigurationsdatei wird den MCP-Transport anweisen, ein bestimmtes Paket auszuführen, @vonage/vonage-mcp-server-api-bindingsauf der Befehlszeile auszuführen. Außerdem legen wir zwei Umgebungsvariablen fest, VONAGE_API_KEY und VONAGE_API_SECRET, die an unseren MCP-Server gesendet werden. Für die Überprüfung unseres Kontostands sind nur ein API-Schlüssel und ein Geheimnis erforderlich, aber für andere APIs müssen Sie möglicherweise eine Anwendungs-ID und einen privaten Schlüssel übergeben.

Umgang mit Gesprächen mit dem Tool-Support

Jetzt kommt der spannende Teil: Wir müssen Claude auf unsere Werkzeuge aufmerksam machen und ihm erlauben, sie zu nutzen:

async getClaudeResponse() {
  // Prepare the list of available tools for Claude
  const tools = this.availableTools.size > 0 ? 
    Array.from(this.availableTools.values()).map(toolInfo => ({
      name: toolInfo.tool.name,
      description: toolInfo.tool.description,
      input_schema: toolInfo.tool.inputSchema
    })) : undefined;

  const messageParams = {
    model: this.model,
    max_tokens: 1000,
    messages: this.conversationHistory
  };

  // If we have tools, tell Claude about them
  if (tools && tools.length > 0) {
    messageParams.tools = tools;
  }

  const message = await this.anthropic.messages.create(messageParams);

  // Check if Claude wants to use any tools
  if (message.content.some(content => content.type === 'tool_use')) {
    return await this.handleToolUse(message);
  }

  return message.content[0].text;
}

getClaudeResponse() sendet die Liste der MCP-Server, ihre Konfiguration und den Gesprächsverlauf an Claude. MCP-Server werden von unserem Code nicht direkt aufgerufen, sondern dem Backend-LLM übergeben, damit dieser entscheidet, ob er die MCP-Server aufrufen muss. Wenn Claude entscheidet, dass wir ein Tool verwenden müssen, gibt es eine Nachricht des tool_use Typs zurück. Wenn wir eine solche Nachricht erhalten, übergeben wir sie an die handleToolUse() Methode weiter, die den Aufruf des Werkzeugs übernimmt.

Wenn Claude entscheidet, dass kein Werkzeug für die Nachricht relevant ist, schicken wir die Nachricht einfach unverändert zurück.

Ausführende Tools

Wenn Claude beschließt, ein Werkzeug zu benutzen, geschieht Folgendes:

async handleToolUse(message) {
  let responseText = '';
  const toolResults = [];

  for (const content of message.content) {
    if (content.type === 'text') {
      responseText += content.text;
    } else if (content.type === 'tool_use') {
      console.log(`🛠️  Using tool: ${content.name}`);
      
      try {
        const toolInfo = this.availableTools.get(content.name);
        
        // Execute the tool through the MCP client
        const result = await toolInfo.client.callTool({
          name: content.name,
          arguments: content.input
        });

        toolResults.push({
          tool_use_id: content.id,
          content: result.content
        });

      } catch (error) {
        console.log(`❌ Tool ${content.name} failed: ${error.message}`);
        toolResults.push({
          tool_use_id: content.id,
          content: `Error: ${error.message}`,
          is_error: true
        });
      }
    }
  }

  // Send the tool results back to Claude for final response
  if (toolResults.length > 0) {
    // Add Claude's tool-use message to history
    this.conversationHistory.push({
      role: 'assistant',
      content: message.content
    });

    // Add tool results to history
    this.conversationHistory.push({
      role: 'user',
      content: toolResults.map(result => ({
        type: 'tool_result',
        tool_use_id: result.tool_use_id,
        content: result.content,
        is_error: result.is_error || false
      }))
    });

    // Get Claude's final response incorporating the tool results
    const followUpMessage = await this.anthropic.messages.create({
      model: this.model,
      max_tokens: 1000,
      messages: this.conversationHistory
    });

    return responseText + followUpMessage.content[0].text;
  }

  return responseText;
}

Wenn wir ein Werkzeug aufrufen, analysieren wir die von Claude zurückgegebene Nachricht und suchen das Werkzeug, das wir seiner Meinung nach aufrufen sollten. Dann gehen wir die Liste der Tools durch, die Claude für sinnvoll hält, und sammeln die Antworten der einzelnen Tools. All dies wird verpackt und an Claude zurückgeschickt, um eine endgültige Antwort zu liefern.

Wie Sie Ihren Chatbot betreiben

Klonen Sie das Projekt

Erstellen Sie zunächst eine Kopie des Startprojekts und verschieben Sie es nach innen:

git clone git@github.com:Vonage-Community/blog-mcp-javascript-api_tooling_chatbot.git

cd blog-mcp-javascript-api_tooling_chatbot

Aktualisieren Sie die Beispielkonfiguration

Ändern Sie den Namen von mcp-config.json.example in mcp-konfig.json. Ersetzen Sie die Platzhalter durch Ihre Vonage-Anmeldedaten.

Installieren von Abhängigkeiten

npm install

Fügen Sie Ihre Anthropic Credentials hinzu

Geben Sie Ihrem Projekt über die Befehlszeile Zugriff auf Ihren Anthropic-API-Schlüssel:

export ANTHROPIC_API_KEY=your_anthropic_api_key_here

>> Hinweis: Wenn Sie eine kostenlose Antrhopic-Stufe nutzen, haben Sie möglicherweise keinen Zugriff auf die neuesten Modelle. Sie müssen CLAUDE_MODEL in Ihrer chatbot.js entsprechend.

Den Chatbot ausführen

node chatbot.js 

Beispiel für eine Konversation

So könnte ein Gespräch mit Ihrem neuen Chatbot aussehen:

Animated terminal demo showing a ClaudeChatbot using the Vonage MCP Server to check a user's account balance in real time.

In diesem kurzen Austausch hat Ihr Chatbot den gesamten Arbeitsablauf abgewickelt: Claude verstand Ihre Anfrage, rief das Saldo-Tool über MCP auf und holte echte Daten von der Vonage-API ab.

Warum diese Architektur leistungsfähig ist

Dieser Ansatz bietet Ihnen mehrere Vorteile:

1. Trennung der Belange

• Ihr Chatbot-Code konzentriert sich auf das Gesprächsmanagement

• MCP-Server bewältigen die Komplexität der Integration mit externen APIs

• Claude verwaltet die Intelligenz, wann und wie er die Werkzeuge einsetzt

2. Erweiterbarkeit

• Möchten Sie Wetterdaten hinzufügen? Fügen Sie einfach einen MCP-Wetterserver hinzu

• Sie benötigen Datenbankzugriff? Fügen Sie einen Datenbank-MCP-Server hinzu

• Der grundlegende Chatbot-Code muss nicht geändert werden

3. Normung

• MCP bietet eine einheitliche Schnittstelle für verschiedene Dienste

• Werkzeuge werden automatisch entdeckt und dokumentiert

• Die Fehlerbehandlung ist standardisiert

4. Geheimdienst

• Claude entscheidet automatisch, wann Werkzeuge benötigt werden

• Es kann mehrere Werkzeuge für komplexe Aufgaben miteinander verknüpfen

• Es liefert Erklärungen in natürlicher Sprache zu seinen Aktionen

Schlussfolgerung

Herzlichen Glückwunsch! Sie haben einen KI-Chatbot entwickelt, der nicht nur Unterhaltungen führen, sondern auch mit externen Diensten über Tools interagieren kann. Dies ist ein leistungsstarkes Muster, das Sie erweitern können, um es in praktisch jeden Dienst zu integrieren, der über einen MCP-Server verfügt.

Die Kombination von Anthropic's Claude API und dem Model Context Protocol schafft eine flexible, erweiterbare Plattform für die Entwicklung von KI-Assistenten, die tatsächlich tun tun und nicht nur über sie reden.

Die wichtigsten Erkenntnisse:

• Claude's API bietet eine intelligente Entscheidungsfindung für Konversation und Werkzeugnutzung

• MCP standardisiert die Verbindung von KI-Assistenten mit externen Diensten

• Integration der Werkzeuge erfolgt automatisch, sobald Sie die Verbindungen konfiguriert haben

• Diese Architektur ist skalierbar - Sie können neue Funktionen hinzufügen, ohne den Kerncode zu ändern.

Beginnen Sie mit dieser Grundlage und experimentieren Sie mit verschiedenen MCP-Servern, um zu sehen, welche Arten von KI-Assistenten Sie bauen können. Die Möglichkeiten sind endlos!

Weitere Lektüre

• Anthropische API-Dokumentation

• Modell-Kontext-Protokoll-Spezifikation

• Vonage MCP Server Dokumentation

• Verfügbare MCP-Server