Erstelle eine KI-Chat-App mit AI SDK & LLM Blueprint

Damit dein Coding-Agent die Integration erstellt, installiere das Dodo Agent Plugin. Es fügt Claude Code, Codex CLI, Cursor, VS Code / GitHub Copilot, Kiro und OpenCode die Dodo Payments Skills und MCP-Server hinzu.

Du erstellst eine KI-Chat-Anwendung, die Kunden die von ihnen verwendeten Tokens in Rechnung stellt. Du erstellst das Abrechnungsmessgerät, das Produkt und den Anwendungscode, der Unterhaltungen ausführt und die Token-Nutzung währenddessen meldet.

In diesem Tutorial erstellst du eine vollständige Anwendung mit Backend und Frontend. Die Chat-App verwendet Google Gemini, und der LLM Blueprint meldet die Token-Nutzung für jede Antwort, sodass du die Tokens nicht selbst zählen musst.

Am Ende hast du eine Chat-Anwendung, die:

KI-Unterhaltungen mit Google Gemini über das AI SDK ausführt.
Die Token-Nutzung automatisch erfasst, ohne eigenen Zählcode.
Kunden die tatsächlich verwendeten Tokens in Rechnung stellt.
Eine Chat-Oberfläche mit dem bisherigen Unterhaltungsverlauf enthält.

Chat-Oberfläche der fertigen KI-Chat-App mit einer Unterhaltung und Token-Anzahlen unter jeder Antwort

Was wir erstellen

Der Chat-Dienst funktioniert folgendermaßen:

Dienst: KI-Chat mit Google Gemini über das AI SDK
Preismodell: Zahlung pro Token ($0.01 pro 1.000 Tokens)
Kostenlose Stufe: 10.000 kostenlose Tokens pro Kunde und Monat
Funktionen: Unterhaltungsverlauf und automatische Token-Erfassung

Bevor du beginnst, benötigst du:

Ein Dodo Payments-Konto.
Einen Google AI API-Schlüssel. Hole dir einen bei Google AI Studio.
Node.js 22 oder höher.

Schritt 1: Erstelle deinen Nutzungszähler

Erstelle im Dodo Payments-Dashboard ein Messgerät, um die Nutzung von KI-Tokens zu erfassen.

Was du erstellst: Ein Messgerät namens “AI Token Usage Meter”, das die in Chat-Unterhaltungen verwendeten Tokens addiert.

Open the Meters Section

Melde dich im Dodo Payments-Dashboard an.
Klicke in der Seitenleiste auf Products.
Klicke auf Meters.
Klicke auf Create Meter.

Meters-Seite im Dodo Payments-Dashboard mit der Schaltfläche Create Meter

Das Formular für das Messgerät wird geöffnet.

Enter the Meter Details

Gib die Details für den Chat-Dienst ein:Meter Name → AI Token Usage MeterDescription → Tracks token consumption from AI chat conversations using AI SDKEvent Name → ai_chat_usage

Der Ereignisname ai_chat_usage muss mit dem Ereignisnamen übereinstimmen, den der Anwendungscode sendet. Bei Ereignisnamen wird zwischen Groß- und Kleinschreibung unterschieden.

Configure How Tokens Are Counted

Lege die Aggregation fest, die bestimmt, wie das Messgerät Ereignisse kombiniert:Aggregation Type: SumOver Property: totalTokensMeasurement Unit: tokens

Sum addiert die Tokens aus jeder Chatnachricht. Der LLM Blueprint sendet inputTokens, outputTokens und totalTokens in den Metadaten jedes Ereignisses, und dieses Messgerät summiert totalTokens.

Create the Meter

Überprüfe, dass alle Einstellungen mit den obigen Werten übereinstimmen. Nach der Erstellung kannst du ein Messgerät nicht mehr bearbeiten.
Klicke auf Create Meter.

Ausgefülltes Messgeräteformular mit dem Namen AI Token Usage Meter, dem Ereignis ai_chat_usage und der Aggregation Sum

Messgerät erstellt. Das “AI Token Usage Meter” ist bereit, Tokens zu zählen. Als Nächstes verknüpfst du es mit einem Abrechnungsprodukt.

Schritt 2: Erhalte deine API-Schlüssel

Besorge dir die beiden API-Schlüssel, die die App benötigt.

Get a Dodo Payments API Key

Gehe im Dodo Payments-Dashboard zu Developer → API Keys.
Klicke auf Add API Key.
Kopiere den API-Schlüssel.

Erstelle den Schlüssel im Testmodus: Ein Schlüssel im Testmodus funktioniert nur mit dem Testmodus. Du fügst den Schlüssel in Schritt 5 zur Datei .env hinzu.

Get a Google AI API Key

Gehe zu aistudio.google.com.
Klicke auf Get API Key.
Erstelle einen API-Schlüssel oder verwende einen vorhandenen.
Kopiere den Schlüssel.

Halte diesen Schlüssel geheim. Du fügst ihn in Schritt 5 zur Datei .env hinzu.

Schritt 3: Erstelle dein Abrechnungsprodukt

Erstelle ein Produkt, das die Preisgestaltung definiert: $0.01 pro 1.000 Tokens mit 10.000 kostenlosen Tokens. Das Produkt verbindet das Messgerät mit der Abrechnung.

Was du erstellst: Ein Produkt namens “AI Chat Service”, das die Token-Nutzung oberhalb einer kostenlosen Stufe berechnet.

Navigate to Products

Klicke im Dodo Payments-Dashboard in der Seitenleiste auf Products.
Klicke auf Add Product.
Wähle unter Pricing Type die Option Usage Based Billing aus.

Bei diesem Preistyp stellt Dodo Payments die Nutzung des Messgeräts statt eines festen Abonnementpreises in Rechnung.

Enter Product Details

Fülle die erforderlichen Angaben aus:Product Name: → AI Chat ServiceDescription: → AI-powered chat service with automatic token-based billingProduct Image: Lade ein passendes Bild hoch.

Der Name und die Beschreibung erscheinen auf Kundenrechnungen.

Connect Your Meter

Überprüfe, dass der Preistyp des Produkts Usage Based Billing ist.Setze den Price auf 0, damit Kunden nur für die Nutzung und keine Grundgebühr zahlen.Verknüpfe anschließend das erstellte Messgerät:

Scrolle zum Abschnitt Associated Meters.
Klicke auf Add meters.
Wähle “AI Token Usage Meter” aus dem Dropdown-Menü aus.
Bestätige, dass das Messgerät in der Produktkonfiguration angezeigt wird.

Das Messgerät ist mit dem Produkt verbunden.

Set Your Pricing

Lege den Preis pro Token und die kostenlose Stufe fest:Price per unit: → 0.00001. Das entspricht $0.00001 pro Token oder $0.01 pro 1.000 Tokens.Free Threshold: → 10000. Jeder Kunde erhält 10.000 kostenlose Tokens pro Monat.

Messgerätepreis im Produkt AI Chat Service mit ausgefülltem Preis pro Einheit und kostenlosem Schwellenwert

So funktioniert die Abrechnung: Ein Kunde, der in einem Monat 25.000 Tokens verwendet, zahlt für 15.000 Tokens (25.000 − 10.000 kostenlose Tokens). 15.000 × $0.00001 = $0.15.

Save Your Product

Überprüfe die Einstellungen:
- Name: AI Chat Service
- Messgerät: AI Token Usage Meter
- Preis: $0.01 pro 1.000 Tokens
- Kostenlose Stufe: 10.000 Tokens
Klicke auf Save Changes.

Produkt erstellt. Die Abrechnung ist konfiguriert, und Kunden werden die von ihnen verwendeten Tokens in Rechnung gestellt.

Schritt 4: Tätige einen Testkauf

Erstelle einen Testkunden, indem du das Produkt kaufst. Die App sendet Nutzungsereignisse für diesen Kunden.

Get Your Payment Link

Gehe im Dodo Payments-Dashboard zu Products.
Suche das Produkt “AI Chat Service”.
Klicke neben dem Produkt auf Share.
Kopiere den Zahlungslink.

Complete a Test Purchase

Öffne den Zahlungslink in einem neuen Browser-Tab.
Gib Testzahlungsdaten ein und schließe den Kauf ab.

Nach erfolgreicher Zahlung wird durch den Kauf ein Kunde erstellt. Der Anwendungscode verwendet die ID dieses Kunden.

Find Your Customer ID

Gehe zurück zum Dodo Payments-Dashboard.
Gehe in der Seitenleiste zu Sales → Customers.
Suche den erstellten Kunden anhand seiner Test-E-Mail-Adresse.
Kopiere die Kunden-ID. Sie beginnt mit cus_.

Speichere diese Kunden-ID. Du verwendest sie beim Testen der Chat-Anwendung.

Schritt 5: Erstelle die Chat-Anwendung

Nachdem die Abrechnung eingerichtet und ein Testkunde erstellt wurde, erstellst du die Chat-Anwendung.

Set Up Your Project

Erstelle ein Verzeichnis und initialisiere das Projekt:

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

Install Dependencies

Installiere die Pakete:

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

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

Aktualisiere package.json, um den Modultyp und die Skripte hinzuzufügen:

package.json

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

Create the Project Structure

Erstelle die Ordner für Quelldateien und statische Dateien:

mkdir src public

Set Up Environment Variables

Erstelle eine Datei .env im Projektstammverzeichnis:

.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

Ersetze die Platzhalterwerte durch die API-Schlüssel aus Schritt 2. Der Google-Provider des AI SDK liest standardmäßig GOOGLE_GENERATIVE_AI_API_KEY.

Create the Backend Server

Erstelle src/server.ts und füge den unten stehenden Servercode ein.

Der vollständige Chat-Server mit Abrechnung sowie die zugehörigen Dateien .env und 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"
  }
}

Schritt 6: Füge die Chat-Oberfläche hinzu

Füge eine Chat-Oberfläche hinzu, die den vollständigen Unterhaltungsverlauf beibehält. Erstelle 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>

Schritt 7: Teste deine Chat-Anwendung

Teste die Chat-App von Anfang bis Ende und beobachte, wie die Nutzung Dodo Payments erreicht.

Was du testest: Du chattest mit der KI, bestätigst, dass die Token-Ereignisse Dodo Payments erreichen, und überprüfst die Abrechnungsberechnung.

Start the Server

Überprüfe, dass die Datei .env beide API-Schlüssel aus Schritt 2 enthält.
Starte den Entwicklungsserver:

npm run dev

Der Server protokolliert:

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

Der Server läuft.

Open the Chat Interface

Öffne deinen Browser.
Gehe zu http://localhost:3000. Die Chat-Oberfläche wird geladen.

Bevor du chattest, setze CUSTOMER_ID in server.ts auf die Testkunden-ID aus Schritt 4 und starte anschließend den Server neu.

Have Your First Conversation

Sende diese Nachrichten:

“Was ist künstliche Intelligenz?”
“Wie funktioniert maschinelles Lernen?”
“Kannst du neuronale Netze erklären?”

Jede Antwort zeigt die Anzahl der verwendeten Tokens.

Wenn die KI antwortet und Token-Anzahlen angezeigt werden, funktioniert die App.

Check Your Dodo Payments Dashboard

Bestätige, dass Dodo Payments die Ereignisse empfängt:

Öffne das Dodo Payments-Dashboard.
Gehe zu Products → Meters und öffne AI Token Usage Meter.
Wähle den Tab Events aus.
Suche deine Chat-Ereignisse in der Liste.

Darauf solltest du achten:

Ereignisname: ai_chat_usage
Kunden-ID: deine Testkunden-ID

Events-Tab des AI Token Usage Meter mit aufgelisteten ai_chat_usage-Ereignissen

Die Liste enthält für jede gesendete Nachricht ein Ereignis.

Verify Token Counting

Sende einige weitere Nachrichten und überprüfe anschließend die Aggregation:

Wähle im Messgerät den Tab Customers aus.
Suche deinen Testkunden.
Überprüfe die Spalte Consumed Units. Sie zeigt die insgesamt verwendeten Tokens an.

Customers-Tab des Messgeräts mit den verbrauchten Einheiten des Testkunden

Das Messgerät summiert den Wert totalTokens aus jedem Ereignis.

Test the Free Tier

Verwende genügend Tokens, um die kostenlose Stufe zu überschreiten:

Führe mehrere weitere Unterhaltungen, bis die Gesamtzahl etwa 15.000 Tokens überschreitet.
Öffne erneut den Tab Customers des Messgeräts.
Überprüfe die Werte:
- Consumed Units: 15.000+ Tokens
- Chargeable Units: 5.000 (10.000 kostenlose Tokens angewendet)
- Total Price: ~$0.05

Customers-Tab des Messgeräts mit verbrauchten Einheiten, abrechenbaren Einheiten und Gesamtpreis nach Anwendung der kostenlosen Stufe

Nutzungsbasierte Abrechnung funktioniert. Kunden werden die von ihnen verwendeten Tokens in Rechnung gestellt.

Fehlerbehebung

Häufige Probleme und ihre Lösungen:

Events not appearing in dashboard

Mögliche Ursachen:

Der Ereignisname stimmt nicht exakt mit der Messgerätekonfiguration überein
Die Kunden-ID existiert in deinem Konto nicht
Der API-Schlüssel ist ungültig oder abgelaufen
Probleme mit der Netzwerkverbindung

Lösungen:

Überprüfe, dass der Ereignisname exakt mit dem Messgerät übereinstimmt. Bei der Groß- und Kleinschreibung muss es genau stimmen: ai_chat_usage.
Überprüfe, dass die Kunden-ID im Dodo Payments-Dashboard existiert.
Teste den API-Schlüssel mit einem einfachen API-Aufruf.
Überprüfe die Serverprotokolle auf Fehler.

Token counts showing zero

Mögliche Ursachen:

Das Modell gibt keine Nutzungsinformationen zurück
Falsche SDK-Version

Lösungen:

Überprüfe, ob das Modell die Nutzung zurückgibt:

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

Aktualisiere das Blueprints-Paket: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

Mögliche Ursachen:

Der API-Schlüssel gehört zum anderen Modus.
Die Datei .env enthält zusätzliche Leerzeichen oder Anführungszeichen.

Lösungen:

Ein Schlüssel funktioniert nur in dem Modus, in dem er erstellt wurde. Verwende einen Schlüssel im Testmodus mit DODO_PAYMENTS_ENVIRONMENT=test_mode und einen Schlüssel im Live-Modus mit live_mode.
Entferne alle Anführungszeichen um die Schlüssel in der Datei .env.
Erstelle bei Bedarf einen neuen Schlüssel.

Brauchst du Hilfe?

Glückwunsch! Du hast eine KI-Chat-App erstellt

Du verfügst jetzt über eine funktionierende KI-Chat-Anwendung, die die Token-Nutzung erfasst und Kunden diese über Dodo Payments in Rechnung stellt.

Mehr erfahren

LLM Blueprint

Erfasse die LLM-Token-Nutzung mit dem LLM Ingestion Blueprint.

Ingestion Blueprints SDK

Weitere Beispiele findest du im GitHub-Repository.

Join Community

Erhalte Hilfe und teile deine Projekte auf Discord.

Integration Guides

Billing Deconstructions

Cookbooks

Erstelle eine KI-Chat-App mit AI SDK & LLM Blueprint

Was wir erstellen

Schritt 1: Erstelle deinen Nutzungszähler

Schritt 2: Erhalte deine API-Schlüssel

Schritt 3: Erstelle dein Abrechnungsprodukt

Schritt 4: Tätige einen Testkauf

Schritt 5: Erstelle die Chat-Anwendung

Schritt 6: Füge die Chat-Oberfläche hinzu

Schritt 7: Teste deine Chat-Anwendung

Fehlerbehebung

Glückwunsch! Du hast eine KI-Chat-App erstellt

Mehr erfahren

LLM Blueprint

Ingestion Blueprints SDK

Join Community

​Was wir erstellen

​Schritt 1: Erstelle deinen Nutzungszähler

​Schritt 2: Erhalte deine API-Schlüssel

​Schritt 3: Erstelle dein Abrechnungsprodukt

​Schritt 4: Tätige einen Testkauf

​Schritt 5: Erstelle die Chat-Anwendung

​Schritt 6: Füge die Chat-Oberfläche hinzu

​Schritt 7: Teste deine Chat-Anwendung

​Fehlerbehebung

​Glückwunsch! Du hast eine KI-Chat-App erstellt

​Mehr erfahren

LLM Blueprint

Ingestion Blueprints SDK

Join Community

Was wir erstellen

Schritt 1: Erstelle deinen Nutzungszähler

Schritt 2: Erhalte deine API-Schlüssel

Schritt 3: Erstelle dein Abrechnungsprodukt

Schritt 4: Tätige einen Testkauf

Schritt 5: Erstelle die Chat-Anwendung

Schritt 6: Füge die Chat-Oberfläche hinzu

Schritt 7: Teste deine Chat-Anwendung

Fehlerbehebung

Glückwunsch! Du hast eine KI-Chat-App erstellt

Mehr erfahren