Construisez une application de chat AI avec AI SDK & LLM Blueprint

Pour que votre agent de codage écrive l’intégration, installez le Dodo Agent Plugin. Il ajoute les compétences et les serveurs MCP de Dodo Payments à Claude Code, Codex CLI, Cursor, VS Code / GitHub Copilot, Kiro et OpenCode.

Vous allez créer une application de chat IA qui facture aux clients les tokens qu’ils utilisent. Vous créez le compteur de facturation, le produit et le code de l’application qui gère les conversations et signale l’utilisation des tokens au fur et à mesure.

Ce tutoriel crée une application complète avec un backend et un frontend. L’application de chat utilise Google Gemini, et le LLM Blueprint signale l’utilisation des tokens pour chaque réponse, afin que vous n’ayez pas à compter les tokens vous-même.

Une fois terminé, vous disposerez d’une application de chat qui :

Exécute des conversations IA avec Google Gemini via l’AI SDK.
Suit automatiquement l’utilisation des tokens, sans code de comptage.
Facture aux clients uniquement les tokens qu’ils utilisent réellement.
Inclut une interface de chat qui conserve l’historique de la conversation.

Interface de chat de l’application de chat IA terminée, affichant une conversation avec le nombre de tokens sous chaque réponse

Ce que nous construisons

Le service de chat fonctionne comme suit :

Service : chat IA avec Google Gemini via l’AI SDK
Modèle tarifaire : paiement par token ($0.01 pour 1 000 tokens)
Offre gratuite : 10 000 tokens gratuits par client et par mois
Fonctionnalités : historique des conversations et suivi automatique des tokens

Avant de commencer, vous avez besoin des éléments suivants :

Un compte Dodo Payments.
Une clé API Google AI. Obtenez-en une dans Google AI Studio.
Node.js 22 ou une version ultérieure.

Étape 1 : Créez votre compteur d’utilisation

Créez un compteur dans le tableau de bord Dodo Payments pour suivre l’utilisation des tokens IA.

Ce que vous allez créer : un compteur nommé « AI Token Usage Meter » qui additionne les tokens utilisés dans les conversations de chat.

Open the Meters Section

Connectez-vous au tableau de bord Dodo Payments.
Cliquez sur Products dans la barre latérale.
Cliquez sur Meters.
Cliquez sur Create Meter.

Page Meters du tableau de bord Dodo Payments avec le bouton Create Meter

Le formulaire du compteur s’ouvre.

Enter the Meter Details

Saisissez les informations du service de chat :Nom du compteur → AI Token Usage MeterDescription → Tracks token consumption from AI chat conversations using AI SDKNom de l’événement → ai_chat_usage

Le nom de l’événement ai_chat_usage doit correspondre au nom de l’événement envoyé par le code de l’application. Les noms d’événements sont sensibles à la casse.

Configure How Tokens Are Counted

Définissez l’agrégation, qui contrôle la manière dont le compteur combine les événements :Type d’agrégation : SumOver Property : totalTokensUnité de mesure : tokens

Sum additionne les tokens de chaque message de chat. Le LLM Blueprint envoie inputTokens, outputTokens et totalTokens dans les métadonnées de chaque événement, et ce compteur additionne totalTokens.

Create the Meter

Vérifiez que chaque paramètre correspond aux valeurs ci-dessus. Vous ne pouvez pas modifier un compteur après sa création.
Cliquez sur Create Meter.

Formulaire du compteur rempli avec le nom AI Token Usage Meter, l’événement ai_chat_usage et l’agrégation Sum

Compteur créé. Le « AI Token Usage Meter » est prêt à compter les tokens. Ensuite, associez-le à un produit de facturation.

Étape 2 : Obtenez vos clés API

Récupérez les deux clés API dont l’application a besoin.

Get a Dodo Payments API Key

Dans le tableau de bord Dodo Payments, accédez à Developer → API Keys.
Cliquez sur Add API Key.
Copiez la clé API.

Créez la clé en mode test : une clé en mode test fonctionne uniquement en mode test. Vous ajouterez la clé au fichier .env à l’étape 5.

Get a Google AI API Key

Accédez à aistudio.google.com.
Cliquez sur Get API Key.
Créez une clé API ou utilisez-en une existante.
Copiez la clé.

Gardez cette clé confidentielle. Vous l’ajouterez au fichier .env à l’étape 5.

Étape 3 : Créez votre produit de facturation

Créez un produit qui définit la tarification : $0.01 pour 1 000 tokens, avec 10 000 tokens gratuits. Le produit associe le compteur à la facturation.

Ce que vous allez créer : un produit appelé « AI Chat Service » qui facture l’utilisation des tokens au-delà de l’offre gratuite.

Navigate to Products

Dans le tableau de bord Dodo Payments, cliquez sur Products dans la barre latérale.
Cliquez sur Add Product.
Sous Pricing Type, sélectionnez Usage Based Billing.

Avec ce type de tarification, Dodo Payments facture l’utilisation du compteur au lieu d’un prix d’abonnement fixe.

Enter Product Details

Renseignez les informations requises :Nom du produit : → AI Chat ServiceDescription : → AI-powered chat service with automatic token-based billingProduct Image : importez une image pertinente.

Le nom et la description apparaissent sur les factures des clients.

Connect Your Meter

Vérifiez que le type de tarification du produit est Usage Based Billing.Définissez le Price sur 0 afin que les clients paient uniquement l’utilisation, sans frais de base.Associez ensuite le compteur que vous avez créé :

Faites défiler jusqu’à la section Associated Meters.
Cliquez sur Add meters.
Sélectionnez « AI Token Usage Meter » dans la liste déroulante.
Vérifiez que le compteur apparaît dans la configuration du produit.

Le compteur est associé au produit.

Set Your Pricing

Définissez le prix par token et l’offre gratuite :Price per unit : → 0.00001. Cela correspond à $0.00001 par token, soit $0.01 pour 1 000 tokens.Free Threshold : → 10000. Chaque client bénéficie de 10 000 tokens gratuits par mois.

Tarification du compteur sur le produit AI Chat Service, avec le prix par unité et le seuil gratuit renseignés

Fonctionnement de la facturation : un client qui utilise 25 000 tokens au cours d’un mois paie pour 15 000 tokens (25 000 − 10 000 gratuits). 15 000 × $0.00001 = $0.15.

Save Your Product

Vérifiez les paramètres :
- Nom : AI Chat Service
- Compteur : AI Token Usage Meter
- Prix : $0.01 pour 1 000 tokens
- Offre gratuite : 10 000 tokens
Cliquez sur Save Changes.

Produit créé. La facturation est configurée et les clients sont facturés pour les tokens qu’ils utilisent.

Étape 4 : Effectuez un achat test

Créez un client de test en achetant le produit. L’application envoie les événements d’utilisation pour ce client.

Get Your Payment Link

Dans le tableau de bord Dodo Payments, accédez à Products.
Recherchez le produit « AI Chat Service ».
Cliquez sur Share à côté du produit.
Copiez le lien de paiement.

Complete a Test Purchase

Ouvrez le lien de paiement dans un nouvel onglet du navigateur.
Saisissez les informations de paiement de test et finalisez l’achat.

Une fois le paiement effectué, l’achat crée un client. Le code de l’application utilise l’ID de ce client.

Find Your Customer ID

Retournez au tableau de bord Dodo Payments.
Accédez à Sales → Customers dans la barre latérale.
Recherchez le client que vous avez créé à l’aide de son adresse e-mail de test.
Copiez l’ID du client. Il commence par cus_.

Enregistrez cet ID client. Vous l’utiliserez pour tester l’application de chat.

Étape 5 : Construisez l’application de chat

Une fois la facturation configurée et le client de test créé, créez l’application de chat.

Set Up Your Project

Créez un répertoire et initialisez le projet :

mkdir ai-chat-app
cd ai-chat-app
npm init -y

Install Dependencies

Installez les packages :

npm install express ai@5 @ai-sdk/google@2 @dodopayments/ingestion-blueprints dotenv
npm install --save-dev typescript @types/express @types/node tsx

Configure TypeScript

Créez tsconfig.json :

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Mettez à jour package.json pour ajouter le type de module et les scripts :

package.json

{
  "type": "module",
  "scripts": {
    "dev": "tsx src/server.ts",
    "build": "tsc",
    "start": "node dist/server.js"
  }
}

Create the Project Structure

Créez les dossiers des fichiers source et statiques :

mkdir src public

Set Up Environment Variables

Créez un fichier .env à la racine du projet :

.env

DODO_PAYMENTS_API_KEY=your_dodo_api_key_here
DODO_PAYMENTS_ENVIRONMENT=test_mode
GOOGLE_GENERATIVE_AI_API_KEY=your_google_api_key_here
PORT=3000

Remplacez les valeurs fictives par les clés API de l’étape 2. Le fournisseur Google de l’AI SDK lit GOOGLE_GENERATIVE_AI_API_KEY par défaut.

Create the Backend Server

Créez src/server.ts et collez-y le code serveur ci-dessous.

Le serveur de chat complet avec la facturation, ainsi que les fichiers .env et package.json correspondants :

import express, { Request, Response } from 'express';
import { generateText } from 'ai';
import { google } from '@ai-sdk/google';
import { createLLMTracker } from '@dodopayments/ingestion-blueprints';
import 'dotenv/config';

const app = express();
app.use(express.json());
app.use(express.static('public'));

// Replace with your test customer ID
const CUSTOMER_ID = 'cus_123';

// Create tracker once with your meter event name
const llmTracker = createLLMTracker({
  apiKey: process.env.DODO_PAYMENTS_API_KEY!,
  environment: process.env.DODO_PAYMENTS_ENVIRONMENT as 'test_mode' | 'live_mode',
  eventName: 'ai_chat_usage', // Must match your meter configuration
});

// Chat endpoint with conversation support
app.post('/chat', async (req: Request, res: Response) => {
  try {
    const { messages } = req.body;

    if (!messages || !Array.isArray(messages)) {
      return res.status(400).json({ 
        error: 'Missing required field: messages (array)' 
      });
    }

    // Wrap AI SDK with automatic token tracking
    const trackedClient = llmTracker.wrap({
      client: { generateText },
      customerId: CUSTOMER_ID
    });

    // Generate AI response - tokens are automatically tracked!
    const response = await trackedClient.generateText({
      model: google('gemini-2.5-flash'),
      messages: messages
    });

    res.json({
      message: response.text,
      usage: {
        totalTokens: response.usage.totalTokens
      }
    });

  } catch (error: any) {
    console.error('Chat error:', error);
    res.status(500).json({ 
      error: 'Failed to process chat',
      details: error.message 
    });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`🚀 Server running at http://localhost:${PORT}`);
  console.log(`📊 Tracking event: ai_chat_usage`);
  console.log(`👤 Customer ID: ${CUSTOMER_ID}`);
  console.log(`🔧 Environment: ${process.env.DODO_PAYMENTS_ENVIRONMENT}`);
});

# Add your API keys here
DODO_PAYMENTS_API_KEY=your_dodo_api_key_here
DODO_PAYMENTS_ENVIRONMENT=test_mode
GOOGLE_GENERATIVE_AI_API_KEY=your_google_api_key_here
PORT=3000

{
  "name": "ai-chat-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "tsx src/server.ts",
    "build": "tsc",
    "start": "node dist/server.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "ai": "^5.0.51",
    "@ai-sdk/google": "^2.0.16",
    "@dodopayments/ingestion-blueprints": "latest",
    "dotenv": "^16.0.3"
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "@types/express": "^4.17.17",
    "@types/node": "^20.0.0",
    "tsx": "^3.12.7"
  }
}

Étape 6 : Ajoutez l’interface de chat

Ajoutez une interface de chat qui conserve l’historique complet de la conversation. Créez public/index.html :

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI Chat with Usage Billing</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, sans-serif;
        background: #0f0f1e;
        background-image: radial-gradient(
            at 0% 0%,
            rgba(102, 126, 234, 0.15) 0px,
            transparent 50%
          ),
          radial-gradient(
            at 100% 100%,
            rgba(118, 75, 162, 0.15) 0px,
            transparent 50%
          ),
          radial-gradient(
            at 50% 50%,
            rgba(102, 126, 234, 0.05) 0px,
            transparent 50%
          );
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        position: relative;
        overflow: hidden;
        margin: 0;
      }

      .chat-container {
        background: rgba(22, 22, 35, 0.95);
        border: 1px solid rgba(102, 126, 234, 0.2);
        border-radius: 0;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        width: 100%;
        max-width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        z-index: 1;
      }

      .chat-header {
        background: linear-gradient(
          135deg,
          rgba(102, 126, 234, 0.15) 0%,
          rgba(118, 75, 162, 0.15) 100%
        );
        border-bottom: 1px solid rgba(102, 126, 234, 0.2);
        color: white;
        padding: 24px 28px;
        position: relative;
        overflow: hidden;
      }

      .chat-header h1 {
        font-size: 26px;
        margin-bottom: 6px;
        font-weight: 700;
        letter-spacing: -0.5px;
        color: #fff;
      }

      .chat-header p {
        font-size: 13px;
        opacity: 0.6;
        font-weight: 500;
        letter-spacing: 0.3px;
      }

      .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 32px 10%;
        background: transparent;
        will-change: scroll-position;
        scroll-behavior: smooth;
      }

      .chat-messages::-webkit-scrollbar {
        width: 6px;
      }

      .chat-messages::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
      }

      .chat-messages::-webkit-scrollbar-thumb {
        background: rgba(102, 126, 234, 0.3);
        border-radius: 3px;
      }

      .chat-messages::-webkit-scrollbar-thumb:hover {
        background: rgba(102, 126, 234, 0.5);
      }

      .message {
        margin-bottom: 20px;
        display: flex;
        gap: 12px;
        animation: slideIn 0.2s ease-out;
      }

      @keyframes slideIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .message.user {
        flex-direction: row-reverse;
      }

      .message-avatar {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      }

      .message.user .message-avatar {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .message.assistant .message-avatar {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .message-content {
        max-width: 65%;
      }

      .message-bubble {
        padding: 14px 18px;
        border-radius: 18px;
        line-height: 1.6;
        word-wrap: break-word;
        font-size: 15px;
        position: relative;
      }

      .message.user .message-bubble {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-bottom-right-radius: 6px;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
      }

      .message.assistant .message-bubble {
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom-left-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      }

      .message-meta {
        display: flex;
        gap: 10px;
        margin-top: 8px;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.4);
        font-weight: 500;
      }

      .message.user .message-meta {
        justify-content: flex-end;
      }

      .token-badge {
        background: rgba(102, 126, 234, 0.2);
        color: #a8b9ff;
        padding: 4px 10px;
        border-radius: 12px;
        font-weight: 600;
        border: 1px solid rgba(102, 126, 234, 0.3);
      }

      .chat-input-area {
        padding: 24px 10% 32px;
        background: rgba(22, 22, 35, 0.95);
        border-top: 1px solid rgba(102, 126, 234, 0.2);
      }

      .input-wrapper {
        display: flex;
        gap: 12px;
        align-items: flex-end;
      }

      #messageInput {
        flex: 1;
        background: rgba(255, 255, 255, 0.05);
        border: 2px solid rgba(102, 126, 234, 0.2);
        border-radius: 16px;
        padding: 14px 20px;
        font-size: 15px;
        font-family: inherit;
        resize: none;
        max-height: 120px;
        transition: border-color 0.2s ease, background 0.2s ease;
        color: white;
        will-change: border-color;
        overflow: hidden;
        scrollbar-width: none;
        /* Firefox */
      }

      #messageInput::-webkit-scrollbar {
        display: none;
      }

      #messageInput::placeholder {
        color: rgba(255, 255, 255, 0.3);
      }

      #messageInput:focus {
        outline: none;
        border-color: #667eea;
        background: rgba(255, 255, 255, 0.08);
      }

      #sendBtn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        width: 52px;
        height: 52px;
        border-radius: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        transition: transform 0.1s ease, box-shadow 0.1s ease;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
        position: relative;
      }

      #sendBtn:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
      }

      #sendBtn:active:not(:disabled) {
        transform: translateY(0);
      }

      #sendBtn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        box-shadow: none;
      }

      .typing-indicator {
        display: none;
        padding: 14px 18px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 18px;
        border-bottom-left-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        width: fit-content;
      }

      .typing-indicator.show {
        display: block;
      }

      .typing-dots {
        display: flex;
        gap: 6px;
      }

      .typing-dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #667eea;
        animation: typing 1.4s infinite ease-in-out;
        will-change: transform, opacity;
      }

      .typing-dots span:nth-child(2) {
        animation-delay: 0.2s;
      }

      .typing-dots span:nth-child(3) {
        animation-delay: 0.4s;
      }

      @keyframes typing {
        0%,
        60%,
        100% {
          transform: translateY(0) scale(1);
          opacity: 0.6;
        }

        30% {
          transform: translateY(-12px) scale(1.1);
          opacity: 1;
        }
      }

      .error-message {
        background: rgba(239, 68, 68, 0.15);
        color: #fca5a5;
        padding: 14px 18px;
        border-radius: 12px;
        margin-bottom: 12px;
        display: none;
        border: 1px solid rgba(239, 68, 68, 0.3);
        font-size: 14px;
        font-weight: 500;
      }

      .error-message.show {
        display: block;
        animation: slideIn 0.3s ease;
      }

      .empty-state {
        text-align: center;
        padding: 80px 20px;
        color: rgba(255, 255, 255, 0.5);
      }

      .empty-state-icon {
        font-size: 72px;
        margin-bottom: 20px;
        animation: float 3s ease-in-out infinite;
      }

      @keyframes float {
        0%,
        100% {
          transform: translateY(0px);
        }

        50% {
          transform: translateY(-10px);
        }
      }

      .empty-state h2 {
        font-size: 24px;
        margin-bottom: 10px;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 700;
        letter-spacing: -0.5px;
      }

      .empty-state p {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.4);
        font-weight: 500;
      }
    </style>
  </head>

  <body>
    <div class="chat-container">
      <div class="chat-header">
        <h1>🤖 AI Chat Assistant</h1>
        <p>Powered by AI-SDK & Dodo Payments</p>
      </div>

      <div class="chat-messages" id="chatMessages">
        <div class="empty-state" id="emptyState">
          <div class="empty-state-icon">💬</div>
          <h2>Start a Conversation</h2>
          <p>Ask me anything! Your token usage is automatically tracked.</p>
        </div>
      </div>

      <div class="chat-input-area">
        <div class="error-message" id="errorMessage"></div>
        <div class="input-wrapper">
          <textarea
            id="messageInput"
            placeholder="Type your message here..."
            rows="1"
          ></textarea>
          <button id="sendBtn" onclick="sendMessage()">➤</button>
        </div>
      </div>
    </div>

    <script>
      let conversationHistory = [];

      const messageInput = document.getElementById("messageInput");
      let resizeTimeout;
      messageInput.addEventListener("input", function () {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(() => {
          this.style.height = "auto";
          this.style.height = Math.min(this.scrollHeight, 120) + "px";
        }, 10);
      });

      // Send message on Enter (Shift+Enter for new line)
      messageInput.addEventListener("keydown", function (e) {
        if (e.key === "Enter" && !e.shiftKey) {
          e.preventDefault();
          sendMessage();
        }
      });

      async function sendMessage() {
        const input = document.getElementById("messageInput");
        const message = input.value.trim();

        if (!message) return;

        // Hide empty state
        document.getElementById("emptyState").style.display = "none";

        // Hide error
        document.getElementById("errorMessage").classList.remove("show");

        // Add user message to UI
        addMessage("user", message);

        // Add to conversation history
        conversationHistory.push({
          role: "user",
          content: message,
        });

        // Clear input
        input.value = "";
        input.style.height = "auto";

        // Show typing indicator
        showTypingIndicator();

        // Disable send button
        const sendBtn = document.getElementById("sendBtn");
        sendBtn.disabled = true;

        try {
          const response = await fetch("/chat", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              messages: conversationHistory,
            }),
          });

          const data = await response.json();

          if (!response.ok) {
            throw new Error(data.error || "Failed to get response");
          }

          // Hide typing indicator
          hideTypingIndicator();

          // Add assistant response to UI
          addMessage("assistant", data.message, data.usage);

          // Add to conversation history
          conversationHistory.push({
            role: "assistant",
            content: data.message,
          });
        } catch (error) {
          hideTypingIndicator();
          showError(error.message);
          // Remove the last user message from history since it failed
          conversationHistory.pop();
        } finally {
          sendBtn.disabled = false;
        }
      }

      function addMessage(role, content, usage = null) {
        const messagesDiv = document.getElementById("chatMessages");

        const messageDiv = document.createElement("div");
        messageDiv.className = `message ${role}`;

        const avatar = role === "user" ? "👤" : "🤖";

        let metaHTML = "";
        if (usage) {
          metaHTML = `
                    <div class="message-meta">
                        <span class="token-badge">📊 ${usage.totalTokens} tokens</span>
                    </div>
                `;
        }

        messageDiv.innerHTML = `
                <div class="message-avatar">${avatar}</div>
                <div class="message-content">
                    <div class="message-bubble">${escapeHtml(content)}</div>
                    ${metaHTML}
                </div>
            `;

        messagesDiv.appendChild(messageDiv);
        requestAnimationFrame(() => {
          messagesDiv.scrollTop = messagesDiv.scrollHeight;
        });
      }

      function showTypingIndicator() {
        const messagesDiv = document.getElementById("chatMessages");

        const typingDiv = document.createElement("div");
        typingDiv.className = "message assistant";
        typingDiv.id = "typingIndicator";
        typingDiv.innerHTML = `
                <div class="message-avatar">🤖</div>
                <div class="typing-indicator show">
                    <div class="typing-dots">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            `;

        messagesDiv.appendChild(typingDiv);
        requestAnimationFrame(() => {
          messagesDiv.scrollTop = messagesDiv.scrollHeight;
        });
      }

      function hideTypingIndicator() {
        const typingIndicator = document.getElementById("typingIndicator");
        if (typingIndicator) {
          typingIndicator.remove();
        }
      }

      function showError(message) {
        const errorDiv = document.getElementById("errorMessage");
        errorDiv.textContent = "❌ " + message;
        errorDiv.classList.add("show");
      }

      function escapeHtml(text) {
        const div = document.createElement("div");
        div.textContent = text;
        return div.innerHTML.replace(/\n/g, "<br>");
      }
    </script>
  </body>
</html>

Étape 7 : Testez votre application de chat

Testez l’application de chat de bout en bout et observez l’utilisation parvenir à Dodo Payments.

Ce que vous testez : vous discutez avec l’IA, vérifiez que les événements de tokens parviennent à Dodo Payments et contrôlez le calcul de la facturation.

Start the Server

Vérifiez que le fichier .env contient les deux clés API de l’étape 2.
Démarrez le serveur de développement :

npm run dev

Le serveur affiche dans les logs :

🚀 Server running at http://localhost:3000
📊 Tracking event: ai_chat_usage
👤 Customer ID: {YOUR CUSTOMER_ID}
🔧 Environment: test_mode

Le serveur fonctionne.

Open the Chat Interface

Ouvrez votre navigateur.
Accédez à http://localhost:3000. L’interface de chat se charge.

Avant de discuter, définissez CUSTOMER_ID dans server.ts sur l’ID du client de test de l’étape 4, puis redémarrez le serveur.

Have Your First Conversation

Envoyez ces messages :

« What is artificial intelligence? »
« How does machine learning work? »
« Can you explain neural networks? »

Chaque réponse affiche le nombre de tokens utilisés.

Si l’IA répond et que le nombre de tokens apparaît, l’application fonctionne.

Check Your Dodo Payments Dashboard

Vérifiez que Dodo Payments reçoit les événements :

Ouvrez le tableau de bord Dodo Payments.
Accédez à Products → Meters et ouvrez AI Token Usage Meter.
Sélectionnez l’onglet Events.
Recherchez vos événements de chat dans la liste.

Éléments à vérifier :

Nom de l’événement : ai_chat_usage
ID client : l’ID de votre client de test

Onglet Events du AI Token Usage Meter listant les événements ai_chat_usage

La liste contient un événement pour chaque message que vous avez envoyé.

Verify Token Counting

Envoyez quelques messages supplémentaires, puis vérifiez l’agrégation :

Dans le compteur, sélectionnez l’onglet Customers.
Recherchez votre client de test.
Vérifiez la colonne Consumed Units. Elle affiche le nombre total de tokens utilisés.

Onglet Customers du compteur affichant les unités consommées pour le client de test

Le compteur additionne la valeur totalTokens de chaque événement.

Test the Free Tier

Utilisez suffisamment de tokens pour dépasser l’offre gratuite :

Effectuez plusieurs conversations supplémentaires jusqu’à dépasser environ 15 000 tokens au total.
Ouvrez à nouveau l’onglet Customers du compteur.
Vérifiez les valeurs :
- Consumed Units : 15 000+ tokens
- Chargeable Units : 5 000 (10 000 tokens gratuits appliqués)
- Total Price : ~$0.05

Onglet Customers du compteur affichant les unités consommées, les unités facturables et le prix total après l’offre gratuite

La facturation à l’usage fonctionne. Les clients sont facturés pour les tokens qu’ils utilisent.

Dépannage

Problèmes courants et solutions :

Events not appearing in dashboard

Causes possibles :

Le nom de l’événement ne correspond pas exactement à la configuration du compteur
L’ID client n’existe pas dans votre compte
La clé API est invalide ou a expiré
Problèmes de connectivité réseau

Solutions :

Vérifiez que le nom de l’événement correspond exactement à celui du compteur. Il est sensible à la casse : ai_chat_usage.
Vérifiez que l’ID client existe dans le tableau de bord Dodo Payments.
Testez la clé API avec un simple appel API.
Consultez les logs du serveur pour rechercher les erreurs.

Token counts showing zero

Causes possibles :

Le modèle ne renvoie pas d’informations d’utilisation
Version incorrecte du SDK

Solutions :

Vérifiez si le modèle renvoie l’utilisation :

const response = await generateText({ model: google('gemini-2.5-flash'), prompt: 'Hello' });
console.log('Usage:', response.usage);

Mettez à jour le package Blueprints : npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

Causes possibles :

La clé API appartient à l’autre mode.
Le fichier .env contient des espaces ou des guillemets supplémentaires.

Solutions :

Une clé fonctionne uniquement dans le mode dans lequel elle a été créée. Utilisez une clé en mode test avec DODO_PAYMENTS_ENVIRONMENT=test_mode et une clé en mode live avec live_mode.
Supprimez les guillemets autour des clés dans le fichier .env.
Générez une nouvelle clé si nécessaire.

Besoin d’aide ?

Félicitations ! Vous avez créé une application de chat IA

Vous disposez désormais d’une application de chat IA fonctionnelle qui suit l’utilisation des tokens et facture les clients via Dodo Payments.

En savoir plus

LLM Blueprint

Suivez l’utilisation des tokens LLM avec le LLM Ingestion Blueprint.

Ingestion Blueprints SDK

Découvrez d’autres exemples dans le dépôt GitHub.

Join Community

Obtenez de l’aide et partagez vos projets sur Discord.

Integration Guides

Billing Deconstructions

Cookbooks

Construisez une application de chat AI avec AI SDK & LLM Blueprint

Ce que nous construisons

Étape 1 : Créez votre compteur d’utilisation

Étape 2 : Obtenez vos clés API

Étape 3 : Créez votre produit de facturation

Étape 4 : Effectuez un achat test

Étape 5 : Construisez l’application de chat

Étape 6 : Ajoutez l’interface de chat

Étape 7 : Testez votre application de chat

Dépannage

Félicitations ! Vous avez créé une application de chat IA

En savoir plus

LLM Blueprint

Ingestion Blueprints SDK

Join Community

​Ce que nous construisons

​Étape 1 : Créez votre compteur d’utilisation

​Étape 2 : Obtenez vos clés API

​Étape 3 : Créez votre produit de facturation

​Étape 4 : Effectuez un achat test

​Étape 5 : Construisez l’application de chat

​Étape 6 : Ajoutez l’interface de chat

​Étape 7 : Testez votre application de chat

​Dépannage

​Félicitations ! Vous avez créé une application de chat IA

​En savoir plus

LLM Blueprint

Ingestion Blueprints SDK

Join Community

Ce que nous construisons

Étape 1 : Créez votre compteur d’utilisation

Étape 2 : Obtenez vos clés API

Étape 3 : Créez votre produit de facturation

Étape 4 : Effectuez un achat test

Étape 5 : Construisez l’application de chat

Étape 6 : Ajoutez l’interface de chat

Étape 7 : Testez votre application de chat

Dépannage

Félicitations ! Vous avez créé une application de chat IA

En savoir plus