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

Để Sentra viết mã tích hợp cho bạn.
Sử dụng trợ lý AI của chúng tôi trong VS Code, Cursor hoặc Windsurf để tạo mã SDK/API, mã tích hợp LLM Blueprint, webhooks và nhiều nội dung khác — chỉ bằng cách mô tả điều bạn muốn.Dùng thử Sentra: Tích hợp được hỗ trợ bởi AI →

Trong hướng dẫn này, bạn sẽ xây dựng một ứng dụng trò chuyện AI với tính năng tính phí tự động dựa trên mức sử dụng. Chúng ta sẽ tạo mọi thứ từ đầu: bộ đo tính phí, cấu hình sản phẩm và mã ứng dụng xử lý các cuộc trò chuyện cũng như theo dõi mức sử dụng token theo thời gian thực.

Hướng dẫn này cung cấp một ứng dụng hoàn chỉnh có thể hoạt động ngay, bao gồm cả backend và frontend. Ứng dụng trò chuyện sử dụng Gemini AI của Google và tự động theo dõi mức sử dụng token mà không cần tự đếm thủ công.

Khi hoàn thành hướng dẫn này, bạn sẽ có một ứng dụng trò chuyện hoạt động với các khả năng:

Vận hành các cuộc trò chuyện AI bằng Google Gemini (AI SDK)
Tự động theo dõi mức sử dụng token (không cần mã thủ công)
Tính phí khách hàng dựa trên lượng token thực tế đã sử dụng
Bao gồm giao diện trò chuyện đẹp mắt

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

Hãy bắt đầu bằng việc tìm hiểu dịch vụ trò chuyện AI của chúng ta:

Dịch vụ: Trò chuyện được hỗ trợ bởi AI sử dụng Google Gemini (AI SDK)
Mô hình tính phí: Tính phí theo token ($0.01 cho mỗi 1.000 token)
Gói miễn phí: 10.000 token miễn phí cho mỗi khách hàng mỗi tháng
Tính năng: Lịch sử trò chuyện, tự động theo dõi token

Trước khi bắt đầu, hãy đảm bảo bạn có:

Tài khoản Dodo Payments
Google AI API key (Lấy API key từ aistudio)
Node.js v16+ đã được cài đặt

Bước 1: Tạo Usage Meter

Trước tiên, chúng ta sẽ tạo một meter trong dashboard Dodo Payments để theo dõi mức sử dụng token AI.

Chúng ta sẽ xây dựng: Một meter có tên “AI Token Usage Meter” để cộng tổng tất cả token được sử dụng trong các cuộc trò chuyện.

Open the Meters section

Đăng nhập vào dashboard Dodo Payments
Nhấp vào Products trong thanh bên trái
Nhấp vào Meters
Nhấp vào nút Create Meter

Bạn sẽ thấy một biểu mẫu để cấu hình tính năng theo dõi token.

Fill in the basic meter information

Bây giờ, chúng ta sẽ nhập các thông tin cụ thể cho dịch vụ trò chuyện AI: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 event ai_chat_usage phải khớp chính xác với giá trị chúng ta sẽ gửi từ mã ứng dụng sau này. Tên event phân biệt chữ hoa chữ thường!

Configure how we count tokens

Thiết lập phép tổng hợp (cách meter đếm các event của chúng ta):Loại tổng hợp: Chọn Sum từ menu thả xuốngTổng hợp trên: Nhập Type → totalTokensĐơn vị đo lường: Nhập Type → tokens

Chúng ta sử dụng “Sum” vì muốn cộng tất cả token đã sử dụng trong nhiều tin nhắn trò chuyện. SDK sẽ tự động gửi totalTokens trong mỗi event.

Create your meter

Kiểm tra lại để đảm bảo tất cả cài đặt khớp với các giá trị ở trên
Nhấp vào Create Meter

Đã tạo meter! “AI Token Usage Meter” hiện đã sẵn sàng bắt đầu đếm token. Tiếp theo, chúng ta sẽ kết nối meter với một sản phẩm tính phí.

Bước 2: Lấy API Keys

Trước khi xây dựng ứng dụng, hãy thu thập các API key cần thiết.

Get Dodo Payments API Key

Trong dashboard Dodo Payments, đi đến Developers → API Keys
Nhấp vào Create API Key
Sao chép API key — key sẽ có dạng test_abc123...

Lưu API key này — sau đó chúng ta sẽ thêm nó vào tệp .env.

Get Google AI API Key

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

Giữ key này an toàn — chúng ta cũng sẽ thêm nó vào tệp .env.

Bước 3: Tạo Billing Product

Bây giờ, chúng ta cần tạo một sản phẩm xác định mức giá ($0.01 cho mỗi 1.000 token với 10.000 token miễn phí). Sản phẩm này kết nối meter với hoạt động tính phí thực tế.

Chúng ta sẽ xây dựng: Một sản phẩm có tên “AI Chat Service”, tính phí dựa trên mức sử dụng token với gói miễn phí hào phóng.

Navigate to Products

Trong dashboard Dodo Payments, nhấp vào Products trong thanh bên trái
Nhấp vào Create Product
Chọn Usage-Based làm loại sản phẩm

Điều này cho Dodo Payments biết rằng hoạt động tính phí sẽ dựa trên mức sử dụng meter, không phải gói đăng ký 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 billingẢnh sản phẩm: Tải lên một hình ảnh phù hợp

Các thông tin này sẽ xuất hiện trên hóa đơn khách hàng, vì vậy hãy trình bày rõ ràng và chuyên nghiệp.

Connect your meter

Trước khi kết nối meter, hãy đảm bảo bạn đã chọn Usage Based Billing làm loại giá cho sản phẩm.Ngoài ra, đặt Fixed Price thành 0 để đảm bảo khách hàng chỉ bị tính phí dựa trên mức sử dụng, không có phí cơ bản.Bây giờ, hãy liên kết meter vừa tạo:

Cuộn xuống phần Associated Meter
Nhấp vào Add Meters
Từ menu thả xuống, chọn “AI Token Usage Meter” (meter bạn đã tạo trước đó)
Xác nhận meter xuất hiện trong cấu hình sản phẩm

Meter của bạn hiện đã được kết nối thành công với sản phẩm này.

Set your pricing

Đây là nơi chúng ta xác định mô hình kinh doanh:Giá mỗi đơn vị: Nhập → 0.00001 (tương đương

0.01 cho mỗi 1.000 token hoặc

0.00001 cho mỗi token)Ngưỡng miễn phí: Nhập → 10000 (khách hàng được miễn phí 10.000 token mỗi tháng)

Cách tính phí: Nếu khách hàng sử dụng 25.000 token trong một tháng, họ sẽ bị tính phí cho 15.000 token (25.000 - 10.000 token miễn phí) = 15.000 ×

0.00001 =

0.15

Save your product

Xem lại tất cả cài đặt:
- Tên: AI Chat Service
- Meter: AI Token Usage Meter
- Giá: $0.01 cho mỗi 1.000 token
- Gói miễn phí: 10.000 token
Nhấp vào Save Changes

Đã tạo sản phẩm! Hoạt động tính phí hiện đã được cấu hình. Khách hàng sẽ tự động bị tính phí dựa trên mức sử dụng token.

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

Trước khi bắt đầu xây dựng ứng dụng, hãy tạo một khách hàng thử nghiệm bằng cách thực hiện giao dịch mua.

Get your payment link

Trong dashboard Dodo Payments, đi đến Products
Tìm sản phẩm “AI Chat Service”
Nhấp vào nút Share bên cạnh sản phẩm
Sao chép payment link xuất hiện

Complete a test purchase

Mở payment link trong tab trình duyệt mới
Nhập thông tin thanh toán thử nghiệm và hoàn tất giao dịch mua

Sau khi thanh toán thành công, bạn sẽ có customer ID để sử dụng trong mã ứng dụng.

Find your customer ID

Quay lại dashboard Dodo Payments
Đi đến Sales -> Customers trong thanh bên trái
Tìm khách hàng vừa tạo (với email thử nghiệm)
Sao chép customer ID — ID sẽ có dạng cus_123

Lưu customer ID này — chúng ta sẽ sử dụng ID khi kiểm thử ứng dụng trò chuyện.

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

Bây giờ, chúng ta đã hoàn tất thiết lập tính phí và tạo một khách hàng thử nghiệm. Hãy xây dựng ứng dụng trò chuyện AI với tính năng tự động theo dõi token.

Set up your project

Tạo một thư mục mới 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 cần thiết:

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

Tạo các thư mục và tệp:

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_ENVIRONMENT=test_mode
GOOGLE_GENERATIVE_AI_API_KEY=your_google_api_key_here
PORT=3000

Thay các giá trị giữ chỗ bằng API key thực tế của bạn từ Bước 2.

Create the backend server

Tạo src/server.ts và sao chép toàn bộ mã server này:

Đây là server trò chuyện AI hoàn chỉnh với tính năng tính phí tích hợp:

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

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

Bây giờ, hãy thêm một giao diện trò chuyện đẹp mắt với đầy đủ 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

Đã đến lúc kiểm thử ứng dụng trò chuyện AI và xem hoạt động tính phí! Hãy đảm bảo mọi thứ hoạt động xuyên suốt từ đầu đến cuối.

Nội dung kiểm thử: Chúng ta sẽ trò chuyện với AI, xác minh các event token đến được Dodo Payments và xác nhận các phép tính tính phí là chính xác.

Start the server

Trước tiên, hãy đảm bảo mọi thứ đã được thiết lập:

Xác minh tệp .env có đầy đủ API key từ Bước 2
Khởi động development server:

npm run dev

Bạn sẽ thấy:

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

Server đang chạy! Đã đến lúc trò chuyện.

Open the chat interface

Mở trình duyệt
Truy cập http://localhost:3000
Bạn sẽ thấy giao diện trò chuyện đẹp mắt

Hãy cập nhật CUSTOMER_ID trong server.ts bằng customer ID thử nghiệm thực tế từ Bước 4.

Have your first conversation

Hãy thử nghiệm! 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?”

Theo dõi phần hiển thị mức sử dụng token cập nhật sau mỗi câu trả lời!

Nếu thấy AI trả lời và số lượng token xuất hiện, ứng dụng của bạn đang hoạt động!

Check your Dodo Payments dashboard

Bây giờ, hãy xác minh các event đã được nhận:

Mở dashboard Dodo Payments
Đi đến Usage Billing → AI Token Usage Meter
Nhấp vào tab Events
Bạn sẽ thấy các event trò chuyện được liệt kê

Điều cần kiểm tra:

Tên event: ai_chat_usage
Customer ID: ID của khách hàng thử nghiệm

Bạn sẽ thấy một event cho mỗi tin nhắn đã gửi!

Verify token counting

Hãy gửi thêm một số tin nhắn và kiểm tra xem phép tổng hợp token có hoạt động hay không:

Trong meter, đi đến tab Customers
Tìm khách hàng thử nghiệm
Kiểm tra cột “Consumed Units” — cột này sẽ hiển thị tổng số token đã sử dụng

Meter đang tự động cộng tất cả giá trị totalTokens!

Test the free tier

Hãy sử dụng đủ token để vượt qua gói miễn phí:

Thực hiện thêm một số cuộc trò chuyện (mục tiêu tổng cộng khoảng 15.000+ token)
Kiểm tra lại tab Customers trong dashboard của meter
Bây giờ, bạn sẽ thấy:
- Consumed Units: 15.000+ token
- Chargeable Units: 5.000 (đã áp dụng 10.000 token miễn phí)
- Total Price: khoảng $0.05

Thành công! Tính phí dựa trên mức sử dụng đang hoạt động hoàn hảo. Khách hàng sẽ tự động bị tính phí dựa trên lượng token thực tế đã sử dụng.

Khắc phục sự cố

Các vấn đề thường gặp và cách giải quyết:

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 tài khoản
API key không hợp lệ hoặc đã hết hạn
Sự cố kết nối mạng

Giải pháp:

Xác minh tên event khớp chính xác với cấu hình meter (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 logs để tìm thông báo lỗi

Token counts showing zero

Nguyên nhân có thể:

Model không trả về thông tin mức sử dụng
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({...});
console.log('Usage:', response.usage);

Cập nhật lên Blueprints SDK mới nhất: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

Nguyên nhân có thể:

API key không đúng với môi trường
Có khoảng trắng hoặc dấu ngoặc kép thừa trong tệp .env

Giải pháp:

Đảm bảo key thử nghiệm bắt đầu bằng test_, key live bắt đầu bằng live_
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

Giờ đây, bạn đã có một ứng dụng trò chuyện AI đầy đủ chức năng với tính năng tự động theo dõi mức sử dụng token và tính phí được hỗ trợ bởi Dodo Payments. 🎉

Tìm hiểu thêm

LLM Blueprint

Tìm hiểu thêm về LLM Ingestion Blueprint

Ingestion Blueprints SDK

Xem repository GitHub để biết thêm ví dụ

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

Khắc phục 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

​Khắc phục 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

Khắc phục 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