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

Deja que Sentra escriba tu código de integración.
Usa nuestro asistente de IA en VS Code, Cursor o Windsurf para generar código de SDK/API, código de integración de LLM Blueprint, webhooks y mucho más; solo tienes que describir lo que quieres.Prueba Sentra: integración con tecnología de IA →

En este tutorial, crearás una aplicación de chat con IA con facturación automática basada en el uso. Crearemos todo desde cero: el medidor de facturación, la configuración del producto y el código de la aplicación que permite mantener conversaciones y realiza un seguimiento del uso de tokens en tiempo real.

Este tutorial proporciona una aplicación completa y funcional, con backend y frontend. La aplicación de chat utiliza la IA Gemini de Google y realiza un seguimiento automático del uso de tokens sin necesidad de ningún recuento manual.

Al finalizar este tutorial, tendrás una aplicación de chat funcional que:

Permite mantener conversaciones con IA usando Google Gemini (AI SDK)
Realiza un seguimiento automático del uso de tokens (sin código manual)
Cobra a los clientes según el consumo real de tokens
Incluye una atractiva interfaz de chat

Lo que vamos a crear

Comencemos por comprender nuestro servicio de chat con IA:

Servicio: chat con tecnología de IA usando Google Gemini (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 comenzar, asegúrate de tener:

Una cuenta de Dodo Payments
Una clave de API de Google AI (Obtén una en aistudio)
Node.js v16+ instalado

Paso 1: Crea tu medidor de uso

Comenzaremos creando un medidor en tu panel de control de Dodo Payments que realizará un seguimiento del uso de tokens de IA.

Lo que vamos a crear: un medidor llamado “AI Token Usage Meter” que suma todos los tokens consumidos en las conversaciones de chat.

Open the Meters section

Inicia sesión en tu panel de control de Dodo Payments
Haz clic en Products en la barra lateral izquierda
Haz clic en Meters
Haz clic en el botón Create Meter

Deberías ver un formulario en el que configuraremos el seguimiento de tokens.

Fill in the basic meter information

Ahora introduciremos los detalles específicos de nuestro servicio de chat con IA: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 exactamente con lo que enviaremos más adelante desde el código de nuestra aplicación. ¡Los nombres de los eventos distinguen entre mayúsculas y minúsculas!

Configure how we count tokens

Configura la agregación (cómo cuenta el medidor nuestros eventos):Tipo de agregación: selecciona Sum en el menú desplegableAgregado sobre: escribe → totalTokensUnidad de medición: escribe → tokens

Usamos “Sum” porque queremos sumar todos los tokens consumidos en varios mensajes de chat. El SDK envía automáticamente totalTokens en cada evento.

Create your meter

Comprueba que todos los ajustes coincidan con los valores anteriores
Haz clic en Create Meter

¡Medidor creado! Tu “AI Token Usage Meter” ya está listo para comenzar a contar tokens. A continuación, lo conectaremos a un producto de facturación.

Paso 2: Obtén tus claves de API

Antes de crear la aplicación, reunamos las claves de API que necesitaremos.

Get Dodo Payments API Key

En el panel de control de Dodo Payments, ve a Developers → API Keys
Haz clic en Create API Key
Copia la clave de API; tendrá un aspecto similar a test_abc123...

Guarda esta clave de API; más adelante la añadiremos a nuestro archivo .env.

Get Google AI API Key

Visita aistudio.google.com
Haz clic en Get API Key
Crea una clave de API nueva o usa una existente
Copia la clave

Guarda esta clave en un lugar seguro; también la añadiremos a nuestro archivo .env.

Paso 3: Crea tu producto de facturación

Ahora debemos crear un producto que defina nuestros precios ($0.01 por cada 1,000 tokens con 10,000 tokens gratuitos). Esto conecta nuestro medidor con la facturación real.

Lo que vamos a crear: un producto llamado “AI Chat Service” que cobra según el consumo de tokens y ofrece un generoso nivel gratuito.

Navigate to Products

En el panel de control de Dodo Payments, haz clic en Products en la barra lateral izquierda
Haz clic en Create Product
Selecciona Usage-Based como tipo de producto

Esto indica a Dodo Payments que la facturación se basará en el uso del medidor, no en una suscripción fija.

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

Estos datos aparecerán en las facturas de los clientes, así que deben ser claros y profesionales.

Connect your meter

Antes de conectar el medidor, asegúrate de haber seleccionado Usage Based Billing como tipo de precio del producto.Además, establece el Fixed Price en 0 para asegurarte de que los clientes solo paguen según su uso, sin ninguna tarifa base.Ahora, vincula el medidor que acabas de crear:

Desplázate hasta la sección Associated Meter
Haz clic en Add Meters
En el menú desplegable, selecciona “AI Token Usage Meter” (el que creaste anteriormente)
Confirma que aparezca en la configuración de tu producto

Tu medidor ya está conectado correctamente a este producto.

Set your pricing

Aquí definimos nuestro modelo de negocio:Precio por unidad: introduce → 0.00001 (esto equivale a

0.01 por cada 1,000 tokens o

0.00001 por token)Umbral gratuito: introduce → 10000 (los clientes reciben 10,000 tokens gratuitos al mes)

Cómo funciona la facturación: si un cliente utiliza 25,000 tokens en un mes, se le cobrará por 15,000 tokens (25,000 - 10,000 gratuitos) = 15,000 ×

0.00001 =

0.15

Save your product

Revisa todos 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! Tu facturación ya está configurada. A los clientes se les cobrará automáticamente según el uso de tokens.

Paso 4: Realiza una compra de prueba

Antes de comenzar a crear la aplicación, creemos un cliente de prueba realizando una compra.

Get your payment link

En el panel de control de Dodo Payments, ve a Products
Busca el producto “AI Chat Service”
Haz clic en el botón Share junto al producto
Copia el enlace de pago que aparece

Complete a test purchase

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

Después de realizar el pago correctamente, tendrás un ID de cliente que utilizaremos en el código de nuestra aplicación.

Find your customer ID

Vuelve al panel de control de Dodo Payments
Ve a Sales -> Customers en la barra lateral izquierda
Busca el cliente que acabas de crear (con el correo electrónico de prueba)
Copia el ID de cliente; tendrá un aspecto similar a cus_123

Guarda este ID de cliente; lo utilizaremos al probar nuestra aplicación de chat.

Paso 5: Crea la aplicación de chat

Ahora que hemos completado la configuración de facturación y creado un cliente de prueba, creemos la aplicación de chat con IA y seguimiento automático de tokens.

Set up your project

Crea un directorio nuevo e inicializa el proyecto:

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

Install dependencies

Instala los paquetes que necesitamos:

npm install express ai @ai-sdk/google @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 project structure

Crea las carpetas y los archivos:

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_ENVIRONMENT=test_mode
GOOGLE_GENERATIVE_AI_API_KEY=your_google_api_key_here
PORT=3000

Reemplaza los valores de marcador de posición por tus claves de API reales del Paso 2.

Create the backend server

Crea src/server.ts y copia este código completo del servidor:

Este es el servidor completo de chat con IA y facturación integrada:

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

# Add your API keys here
DODO_PAYMENTS_API_KEY=your_dodo_api_key_here
DODO_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": "^3.0.0",
    "@ai-sdk/google": "^0.0.15",
    "@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

Ahora añadamos una atractiva interfaz de chat con el historial completo de conversaciones. 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

¡Es hora de probar nuestra aplicación de chat con IA y ver la facturación en acción! Asegurémonos de que todo funciona de principio a fin.

Lo que estamos probando: mantendremos algunas conversaciones con la IA, verificaremos que los eventos de tokens lleguen a Dodo Payments y confirmaremos que los cálculos de facturación sean correctos.

Start the server

Primero, asegúrate de que todo esté configurado:

Comprueba que tu archivo .env contenga todas las claves de API del Paso 2
Inicia el servidor de desarrollo:

npm run dev

Deberías ver:

🚀 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! Es hora de chatear.

Open the chat interface

Abre el navegador
Ve a http://localhost:3000
Deberías ver la atractiva interfaz de chat

Asegúrate de actualizar CUSTOMER_ID en server.ts con el ID de tu cliente de prueba del Paso 4.

Have your first conversation

¡Vamos a probarlo! Intenta enviar estos mensajes:

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

Observa cómo se actualiza el uso de tokens después de cada respuesta.

Si ves que la IA responde y aparecen los recuentos de tokens, ¡tu aplicación funciona!

Check your Dodo Payments dashboard

Ahora verifiquemos que los eventos se estén recibiendo:

Abre el panel de control de Dodo Payments
Ve a Usage Billing → AI Token Usage Meter
Haz clic en la pestaña Events
Deberías ver tus eventos de chat en la lista

Qué debes buscar:

Nombres de eventos: ai_chat_usage
ID de cliente: el ID de tu cliente de prueba

¡Deberías ver un evento por cada mensaje que hayas enviado!

Verify token counting

Enviemos algunos mensajes más y comprobemos si la agregación de tokens funciona correctamente:

En tu medidor, ve a la pestaña Customers
Busca tu cliente de prueba
Comprueba la columna “Consumed Units”; debería mostrar el total de tokens utilizados

¡El medidor suma automáticamente todos los valores de totalTokens!

Test the free tier

Utilicemos suficientes tokens para superar el nivel gratuito:

Mantén varias conversaciones más (intenta alcanzar un total de aproximadamente 15,000 tokens o más)
Vuelve a consultar la pestaña Customers del panel del medidor
Ahora deberías ver:
- Unidades consumidas: más de 15,000 tokens
- Unidades facturables: 5,000 (se aplicaron 10,000 tokens gratuitos)
- Precio total: aproximadamente $0.05

¡Todo listo! La facturación basada en el uso funciona perfectamente. A los clientes se les cobrará automáticamente según su consumo real de tokens.

Solución de problemas

Problemas habituales 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 de 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 la configuración del medidor (distingue entre mayúsculas y minúsculas: ai_chat_usage)
Comprueba que el ID de cliente exista en el panel de control de Dodo Payments
Prueba la clave de API con una llamada de API sencilla
Comprueba los registros del servidor para ver los mensajes de error

Token counts showing zero

Posibles causas:

El modelo no devuelve información de uso
La versión del SDK es incorrecta

Soluciones:

Comprueba si el modelo devuelve información de uso:

const response = await generateText({...});
console.log('Usage:', response.usage);

Actualiza a la versión más reciente de Blueprints SDK: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

Posibles causas:

La clave de API no corresponde al entorno
Hay espacios o comillas adicionales en el archivo .env

Soluciones:

Asegúrate de que la clave de prueba comience por test_ y la clave activa por live_
Elimina las comillas que rodeen 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

Ahora tienes una aplicación de chat con IA completamente funcional, con seguimiento automático del uso de tokens y facturación proporcionados por Dodo Payments. 🎉

Más información

LLM Blueprint

Obtén más información sobre LLM Ingestion Blueprint

Ingestion Blueprints SDK

Consulta el repositorio de GitHub para ver más ejemplos

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