Membangun Aplikasi Chat AI dengan AI SDK & LLM Blueprint

Ikuti proses pembangunan aplikasi chat AI dengan pelacakan token otomatis dan penagihan berbasis penggunaan

Biarkan Sentra menulis kode integrasi untuk Anda.
Gunakan asisten AI kami di VS Code, Cursor, atau Windsurf untuk membuat kode SDK/API, kode integrasi LLM Blueprint, webhook, dan lainnya—cukup dengan menjelaskan kebutuhan Anda.

Coba Sentra: Integrasi Berbasis AI →

Dalam tutorial ini, Anda akan membangun aplikasi chat AI dengan penagihan berbasis penggunaan otomatis. Kita akan membuat semuanya dari awal: meter penagihan, konfigurasi produk, dan kode aplikasi yang menjalankan percakapan serta melacak penggunaan token secara real-time.

Tutorial ini menyediakan aplikasi lengkap yang dapat langsung digunakan, dengan backend dan frontend. Aplikasi chat menggunakan Google Gemini AI dan secara otomatis melacak penggunaan token tanpa memerlukan penghitungan manual.

Di akhir tutorial ini, Anda akan memiliki aplikasi chat yang:

• Menjalankan percakapan AI menggunakan Google Gemini (AI SDK)
• Melacak penggunaan token secara otomatis (tanpa kode manual)
• Menagih pelanggan berdasarkan konsumsi token aktual
• Menyertakan antarmuka chat yang menarik

​

Apa yang Akan Kita Bangun

Mari kita mulai dengan memahami layanan chat AI kita:

• Layanan: Chat berbasis AI menggunakan Google Gemini (AI SDK)
• Model Harga: Bayar per token ($0.01 per 1.000 token)
• Tingkat Gratis: 10.000 token gratis per pelanggan per bulan
• Fitur: Riwayat percakapan, pelacakan token otomatis

Sebelum memulai, pastikan Anda memiliki:

• Akun Dodo Payments
• API key Google AI (Dapatkan dari aistudio)
• Node.js v16+ yang terpasang

---

​

Langkah 1: Buat Usage Meter Anda

Kita akan mulai dengan membuat meter di dashboard Dodo Payments untuk melacak penggunaan token AI.

Yang kita bangun: Meter bernama “AI Token Usage Meter” yang menjumlahkan semua token yang digunakan dalam percakapan chat.

1. Open the Meters section

   1. Masuk ke dashboard Dodo Payments
   2. Klik Products di sidebar kiri
   3. Klik Meters
   4. Klik tombol Create Meter

   

   Anda akan melihat formulir untuk mengonfigurasi pelacakan token.

2. Fill in the basic meter information

   Sekarang kita akan memasukkan detail khusus untuk layanan chat AI:

   Meter Name → AI Token Usage Meter

   Description → Tracks token consumption from AI chat conversations using AI SDK

   Event Name → ai_chat_usage

   Nama event ai_chat_usage harus sama persis dengan yang nantinya kita kirim dari kode aplikasi. Nama event peka huruf besar-kecil!

3. Configure how we count tokens

   Atur aggregation (cara meter menghitung event kita):

   Aggregation Type: Pilih Sum dari dropdown

   Aggregate Over: Type → totalTokens

   Measurement Unit: Type → tokens

   Kita menggunakan “Sum” karena ingin menjumlahkan semua token yang digunakan dalam beberapa pesan chat. SDK secara otomatis mengirim totalTokens di setiap event.

4. Create your meter

   1. Periksa kembali apakah semua pengaturan sesuai dengan nilai di atas
   2. Klik Create Meter

   

   Meter berhasil dibuat! “AI Token Usage Meter” Anda kini siap mulai menghitung token. Berikutnya, kita akan menghubungkannya ke produk penagihan.

​

Langkah 2: Dapatkan API Key Anda

Sebelum membuat aplikasi, mari kumpulkan API key yang diperlukan.

1. Get Dodo Payments API Key

   1. Di dashboard Dodo Payments, buka Developers → API Keys
   2. Klik Create API Key
   3. Salin API key—formatnya akan terlihat seperti test_abc123...

   Simpan API key ini—nanti kita akan menambahkannya ke file .env.

2. Get Google AI API Key

   1. Kunjungi aistudio.google.com
   2. Klik Get API Key
   3. Buat API key baru atau gunakan yang sudah ada
   4. Salin key tersebut

   Simpan key ini dengan aman—kita juga akan menambahkannya ke file .env.

---

​

Langkah 3: Buat Produk Penagihan Anda

Sekarang kita perlu membuat produk yang menentukan harga ($0.01 per 1.000 token dengan 10.000 token gratis). Ini menghubungkan meter dengan penagihan aktual.

Yang kita bangun: Produk bernama “AI Chat Service” yang mengenakan biaya berdasarkan konsumsi token dengan tingkat gratis yang besar.

1. Navigate to Products

   1. Di dashboard Dodo Payments, klik Products di sidebar kiri
   2. Klik Create Product
   3. Pilih Usage-Based sebagai jenis produk

   Ini memberi tahu Dodo Payments bahwa penagihan akan didasarkan pada penggunaan meter, bukan langganan tetap.

2. Enter product details

   Isi detail yang diperlukan:

   Product Name: → AI Chat Service

   Description: → AI-powered chat service with automatic token-based billing

   Product Image: Unggah gambar yang relevan

   Detail ini akan muncul pada invoice pelanggan, jadi buatlah dengan jelas dan profesional.

3. Connect your meter

   Sebelum menghubungkan meter, pastikan Anda telah memilih Usage Based Billing sebagai jenis harga produk.

   Selain itu, atur Fixed Price ke 0 agar pelanggan hanya dikenai biaya berdasarkan penggunaan, tanpa biaya dasar.

   Sekarang, hubungkan meter yang baru saja Anda buat:

   1. Gulir ke bagian Associated Meter
   2. Klik Add Meters
   3. Dari dropdown, pilih “AI Token Usage Meter” (meter yang sebelumnya Anda buat)
   4. Pastikan meter tersebut muncul dalam konfigurasi produk

   Meter Anda kini berhasil terhubung ke produk ini.

4. Set your pricing

   Di sinilah kita menentukan model bisnis:

   Price Per Unit: Masukkan → 0.00001 (yaitu $0.01 per 1.000 token atau$0.00001 per token)

   Free Threshold: Masukkan → 10000 (pelanggan mendapatkan 10.000 token gratis per bulan)

   

   Cara kerja penagihan: Jika pelanggan menggunakan 25.000 token dalam sebulan, mereka akan ditagih untuk 15.000 token (25.000 - 10.000 gratis) = 15.000 × $0.00001 =$0.15

5. Save your product

   1. Tinjau semua pengaturan:
      • Name: AI Chat Service
      • Meter: AI Token Usage Meter
      • Price: $0.01 per 1.000 token
      • Free tier: 10.000 token
   2. Klik Save Changes

   Produk berhasil dibuat! Penagihan Anda kini telah dikonfigurasi. Pelanggan akan otomatis ditagih berdasarkan penggunaan token mereka.

​

Langkah 4: Lakukan Pembelian Uji Coba

Sebelum mulai membuat aplikasi, mari buat pelanggan uji coba dengan melakukan pembelian.

1. Get your payment link

   1. Di dashboard Dodo Payments, buka Products
   2. Temukan produk “AI Chat Service”
   3. Klik tombol Share di samping produk
   4. Salin payment link yang muncul
2. Complete a test purchase

   1. Buka payment link di tab browser baru
   2. Masukkan detail pembayaran uji coba dan selesaikan pembelian

   Setelah pembayaran berhasil, Anda akan memiliki customer ID yang akan digunakan dalam kode aplikasi.

3. Find your customer ID

   1. Kembali ke dashboard Dodo Payments
   2. Buka Sales -> Customers di sidebar kiri
   3. Temukan pelanggan yang baru dibuat (dengan email uji coba)
   4. Salin customer ID—formatnya akan terlihat seperti cus_123

   Simpan customer ID ini—kita akan menggunakannya saat menguji aplikasi chat.

​

Langkah 5: Bangun Aplikasi Chat

Kini konfigurasi penagihan telah selesai dan pelanggan uji coba telah dibuat. Mari bangun aplikasi chat AI dengan pelacakan token otomatis.

1. Set up your project

   Buat direktori baru dan inisialisasi project:

   mkdir ai-chat-app
   cd ai-chat-app
   npm init -y
   
2. Install dependencies

   Instal package yang kita perlukan:

   npm install express ai @ai-sdk/google @dodopayments/ingestion-blueprints dotenv
   npm install --save-dev typescript @types/express @types/node tsx
   
3. 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"
     }
   }
   
4. Create project structure

   Buat folder dan file:

   mkdir src public
   
5. Set up environment variables

   Buat file .env di root project Anda:

   .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
   

   Ganti nilai placeholder dengan API key aktual Anda dari Langkah 2.

6. Create the backend server

   Buat src/server.ts dan salin kode server lengkap berikut:

Berikut server chat AI lengkap dengan penagihan terintegrasi:

src/server.ts

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

---

​

Langkah 6: Tambahkan Antarmuka Chat

Sekarang mari tambahkan antarmuka chat yang menarik dengan riwayat percakapan lengkap! 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

Saatnya menguji aplikasi chat AI dan melihat penagihan berjalan! Pastikan semuanya berfungsi dari awal hingga akhir.

Yang kita uji: Kita akan melakukan beberapa percakapan dengan AI, memastikan event token sampai ke Dodo Payments, dan mengonfirmasi perhitungan penagihan sudah benar.

1. Start the server

   Pertama, pastikan semuanya telah disiapkan:

   1. Pastikan file .env memiliki semua API key dari Langkah 2
   2. Jalankan development server:

   npm run dev
   

   Anda akan melihat:

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

   Server sedang berjalan! Saatnya mengobrol.

2. Open the chat interface

   1. Buka browser Anda
   2. Buka http://localhost:3000
   3. Anda akan melihat antarmuka chat yang menarik

   Pastikan Anda memperbarui CUSTOMER_ID di server.ts dengan customer ID uji coba aktual dari Langkah 4.

3. Have your first conversation

   Mari kita uji! Coba pesan berikut:

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

   Perhatikan tampilan penggunaan token yang diperbarui setelah setiap respons!

   Jika Anda melihat AI merespons dan jumlah token muncul, aplikasi Anda berfungsi!

4. Check your Dodo Payments dashboard

   Sekarang mari pastikan event diterima:

   1. Buka dashboard Dodo Payments
   2. Buka Usage Billing → AI Token Usage Meter
   3. Klik tab Events
   4. Anda akan melihat event chat yang tercantum

   Yang perlu dicari:

   • Nama event: ai_chat_usage
   • Customer ID: ID pelanggan uji coba Anda

   

   Anda akan melihat satu event untuk setiap pesan yang dikirim!

5. Verify token counting

   Mari kirim beberapa pesan lagi dan periksa apakah agregasi token berfungsi:

   1. Di meter Anda, buka tab Customers
   2. Temukan pelanggan uji coba Anda
   3. Periksa kolom “Consumed Units”—kolom ini seharusnya menampilkan total token yang digunakan

   

   Meter secara otomatis menjumlahkan semua nilai totalTokens!

6. Test the free tier

   Mari gunakan token yang cukup untuk melampaui tingkat gratis:

   1. Lakukan beberapa percakapan lagi (targetkan total sekitar 15.000+ token)
   2. Periksa kembali tab Customers di dashboard meter
   3. Anda sekarang akan melihat:
      • Consumed Units: 15.000+ token
      • Chargeable Units: 5.000 (10.000 token gratis telah diterapkan)
      • Total Price: sekitar $0.05

   

   Berhasil! Penagihan berbasis penggunaan Anda berfungsi dengan sempurna. Pelanggan akan otomatis ditagih berdasarkan konsumsi token aktual mereka.

---

​

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
• API key tidak valid atau sudah kedaluwarsa
• Masalah konektivitas jaringan

Solusi:

1. Pastikan nama event sama persis dengan konfigurasi meter (peka huruf besar-kecil: ai_chat_usage)
2. Pastikan customer ID ada di dashboard Dodo Payments
3. Uji API key dengan panggilan API sederhana
4. Periksa server logs untuk pesan error

Token counts showing zero

Kemungkinan penyebab:

• Model tidak mengembalikan informasi penggunaan
• Versi SDK tidak sesuai

Solusi:

1. Uji apakah model mengembalikan penggunaan:

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

2. Perbarui ke Blueprints SDK terbaru: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

Kemungkinan penyebab:

• API key salah untuk environment
• Spasi atau tanda kutip tambahan dalam file .env

Solusi:

• Pastikan test key diawali test_ dan live key diawali live_
• Hapus tanda kutip di sekitar key dalam file .env
• Buat key baru jika diperlukan

Butuh bantuan?

• Komunitas Discord
• [e-mail]

---

​

Selamat! Anda Telah Membangun Aplikasi Chat AI

Kini Anda memiliki aplikasi chat AI yang berfungsi penuh dengan pelacakan penggunaan token dan penagihan otomatis yang didukung oleh Dodo Payments. 🎉

​

Pelajari Lebih Lanjut

LLM Blueprint

Pelajari lebih lanjut tentang LLM Ingestion Blueprint

Ingestion Blueprints SDK

Lihat repository GitHub untuk contoh lainnya

Join Community

Dapatkan bantuan dan bagikan project Anda di Discord