Bygg en AI-chattapp med AI SDK och LLM Blueprint

Låt din kodagent skriva integrationen genom att installera Dodo Agent Plugin. Det lägger till Dodo Payments-färdigheterna och MCP-servrarna i Claude Code, Codex CLI, Cursor, VS Code / GitHub Copilot, Kiro och OpenCode.

Du ska bygga en AI-chattapplikation som debiterar kunderna för de tokens de använder. Du skapar mätaren, produkten och applikationskoden som kör konversationer och rapporterar tokenanvändningen medan den sker.

Den här handledningen bygger en komplett applikation med en backend och en frontend. Chattappen använder Google Gemini, och LLM Blueprint rapporterar tokenanvändningen för varje svar, så du behöver inte räkna tokens själv.

När du är klar har du en chattapplikation som:

Kör AI-konversationer med Google Gemini genom AI SDK.
Spårar tokenanvändningen automatiskt, utan kod för tokenräkning.
Debiterar kunderna för de tokens de faktiskt använder.
Innehåller ett chattgränssnitt som bevarar konversationshistoriken.

Chattgränssnitt för den färdiga AI-chatten, som visar en konversation med tokenantal under varje svar

Det här bygger vi

Chattjänsten fungerar så här:

Tjänst: AI-chatt med Google Gemini genom AI SDK
Prismodell: Betala per token ($0.01 per 1 000 tokens)
Gratisnivå: 10 000 kostnadsfria tokens per kund och månad
Funktioner: Konversationshistorik och automatisk tokenspårning

Innan du börjar behöver du:

Ett Dodo Payments-konto.
En Google AI API-nyckel. Hämta en från Google AI Studio.
Node.js 22 eller senare.

Steg 1: Skapa din användningsmätare

Skapa en mätare i Dodo Payments-dashboarden för att spåra AI-tokenanvändning.

Det här bygger du: En mätare med namnet “AI Token Usage Meter” som summerar tokens som används i chattkonversationer.

Open the Meters Section

Logga in på Dodo Payments-dashboarden.
Klicka på Products i sidofältet.
Klicka på Meters.
Klicka på Create Meter.

Meters-sidan i Dodo Payments-dashboarden med knappen Create Meter

Mätarformuläret öppnas.

Enter the Meter Details

Ange uppgifterna för chattjänsten:Meter Name → AI Token Usage MeterDescription → Tracks token consumption from AI chat conversations using AI SDKEvent Name → ai_chat_usage

Händelsenamnet ai_chat_usage måste överensstämma med händelsenamnet som applikationskoden skickar. Händelsenamn är skiftlägeskänsliga.

Configure How Tokens Are Counted

Ange aggregeringen, som styr hur mätaren kombinerar händelser:Aggregation Type: SumOver Property: totalTokensMeasurement Unit: tokens

Sum summerar tokens från varje chattmeddelande. LLM Blueprint skickar inputTokens, outputTokens och totalTokens i varje händelses metadata, och den här mätaren summerar totalTokens.

Create the Meter

Kontrollera att alla inställningar överensstämmer med värdena ovan. Du kan inte redigera en mätare efter att du har skapat den.
Klicka på Create Meter.

Mätarformulär ifyllt med namnet AI Token Usage Meter, händelsen ai_chat_usage och aggregeringen Sum

Mätaren är skapad. “AI Token Usage Meter” är redo att räkna tokens. Nästa steg är att koppla den till en billingprodukt.

Steg 2: Hämta dina API-nycklar

Samla in de två API-nycklar som appen behöver.

Get a Dodo Payments API Key

Gå till Developer → API Keys i Dodo Payments-dashboarden.
Klicka på Add API Key.
Kopiera API-nyckeln.

Skapa nyckeln i testläge: en nyckel i testläge fungerar endast med testläge. Du lägger till nyckeln i filen .env i steg 5.

Get a Google AI API Key

Gå till aistudio.google.com.
Klicka på Get API Key.
Skapa en API-nyckel eller använd en befintlig.
Kopiera nyckeln.

Håll den här nyckeln privat. Du lägger till den i filen .env i steg 5.

Steg 3: Skapa din faktureringsprodukt

Skapa en produkt som definierar prissättningen: $0.01 per 1 000 tokens, med 10 000 kostnadsfria tokens. Produkten kopplar mätaren till billing.

Det här bygger du: En produkt med namnet “AI Chat Service” som debiterar för tokenanvändning över en gratisnivå.

Navigate to Products

Klicka på Products i sidofältet i Dodo Payments-dashboarden.
Klicka på Add Product.
Välj Usage Based Billing under Pricing Type.

Med den här pristypen debiterar Dodo Payments utifrån mätaranvändning i stället för ett fast prenumerationspris.

Enter Product Details

Fyll i de obligatoriska uppgifterna:Product Name: → AI Chat ServiceDescription: → AI-powered chat service with automatic token-based billingProduct Image: Ladda upp en relevant bild.

Namnet och beskrivningen visas på kundfakturor.

Connect Your Meter

Kontrollera att produktens pristyp är Usage Based Billing.Ange Price till 0, så att kunderna endast betalar för användningen, utan grundavgift.Koppla sedan mätaren du skapade:

Bläddra till avsnittet Associated Meters.
Klicka på Add meters.
Välj “AI Token Usage Meter” i rullgardinsmenyn.
Bekräfta att mätaren visas i produktkonfigurationen.

Mätaren är kopplad till produkten.

Set Your Pricing

Definiera priset per token och gratisnivån:Price per unit: → 0.00001. Det motsvarar $0.00001 per token eller $0.01 per 1 000 tokens.Free Threshold: → 10000. Varje kund får 10 000 kostnadsfria tokens per månad.

Mätarprissättning för produkten AI Chat Service, med pris per enhet och gratisgräns ifyllda

Så fungerar billing: En kund som använder 25 000 tokens under en månad betalar för 15 000 tokens (25 000 − 10 000 kostnadsfria). 15 000 × $0.00001 = $0.15.

Save Your Product

Granska inställningarna:
- Namn: AI Chat Service
- Mätare: AI Token Usage Meter
- Pris: $0.01 per 1 000 tokens
- Gratisnivå: 10 000 tokens
Klicka på Save Changes.

Produkten är skapad. Billing är konfigurerad och kunderna debiteras för de tokens de använder.

Steg 4: Gör ett testköp

Skapa en testkund genom att köpa produkten. Appen skickar användningshändelser för den här kunden.

Get Your Payment Link

Gå till Products i Dodo Payments-dashboarden.
Leta reda på produkten “AI Chat Service”.
Klicka på Share bredvid produkten.
Kopiera betalningslänken.

Complete a Test Purchase

Öppna betalningslänken i en ny webbläsarflik.
Ange testbetalningsuppgifter och slutför köpet.

När betalningen har genomförts skapar köpet en kund. Applikationskoden använder kundens ID.

Find Your Customer ID

Gå tillbaka till Dodo Payments-dashboarden.
Gå till Sales → Customers i sidofältet.
Leta reda på kunden du skapade med hjälp av testens e-postadress.
Kopiera kund-ID:t. Det börjar med cus_.

Spara kund-ID:t. Du använder det när du testar chattapplikationen.

Steg 5: Bygg chattapplikationen

När billing är konfigurerad och en testkund har skapats bygger du chattapplikationen.

Set Up Your Project

Skapa en katalog och initiera projektet:

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

Install Dependencies

Installera paketen:

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

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

Uppdatera package.json för att lägga till modultypen och skripten:

package.json

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

Create the Project Structure

Skapa mapparna för källkod och statiska filer:

mkdir src public

Set Up Environment Variables

Skapa en .env-fil i projektroten:

.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

Ersätt platshållarvärdena med API-nycklarna från steg 2. Google-providern för AI SDK läser GOOGLE_GENERATIVE_AI_API_KEY som standard.

Create the Backend Server

Skapa src/server.ts och klistra in serverkoden nedan.

Den kompletta chattservern med billing, tillsammans med den matchande .env och 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"
  }
}

Steg 6: Lägg till chattgränssnittet

Lägg till ett chattgränssnitt som bevarar hela konversationshistoriken. Skapa 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>

Steg 7: Testa chattapplikationen

Testa chattappen från början till slut och se hur användningen når Dodo Payments.

Det här testar du: Du chattar med AI:n, bekräftar att tokenhändelserna når Dodo Payments och kontrollerar billingberäkningen.

Start the Server

Kontrollera att filen .env innehåller båda API-nycklarna från steg 2.
Starta utvecklingsservern:

npm run dev

Serverloggarna:

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

Servern körs.

Open the Chat Interface

Öppna webbläsaren.
Gå till http://localhost:3000. Chattgränssnittet läses in.

Innan du chattar anger du CUSTOMER_ID i server.ts till testkundens ID från steg 4 och startar sedan om servern.

Have Your First Conversation

Skicka följande meddelanden:

“Vad är artificiell intelligens?”
“Hur fungerar maskininlärning?”
“Kan du förklara neurala nätverk?”

Varje svar visar hur många tokens det använde.

Om AI:n svarar och tokenantal visas fungerar appen.

Check Your Dodo Payments Dashboard

Bekräfta att Dodo Payments tar emot händelserna:

Öppna Dodo Payments-dashboarden.
Gå till Products → Meters och öppna AI Token Usage Meter.
Välj fliken Events.
Leta reda på dina chatthändelser i listan.

Det här ska du leta efter:

Händelsenamn: ai_chat_usage
Kund-ID: ditt testkund-ID

Fliken Events för AI Token Usage Meter med ai_chat_usage-händelser

Listan innehåller en händelse för varje meddelande du skickade.

Verify Token Counting

Skicka några fler meddelanden och kontrollera sedan aggregeringen:

Välj fliken Customers i mätaren.
Leta reda på din testkund.
Kontrollera kolumnen Consumed Units. Den visar det totala antalet använda tokens.

Fliken Customers för mätaren som visar förbrukade enheter för testkunden

Mätaren summerar värdet totalTokens från varje händelse.

Test the Free Tier

Använd tillräckligt många tokens för att överskrida gratisnivån:

Ha flera fler konversationer tills totalen överstiger ungefär 15 000 tokens.
Öppna mätarens flik Customers igen.
Kontrollera värdena:
- Consumed Units: 15 000+ tokens
- Chargeable Units: 5 000 (10 000 kostnadsfria tokens har tillämpats)
- Total Price: ~$0.05

Fliken Customers för mätaren som visar förbrukade enheter, debiterbara enheter och totalpris efter gratisnivån

Användningsbaserad billing fungerar. Kunderna debiteras för de tokens de använder.

Felsökning

Vanliga problem och lösningar:

Events not appearing in dashboard

Möjliga orsaker:

Händelsenamnet överensstämmer inte exakt med mätarkonfigurationen
Kund-ID:t finns inte i ditt konto
API-nyckeln är ogiltig eller har löpt ut
Problem med nätverksanslutningen

Lösningar:

Kontrollera att händelsenamnet exakt överensstämmer med mätaren. Det är skiftlägeskänsligt: ai_chat_usage.
Kontrollera att kund-ID:t finns i Dodo Payments-dashboarden.
Testa API-nyckeln med ett enkelt API-anrop.
Kontrollera serverloggarna efter fel.

Token counts showing zero

Möjliga orsaker:

Modellen returnerar ingen användningsinformation
Felaktig SDK-version

Lösningar:

Kontrollera om modellen returnerar användning:

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

Uppdatera Blueprints-paketet: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

Möjliga orsaker:

API-nyckeln tillhör det andra läget.
Filen .env innehåller extra blanksteg eller citattecken.

Lösningar:

En nyckel fungerar endast i det läge där den skapades. Använd en testlägesnyckel med DODO_PAYMENTS_ENVIRONMENT=test_mode och en live-lägesnyckel med live_mode.
Ta bort eventuella citattecken runt nycklarna i filen .env.
Generera en ny nyckel vid behov.

Behöver du hjälp?

Grattis! Du har byggt en AI-chattapp

Du har nu en fungerande AI-chattapplikation som spårar tokenanvändningen och debiterar kunderna för den genom Dodo Payments.

Läs mer

LLM Blueprint

Spåra LLM-tokenanvändning med LLM Ingestion Blueprint.

Ingestion Blueprints SDK

Fler exempel finns i GitHub-repositoriet.

Join Community

Få hjälp och dela dina projekt på Discord.

Integration Guides

Billing Deconstructions

Cookbooks

Bygg en AI-chattapp med AI SDK och LLM Blueprint

Det här bygger vi

Steg 1: Skapa din användningsmätare

Steg 2: Hämta dina API-nycklar

Steg 3: Skapa din faktureringsprodukt

Steg 4: Gör ett testköp

Steg 5: Bygg chattapplikationen

Steg 6: Lägg till chattgränssnittet

Steg 7: Testa chattapplikationen

Felsökning

Grattis! Du har byggt en AI-chattapp

Läs mer

LLM Blueprint

Ingestion Blueprints SDK

Join Community

​Det här bygger vi

​Steg 1: Skapa din användningsmätare

​Steg 2: Hämta dina API-nycklar

​Steg 3: Skapa din faktureringsprodukt

​Steg 4: Gör ett testköp

​Steg 5: Bygg chattapplikationen

​Steg 6: Lägg till chattgränssnittet

​Steg 7: Testa chattapplikationen

​Felsökning

​Grattis! Du har byggt en AI-chattapp

​Läs mer

LLM Blueprint

Ingestion Blueprints SDK

Join Community

Det här bygger vi

Steg 1: Skapa din användningsmätare

Steg 2: Hämta dina API-nycklar

Steg 3: Skapa din faktureringsprodukt

Steg 4: Gör ett testköp

Steg 5: Bygg chattapplikationen

Steg 6: Lägg till chattgränssnittet

Steg 7: Testa chattapplikationen

Felsökning

Grattis! Du har byggt en AI-chattapp

Läs mer