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

Überlasse Sentra das Schreiben deines Integrationscodes.
Nutze unseren KI-Assistenten in VS Code, Cursor oder Windsurf, um SDK-/API-Code, LLM-Blueprint-Integrationscode, Webhooks und mehr zu generieren – indem du einfach beschreibst, was du möchtest.Sentra ausprobieren: KI-gestützte Integration →

In diesem Tutorial erstellst du eine KI-Chat-Anwendung mit automatischer nutzungsbasierter Abrechnung. Wir erstellen alles von Grund auf: den Abrechnungsmesser, die Produktkonfiguration und den Anwendungscode, der die Unterhaltungen ermöglicht und die Token-Nutzung in Echtzeit erfasst.

Dieses Tutorial stellt eine vollständige, funktionsfähige Anwendung mit Backend und Frontend bereit. Die Chat-App verwendet Googles Gemini-KI und erfasst die Token-Nutzung automatisch, ohne dass eine manuelle Zählung erforderlich ist.

Am Ende dieses Tutorials verfügst du über eine funktionierende Chat-Anwendung, die:

KI-Unterhaltungen mit Google Gemini (AI SDK) ermöglicht
die Token-Nutzung automatisch erfasst (kein manueller Code erforderlich)
Kunden basierend auf ihrem tatsächlichen Token-Verbrauch abrechnet
eine ansprechende Chat-Oberfläche enthält

Was wir erstellen

Beginnen wir damit, unseren KI-Chat-Service zu verstehen:

Service: KI-gestützter Chat mit Google Gemini (AI SDK)
Preismodell: Zahlung pro Token (0,01 $ pro 1.000 Token)
Kostenlose Stufe: 10.000 kostenlose Token pro Kunde und Monat
Funktionen: Unterhaltungsverlauf, automatische Token-Erfassung

Bevor wir beginnen, stelle sicher, dass du Folgendes hast:

Ein Dodo Payments-Konto
Einen Google-AI-API-Schlüssel (Einen bei aistudio erhalten)
Node.js v16+ installiert

Schritt 1: Erstelle deinen Nutzungszähler

Zunächst erstellen wir in deinem Dodo Payments-Dashboard einen Zähler, der die Nutzung von KI-Token erfasst.

Was wir erstellen: Einen Zähler namens “AI Token Usage Meter”, der alle in Chat-Unterhaltungen verbrauchten Token summiert.

Open the Meters section

Melde dich in deinem Dodo Payments-Dashboard an
Klicke in der linken Seitenleiste auf Products
Klicke auf Meters
Klicke auf die Schaltfläche Create Meter

Du solltest ein Formular sehen, in dem wir die Token-Erfassung konfigurieren.

Fill in the basic meter information

Jetzt geben wir die spezifischen Details für unseren KI-Chat-Service 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 exakt mit dem übereinstimmen, was wir später aus unserem Anwendungscode senden. Bei Ereignisnamen wird zwischen Groß- und Kleinschreibung unterschieden!

Configure how we count tokens

Richte die Aggregation ein (wie der Zähler unsere Ereignisse zählt):Aggregation Type: Wähle Sum aus dem Dropdown-MenüAggregate Over: Type → totalTokensMeasurement Unit: Type → tokens

Wir verwenden “Sum”, weil wir alle über mehrere Chat-Nachrichten hinweg verbrauchten Token addieren möchten. Das SDK sendet totalTokens automatisch in jedem Ereignis.

Create your meter

Überprüfe noch einmal, ob alle Einstellungen den oben genannten Werten entsprechen
Klicke auf Create Meter

Zähler erstellt! Dein “AI Token Usage Meter” ist jetzt bereit, Token zu zählen. Als Nächstes verbinden wir ihn mit einem Abrechnungsprodukt.

Schritt 2: Erhalte deine API-Schlüssel

Bevor wir die App erstellen, sammeln wir die benötigten API-Schlüssel.

Get Dodo Payments API Key

Gehe in deinem Dodo Payments-Dashboard zu Developers → API Keys
Klicke auf Create API Key
Kopiere den API-Schlüssel – er sieht wie test_abc123... aus

Bewahre diesen API-Schlüssel auf – später fügen wir ihn zu unserer Datei .env hinzu.

Get Google AI API Key

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

Bewahre diesen Schlüssel sicher auf – auch ihn fügen wir später zu unserer Datei .env hinzu.

Schritt 3: Erstelle dein Abrechnungsprodukt

Jetzt müssen wir ein Produkt erstellen, das unsere Preise definiert (0,01 $ pro 1.000 Token mit 10.000 kostenlosen Token). Dadurch wird unser Zähler mit der tatsächlichen Abrechnung verbunden.

Was wir erstellen: Ein Produkt namens “AI Chat Service”, das den Token-Verbrauch mit einer großzügigen kostenlosen Stufe abrechnet.

Navigate to Products

Klicke in deinem Dodo Payments-Dashboard in der linken Seitenleiste auf Products
Klicke auf Create Product
Wähle Usage-Based als Produkttyp aus

Damit weiß Dodo Payments, dass die Abrechnung auf der Zählernutzung und nicht auf einem festen Abonnement basiert.

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

Diese Angaben erscheinen auf Kundenrechnungen. Formuliere sie daher klar und professionell.

Connect your meter

Bevor du deinen Zähler verbindest, stelle sicher, dass du Usage Based Billing als Preistyp für dein Produkt ausgewählt hast.Setze außerdem den Fixed Price auf 0, damit Kunden ausschließlich auf Grundlage ihrer Nutzung und ohne Grundgebühr abgerechnet werden.Verknüpfe nun den gerade erstellten Zähler:

Scrolle nach unten zum Abschnitt Associated Meter
Klicke auf Add Meters
Wähle im Dropdown-Menü “AI Token Usage Meter” aus (den zuvor erstellten Zähler)
Vergewissere dich, dass er in deiner Produktkonfiguration angezeigt wird

Dein Zähler ist jetzt erfolgreich mit diesem Produkt verbunden.

Set your pricing

Hier definieren wir unser Geschäftsmodell:Price Per Unit: Gib → 0.00001 ein (das entspricht 0,01

pro 1.000 Token bzw. 0,00001

pro Token)Free Threshold: Gib → 10000 ein (Kunden erhalten 10.000 kostenlose Token pro Monat)

So funktioniert die Abrechnung: Wenn ein Kunde in einem Monat 25.000 Token verwendet, werden ihm 15.000 Token berechnet (25.000 – 10.000 kostenlose Token) = 15.000 × 0,00001

= 0,15

Save your product

Überprüfe alle deine Einstellungen:
- Name: AI Chat Service
- Zähler: AI Token Usage Meter
- Preis: 0,01 $ pro 1.000 Token
- Kostenlose Stufe: 10.000 Token
Klicke auf Save Changes

Produkt erstellt! Deine Abrechnung ist jetzt konfiguriert. Kunden werden automatisch basierend auf ihrer Token-Nutzung abgerechnet.

Schritt 4: Tätige einen Testkauf

Bevor wir mit der Entwicklung der App beginnen, erstellen wir durch einen Kauf einen Testkunden.

Get your payment link

Gehe in deinem Dodo Payments-Dashboard zu Products
Suche dein Produkt “AI Chat Service”
Klicke neben deinem Produkt auf die Schaltfläche Share
Kopiere den angezeigten 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 erhältst du eine Kunden-ID, die wir in unserem Anwendungscode verwenden.

Find your customer ID

Kehre zu deinem Dodo Payments-Dashboard zurück
Gehe in der linken Seitenleiste zu Sales -> Customers
Suche den gerade erstellten Kunden (mit der Test-E-Mail-Adresse)
Kopiere die Kunden-ID – sie sieht wie cus_123 aus

Bewahre diese Kunden-ID auf – wir verwenden sie beim Testen unserer Chat-Anwendung.

Schritt 5: Erstelle die Chat-Anwendung

Jetzt ist unsere Abrechnung eingerichtet und ein Testkunde erstellt. Erstellen wir nun die KI-Chat-Anwendung mit automatischer Token-Erfassung.

Set up your project

Erstelle ein neues Verzeichnis und initialisiere das Projekt:

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

Install dependencies

Installiere die benötigten Pakete:

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

Erstelle die Ordner und 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_ENVIRONMENT=test_mode
GOOGLE_GENERATIVE_AI_API_KEY=your_google_api_key_here
PORT=3000

Ersetze die Platzhalterwerte durch deine tatsächlichen API-Schlüssel aus Schritt 2.

Create the backend server

Erstelle src/server.ts und kopiere diesen vollständigen Servercode:

Hier ist der vollständige KI-Chat-Server mit integrierter Abrechnung:

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

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

Fügen wir nun eine ansprechende Chat-Oberfläche mit vollständigem Unterhaltungsverlauf hinzu! 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

Jetzt testen wir unsere KI-Chat-App und sehen uns die Abrechnung in Aktion an! Stellen wir sicher, dass alles durchgängig funktioniert.

Was wir testen: Wir führen einige Unterhaltungen mit der KI, überprüfen, ob die Token-Ereignisse Dodo Payments erreichen, und bestätigen, dass die Abrechnungsberechnungen korrekt sind.

Start the server

Stelle zunächst sicher, dass alles eingerichtet ist:

Überprüfe, ob deine Datei .env alle API-Schlüssel aus Schritt 2 enthält
Starte den Entwicklungsserver:

npm run dev

Du solltest Folgendes sehen:

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

Der Server läuft! Zeit für einen Chat.

Open the chat interface

Öffne deinen Browser
Navigiere zu http://localhost:3000
Du solltest die ansprechende Chat-Oberfläche sehen

Stelle sicher, dass du CUSTOMER_ID in server.ts mit deiner tatsächlichen Testkunden-ID aus Schritt 4 aktualisierst.

Have your first conversation

Probieren wir es aus! Teste diese Nachrichten:

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

Beobachte, wie sich die Anzeige der Token-Nutzung nach jeder Antwort aktualisiert!

Wenn die KI antwortet und Token-Zahlen angezeigt werden, funktioniert deine App!

Check your Dodo Payments dashboard

Überprüfen wir nun, ob die Ereignisse empfangen werden:

Öffne dein Dodo Payments-Dashboard
Gehe zu Usage Billing → AI Token Usage Meter
Klicke auf den Tab Events
Deine Chat-Ereignisse sollten aufgelistet sein

Darauf solltest du achten:

Ereignisnamen: ai_chat_usage
Kunden-ID: Deine Testkunden-ID

Für jede gesendete Nachricht sollte ein Ereignis angezeigt werden!

Verify token counting

Sende noch einige Nachrichten und überprüfe, ob die Token-Aggregation funktioniert:

Öffne in deinem Zähler den Tab Customers
Suche deinen Testkunden
Überprüfe die Spalte “Consumed Units” – sie sollte die insgesamt verwendeten Token anzeigen

Der Zähler summiert automatisch alle totalTokens-Werte!

Test the free tier

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

Führe mehrere weitere Unterhaltungen (insgesamt etwa 15.000+ Token)
Überprüfe erneut den Tab Customers in deinem Zähler-Dashboard
Jetzt solltest du Folgendes sehen:
- Verbrauchte Einheiten: 15.000+ Token
- Abrechenbare Einheiten: 5.000 (10.000 kostenlose Token angewendet)
- Gesamtpreis: etwa 0,05 $

Erfolg! Deine nutzungsbasierte Abrechnung funktioniert perfekt. Kunden werden automatisch basierend auf ihrem tatsächlichen Token-Verbrauch abgerechnet.

Fehlerbehebung

Häufige Probleme und ihre Lösungen:

Events not appearing in dashboard

Mögliche Ursachen:

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

Lösungen:

Überprüfe, ob der Ereignisname exakt mit der Zählerkonfiguration übereinstimmt (Groß-/Kleinschreibung beachten: ai_chat_usage)
Überprüfe, ob die Kunden-ID im Dodo Payments-Dashboard vorhanden ist
Teste den API-Schlüssel mit einem einfachen API-Aufruf
Überprüfe die Serverprotokolle auf Fehlermeldungen

Token counts showing zero

Mögliche Ursachen:

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

Lösungen:

Teste, ob das Modell die Nutzung zurückgibt:

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

Aktualisiere auf die neueste Blueprints SDK-Version: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

Mögliche Ursachen:

Falscher API-Schlüssel für die Umgebung
Zusätzliche Leerzeichen oder Anführungszeichen in der Datei .env

Lösungen:

Stelle sicher, dass der Testschlüssel mit test_ beginnt und der Live-Schlüssel mit live_
Entferne alle Anführungszeichen um die Schlüssel in der Datei .env
Erzeuge bei Bedarf einen neuen Schlüssel

Brauchst du Hilfe?

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

Du verfügst jetzt über eine vollständig funktionsfähige KI-Chat-Anwendung mit automatischer Erfassung und Abrechnung der Token-Nutzung, powered by Dodo Payments. 🎉

Weitere Informationen

LLM Blueprint

Erfahre mehr über LLM Ingestion Blueprint

Ingestion Blueprints SDK

Sieh dir das GitHub-Repository an, um weitere Beispiele zu erhalten

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

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

Weitere Informationen

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

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

​Weitere Informationen

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

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

Weitere Informationen