Construa um App de Chat AI com AI SDK & LLM Blueprint

Para que seu agente de programação escreva a integração, instale o Dodo Agent Plugin. Ele adiciona as skills e os servidores MCP do Dodo Payments ao Claude Code, Codex CLI, Cursor, VS Code / GitHub Copilot, Kiro e OpenCode.

Você criará uma aplicação de chat com IA que cobra dos clientes pelos tokens que eles usam. Você criará o medidor de cobrança, o produto e o código da aplicação que executa as conversas e informa o uso de tokens à medida que ele acontece.

Este tutorial cria uma aplicação completa com backend e frontend. O app de chat usa o Google Gemini, e o LLM Blueprint informa o uso de tokens para cada resposta, então você não precisa contar os tokens por conta própria.

Ao terminar, você terá uma aplicação de chat que:

Executa conversas com IA usando o Google Gemini por meio do AI SDK.
Acompanha automaticamente o uso de tokens, sem código de contagem.
Cobra dos clientes pelos tokens que eles realmente usam.
Inclui uma interface de chat que mantém o histórico da conversa.

Interface de chat do app de chat com IA concluído, mostrando uma conversa com as contagens de tokens abaixo de cada resposta

O Que Estamos Construindo

O serviço de chat funciona assim:

Serviço: Chat com IA usando o Google Gemini por meio do AI SDK
Modelo de preços: Pagamento por token ($0.01 por 1.000 tokens)
Plano gratuito: 10.000 tokens gratuitos por cliente por mês
Recursos: Histórico da conversa e acompanhamento automático de tokens

Antes de começar, você precisa de:

Uma conta do Dodo Payments.
Uma chave de API do Google AI. Obtenha uma no Google AI Studio.
Node.js 22 ou posterior.

Passo 1: Crie Seu Medidor de Uso

Crie um medidor no dashboard do Dodo Payments para acompanhar o uso de tokens de IA.

O que você está criando: um medidor chamado “AI Token Usage Meter” que soma os tokens usados nas conversas de chat.

Open the Meters Section

Faça login no dashboard do Dodo Payments.
Clique em Products na barra lateral.
Clique em Meters.
Clique em Create Meter.

Página Meters no dashboard do Dodo Payments com o botão Create Meter

O formulário do medidor é aberto.

Enter the Meter Details

Insira os detalhes do serviço de chat:Meter Name → AI Token Usage MeterDescription → Tracks token consumption from AI chat conversations using AI SDKEvent Name → ai_chat_usage

O nome do evento ai_chat_usage deve corresponder ao nome do evento enviado pelo código da aplicação. Os nomes dos eventos diferenciam maiúsculas de minúsculas.

Configure How Tokens Are Counted

Defina a agregação, que controla como o medidor combina os eventos:Tipo de agregação: SumOver Property: totalTokensUnidade de medida: tokens

Sum soma os tokens de cada mensagem de chat. O LLM Blueprint envia inputTokens, outputTokens e totalTokens nos metadados de cada evento, e este medidor soma totalTokens.

Create the Meter

Verifique se todas as configurações correspondem aos valores acima. Não é possível editar um medidor depois que ele é criado.
Clique em Create Meter.

Formulário do medidor preenchido com o nome AI Token Usage Meter, o evento ai_chat_usage e a agregação Sum

Medidor criado. O “AI Token Usage Meter” está pronto para contar tokens. Em seguida, conecte-o a um produto de cobrança.

Passo 2: Obtenha Suas Chaves de API

Colete as duas chaves de API necessárias para o app.

Get a Dodo Payments API Key

No dashboard do Dodo Payments, acesse Developer → API Keys.
Clique em Add API Key.
Copie a chave de API.

Crie a chave no modo de teste: uma chave do modo de teste funciona somente com o modo de teste. Você adicionará a chave ao arquivo .env na Etapa 5.

Get a Google AI API Key

Acesse aistudio.google.com.
Clique em Get API Key.
Crie uma chave de API ou use uma já existente.
Copie a chave.

Mantenha esta chave privada. Você a adicionará ao arquivo .env na Etapa 5.

Passo 3: Crie Seu Produto de Cobrança

Crie um produto que defina os preços: $0.01 por 1.000 tokens, com 10.000 tokens gratuitos. O produto conecta o medidor à cobrança.

O que você está criando: um produto chamado “AI Chat Service” que cobra pelo uso de tokens acima de um plano gratuito.

Navigate to Products

No dashboard do Dodo Payments, clique em Products na barra lateral.
Clique em Add Product.
Em Pricing Type, selecione Usage Based Billing.

Com esse tipo de preço, o Dodo Payments cobra com base no uso do medidor, em vez de um preço fixo de assinatura.

Enter Product Details

Preencha os detalhes obrigatórios:Product Name: → AI Chat ServiceDescription: → AI-powered chat service with automatic token-based billingImagem do produto: envie uma imagem relevante.

O nome e a descrição aparecem nas faturas dos clientes.

Connect Your Meter

Verifique se o tipo de preço do produto é Usage Based Billing.Defina o Price como 0, para que os clientes paguem apenas pelo uso, sem taxa fixa.Em seguida, vincule o medidor criado:

Role até a seção Associated Meters.
Clique em Add meters.
Selecione “AI Token Usage Meter” no menu suspenso.
Confirme que o medidor aparece na configuração do produto.

O medidor está conectado ao produto.

Set Your Pricing

Defina o preço por token e o plano gratuito:Preço por unidade: → 0.00001. Isso corresponde a $0.00001 por token ou $0.01 por 1.000 tokens.Limite gratuito: → 10000. Cada cliente recebe 10.000 tokens gratuitos por mês.

Preço do medidor no produto AI Chat Service, com o preço por unidade e o limite gratuito preenchidos

Como a cobrança funciona: um cliente que usa 25.000 tokens em um mês paga por 15.000 tokens (25.000 − 10.000 gratuitos). 15.000 × $0.00001 = $0.15.

Save Your Product

Revise as configurações:
- Nome: AI Chat Service
- Medidor: AI Token Usage Meter
- Preço: $0.01 por 1.000 tokens
- Plano gratuito: 10.000 tokens
Clique em Save Changes.

Produto criado. A cobrança está configurada, e os clientes são cobrados pelos tokens que usam.

Passo 4: Faça uma Compra de Teste

Crie um cliente de teste comprando o produto. O app envia eventos de uso para esse cliente.

Get Your Payment Link

No dashboard do Dodo Payments, acesse Products.
Encontre o produto “AI Chat Service”.
Clique em Share ao lado do produto.
Copie o link de pagamento.

Complete a Test Purchase

Abra o link de pagamento em uma nova aba do navegador.
Insira os dados de pagamento de teste e conclua a compra.

Após a aprovação do pagamento, a compra cria um cliente. O código da aplicação usa o ID desse cliente.

Find Your Customer ID

Volte ao dashboard do Dodo Payments.
Acesse Sales → Customers na barra lateral.
Encontre o cliente criado usando o endereço de e-mail de teste.
Copie o ID do cliente. Ele começa com cus_.

Salve este ID de cliente. Você o usará ao testar a aplicação de chat.

Passo 5: Construa o Aplicativo de Chat

Com a cobrança configurada e um cliente de teste criado, crie a aplicação de chat.

Set Up Your Project

Crie um diretório e inicialize o projeto:

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

Install Dependencies

Instale os pacotes:

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

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

Atualize package.json para adicionar o tipo de módulo e scripts:

package.json

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

Create the Project Structure

Crie as pastas de origem e de arquivos estáticos:

mkdir src public

Set Up Environment Variables

Crie um arquivo .env na raiz do projeto:

.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

Substitua os valores de exemplo pelas chaves de API da Etapa 2. O provedor do Google para o AI SDK lê GOOGLE_GENERATIVE_AI_API_KEY por padrão.

Create the Backend Server

Crie src/server.ts e cole nele o código do servidor abaixo.

O servidor de chat completo com cobrança, além dos arquivos .env e package.json correspondentes:

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: Adicione a Interface de Chat

Adicione uma interface de chat que mantenha todo o histórico da conversa. Crie 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: Teste Seu Aplicativo de Chat

Teste o app de chat de ponta a ponta e acompanhe o uso chegando ao Dodo Payments.

O que você está testando: você conversa com a IA, confirma que os eventos de tokens chegam ao Dodo Payments e verifica o cálculo da cobrança.

Start the Server

Verifique se o arquivo .env contém as duas chaves de API da Etapa 2.
Inicie o servidor de desenvolvimento:

npm run dev

Os logs do servidor:

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

O servidor está em execução.

Open the Chat Interface

Abra o navegador.
Acesse http://localhost:3000. A interface de chat é carregada.

Antes de conversar, defina CUSTOMER_ID em server.ts como o ID do cliente de teste da Etapa 4 e reinicie o servidor.

Have Your First Conversation

Envie estas mensagens:

“O que é inteligência artificial?”
“Como funciona o machine learning?”
“Você pode explicar as redes neurais?”

Cada resposta mostra o número de tokens usados.

Se a IA responder e as contagens de tokens aparecerem, o app está funcionando.

Check Your Dodo Payments Dashboard

Confirme que o Dodo Payments recebe os eventos:

Abra o dashboard do Dodo Payments.
Acesse Products → Meters e abra AI Token Usage Meter.
Selecione a aba Events.
Encontre seus eventos de chat na lista.

O que procurar:

Nome do evento: ai_chat_usage
ID do cliente: o ID do cliente de teste

Aba Events do AI Token Usage Meter listando eventos ai_chat_usage

A lista contém um evento para cada mensagem enviada.

Verify Token Counting

Envie mais algumas mensagens e verifique a agregação:

No medidor, selecione a aba Customers.
Encontre seu cliente de teste.
Verifique a coluna Consumed Units. Ela mostra o total de tokens usados.

Aba Customers do medidor mostrando as unidades consumidas pelo cliente de teste

O medidor soma o valor totalTokens de cada evento.

Test the Free Tier

Use tokens suficientes para ultrapassar o plano gratuito:

Tenha várias outras conversas até que o total ultrapasse aproximadamente 15.000 tokens.
Abra novamente a aba Customers do medidor.
Verifique os valores:
- Unidades consumidas: mais de 15.000 tokens
- Unidades cobráveis: 5.000 (10.000 tokens gratuitos aplicados)
- Preço total: ~$0.05

Aba Customers do medidor mostrando as unidades consumidas, as unidades cobráveis e o preço total após o plano gratuito

A cobrança baseada em uso funciona. Os clientes são cobrados pelos tokens que usam.

Solução de problemas

Problemas comuns e suas soluções:

Events not appearing in dashboard

Possíveis causas:

O nome do evento não corresponde exatamente à configuração do medidor
O ID do cliente não existe na sua conta
A chave de API é inválida ou expirou
Problemas de conectividade de rede

Soluções:

Verifique se o nome do evento corresponde exatamente ao do medidor. Ele diferencia maiúsculas de minúsculas: ai_chat_usage.
Verifique se o ID do cliente existe no dashboard do Dodo Payments.
Teste a chave de API com uma chamada de API simples.
Verifique os logs do servidor em busca de erros.

Token counts showing zero

Possíveis causas:

O modelo não retorna informações de uso
Versão incorreta do SDK

Soluções:

Verifique se o modelo retorna o uso:

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

Atualize o pacote Blueprints: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

Possíveis causas:

A chave de API pertence ao outro modo.
O arquivo .env contém espaços ou aspas extras.

Soluções:

Uma chave funciona somente no modo em que foi criada. Use uma chave do modo de teste com DODO_PAYMENTS_ENVIRONMENT=test_mode e uma chave do modo ativo com live_mode.
Remova quaisquer aspas ao redor das chaves no arquivo .env.
Gere uma nova chave, se necessário.

Precisa de ajuda?

Parabéns! Você criou um app de chat com IA

Você tem uma aplicação de chat com IA funcional que acompanha o uso de tokens e cobra dos clientes por isso por meio do Dodo Payments.

Saiba mais

LLM Blueprint

Acompanhe o uso de tokens do LLM com o LLM Ingestion Blueprint.

Ingestion Blueprints SDK

Mais exemplos no repositório do GitHub.

Join Community

Obtenha ajuda e compartilhe seus projetos no Discord.

Integration Guides

Billing Deconstructions

Cookbooks

Construa um App de Chat AI com AI SDK & LLM Blueprint

O Que Estamos Construindo

Passo 1: Crie Seu Medidor de Uso

Passo 2: Obtenha Suas Chaves de API

Passo 3: Crie Seu Produto de Cobrança

Passo 4: Faça uma Compra de Teste

Passo 5: Construa o Aplicativo de Chat

Passo 6: Adicione a Interface de Chat

Passo 7: Teste Seu Aplicativo de Chat

Solução de problemas

Parabéns! Você criou um app de chat com IA

Saiba mais

LLM Blueprint

Ingestion Blueprints SDK

Join Community

​O Que Estamos Construindo

​Passo 1: Crie Seu Medidor de Uso

​Passo 2: Obtenha Suas Chaves de API

​Passo 3: Crie Seu Produto de Cobrança

​Passo 4: Faça uma Compra de Teste

​Passo 5: Construa o Aplicativo de Chat

​Passo 6: Adicione a Interface de Chat

​Passo 7: Teste Seu Aplicativo de Chat

​Solução de problemas

​Parabéns! Você criou um app de chat com IA

​Saiba mais

LLM Blueprint

Ingestion Blueprints SDK

Join Community

O Que Estamos Construindo

Passo 1: Crie Seu Medidor de Uso

Passo 2: Obtenha Suas Chaves de API

Passo 3: Crie Seu Produto de Cobrança

Passo 4: Faça uma Compra de Teste

Passo 5: Construa o Aplicativo de Chat

Passo 6: Adicione a Interface de Chat

Passo 7: Teste Seu Aplicativo de Chat

Solução de problemas

Parabéns! Você criou um app de chat com IA

Saiba mais