Membangun Aplikasi Chat AI dengan AI SDK & LLM Blueprint

Agar coding agent Anda menulis integrasinya, instal Dodo Agent Plugin. Plugin ini menambahkan skill Dodo Payments dan server MCP ke Claude Code, Codex CLI, Cursor, VS Code / GitHub Copilot, Kiro, dan OpenCode.

Anda akan membuat aplikasi chat AI yang menagih pelanggan untuk token yang mereka gunakan. Anda membuat meter penagihan, produk, dan kode aplikasi yang menjalankan percakapan serta melaporkan penggunaan token saat berlangsung.

Tutorial ini membuat aplikasi lengkap dengan backend dan frontend. Aplikasi chat menggunakan Google Gemini, dan LLM Blueprint melaporkan penggunaan token untuk setiap respons, sehingga Anda tidak perlu menghitung token sendiri.

Setelah selesai, Anda akan memiliki aplikasi chat yang:

Menjalankan percakapan AI dengan Google Gemini melalui AI SDK.
Melacak penggunaan token secara otomatis tanpa kode penghitung.
Menagih pelanggan untuk token yang benar-benar mereka gunakan.
Menyertakan antarmuka chat yang menyimpan riwayat percakapan.

Antarmuka chat dari aplikasi chat AI yang telah selesai, menampilkan percakapan dengan jumlah token di bawah setiap respons

Apa yang Akan Kita Bangun

Layanan chat bekerja seperti ini:

Service: Chat AI dengan Google Gemini melalui AI SDK
Pricing Model: Bayar per token ($0.01 per 1.000 token)
Free Tier: 10.000 token gratis per pelanggan per bulan
Features: Riwayat percakapan dan pelacakan token otomatis

Sebelum memulai, Anda memerlukan:

Akun Dodo Payments.
Kunci API Google AI. Dapatkan dari Google AI Studio.
Node.js 22 atau yang lebih baru.

Langkah 1: Buat Usage Meter Anda

Buat meter di dashboard Dodo Payments untuk melacak penggunaan token AI.

Yang akan Anda buat: Meter bernama “AI Token Usage Meter” yang menjumlahkan token yang digunakan dalam percakapan chat.

Open the Meters Section

Masuk ke dashboard Dodo Payments.
Klik Products di sidebar.
Klik Meters.
Klik Create Meter.

Halaman Meters di dashboard Dodo Payments dengan tombol Create Meter

Form meter akan terbuka.

Enter the Meter Details

Masukkan detail untuk layanan chat:Meter Name → AI Token Usage MeterDescription → Tracks token consumption from AI chat conversations using AI SDKEvent Name → ai_chat_usage

Nama event ai_chat_usage harus sesuai dengan nama event yang dikirim oleh kode aplikasi. Nama event peka huruf besar-kecil.

Configure How Tokens Are Counted

Atur agregasi, yang menentukan cara meter menggabungkan event:Aggregation Type: SumOver Property: totalTokensMeasurement Unit: tokens

Sum menjumlahkan token dari setiap pesan chat. LLM Blueprint mengirim inputTokens, outputTokens, dan totalTokens dalam metadata setiap event, dan meter ini menjumlahkan totalTokens.

Create the Meter

Pastikan setiap pengaturan sesuai dengan nilai di atas. Anda tidak dapat mengedit meter setelah membuatnya.
Klik Create Meter.

Form meter yang diisi dengan nama AI Token Usage Meter, event ai_chat_usage, dan agregasi Sum

Meter dibuat. “AI Token Usage Meter” siap menghitung token. Selanjutnya, hubungkan meter tersebut ke produk penagihan.

Langkah 2: Dapatkan API Key Anda

Kumpulkan dua kunci API yang diperlukan aplikasi.

Get a Dodo Payments API Key

Di dashboard Dodo Payments, buka Developer → API Keys.
Klik Add API Key.
Salin kunci API.

Buat kunci dalam test mode: kunci test mode hanya berfungsi dengan test mode. Anda menambahkan kunci tersebut ke file .env pada Langkah 5.

Get a Google AI API Key

Buka aistudio.google.com.
Klik Get API Key.
Buat kunci API atau gunakan kunci yang sudah ada.
Salin kuncinya.

Jaga kerahasiaan kunci ini. Anda menambahkannya ke file .env pada Langkah 5.

Langkah 3: Buat Produk Penagihan Anda

Buat produk yang menentukan harga: $0.01 per 1.000 token, dengan 10.000 token gratis. Produk ini menghubungkan meter ke penagihan.

Yang akan Anda buat: Produk bernama “AI Chat Service” yang menagih penggunaan token di atas batas gratis.

Navigate to Products

Di dashboard Dodo Payments, klik Products di sidebar.
Klik Add Product.
Pada Pricing Type, pilih Usage Based Billing.

Dengan jenis harga ini, Dodo Payments menagih berdasarkan penggunaan meter, bukan harga subscription tetap.

Enter Product Details

Isi detail yang diperlukan:Product Name: → AI Chat ServiceDescription: → AI-powered chat service with automatic token-based billingProduct Image: Unggah gambar yang relevan.

Nama dan deskripsi akan muncul pada invoice pelanggan.

Connect Your Meter

Pastikan jenis harga produk adalah Usage Based Billing.Atur Price ke 0 agar pelanggan hanya membayar penggunaan, tanpa biaya dasar.Selanjutnya, tautkan meter yang telah Anda buat:

Gulir ke bagian Associated Meters.
Klik Add meters.
Pilih “AI Token Usage Meter” dari dropdown.
Pastikan meter muncul dalam konfigurasi produk.

Meter telah terhubung ke produk.

Set Your Pricing

Tentukan harga per token dan batas gratis:Price per unit: → 0.00001. Itu berarti $0.00001 per token, atau $0.01 per 1.000 token.Free Threshold: → 10000. Setiap pelanggan mendapatkan 10.000 token gratis per bulan.

Harga meter pada produk AI Chat Service, dengan harga per unit dan batas gratis yang telah diisi

Cara kerja penagihan: Pelanggan yang menggunakan 25.000 token dalam sebulan membayar 15.000 token (25.000 − 10.000 gratis). 15.000 × $0.00001 = $0.15.

Save Your Product

Tinjau pengaturan:
- Nama: AI Chat Service
- Meter: AI Token Usage Meter
- Harga: $0.01 per 1.000 token
- Batas gratis: 10.000 token
Klik Save Changes.

Produk dibuat. Penagihan telah dikonfigurasi, dan pelanggan akan ditagih untuk token yang mereka gunakan.

Langkah 4: Lakukan Pembelian Uji Coba

Buat pelanggan pengujian dengan membeli produk. Aplikasi akan mengirim event penggunaan untuk pelanggan ini.

Get Your Payment Link

Di dashboard Dodo Payments, buka Products.
Cari produk “AI Chat Service”.
Klik Share di samping produk.
Salin payment link.

Complete a Test Purchase

Buka payment link di tab browser baru.
Masukkan detail pembayaran pengujian dan selesaikan pembelian.

Setelah pembayaran berhasil, pembelian akan membuat pelanggan. Kode aplikasi menggunakan ID pelanggan tersebut.

Find Your Customer ID

Kembali ke dashboard Dodo Payments.
Buka Sales → Customers di sidebar.
Cari pelanggan yang Anda buat berdasarkan alamat email pengujiannya.
Salin customer ID. ID tersebut dimulai dengan cus_.

Simpan customer ID ini. Anda akan menggunakannya saat menguji aplikasi chat.

Langkah 5: Bangun Aplikasi Chat

Setelah penagihan siap dan pelanggan pengujian dibuat, bangun aplikasi chat.

Set Up Your Project

Buat direktori dan inisialisasi proyek:

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

Install Dependencies

Instal package:

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

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

Perbarui package.json untuk menambahkan module type dan scripts:

package.json

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

Create the Project Structure

Buat folder source dan static-file:

mkdir src public

Set Up Environment Variables

Buat file .env di root proyek:

.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

Ganti nilai placeholder dengan kunci API dari Langkah 2. Provider Google untuk AI SDK membaca GOOGLE_GENERATIVE_AI_API_KEY secara default.

Create the Backend Server

Buat src/server.ts dan tempelkan kode server di bawah ini.

Server chat lengkap dengan penagihan, beserta .env dan package.json yang sesuai:

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

Langkah 6: Tambahkan Antarmuka Chat

Tambahkan antarmuka chat yang menyimpan seluruh riwayat percakapan. Buat 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>

Langkah 7: Uji Aplikasi Chat Anda

Uji aplikasi chat secara menyeluruh dan pantau penggunaan sampai masuk ke Dodo Payments.

Yang Anda uji: Anda mengobrol dengan AI, memastikan event token sampai ke Dodo Payments, dan memeriksa perhitungan penagihan.

Start the Server

Pastikan file .env memiliki kedua kunci API dari Langkah 2.
Jalankan development server:

npm run dev

Log server:

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

Server sedang berjalan.

Open the Chat Interface

Buka browser.
Buka http://localhost:3000. Antarmuka chat akan dimuat.

Sebelum mengobrol, atur CUSTOMER_ID di server.ts ke customer ID pengujian dari Langkah 4, lalu mulai ulang server.

Have Your First Conversation

Kirim pesan berikut:

“Apa itu kecerdasan buatan?”
“Bagaimana cara kerja machine learning?”
“Bisakah Anda menjelaskan neural network?”

Setiap respons menampilkan jumlah token yang digunakannya.

Jika AI merespons dan jumlah token muncul, aplikasi berfungsi.

Check Your Dodo Payments Dashboard

Pastikan Dodo Payments menerima event tersebut:

Buka dashboard Dodo Payments.
Buka Products → Meters dan buka AI Token Usage Meter.
Pilih tab Events.
Temukan event chat Anda dalam daftar.

Yang perlu dicari:

Nama event: ai_chat_usage
Customer ID: customer ID pengujian Anda

Tab Events pada AI Token Usage Meter yang menampilkan event ai_chat_usage

Daftar tersebut memiliki satu event untuk setiap pesan yang Anda kirim.

Verify Token Counting

Kirim beberapa pesan lagi, lalu periksa agregasinya:

Di meter, pilih tab Customers.
Cari pelanggan pengujian Anda.
Periksa kolom Consumed Units. Kolom ini menampilkan total token yang digunakan.

Tab Customers pada meter yang menampilkan unit terpakai untuk pelanggan pengujian

Meter menjumlahkan nilai totalTokens dari setiap event.

Test the Free Tier

Gunakan token yang cukup untuk melewati batas gratis:

Lakukan beberapa percakapan lagi sampai totalnya melewati sekitar 15.000 token.
Buka kembali tab Customers pada meter.
Periksa nilainya:
- Consumed Units: 15.000+ token
- Chargeable Units: 5.000 (10.000 token gratis diterapkan)
- Total Price: ~$0.05

Tab Customers pada meter yang menampilkan unit terpakai, unit yang dapat ditagih, dan harga total setelah batas gratis

Penagihan berbasis penggunaan berfungsi. Pelanggan ditagih untuk token yang mereka gunakan.

Pemecahan Masalah

Masalah umum dan solusinya:

Events not appearing in dashboard

Kemungkinan penyebab:

Nama event tidak sama persis dengan konfigurasi meter
Customer ID tidak ada di akun Anda
Kunci API tidak valid atau sudah kedaluwarsa
Masalah konektivitas jaringan

Solusi:

Pastikan nama event sama persis dengan meter. Nama ini peka huruf besar-kecil: ai_chat_usage.
Pastikan customer ID ada di dashboard Dodo Payments.
Uji kunci API dengan panggilan API sederhana.
Periksa log server untuk mencari error.

Token counts showing zero

Kemungkinan penyebab:

Model tidak mengembalikan informasi penggunaan
Versi SDK tidak sesuai

Solusi:

Periksa apakah model mengembalikan penggunaan:

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

Perbarui package Blueprints: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

Kemungkinan penyebab:

Kunci API berasal dari mode lain.
File .env memiliki spasi atau tanda kutip tambahan.

Solusi:

Kunci hanya berfungsi dalam mode tempat kunci tersebut dibuat. Gunakan kunci test mode dengan DODO_PAYMENTS_ENVIRONMENT=test_mode, dan kunci live mode dengan live_mode.
Hapus tanda kutip di sekitar kunci dalam file .env.
Buat kunci baru jika diperlukan.

Butuh bantuan?

Selamat! Anda Telah Membuat Aplikasi Chat AI

Anda kini memiliki aplikasi chat AI yang berfungsi, melacak penggunaan token, dan menagih pelanggan melalui Dodo Payments.

Pelajari Lebih Lanjut

LLM Blueprint

Lacak penggunaan token LLM dengan LLM Ingestion Blueprint.

Ingestion Blueprints SDK

Lihat contoh lainnya di repositori GitHub.

Join Community

Dapatkan bantuan dan bagikan proyek Anda di Discord.

Integration Guides

Billing Deconstructions

Cookbooks

Membangun Aplikasi Chat AI dengan AI SDK & LLM Blueprint

Apa yang Akan Kita Bangun

Langkah 1: Buat Usage Meter Anda

Langkah 2: Dapatkan API Key Anda

Langkah 3: Buat Produk Penagihan Anda

Langkah 4: Lakukan Pembelian Uji Coba

Langkah 5: Bangun Aplikasi Chat

Langkah 6: Tambahkan Antarmuka Chat

Langkah 7: Uji Aplikasi Chat Anda

Pemecahan Masalah

Selamat! Anda Telah Membuat Aplikasi Chat AI

Pelajari Lebih Lanjut

LLM Blueprint

Ingestion Blueprints SDK

Join Community

​Apa yang Akan Kita Bangun

​Langkah 1: Buat Usage Meter Anda

​Langkah 2: Dapatkan API Key Anda

​Langkah 3: Buat Produk Penagihan Anda

​Langkah 4: Lakukan Pembelian Uji Coba

​Langkah 5: Bangun Aplikasi Chat

​Langkah 6: Tambahkan Antarmuka Chat

​Langkah 7: Uji Aplikasi Chat Anda

​Pemecahan Masalah

​Selamat! Anda Telah Membuat Aplikasi Chat AI

​Pelajari Lebih Lanjut

LLM Blueprint

Ingestion Blueprints SDK

Join Community

Apa yang Akan Kita Bangun

Langkah 1: Buat Usage Meter Anda

Langkah 2: Dapatkan API Key Anda

Langkah 3: Buat Produk Penagihan Anda

Langkah 4: Lakukan Pembelian Uji Coba

Langkah 5: Bangun Aplikasi Chat

Langkah 6: Tambahkan Antarmuka Chat

Langkah 7: Uji Aplikasi Chat Anda

Pemecahan Masalah

Selamat! Anda Telah Membuat Aplikasi Chat AI

Pelajari Lebih Lanjut