Xây dựng ứng dụng trò chuyện AI với AI SDK & LLM Blueprint

Để coding agent viết phần tích hợp cho bạn, hãy cài đặt Dodo Agent Plugin. Plugin này thêm các kỹ năng và máy chủ MCP của Dodo Payments vào Claude Code, Codex CLI, Cursor, VS Code / GitHub Copilot, Kiro và OpenCode.

Bạn sẽ xây dựng một ứng dụng trò chuyện AI tính phí khách hàng cho số token họ sử dụng. Bạn tạo billing meter, product và mã ứng dụng để chạy các cuộc hội thoại cũng như báo cáo lượng token sử dụng theo thời gian thực.

Tutorial này xây dựng một ứng dụng hoàn chỉnh gồm backend và frontend. Ứng dụng trò chuyện sử dụng Google Gemini, còn LLM Blueprint báo cáo lượng token cho từng phản hồi, nên bạn không cần tự đếm token.

Khi hoàn tất, bạn sẽ có một ứng dụng trò chuyện có thể:

Chạy các cuộc hội thoại AI với Google Gemini thông qua AI SDK.
Tự động theo dõi lượng token sử dụng mà không cần mã đếm token.
Tính phí khách hàng cho số token họ thực sự sử dụng.
Bao gồm giao diện trò chuyện lưu lại lịch sử hội thoại.

Giao diện trò chuyện của ứng dụng trò chuyện AI hoàn chỉnh, hiển thị một cuộc hội thoại với số token bên dưới mỗi phản hồi

Chúng ta sẽ xây dựng gì

Dịch vụ trò chuyện hoạt động như sau:

Service: Trò chuyện AI với Google Gemini thông qua AI SDK
Pricing Model: Trả phí theo token ($0.01 cho mỗi 1.000 token)
Free Tier: 10.000 token miễn phí mỗi khách hàng mỗi tháng
Features: Lịch sử hội thoại và tự động theo dõi lượng token

Trước khi bắt đầu, bạn cần:

Một tài khoản Dodo Payments.
Google AI API key. Lấy API key từ Google AI Studio.
Node.js 22 trở lên.

Bước 1: Tạo Usage Meter

Tạo một meter trong dashboard Dodo Payments để theo dõi lượng token AI sử dụng.

Bạn đang xây dựng: Một meter có tên “AI Token Usage Meter” để cộng tổng số token được sử dụng trong các cuộc hội thoại.

Open the Meters Section

Đăng nhập vào dashboard Dodo Payments.
Nhấp vào Products trong thanh bên.
Nhấp vào Meters.
Nhấp vào Create Meter.

Trang Meters trong dashboard Dodo Payments với nút Create Meter

Biểu mẫu meter sẽ mở.

Enter the Meter Details

Nhập thông tin cho dịch vụ trò chuyện:Tên meter → AI Token Usage MeterMô tả → Tracks token consumption from AI chat conversations using AI SDKTên event → ai_chat_usage

Tên sự kiện ai_chat_usage phải khớp với tên sự kiện mà mã ứng dụng gửi. Tên sự kiện phân biệt chữ hoa chữ thường.

Configure How Tokens Are Counted

Thiết lập aggregation, quy định cách meter kết hợp các sự kiện:Aggregation Type: SumOver Property: totalTokensMeasurement Unit: tokens

Sum cộng tổng số token từ mọi tin nhắn trò chuyện. LLM Blueprint gửi inputTokens, outputTokens và totalTokens trong metadata của mỗi sự kiện, còn meter này cộng totalTokens.

Create the Meter

Kiểm tra để chắc chắn mọi cài đặt khớp với các giá trị ở trên. Bạn không thể chỉnh sửa meter sau khi tạo.
Nhấp vào Create Meter.

Biểu mẫu meter được điền với tên AI Token Usage Meter, sự kiện ai_chat_usage và aggregation Sum

Đã tạo meter. “AI Token Usage Meter” đã sẵn sàng để đếm token. Tiếp theo, kết nối meter với một billing product.

Bước 2: Lấy API Keys

Thu thập hai API key mà ứng dụng cần.

Get a Dodo Payments API Key

Trong dashboard Dodo Payments, đi đến Developer → API Keys.
Nhấp vào Add API Key.
Sao chép API key.

Tạo key ở test mode: key test mode chỉ hoạt động với test mode. Bạn sẽ thêm key vào tệp .env ở Step 5.

Get a Google AI API Key

Đi đến aistudio.google.com.
Nhấp vào Get API Key.
Tạo API key hoặc sử dụng key hiện có.
Sao chép key.

Giữ bí mật key này. Bạn sẽ thêm key vào tệp .env ở Step 5.

Bước 3: Tạo Billing Product

Tạo một product xác định cách tính phí: $0.01 cho mỗi 1.000 token, với 10.000 token miễn phí. Product kết nối meter với billing.

Bạn đang xây dựng: Một product có tên “AI Chat Service” tính phí cho lượng token sử dụng vượt quá free tier.

Navigate to Products

Trong dashboard Dodo Payments, nhấp vào Products trong thanh bên.
Nhấp vào Add Product.
Trong Pricing Type, chọn Usage Based Billing.

Với loại pricing này, Dodo Payments tính phí dựa trên lượng sử dụng của meter thay vì giá subscription cố định.

Enter Product Details

Điền các thông tin bắt buộc:Tên sản phẩm: → AI Chat ServiceMô tả: → AI-powered chat service with automatic token-based billingProduct Image: Tải lên một hình ảnh phù hợp.

Tên và mô tả sẽ xuất hiện trên hóa đơn của khách hàng.

Connect Your Meter

Kiểm tra để chắc chắn loại pricing của product là Usage Based Billing.Đặt Price thành 0 để khách hàng chỉ trả phí cho lượng sử dụng, không có phí cơ bản.Sau đó liên kết meter bạn đã tạo:

Cuộn đến phần Associated Meters.
Nhấp vào Add meters.
Chọn “AI Token Usage Meter” từ menu thả xuống.
Xác nhận meter xuất hiện trong cấu hình product.

Meter đã được kết nối với product.

Set Your Pricing

Xác định giá mỗi token và free tier:Price per unit: → 0.00001. Tương đương $0.00001 mỗi token, hoặc $0.01 cho mỗi 1.000 token.Free Threshold: → 10000. Mỗi khách hàng nhận 10.000 token miễn phí mỗi tháng.

Giá meter trên product AI Chat Service, với giá mỗi unit và free threshold đã được điền

Cách billing hoạt động: Khách hàng sử dụng 25.000 token trong một tháng sẽ trả phí cho 15.000 token (25.000 − 10.000 token miễn phí). 15.000 × $0.00001 = $0.15.

Save Your Product

Kiểm tra các cài đặt:
- Name: AI Chat Service
- Meter: AI Token Usage Meter
- Price: $0.01 cho mỗi 1.000 token
- Free tier: 10.000 token
Nhấp vào Save Changes.

Đã tạo product. Billing đã được cấu hình và khách hàng sẽ bị tính phí cho số token họ sử dụng.

Bước 4: Thực hiện giao dịch mua thử nghiệm

Tạo test customer bằng cách mua product. Ứng dụng sẽ gửi các usage event cho customer này.

Get Your Payment Link

Trong dashboard Dodo Payments, đi đến Products.
Tìm product “AI Chat Service”.
Nhấp vào Share bên cạnh product.
Sao chép payment link.

Complete a Test Purchase

Mở payment link trong tab trình duyệt mới.
Nhập test payment details và hoàn tất giao dịch.

Sau khi thanh toán thành công, giao dịch mua sẽ tạo một customer. Mã ứng dụng sử dụng ID của customer đó.

Find Your Customer ID

Quay lại dashboard Dodo Payments.
Đi đến Sales → Customers trong thanh bên.
Tìm customer bạn đã tạo bằng địa chỉ email test.
Sao chép customer ID. ID bắt đầu bằng cus_.

Lưu customer ID này. Bạn sẽ sử dụng nó khi kiểm thử ứng dụng trò chuyện.

Bước 5: Xây dựng ứng dụng trò chuyện

Sau khi thiết lập billing và tạo test customer, hãy xây dựng ứng dụng trò chuyện.

Set Up Your Project

Tạo một thư mục và khởi tạo project:

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

Install Dependencies

Cài đặt các 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

Tạo 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"]
}

Cập nhật package.json để thêm module type và các script:

package.json

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

Create the Project Structure

Tạo các thư mục source và static-file:

mkdir src public

Set Up Environment Variables

Tạo tệp .env trong thư mục gốc của project:

.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

Thay các giá trị placeholder bằng API key từ Step 2. Google provider của AI SDK đọc GOOGLE_GENERATIVE_AI_API_KEY theo mặc định.

Create the Backend Server

Tạo src/server.ts và dán mã server bên dưới vào đó.

Chat server hoàn chỉnh có billing, cùng với .env và package.json tương ứng:

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

Bước 6: Thêm giao diện trò chuyện

Thêm giao diện trò chuyện lưu lại toàn bộ lịch sử hội thoại. Tạo 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>

Bước 7: Kiểm thử ứng dụng trò chuyện

Kiểm thử ứng dụng trò chuyện từ đầu đến cuối và theo dõi lượng sử dụng được gửi đến Dodo Payments.

Bạn đang kiểm thử: Bạn trò chuyện với AI, xác nhận các token event đến được Dodo Payments và kiểm tra phép tính billing.

Start the Server

Kiểm tra tệp .env có cả hai API key từ Step 2.
Khởi động development server:

npm run dev

Server ghi log:

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

Server đang chạy.

Open the Chat Interface

Mở trình duyệt.
Đi đến http://localhost:3000. Giao diện trò chuyện sẽ tải.

Trước khi trò chuyện, đặt CUSTOMER_ID trong server.ts thành test customer ID từ Step 4, sau đó khởi động lại server.

Have Your First Conversation

Gửi các tin nhắn sau:

“Trí tuệ nhân tạo là gì?”
“Machine learning hoạt động như thế nào?”
“Bạn có thể giải thích neural network không?”

Mỗi phản hồi hiển thị số token đã sử dụng.

Nếu AI phản hồi và số token xuất hiện, ứng dụng đang hoạt động.

Check Your Dodo Payments Dashboard

Xác nhận Dodo Payments đã nhận các event:

Mở dashboard Dodo Payments.
Đi đến Products → Meters và mở AI Token Usage Meter.
Chọn tab Events.
Tìm các chat event trong danh sách.

Cần kiểm tra:

Tên event: ai_chat_usage
Customer ID: test customer ID của bạn

Tab Events của AI Token Usage Meter liệt kê các event ai_chat_usage

Danh sách có một event cho mỗi tin nhắn bạn đã gửi.

Verify Token Counting

Gửi thêm một vài tin nhắn, sau đó kiểm tra aggregation:

Trong meter, chọn tab Customers.
Tìm test customer của bạn.
Kiểm tra cột Consumed Units. Cột này hiển thị tổng số token đã sử dụng.

Tab Customers của meter hiển thị consumed units của test customer

Meter cộng giá trị totalTokens từ mọi event.

Test the Free Tier

Sử dụng đủ token để vượt free tier:

Thực hiện thêm vài cuộc hội thoại cho đến khi tổng số vượt khoảng 15.000 token.
Mở lại tab Customers của meter.
Kiểm tra các giá trị:
- Consumed Units: hơn 15.000 token
- Chargeable Units: 5.000 (đã áp dụng 10.000 token miễn phí)
- Total Price: ~$0.05

Tab Customers của meter hiển thị consumed units, chargeable units và total price sau khi áp dụng free tier

Usage-based billing hoạt động. Khách hàng bị tính phí cho số token họ sử dụng.

Xử lý sự cố

Các vấn đề thường gặp và cách khắc phục:

Events not appearing in dashboard

Nguyên nhân có thể:

Tên event không khớp chính xác với cấu hình meter
Customer ID không tồn tại trong account của bạn
API key không hợp lệ hoặc đã hết hạn
Vấn đề kết nối mạng

Giải pháp:

Kiểm tra tên event khớp chính xác với meter. Tên phân biệt chữ hoa chữ thường: ai_chat_usage.
Kiểm tra customer ID tồn tại trong dashboard Dodo Payments.
Kiểm thử API key bằng một API call đơn giản.
Kiểm tra server log để tìm lỗi.

Token counts showing zero

Nguyên nhân có thể:

Model không trả về thông tin usage
Phiên bản SDK không chính xác

Giải pháp:

Kiểm tra model có trả về usage hay không:

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

Cập nhật package Blueprints: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

Nguyên nhân có thể:

API key thuộc mode khác.
Tệp .env có khoảng trắng hoặc dấu ngoặc kép thừa.

Giải pháp:

Một key chỉ hoạt động trong mode mà key được tạo. Sử dụng test mode key với DODO_PAYMENTS_ENVIRONMENT=test_mode và live mode key với live_mode.
Xóa mọi dấu ngoặc kép xung quanh key trong tệp .env.
Tạo key mới nếu cần.

Cần trợ giúp?

Chúc mừng! Bạn đã xây dựng ứng dụng trò chuyện AI

Bạn đã có một ứng dụng trò chuyện AI hoạt động tốt, theo dõi lượng token sử dụng và tính phí khách hàng thông qua Dodo Payments.

Tìm hiểu thêm

LLM Blueprint

Theo dõi lượng token LLM sử dụng bằng LLM Ingestion Blueprint.

Ingestion Blueprints SDK

Xem thêm ví dụ trong GitHub repository.

Join Community

Nhận trợ giúp và chia sẻ project của bạn trên Discord.

Integration Guides

Billing Deconstructions

Cookbooks

Xây dựng ứng dụng trò chuyện AI với AI SDK & LLM Blueprint

Chúng ta sẽ xây dựng gì

Bước 1: Tạo Usage Meter

Bước 2: Lấy API Keys

Bước 3: Tạo Billing Product

Bước 4: Thực hiện giao dịch mua thử nghiệm

Bước 5: Xây dựng ứng dụng trò chuyện

Bước 6: Thêm giao diện trò chuyện

Bước 7: Kiểm thử ứng dụng trò chuyện

Xử lý sự cố

Chúc mừng! Bạn đã xây dựng ứng dụng trò chuyện AI

Tìm hiểu thêm

LLM Blueprint

Ingestion Blueprints SDK

Join Community

​Chúng ta sẽ xây dựng gì

​Bước 1: Tạo Usage Meter

​Bước 2: Lấy API Keys

​Bước 3: Tạo Billing Product

​Bước 4: Thực hiện giao dịch mua thử nghiệm

​Bước 5: Xây dựng ứng dụng trò chuyện

​Bước 6: Thêm giao diện trò chuyện

​Bước 7: Kiểm thử ứng dụng trò chuyện

​Xử lý sự cố

​Chúc mừng! Bạn đã xây dựng ứng dụng trò chuyện AI

​Tìm hiểu thêm

LLM Blueprint

Ingestion Blueprints SDK

Join Community

Chúng ta sẽ xây dựng gì

Bước 1: Tạo Usage Meter

Bước 2: Lấy API Keys

Bước 3: Tạo Billing Product

Bước 4: Thực hiện giao dịch mua thử nghiệm

Bước 5: Xây dựng ứng dụng trò chuyện

Bước 6: Thêm giao diện trò chuyện

Bước 7: Kiểm thử ứng dụng trò chuyện

Xử lý sự cố

Chúc mừng! Bạn đã xây dựng ứng dụng trò chuyện AI

Tìm hiểu thêm