Costruisci un'app di chat AI con AI SDK e LLM Blueprint

Per fare in modo che il tuo agente di coding scriva l’integrazione, installa il Dodo Agent Plugin. Aggiunge le competenze e i server MCP di Dodo Payments a Claude Code, Codex CLI, Cursor, VS Code / GitHub Copilot, Kiro e OpenCode.

Creerai un’applicazione di chat AI che fattura ai clienti i token che utilizzano. Creerai il contatore di fatturazione, il prodotto e il codice dell’applicazione che gestisce le conversazioni e segnala l’utilizzo dei token in tempo reale.

Questo tutorial crea un’applicazione completa con backend e frontend. L’app di chat utilizza Google Gemini e LLM Blueprint segnala l’utilizzo dei token per ogni risposta, quindi non dovrai contarli manualmente.

Al termine, avrai un’applicazione di chat che:

Gestisce conversazioni AI con Google Gemini tramite AI SDK.
Tiene traccia automaticamente dell’utilizzo dei token, senza codice per il conteggio.
Addebita ai clienti i token effettivamente utilizzati.
Include un’interfaccia di chat che conserva la cronologia della conversazione.

Interfaccia di chat dell'app di chat AI completata, con una conversazione e il numero di token sotto ogni risposta

Cosa Stiamo Costruendo

Il servizio di chat funziona così:

Servizio: chat AI con Google Gemini tramite AI SDK
Modello di prezzo: pagamento per token ($0.01 ogni 1.000 token)
Piano gratuito: 10.000 token gratuiti per cliente al mese
Funzionalità: cronologia delle conversazioni e tracciamento automatico dei token

Prima di iniziare, ti servono:

Un account Dodo Payments.
Una chiave API Google AI. Ottienine una da Google AI Studio.
Node.js 22 o versione successiva.

Passo 1: Crea il Tuo Contatore di Utilizzo

Crea un contatore nella dashboard di Dodo Payments per tenere traccia dell’utilizzo dei token AI.

Cosa creerai: un contatore denominato “AI Token Usage Meter” che somma i token utilizzati nelle conversazioni di chat.

Open the Meters Section

Accedi alla dashboard di Dodo Payments.
Fai clic su Products nella barra laterale.
Fai clic su Meters.
Fai clic su Create Meter.

Pagina Meters nella dashboard di Dodo Payments con il pulsante Create Meter

Si apre il modulo del contatore.

Enter the Meter Details

Inserisci i dettagli del servizio di chat:Nome del Meter → AI Token Usage MeterDescrizione → Tracks token consumption from AI chat conversations using AI SDKNome Evento → ai_chat_usage

Il nome dell’evento ai_chat_usage deve corrispondere al nome dell’evento inviato dal codice dell’applicazione. I nomi degli eventi distinguono tra maiuscole e minuscole.

Configure How Tokens Are Counted

Imposta l’aggregazione, che determina il modo in cui il contatore combina gli eventi:Tipo di aggregazione: SommaSulla proprietà: totalTokensUnità di misura: tokens

Sum somma i token di ogni messaggio di chat. LLM Blueprint invia inputTokens, outputTokens e totalTokens nei metadati di ogni evento, e questo contatore somma totalTokens.

Create the Meter

Verifica che ogni impostazione corrisponda ai valori indicati sopra. Non puoi modificare un contatore dopo averlo creato.
Fai clic su Create Meter.

Modulo del contatore compilato con il nome AI Token Usage Meter, l'evento ai_chat_usage e l'aggregazione Sum

Contatore creato. “AI Token Usage Meter” è pronto per contare i token. Ora collegalo a un prodotto di fatturazione.

Passo 2: Ottieni le Tue Chiavi API

Raccogli le due chiavi API necessarie all’app.

Get a Dodo Payments API Key

Nella dashboard di Dodo Payments, vai a Developer → API Keys.
Fai clic su Add API Key.
Copia la chiave API.

Crea la chiave in modalità di test: una chiave in modalità di test funziona solo con la modalità di test. Aggiungerai la chiave al file .env nel Passaggio 5.

Get a Google AI API Key

Vai a aistudio.google.com.
Fai clic su Get API Key.
Crea una chiave API o utilizzane una esistente.
Copia la chiave.

Mantieni privata questa chiave. La aggiungerai al file .env nel Passaggio 5.

Passo 3: Crea il Tuo Prodotto di Fatturazione

Crea un prodotto che definisca il prezzo: $0.01 ogni 1.000 token, con 10.000 token gratuiti. Il prodotto collega il contatore alla fatturazione.

Cosa creerai: un prodotto denominato “AI Chat Service” che addebita l’utilizzo dei token oltre la soglia gratuita.

Navigate to Products

Nella dashboard di Dodo Payments, fai clic su Products nella barra laterale.
Fai clic su Add Product.
In Pricing Type, seleziona Usage Based Billing.

Con questo tipo di prezzo, Dodo Payments fattura in base all’utilizzo del contatore invece che a un prezzo fisso di abbonamento.

Enter Product Details

Compila i dettagli obbligatori:Nome Prodotto: → AI Chat ServiceDescrizione: → AI-powered chat service with automatic token-based billingImmagine del prodotto: carica un’immagine pertinente.

Il nome e la descrizione vengono visualizzati nelle fatture dei clienti.

Connect Your Meter

Verifica che il tipo di prezzo del prodotto sia Usage Based Billing.Imposta Price su 0, così i clienti pagano solo l’utilizzo, senza costi fissi.Quindi collega il contatore che hai creato:

Scorri fino alla sezione Associated Meters.
Fai clic su Add meters.
Seleziona “AI Token Usage Meter” dal menu a discesa.
Verifica che il contatore venga visualizzato nella configurazione del prodotto.

Il contatore è collegato al prodotto.

Set Your Pricing

Definisci il prezzo per token e il piano gratuito:Prezzo per unità: → 0.00001. Sono $0.00001 per token, ovvero $0.01 ogni 1.000 token.Soglia gratuita: → 10000. Ogni cliente riceve 10.000 token gratuiti al mese.

Prezzo del contatore nel prodotto AI Chat Service, con prezzo per unità e soglia gratuita compilati

Come funziona la fatturazione: un cliente che utilizza 25.000 token in un mese paga 15.000 token (25.000 − 10.000 gratuiti). 15.000 × $0.00001 = $0.15.

Save Your Product

Esamina le impostazioni:
- Nome: AI Chat Service
- Contatore: AI Token Usage Meter
- Prezzo: $0.01 ogni 1.000 token
- Piano gratuito: 10.000 token
Fai clic su Save Changes.

Prodotto creato. La fatturazione è configurata e ai clienti vengono addebitati i token utilizzati.

Passo 4: Effettua un Acquisto di Prova

Crea un cliente di test acquistando il prodotto. L’app invia gli eventi di utilizzo per questo cliente.

Get Your Payment Link

Nella dashboard di Dodo Payments, vai a Products.
Trova il prodotto “AI Chat Service”.
Fai clic su Share accanto al prodotto.
Copia il link di pagamento.

Complete a Test Purchase

Apri il link di pagamento in una nuova scheda del browser.
Inserisci i dati di pagamento di test e completa l’acquisto.

Dopo il completamento del pagamento, l’acquisto crea un cliente. Il codice dell’applicazione utilizza l’ID di quel cliente.

Find Your Customer ID

Torna alla dashboard di Dodo Payments.
Vai a Sales → Customers nella barra laterale.
Trova il cliente che hai creato utilizzando il relativo indirizzo email di test.
Copia l’ID del cliente. Inizia con cus_.

Salva questo ID cliente. Ti servirà per testare l’applicazione di chat.

Passo 5: Costruisci l’Applicazione di Chat

Dopo aver configurato la fatturazione e creato un cliente di test, crea l’applicazione di chat.

Set Up Your Project

Crea una directory e inizializza il progetto:

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

Install Dependencies

Installa i pacchetti:

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

Crea 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"]
}

Aggiorna package.json per aggiungere il tipo di modulo e gli script:

package.json

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

Create the Project Structure

Crea le cartelle per i file sorgente e statici:

mkdir src public

Set Up Environment Variables

Crea un file .env nella radice del progetto:

.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

Sostituisci i valori segnaposto con le chiavi API del Passaggio 2. Il provider Google per AI SDK legge GOOGLE_GENERATIVE_AI_API_KEY per impostazione predefinita.

Create the Backend Server

Crea src/server.ts e incolla il codice del server riportato di seguito.

Il server di chat completo con la fatturazione, insieme ai file .env e package.json corrispondenti:

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

Passo 6: Aggiungi l’Interfaccia di Chat

Aggiungi un’interfaccia di chat che conservi l’intera cronologia della conversazione. Crea 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>

Passo 7: Testa la Tua Applicazione di Chat

Testa l’app di chat dall’inizio alla fine e osserva l’utilizzo arrivare a Dodo Payments.

Cosa stai testando: chatti con l’AI, verifichi che gli eventi dei token arrivino a Dodo Payments e controlli il calcolo della fatturazione.

Start the Server

Verifica che il file .env contenga entrambe le chiavi API del Passaggio 2.
Avvia il server di sviluppo:

npm run dev

Il server registra:

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

Il server è in esecuzione.

Open the Chat Interface

Apri il browser.
Vai a http://localhost:3000. L’interfaccia di chat viene caricata.

Prima di chattare, imposta CUSTOMER_ID in server.ts sull’ID del cliente di test del Passaggio 4, quindi riavvia il server.

Have Your First Conversation

Invia questi messaggi:

“Che cos’è l’intelligenza artificiale?”
“Come funziona il machine learning?”
“Puoi spiegare le reti neurali?”

Ogni risposta mostra il numero di token utilizzati.

Se l’AI risponde e vengono visualizzati i conteggi dei token, l’app funziona.

Check Your Dodo Payments Dashboard

Verifica che Dodo Payments riceva gli eventi:

Apri la dashboard di Dodo Payments.
Vai a Products → Meters e apri AI Token Usage Meter.
Seleziona la scheda Events.
Trova gli eventi della chat nell’elenco.

Cosa cercare:

Nome evento: ai_chat_usage
ID cliente: l’ID del tuo cliente di test

Scheda Events di AI Token Usage Meter con gli eventi ai_chat_usage elencati

L’elenco contiene un evento per ogni messaggio inviato.

Verify Token Counting

Invia altri messaggi, quindi controlla l’aggregazione:

Nel contatore, seleziona la scheda Customers.
Trova il tuo cliente di test.
Controlla la colonna Consumed Units. Mostra il totale dei token utilizzati.

Scheda Customers del contatore che mostra le unità consumate dal cliente di test

Il contatore somma il valore totalTokens di ogni evento.

Test the Free Tier

Utilizza abbastanza token da superare il piano gratuito:

Svolgi diverse altre conversazioni, finché il totale non supera circa 15.000 token.
Apri di nuovo la scheda Customers del contatore.
Controlla i valori:
- Consumed Units: oltre 15.000 token
- Chargeable Units: 5.000 (sono stati applicati 10.000 token gratuiti)
- Total Price: ~$0.05

Scheda Customers del contatore con unità consumate, unità fatturabili e prezzo totale dopo l'applicazione del piano gratuito

La fatturazione basata sull’utilizzo funziona. Ai clienti vengono addebitati i token che utilizzano.

Risoluzione dei problemi

Problemi comuni e relative soluzioni:

Events not appearing in dashboard

Possibili cause:

Il nome dell’evento non corrisponde esattamente alla configurazione del contatore
L’ID cliente non esiste nel tuo account
La chiave API non è valida o è scaduta
Problemi di connettività di rete

Soluzioni:

Verifica che il nome dell’evento corrisponda esattamente a quello del contatore. Distingue tra maiuscole e minuscole: ai_chat_usage.
Verifica che l’ID cliente esista nella dashboard di Dodo Payments.
Testa la chiave API con una semplice chiamata API.
Controlla i log del server per individuare eventuali errori.

Token counts showing zero

Possibili cause:

Il modello non restituisce informazioni sull’utilizzo
Versione SDK errata

Soluzioni:

Verifica se il modello restituisce l’utilizzo:

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

Aggiorna il pacchetto Blueprints: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

Possibili cause:

La chiave API appartiene all’altra modalità.
Il file .env contiene spazi o virgolette aggiuntivi.

Soluzioni:

Una chiave funziona solo nella modalità in cui è stata creata. Usa una chiave della modalità di test con DODO_PAYMENTS_ENVIRONMENT=test_mode e una chiave della modalità live con live_mode.
Rimuovi eventuali virgolette intorno alle chiavi nel file .env.
Genera una nuova chiave se necessario.

Hai bisogno di aiuto?

Congratulazioni! Hai creato un’app di chat AI

Ora hai un’applicazione di chat AI funzionante che tiene traccia dell’utilizzo dei token e fattura ai clienti tale utilizzo tramite Dodo Payments.

Scopri di più

LLM Blueprint

Tieni traccia dell’utilizzo dei token LLM con LLM Ingestion Blueprint.

Ingestion Blueprints SDK

Trova altri esempi nel repository GitHub.

Join Community

Ottieni aiuto e condividi i tuoi progetti su Discord.

Integration Guides

Billing Deconstructions

Cookbooks

Costruisci un'app di chat AI con AI SDK e LLM Blueprint

Cosa Stiamo Costruendo

Passo 1: Crea il Tuo Contatore di Utilizzo

Passo 2: Ottieni le Tue Chiavi API

Passo 3: Crea il Tuo Prodotto di Fatturazione

Passo 4: Effettua un Acquisto di Prova

Passo 5: Costruisci l’Applicazione di Chat

Passo 6: Aggiungi l’Interfaccia di Chat

Passo 7: Testa la Tua Applicazione di Chat

Risoluzione dei problemi

Congratulazioni! Hai creato un’app di chat AI

Scopri di più

LLM Blueprint

Ingestion Blueprints SDK

Join Community

​Cosa Stiamo Costruendo

​Passo 1: Crea il Tuo Contatore di Utilizzo

​Passo 2: Ottieni le Tue Chiavi API

​Passo 3: Crea il Tuo Prodotto di Fatturazione

​Passo 4: Effettua un Acquisto di Prova

​Passo 5: Costruisci l’Applicazione di Chat

​Passo 6: Aggiungi l’Interfaccia di Chat

​Passo 7: Testa la Tua Applicazione di Chat

​Risoluzione dei problemi

​Congratulazioni! Hai creato un’app di chat AI

​Scopri di più

LLM Blueprint

Ingestion Blueprints SDK

Join Community

Cosa Stiamo Costruendo

Passo 1: Crea il Tuo Contatore di Utilizzo

Passo 2: Ottieni le Tue Chiavi API

Passo 3: Crea il Tuo Prodotto di Fatturazione

Passo 4: Effettua un Acquisto di Prova

Passo 5: Costruisci l’Applicazione di Chat

Passo 6: Aggiungi l’Interfaccia di Chat

Passo 7: Testa la Tua Applicazione di Chat

Risoluzione dei problemi

Congratulazioni! Hai creato un’app di chat AI

Scopri di più