Crear una aplicación de chat con IA usando AI SDK y LLM Blueprint

Para que tu agente de programación escriba la integración, instala Dodo Agent Plugin. Añade las habilidades y los servidores MCP de Dodo Payments a Claude Code, Codex CLI, Cursor, VS Code / GitHub Copilot, Kiro y OpenCode.

Crearás una aplicación de chat con IA que factura a los clientes por los tokens que utilizan. Crearás el medidor de facturación, el producto y el código de la aplicación que ejecuta las conversaciones e informa del uso de tokens a medida que ocurre.

En este tutorial crearás una aplicación completa con un backend y un frontend. La aplicación de chat utiliza Google Gemini, y LLM Blueprint informa del uso de tokens para cada respuesta, por lo que no tendrás que contar los tokens por tu cuenta.

Cuando termines, tendrás una aplicación de chat que:

Ejecuta conversaciones de IA con Google Gemini mediante AI SDK.
Realiza un seguimiento automático del uso de tokens, sin código para contarlos.
Cobra a los clientes por los tokens que realmente utilizan.
Incluye una interfaz de chat que conserva el historial de la conversación.

Interfaz de chat de la aplicación de chat con IA terminada, que muestra una conversación con el recuento de tokens debajo de cada respuesta

Lo que vamos a crear

El servicio de chat funciona de la siguiente manera:

Servicio: Chat con IA mediante Google Gemini y AI SDK
Modelo de precios: Pago por token ($0.01 por cada 1.000 tokens)
Nivel gratuito: 10.000 tokens gratuitos por cliente al mes
Funciones: Historial de conversaciones y seguimiento automático de tokens

Antes de empezar, necesitas:

Una cuenta de Dodo Payments.
Una clave de API de Google AI. Obtén una en Google AI Studio.
Node.js 22 o posterior.

Paso 1: Crea tu medidor de uso

Crea un medidor en el dashboard de Dodo Payments para realizar un seguimiento del uso de tokens de IA.

Lo que crearás: Un medidor llamado “AI Token Usage Meter” que suma los tokens utilizados en las conversaciones de chat.

Open the Meters Section

Inicia sesión en el dashboard de Dodo Payments.
Haz clic en Products en la barra lateral.
Haz clic en Meters.
Haz clic en Create Meter.

Página Meters del dashboard de Dodo Payments con el botón Create Meter

Se abre el formulario del medidor.

Enter the Meter Details

Introduce los datos del servicio de chat:Nombre del medidor → AI Token Usage MeterDescripción → Tracks token consumption from AI chat conversations using AI SDKNombre del evento → ai_chat_usage

El nombre del evento ai_chat_usage debe coincidir con el nombre del evento que envía el código de la aplicación. Los nombres de eventos distinguen entre mayúsculas y minúsculas.

Configure How Tokens Are Counted

Configura la agregación, que determina cómo combina el medidor los eventos:Tipo de agregación: SumSobre la propiedad: totalTokensUnidad de medida: tokens

Sum suma los tokens de cada mensaje de chat. LLM Blueprint envía inputTokens, outputTokens y totalTokens en los metadatos de cada evento, y este medidor suma totalTokens.

Create the Meter

Comprueba que todos los ajustes coincidan con los valores anteriores. No puedes editar un medidor después de crearlo.
Haz clic en Create Meter.

Formulario del medidor rellenado con el nombre AI Token Usage Meter, el evento ai_chat_usage y la agregación Sum

Medidor creado. El medidor “AI Token Usage Meter” está listo para contar tokens. A continuación, conéctalo a un producto de facturación.

Paso 2: Obtén tus claves de API

Recopila las dos claves de API que necesita la aplicación.

Get a Dodo Payments API Key

En el dashboard de Dodo Payments, ve a Developer → API Keys.
Haz clic en Add API Key.
Copia la clave de API.

Crea la clave en modo de prueba: una clave de modo de prueba solo funciona en modo de prueba. Añadirás la clave al archivo .env en el paso 5.

Get a Google AI API Key

Ve a aistudio.google.com.
Haz clic en Get API Key.
Crea una clave de API o utiliza una existente.
Copia la clave.

Mantén esta clave en privado. La añadirás al archivo .env en el paso 5.

Paso 3: Crea tu producto de facturación

Crea un producto que defina los precios: $0.01 por cada 1.000 tokens, con 10.000 tokens gratuitos. El producto conecta el medidor con la facturación.

Lo que crearás: Un producto llamado “AI Chat Service” que cobra por el uso de tokens por encima del nivel gratuito.

Navigate to Products

En el dashboard de Dodo Payments, haz clic en Products en la barra lateral.
Haz clic en Add Product.
En Pricing Type, selecciona Usage Based Billing.

Con este tipo de precios, Dodo Payments factura según el uso del medidor en lugar de aplicar un precio de suscripción fijo.

Enter Product Details

Completa los datos obligatorios:Nombre del producto: → AI Chat ServiceDescripción: → AI-powered chat service with automatic token-based billingImagen del producto: Sube una imagen relevante.

El nombre y la descripción aparecen en las facturas de los clientes.

Connect Your Meter

Comprueba que el tipo de precios del producto sea Usage Based Billing.Establece el Price en 0 para que los clientes paguen solo por el uso, sin una tarifa base.A continuación, vincula el medidor que creaste:

Desplázate hasta la sección Associated Meters.
Haz clic en Add meters.
Selecciona “AI Token Usage Meter” en el menú desplegable.
Confirma que el medidor aparezca en la configuración del producto.

El medidor está conectado al producto.

Set Your Pricing

Define el precio por token y el nivel gratuito:Precio por unidad: → 0.00001. Son $0.00001 por token, o $0.01 por cada 1.000 tokens.Umbral gratuito: → 10000. Cada cliente obtiene 10.000 tokens gratuitos al mes.

Precios del medidor en el producto AI Chat Service, con el precio por unidad y el umbral gratuito completados

Cómo funciona la facturación: Un cliente que utiliza 25.000 tokens en un mes paga por 15.000 tokens (25.000 − 10.000 gratuitos). 15.000 × $0.00001 = $0.15.

Save Your Product

Revisa los ajustes:
- Nombre: AI Chat Service
- Medidor: AI Token Usage Meter
- Precio: $0.01 por cada 1.000 tokens
- Nivel gratuito: 10.000 tokens
Haz clic en Save Changes.

Producto creado. La facturación está configurada y se cobra a los clientes por los tokens que utilizan.

Paso 4: Realiza una compra de prueba

Crea un cliente de prueba comprando el producto. La aplicación envía eventos de uso para este cliente.

Get Your Payment Link

En el dashboard de Dodo Payments, ve a Products.
Busca el producto “AI Chat Service”.
Haz clic en Share junto al producto.
Copia el enlace de pago.

Complete a Test Purchase

Abre el enlace de pago en una pestaña nueva del navegador.
Introduce datos de pago de prueba y completa la compra.

Cuando el pago se complete correctamente, la compra crea un cliente. El código de la aplicación utiliza el ID de ese cliente.

Find Your Customer ID

Vuelve al dashboard de Dodo Payments.
Ve a Sales → Customers en la barra lateral.
Busca el cliente que creaste mediante su dirección de correo electrónico de prueba.
Copia el ID del cliente. Comienza por cus_.

Guarda este ID de cliente. Lo utilizarás al probar la aplicación de chat.

Paso 5: Crea la aplicación de chat

Con la facturación configurada y un cliente de prueba creado, crea la aplicación de chat.

Set Up Your Project

Crea un directorio e inicializa el proyecto:

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

Install Dependencies

Instala los paquetes:

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

Actualiza package.json para añadir el tipo de módulo y los scripts:

package.json

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

Create the Project Structure

Crea las carpetas de código fuente y archivos estáticos:

mkdir src public

Set Up Environment Variables

Crea un archivo .env en la raíz del proyecto:

.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

Sustituye los valores de marcador de posición por las claves de API del paso 2. El proveedor de Google para AI SDK lee GOOGLE_GENERATIVE_AI_API_KEY de forma predeterminada.

Create the Backend Server

Crea src/server.ts y pega en él el código del servidor que aparece a continuación.

El servidor de chat completo con facturación, junto con .env y package.json:

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

Paso 6: Añade la interfaz de chat

Añade una interfaz de chat que conserve todo el historial de la conversación. 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>

Paso 7: Prueba tu aplicación de chat

Prueba la aplicación de chat de principio a fin y observa cómo el uso llega a Dodo Payments.

Qué estás probando: Chateas con la IA, confirmas que los eventos de tokens llegan a Dodo Payments y compruebas el cálculo de la facturación.

Start the Server

Comprueba que el archivo .env contenga ambas claves de API del paso 2.
Inicia el servidor de desarrollo:

npm run dev

Los registros del servidor:

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

El servidor está en ejecución.

Open the Chat Interface

Abre el navegador.
Ve a http://localhost:3000. Se carga la interfaz de chat.

Antes de chatear, establece CUSTOMER_ID en server.ts con el ID del cliente de prueba del paso 4 y, después, reinicia el servidor.

Have Your First Conversation

Envía estos mensajes:

“¿Qué es la inteligencia artificial?”
“¿Cómo funciona el aprendizaje automático?”
“¿Puedes explicar las redes neuronales?”

Cada respuesta muestra el número de tokens que utilizó.

Si la IA responde y aparecen los recuentos de tokens, la aplicación funciona.

Check Your Dodo Payments Dashboard

Confirma que Dodo Payments recibe los eventos:

Abre el dashboard de Dodo Payments.
Ve a Products → Meters y abre AI Token Usage Meter.
Selecciona la pestaña Events.
Busca tus eventos de chat en la lista.

Qué debes buscar:

Nombre del evento: ai_chat_usage
ID del cliente: el ID de tu cliente de prueba

Pestaña Events de AI Token Usage Meter que muestra eventos ai_chat_usage

La lista contiene un evento por cada mensaje que enviaste.

Verify Token Counting

Envía algunos mensajes más y, después, comprueba la agregación:

En el medidor, selecciona la pestaña Customers.
Busca tu cliente de prueba.
Comprueba la columna Consumed Units. Muestra el total de tokens utilizados.

Pestaña Customers del medidor que muestra las unidades consumidas por el cliente de prueba

El medidor suma el valor totalTokens de cada evento.

Test the Free Tier

Utiliza suficientes tokens para superar el nivel gratuito:

Mantén varias conversaciones más hasta que el total supere aproximadamente los 15.000 tokens.
Vuelve a abrir la pestaña Customers del medidor.
Comprueba los valores:
- Unidades consumidas: más de 15.000 tokens
- Unidades facturables: 5.000 (se aplicaron 10.000 tokens gratuitos)
- Precio total: ~$0.05

Pestaña Customers del medidor que muestra las unidades consumidas, las unidades facturables y el precio total después del nivel gratuito

La facturación basada en el uso funciona. Se cobra a los clientes por los tokens que utilizan.

Solución de problemas

Problemas comunes y sus soluciones:

Events not appearing in dashboard

Posibles causas:

El nombre del evento no coincide exactamente con la configuración del medidor
El ID del cliente no existe en tu cuenta
La clave de API no es válida o ha caducado
Problemas de conectividad de red

Soluciones:

Comprueba que el nombre del evento coincida exactamente con el del medidor. Distingue entre mayúsculas y minúsculas: ai_chat_usage.
Comprueba que el ID del cliente exista en el dashboard de Dodo Payments.
Prueba la clave de API con una llamada de API sencilla.
Comprueba los registros del servidor para detectar errores.

Token counts showing zero

Posibles causas:

El modelo no devuelve información de uso
Versión incorrecta del SDK

Soluciones:

Comprueba si el modelo devuelve el uso:

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

Actualiza el paquete Blueprints: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

Posibles causas:

La clave de API pertenece al otro modo.
El archivo .env contiene espacios o comillas adicionales.

Soluciones:

Una clave solo funciona en el modo en el que se creó. Utiliza una clave de modo de prueba con DODO_PAYMENTS_ENVIRONMENT=test_mode y una clave de modo activo con live_mode.
Elimina las comillas que rodean las claves en el archivo .env.
Genera una clave nueva si es necesario.

¿Necesitas ayuda?

¡Enhorabuena! Has creado una aplicación de chat con IA

Ya tienes una aplicación de chat con IA funcional que realiza un seguimiento del uso de tokens y factura a los clientes por ellos mediante Dodo Payments.

Más información

LLM Blueprint

Realiza un seguimiento del uso de tokens de LLM con LLM Ingestion Blueprint.

Ingestion Blueprints SDK

Encuentra más ejemplos en el repositorio de GitHub.

Join Community

Obtén ayuda y comparte tus proyectos en Discord.

Integration Guides

Billing Deconstructions

Cookbooks

Crear una aplicación de chat con IA usando AI SDK y LLM Blueprint

Lo que vamos a crear

Paso 1: Crea tu medidor de uso

Paso 2: Obtén tus claves de API

Paso 3: Crea tu producto de facturación

Paso 4: Realiza una compra de prueba

Paso 5: Crea la aplicación de chat

Paso 6: Añade la interfaz de chat

Paso 7: Prueba tu aplicación de chat

Solución de problemas

¡Enhorabuena! Has creado una aplicación de chat con IA

Más información

LLM Blueprint

Ingestion Blueprints SDK

Join Community

​Lo que vamos a crear

​Paso 1: Crea tu medidor de uso

​Paso 2: Obtén tus claves de API

​Paso 3: Crea tu producto de facturación

​Paso 4: Realiza una compra de prueba

​Paso 5: Crea la aplicación de chat

​Paso 6: Añade la interfaz de chat

​Paso 7: Prueba tu aplicación de chat

​Solución de problemas

​¡Enhorabuena! Has creado una aplicación de chat con IA

​Más información

LLM Blueprint

Ingestion Blueprints SDK

Join Community

Lo que vamos a crear

Paso 1: Crea tu medidor de uso

Paso 2: Obtén tus claves de API

Paso 3: Crea tu producto de facturación

Paso 4: Realiza una compra de prueba

Paso 5: Crea la aplicación de chat

Paso 6: Añade la interfaz de chat

Paso 7: Prueba tu aplicación de chat

Solución de problemas

¡Enhorabuena! Has creado una aplicación de chat con IA

Más información