Étape par étape : Ajouter les API de Vonage à votre agent AI avec MCP

Introduction

Avez-vous déjà voulu créer votre propre chatbot d'IA qui ne se contente pas de répondre à des questions ? Et si votre chatbot pouvait vérifier le solde de votre compte, envoyer des messages en votre nom ou interagir avec d'autres services ? C'est exactement ce que nous allons apprendre à construire aujourd'hui en utilisant l'API Claude d'Anthropic. l'API Claude d'Anthropic d'Anthropic et le nouveau serveur de liaisons API du protocole MCP (Model Context Protocol) de Vonage (alias : Tooling Server).

Dans ce tutoriel, nous allons créer un chatbot qui peut avoir des conversations avec vous tout en étant capable d'utiliser des outils externes - plus précisément, nous allons intégrer le serveur Vonage Tooling MCP Server de Vonage de Vonage Tooling pour vérifier le solde des comptes, par exemple.

TL;DR : Vous pouvez trouver l'exemple complet dans notre dépôt dépôt GitHub.

Conditions préalables

Avant de commencer, assurez-vous d'avoir

• Node.js installé (version 14 ou supérieure)

• Connaissances de base en JavaScript

• Une clé API Anthropic

• Un compte API Vonage (pour l'exemple de vérification du solde)

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Comprendre les Concepts de base

Quelle est l'API de Claude Anthropic ?

Claude est l'assistant IA d'Anthropic qui excelle dans la compréhension et la génération de langage naturel. L'API vous permet d'intégrer les capacités de Claude dans vos Applications. Contrairement à d'autres API d'IA, Claude est particulièrement doué pour :

• Suivre les instructions avec précision

• Traiter des tâches de raisonnement complexes

• Travailler avec des outils et des appels de fonction

Qu'est-ce que le MCP (Model Context Protocol) ?

Nous avons parlé de ce qu'est un serveur MCP dans le passé. ce qu'est un serveur MCP dans le passéun MCP est un moyen normalisé de connecter les assistants d'intelligence artificielle à des sources de données et à des outils externes. Considérez-le comme un adaptateur universel qui permet à votre assistant d'IA de "parler" à d'autres services tels que des bases de données, des API ou des applications.

Au lieu d'écrire des intégrations personnalisées pour chaque service, MCP fournit une interface standard que les assistants d'intelligence artificielle peuvent utiliser pour découvrir et interagir automatiquement avec les outils.

Comment notre Chatbot, Claude et MCP travaillent ensemble

Avant de commencer à coder, visualisons comment tout est connecté. Pour parler à Claude, votre chatbot doit orchestrer tous les éléments mobiles :

1. Vous (l'utilisateur) tapez un message du genre : "Pouvez-vous vérifier le solde de mon compte Vonage ?"

2. Le chatbot envoie ce message, ainsi qu'une liste d'outils MCP disponibles, à Claude.

3. Claude (l'IA) lit votre message et décide si un outil peut vous aider.

   • Si c'est le cas, il répond par un tool_use spéciale.

   • Si ce n'est pas le cas, il répond directement.

4. Le chatbot détecte cette demande d'utilisation d'outil, exécute l'outil MCP correspondant (dans ce cas, "balance") et recueille le résultat.

5. Le serveur MCP appelle l'API de Vonage en coulisses pour obtenir votre solde.

6. Le résultat est renvoyé à Claude, qui répond naturellement : "Votre solde actuel est de 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.

Comment fonctionne la logique de notre chatbot

Commençons par examiner la structure de notre chatbot. J'expliquerai ici les principaux composants et fonctionnalités, mais vous remarquerez que certaines fonctions sont omises. Aller à la page Comment faire fonctionner votre chatbot pour mettre en œuvre le chatbot.

Mise en place de la classe de chatbot de base

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';
  }
}

Que se passe-t-il ici ?

Nous créons une petite classe (ClaudeChatbot) pour gérer le code du chatbot. Elle se connecte à l'API Claude, met en place des outils de ligne de commande comme readline pour lire les entrées des utilisateurs, et met en place un endroit pour stocker tous les serveurs MCP que notre code connaît.

Connexion aux serveurs MCP

La magie de notre chatbot vient de sa capacité à se connecter aux serveurs MCP. Voici comment nous procédons :

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}`);
  }
}

Nous lirons un fichier de configuration, mcp-config.jsonqui nous indiquera les serveurs à utiliser et la manière de s'y connecter. Pour chaque serveur, nous créons un objet StdioClientTransport qui communiquera avec chaque serveur MCP. Nous nous connectons ensuite au serveur MCP et appelons la méthode listTools() pour récupérer tous les outils disponibles. Tous ces éléments sont stockés afin de pouvoir les utiliser ultérieurement.

Configuration du serveur MCP de Vonage

Pour utiliser l'outil de vérification des soldes de Vonage, nous devons configurer notre serveur MCP. Modifiez l'exemple et ajoutez la clé et le secret de l'API de Vonage :

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

Notre fichier de configuration indiquera au transport MCP d'exécuter un paquetage spécifique, @vonage/vonage-mcp-server-api-bindingssur la ligne de commande. Nous allons également spécifier deux variables d'environnement, VONAGE_API_KEY et VONAGE_API_SECRET, qui seront envoyées à notre serveur MCP. La vérification du solde de notre Account ne nécessite qu'une clé API et un secret, mais pour d'autres API, il se peut que vous deviez transmettre un identifiant d'application et une clé privée.

Gérer les conversations avec les outils d'assistance

La partie la plus excitante est maintenant de faire connaître à Claude nos outils et de le laisser les utiliser :

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() enverra la liste des serveurs MCP, leur configuration et l'historique des conversations à Claude. Les serveurs MCP ne sont pas directement invoqués par notre code, mais sont plutôt donnés au LLM du backend pour décider s'ils ont besoin d'appeler les serveurs MCP. Si Claude décide que nous devons utiliser un outil, il renverra un message du type tool_use type. Si nous recevons un tel message, nous le transmettrons à la méthode handleToolUse() qui se chargera d'appeler l'outil.

Si Claude décide qu'aucun outil n'est pertinent pour le message, nous renvoyons le message tel quel.

Outils d'exécution

Lorsque Claude décide d'utiliser un outil, voici ce qui se passe :

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;
}

Si nous invoquons un outil, nous analyserons le message renvoyé par Claude et trouverons l'outil qu'il pense que nous devrions appeler. Nous itérons ensuite sur la liste des outils que Claude pense que nous devrions appeler et, au fur et à mesure, nous collectons les réponses de chaque outil. Tout cela est regroupé et renvoyé à Claude pour lui fournir une réponse finale.

Comment faire fonctionner votre Chatbot

Cloner le projet

Tout d'abord, faites une copie du projet de départ et déplacez-vous à l'intérieur :

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

cd blog-mcp-javascript-api_tooling_chatbot

Mise à jour de la configuration de l'exemple

Modifier le nom de mcp-config.json.exemple en mcp-config.json. Et remplacez les espaces réservés par vos informations d'identification Vonage.

Installation des dépendances

npm install

Ajoutez vos références anthropiques

A partir de la ligne de commande, donnez à votre projet l'accès à votre clé API Anthropic :

export ANTHROPIC_API_KEY=your_anthropic_api_key_here

>> Remarque : Si vous êtes sur un niveau Antrhopic gratuit, il se peut que vous n'ayez pas accès aux modèles les plus récents. Vous devrez mettre à jour CLAUDE_MODEL dans votre fichier chatbot.js en conséquence.

Exécuter le Chatbot

node chatbot.js 

Exemple de conversation

Voici à quoi pourrait ressembler une conversation avec votre nouveau chatbot :

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

Au cours de ce bref échange, votre chatbot a géré l'ensemble du flux de travail : Claude a compris votre demande, a invoqué l'outil d'équilibrage par l'intermédiaire de MCP et a récupéré les données réelles de l'API de Vonage.

Pourquoi cette architecture est puissante

Cette approche présente plusieurs avantages :

1. Séparation des préoccupations

• Le code de votre chatbot se concentre sur la gestion des conversations

• Les serveurs MCP gèrent la complexité de l'intégration avec des API externes.

• Claude gère l'intelligence du moment et de la manière d'utiliser les outils

2. Extensibilité

• Vous souhaitez ajouter des données météorologiques ? Il suffit d'ajouter un serveur météo MCP

• Besoin d'un accès à une base de données ? Ajouter un serveur MCP de base de données

• Le code de base du chatbot n'a pas besoin d'être modifié

3. La normalisation

• MCP fournit une interface cohérente entre les différents services

• Les outils sont automatiquement découverts et documentés

• La gestion des erreurs est normalisée

4. Renseignement

• Claude décide automatiquement quand les outils sont nécessaires

• Il peut enchaîner plusieurs outils pour effectuer des tâches complexes

• Il fournit des explications en langage naturel sur ce qu'il fait.

Conclusion

Félicitations ! Vous avez construit un chatbot IA qui peut non seulement avoir des conversations mais aussi interagir avec des services externes par le biais d'outils. Il s'agit d'un modèle puissant que vous pouvez étendre pour l'intégrer à pratiquement n'importe quel service disposant d'un serveur MCP.

La combinaison de l'API Claude d'Anthropic et du protocole de contexte de modèle crée une plateforme flexible et extensible pour construire des assistants d'intelligence artificielle qui peuvent réellement faire des choses, et pas seulement d'en parler.

Principaux enseignements :

• L'API de Claude de Claude permet de prendre des décisions intelligentes en matière de conversation et d'utilisation d'outils.

• MCP standardise la façon dont les assistants d'intelligence artificielle se connectent aux services externes

• L'intégration des outils se fait automatiquement une fois que vous avez configuré les connexions

• Cette architecture est évolutive - vous pouvez ajouter de nouvelles capacités sans modifier le code de base

Commencez par cette base et expérimentez avec différents serveurs MCP pour voir quels types d'assistants IA vous pouvez construire. Les possibilités sont infinies !

Pour en savoir plus

• Documentation de l'API Anthropic

• Modèle Contexte Protocole Spécification

• Documentation du serveur MCP de Vonage

• Serveurs MCP disponibles