Bygg en AI-chattapp med AI SDK och LLM Blueprint

Låt Sentra skriva din integrationskod åt dig.
Använd vår AI-assistent i VS Code, Cursor eller Windsurf för att generera SDK/API-kod, integrationskod för LLM Blueprint, webhooks och mycket mer – bara genom att beskriva vad du vill ha.Testa Sentra: AI-driven integration →

I den här handledningen bygger du en AI-chattapplikation med automatisk användningsbaserad fakturering. Vi skapar allt från grunden: faktureringsmätaren, produktkonfigurationen och applikationskoden som driver konversationerna och spårar tokenanvändningen i realtid.

Den här handledningen innehåller en komplett fungerande applikation med både backend och frontend. Chattappen använder Googles Gemini AI och spårar automatiskt tokenanvändningen utan att någon manuell räkning krävs.

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

Driver AI-konversationer med Google Gemini (AI SDK)
Spårar tokenanvändningen automatiskt (ingen manuell kod)
Debiterar kunder baserat på faktisk tokenförbrukning
Innehåller ett snyggt chattgränssnitt

Det här bygger vi

Låt oss börja med att förstå vår AI-chattjänst:

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

Innan vi börjar bör du se till att du har:

Ett Dodo Payments-konto
En Google AI API-nyckel (Hämta en från aistudio)
Node.js v16+ installerat

Steg 1: Skapa din användningsmätare

Vi börjar med att skapa en mätare i din Dodo Payments-dashboard som spårar AI-tokenanvändningen.

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

Open the Meters section

Logga in på din Dodo Payments-dashboard
Klicka på Products i det vänstra sidofältet
Klicka på Meters
Klicka på knappen Create Meter

Du bör se ett formulär där vi konfigurerar vår token-spårning.

Fill in the basic meter information

Nu anger vi de specifika uppgifterna för vår AI-chattjänst: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 exakt matcha det vi senare skickar från vår applikationskod. Händelsenamn är skiftlägeskänsliga!

Configure how we count tokens

Konfigurera aggregeringen (hur mätaren räknar våra händelser):Aggregation Type: Välj Sum i rullgardinsmenynAggregate Over: Type → totalTokensMeasurement Unit: Type → tokens

Vi använder “Sum” eftersom vi vill lägga ihop alla tokens som används i flera chattmeddelanden. SDK skickar automatiskt totalTokens i varje händelse.

Create your meter

Kontrollera en extra gång att alla inställningar matchar värdena ovan
Klicka på Create Meter

Mätare skapad! Din “AI Token Usage Meter” är nu redo att börja räkna tokens. Därefter ansluter vi den till en faktureringsprodukt.

Steg 2: Hämta dina API-nycklar

Innan vi bygger appen samlar vi in de API-nycklar vi behöver.

Get Dodo Payments API Key

Gå till Developers → API Keys i din Dodo Payments-dashboard
Klicka på Create API Key
Kopiera API-nyckeln – den ser ut som test_abc123...

Spara den här API-nyckeln – vi lägger till den i filen .env senare.

Get Google AI API Key

Besök aistudio.google.com
Klicka på Get API Key
Skapa en ny API-nyckel eller använd en befintlig
Kopiera nyckeln

Förvara den här nyckeln säkert – vi lägger också till den i filen .env.

Steg 3: Skapa din faktureringsprodukt

Nu behöver vi skapa en produkt som definierar vår prissättning ($0.01 per 1 000 tokens med 10 000 kostnadsfria tokens). Detta kopplar vår mätare till faktisk fakturering.

Det här bygger vi: En produkt med namnet “AI Chat Service” som debiterar baserat på tokenförbrukning och erbjuder en generös gratisnivå.

Navigate to Products

Klicka på Products i det vänstra sidofältet i din Dodo Payments-dashboard
Klicka på Create Product
Välj Usage-Based som produkttyp

Detta talar om för Dodo Payments att faktureringen ska baseras på mätaranvändning, inte på en fast prenumeration.

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

Dessa visas på kundfakturor, så se till att de är tydliga och professionella.

Connect your meter

Innan du ansluter mätaren ska du se till att du har valt Usage Based Billing som pristyp för produkten.Ange dessutom Fixed Price till 0 för att säkerställa att kunderna endast debiteras baserat på sin användning, utan någon grundavgift.Länka nu mätaren du just skapade:

Bläddra ned till avsnittet Associated Meter
Klicka på Add Meters
Välj “AI Token Usage Meter” i rullgardinsmenyn (den du skapade tidigare)
Bekräfta att den visas i produktkonfigurationen

Din mätare är nu ansluten till den här produkten.

Set your pricing

Här definierar vi vår affärsmodell:Price Per Unit: Ange → 0.00001 (detta är

0.01 per 1 000 tokens eller

0.00001 per token)Free Threshold: Ange → 10000 (kunder får 10 000 kostnadsfria tokens per månad)

Så fungerar faktureringen: Om en kund använder 25 000 tokens under en månad debiteras kunden för 15 000 tokens (25 000 – 10 000 kostnadsfria) = 15 000 ×

0.00001 =

0.15

Save your product

Granska alla dina inställningar:
- 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

Produkt skapad! Din fakturering är nu konfigurerad. Kunder debiteras automatiskt baserat på sin tokenanvändning.

Steg 4: Gör ett testköp

Innan vi börjar bygga appen skapar vi en testkund genom att genomföra ett köp.

Get your payment link

Gå till Products i din Dodo Payments-dashboard
Leta reda på produkten “AI Chat Service”
Klicka på knappen Share bredvid produkten
Kopiera betalningslänken som visas

Complete a test purchase

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

Efter en genomförd betalning har du ett kund-ID som vi använder i applikationskoden.

Find your customer ID

Gå tillbaka till din Dodo Payments-dashboard
Gå till Sales -> Customers i det vänstra sidofältet
Leta reda på kunden du just skapade (med test-e-postadressen)
Kopiera kund-ID:t – det ser ut som cus_123

Spara detta kund-ID – vi använder det när vi testar chattapplikationen.

Steg 5: Bygg chattapplikationen

Nu har vi slutfört faktureringskonfigurationen och skapat en testkund. Låt oss bygga AI-chattapplikationen med automatisk token-spårning.

Set up your project

Skapa en ny katalog och initiera projektet:

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

Install dependencies

Installera paketen vi behöver:

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

Skapa mapparna och filerna:

mkdir src public

Set up environment variables

Skapa en fil med namnet .env i projektets rotkatalog:

.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

Ersätt platshållarvärdena med dina riktiga API-nycklar från steg 2.

Create the backend server

Skapa src/server.ts och kopiera in den fullständiga serverkoden:

Här är den kompletta AI-chattservern med integrerad fakturering:

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

Steg 6: Lägg till chattgränssnittet

Nu lägger vi till ett snyggt chattgränssnitt med fullständig konversationshistorik! 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

Dags att testa vår AI-chattapp och se faktureringen i praktiken! Låt oss säkerställa att allt fungerar från början till slut.

Det här testar vi: Vi har några konversationer med AI:n, verifierar att tokenhändelserna når Dodo Payments och bekräftar att faktureringsberäkningarna är korrekta.

Start the server

Se först till att allt är konfigurerat:

Kontrollera att filen .env innehåller alla API-nycklar från steg 2
Starta utvecklingsservern:

npm run dev

Du bör se:

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

Servern körs! Dags att chatta.

Open the chat interface

Öppna webbläsaren
Gå till http://localhost:3000
Du bör se det snygga chattgränssnittet

Se till att du uppdaterar CUSTOMER_ID i server.ts med ditt riktiga testkund-ID från steg 4.

Have your first conversation

Låt oss testa! Prova dessa meddelanden:

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

Titta på hur visningen av tokenanvändningen uppdateras efter varje svar!

Om du ser AI:n svara och tokenantalen visas fungerar appen!

Check your Dodo Payments dashboard

Nu kontrollerar vi att händelserna tas emot:

Öppna din Dodo Payments-dashboard
Gå till Usage Billing → AI Token Usage Meter
Klicka på fliken Events
Du bör se dina chatthändelser i listan

Det här ska du leta efter:

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

Du bör se en händelse för varje meddelande du skickade!

Verify token counting

Skicka några fler meddelanden och kontrollera om tokenaggregeringen fungerar:

Gå till fliken Customers i din mätare
Leta reda på din testkund
Kontrollera kolumnen “Consumed Units” – den bör visa det totala antalet använda tokens

Mätaren summerar automatiskt alla värden för totalTokens!

Test the free tier

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

Ha flera fler konversationer (sikta på totalt cirka 15 000+ tokens)
Kontrollera fliken Customers i mätarens dashboard igen
Du bör nu se:
- Consumed Units: 15 000+ tokens
- Chargeable Units: 5 000 (10 000 kostnadsfria tokens har tillämpats)
- Total Price: cirka $0.05

Klart! Din användningsbaserade fakturering fungerar perfekt. Kunder debiteras automatiskt baserat på sin faktiska tokenförbrukning.

Felsökning

Vanliga problem och deras lösningar:

Events not appearing in dashboard

Möjliga orsaker:

Händelsenamnet matchar inte mätarkonfigurationen exakt
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 matchar mätarkonfigurationen (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 felmeddelanden

Token counts showing zero

Möjliga orsaker:

Modellen returnerar inte användningsinformation
Felaktig SDK-version

Lösningar:

Testa om modellen returnerar användning:

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

Uppdatera till den senaste Blueprints SDK: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

Möjliga orsaker:

Fel API-nyckel för miljön
Extra mellanslag eller citattecken i filen .env

Lösningar:

Kontrollera att testnyckeln börjar med test_ och att live-nyckeln börjar med live_
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

Nu har du en fullt fungerande AI-chattapplikation med automatisk spårning av tokenanvändning och fakturering som drivs av Dodo Payments. 🎉

Läs mer

LLM Blueprint

Läs mer om LLM Ingestion Blueprint

Ingestion Blueprints SDK

Besök GitHub-repositoryt för fler exempel

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