AI SDK 및 LLM Blueprint로 AI 채팅 앱 구축하기

코딩 에이전트가 통합을 작성하도록 하려면 Dodo Agent Plugin을 설치하세요. 이 플러그인은 Claude Code, Codex CLI, Cursor, VS Code / GitHub Copilot, Kiro, OpenCode에 Dodo Payments skills와 MCP servers를 추가합니다.

고객이 사용한 토큰에 대해 요금이 청구되는 AI 채팅 애플리케이션을 구축합니다. 청구 meter, product, 대화를 실행하고 토큰 사용량을 실시간으로 보고하는 애플리케이션 코드를 만듭니다.

이 튜토리얼에서는 backend와 frontend를 포함한 완전한 애플리케이션을 구축합니다. 채팅 앱은 Google Gemini를 사용하며, LLM Blueprint가 각 응답의 토큰 사용량을 보고하므로 직접 토큰을 계산할 필요가 없습니다.

완료하면 다음 기능을 갖춘 채팅 애플리케이션이 제공됩니다:

AI SDK를 통해 Google Gemini로 AI 대화를 실행합니다.
토큰을 계산하는 코드 없이 토큰 사용량을 자동으로 추적합니다.
고객이 실제로 사용한 토큰에 대해 요금을 청구합니다.
대화 기록을 유지하는 채팅 인터페이스를 포함합니다.

완성된 AI 채팅 앱의 채팅 인터페이스로, 각 응답 아래에 토큰 수가 표시됩니다

우리가 구축할 내용

채팅 service는 다음과 같이 작동합니다:

Service: AI SDK를 통한 Google Gemini AI 채팅
Pricing Model: 토큰당 요금 부과(토큰 1,000개당 $0.01)
Free Tier: 고객당 월 10,000개 무료 토큰
Features: 대화 기록 및 자동 토큰 추적

시작하기 전에 다음이 필요합니다:

Dodo Payments account.
Google AI API key. Google AI Studio에서 발급받기.
Node.js 22 이상.

1단계: 사용량 미터기 생성하기

AI 토큰 사용량을 추적하려면 Dodo Payments dashboard에서 meter를 생성합니다.

구축할 항목: 채팅 대화에서 사용된 토큰을 합산하는 “AI Token Usage Meter”라는 meter입니다.

Open the Meters Section

Dodo Payments dashboard에 로그인합니다.
사이드바에서 Products를 클릭합니다.
Meters를 클릭합니다.
Create Meter를 클릭합니다.

Create Meter 버튼이 표시된 Dodo Payments dashboard의 Meters 페이지

meter form이 열립니다.

Enter the Meter Details

채팅 service의 세부 정보를 입력합니다:Meter Name → AI Token Usage MeterDescription → Tracks token consumption from AI chat conversations using AI SDKEvent Name → ai_chat_usage

event name ai_chat_usage은 애플리케이션 코드가 전송하는 event name과 일치해야 합니다. Event name은 대소문자를 구분합니다.

Configure How Tokens Are Counted

meter가 event를 결합하는 방식을 제어하는 aggregation을 설정합니다:Aggregation Type: SumOver Property: totalTokensMeasurement Unit: tokens

Sum은 모든 채팅 메시지의 토큰을 합산합니다. LLM Blueprint는 각 event의 metadata에 inputTokens, outputTokens, totalTokens을 전송하며, 이 meter는 totalTokens을 합산합니다.

Create the Meter

모든 설정이 위의 값과 일치하는지 확인합니다. meter는 생성한 후 편집할 수 없습니다.
Create Meter를 클릭합니다.

AI Token Usage Meter name, ai_chat_usage event 및 Sum aggregation이 입력된 meter form

Meter가 생성되었습니다. “AI Token Usage Meter”가 토큰을 계산할 준비가 되었습니다. 다음으로 이를 billing product에 연결합니다.

2단계: API 키 가져오기

앱에 필요한 두 개의 API key를 준비합니다.

Get a Dodo Payments API Key

Dodo Payments dashboard에서 Developer → API Keys로 이동합니다.
Add API Key를 클릭합니다.
API key를 복사합니다.

test mode에서 key를 생성합니다. test mode key는 test mode에서만 작동합니다. Step 5에서 이 key를 .env file에 추가합니다.

Get a Google AI API Key

aistudio.google.com로 이동합니다.
Get API Key를 클릭합니다.
API key를 생성하거나 기존 key를 사용합니다.
key를 복사합니다.

이 key를 비공개로 유지합니다. Step 5에서 이를 .env file에 추가합니다.

3단계: 청구 제품 생성하기

가격을 정의하는 product를 생성합니다. 토큰 1,000개당 $0.01이며 10,000개의 무료 토큰이 제공됩니다. 이 product가 meter를 billing에 연결합니다.

구축할 항목: 무료 tier를 초과한 토큰 사용량에 요금을 부과하는 “AI Chat Service”라는 product입니다.

Navigate to Products

Dodo Payments dashboard의 사이드바에서 Products를 클릭합니다.
Add Product를 클릭합니다.
Pricing Type에서 Usage Based Billing을 선택합니다.

이 pricing type을 사용하면 Dodo Payments는 고정 subscription price 대신 meter usage를 기준으로 청구합니다.

Enter Product Details

필수 세부 정보를 입력합니다:Product Name: → AI Chat ServiceDescription: → AI-powered chat service with automatic token-based billingProduct Image: 관련 이미지를 업로드합니다.

name과 description은 customer invoice에 표시됩니다.

Connect Your Meter

product의 pricing type이 Usage Based Billing인지 확인합니다.Price를 0로 설정하면 base fee 없이 사용량에 대해서만 고객에게 요금이 부과됩니다.그런 다음 생성한 meter를 연결합니다:

Associated Meters section까지 스크롤합니다.
Add meters를 클릭합니다.
dropdown에서 **“AI Token Usage Meter”**를 선택합니다.
product configuration에 meter가 표시되는지 확인합니다.

meter가 product에 연결되었습니다.

Set Your Pricing

토큰당 가격과 무료 tier를 정의합니다:Price per unit: → 0.00001. 토큰당 $0.00001, 즉 토큰 1,000개당 $0.01입니다.Free Threshold: → 10000. 각 고객에게 매월 10,000개의 무료 토큰이 제공됩니다.

Price per unit 및 free threshold가 입력된 AI Chat Service product의 meter pricing

Billing 작동 방식: 한 달에 25,000개의 토큰을 사용한 고객은 15,000개의 토큰에 대해 요금을 지불합니다(25,000 − 10,000 무료). 15,000 × $0.00001 = $0.15입니다.

Save Your Product

설정을 검토합니다:
- Name: AI Chat Service
- Meter: AI Token Usage Meter
- Price: 토큰 1,000개당 $0.01
- Free tier: 토큰 10,000개
Save Changes를 클릭합니다.

Product가 생성되었습니다. Billing이 구성되었으며 고객이 사용한 토큰에 대해 요금이 청구됩니다.

4단계: 테스트 구매하기

Product를 구매하여 test customer를 생성합니다. 앱은 이 customer에 대한 usage event를 전송합니다.

Get Your Payment Link

Dodo Payments dashboard에서 Products로 이동합니다.
“AI Chat Service” product를 찾습니다.
product 옆의 Share를 클릭합니다.
payment link를 복사합니다.

Complete a Test Purchase

새 browser tab에서 payment link를 엽니다.
test payment details를 입력하고 구매를 완료합니다.

payment가 완료되면 구매를 통해 customer가 생성됩니다. 애플리케이션 코드는 해당 customer의 ID를 사용합니다.

Find Your Customer ID

Dodo Payments dashboard로 돌아갑니다.
사이드바에서 Sales → Customers로 이동합니다.
test email address로 생성한 customer를 찾습니다.
customer ID를 복사합니다. ID는 cus_로 시작합니다.

이 customer ID를 저장합니다. 채팅 애플리케이션을 테스트할 때 사용합니다.

5단계: 채팅 애플리케이션 구축하기

billing을 설정하고 test customer를 생성했으므로 채팅 애플리케이션을 구축합니다.

Set Up Your Project

directory를 생성하고 project를 초기화합니다:

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

Install Dependencies

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

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

package.json을 업데이트하여 모듈 유형 및 스크립트를 추가합니다:

package.json

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

Create the Project Structure

source 및 static-file folder를 생성합니다:

mkdir src public

Set Up Environment Variables

project root에 .env file을 생성합니다:

.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

placeholder 값을 Step 2의 API key로 교체합니다. AI SDK의 Google provider는 기본적으로 GOOGLE_GENERATIVE_AI_API_KEY을 읽습니다.

Create the Backend Server

src/server.ts를 생성하고 아래의 server code를 붙여 넣습니다.

billing이 포함된 전체 chat server와 이에 대응하는 .env 및 package.json입니다:

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

6단계: 채팅 인터페이스 추가하기

전체 대화 기록을 유지하는 chat interface를 추가합니다. 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>

7단계: 채팅 애플리케이션 테스트하기

chat app을 처음부터 끝까지 테스트하고 usage가 Dodo Payments에 도달하는지 확인합니다.

테스트할 항목: AI와 채팅하고, token event가 Dodo Payments에 도달하는지 확인하며, billing calculation을 점검합니다.

Start the Server

.env file에 Step 2의 두 API key가 모두 있는지 확인합니다.
development server를 시작합니다:

npm run dev

server log는 다음과 같습니다:

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

server가 실행 중입니다.

Open the Chat Interface

browser를 엽니다.
http://localhost:3000로 이동합니다. chat interface가 로드됩니다.

채팅하기 전에 server.ts의 CUSTOMER_ID를 Step 4의 test customer ID로 설정한 다음 server를 다시 시작합니다.

Have Your First Conversation

다음 메시지를 전송합니다:

“인공지능이란 무엇인가요?”
“머신러닝은 어떻게 작동하나요?”
“신경망을 설명해 주실 수 있나요?”

각 응답에 사용된 토큰 수가 표시됩니다.

AI가 응답하고 token count가 표시되면 앱이 정상적으로 작동하는 것입니다.

Check Your Dodo Payments Dashboard

Dodo Payments가 event를 수신하는지 확인합니다:

Dodo Payments dashboard를 엽니다.
Products → Meters로 이동하여 AI Token Usage Meter를 엽니다.
Events tab을 선택합니다.
목록에서 채팅 event를 찾습니다.

확인할 항목:

Event name: ai_chat_usage
Customer ID: test customer ID

ai_chat_usage event가 나열된 AI Token Usage Meter의 Events tab

목록에는 전송한 각 메시지마다 하나의 event가 있습니다.

Verify Token Counting

메시지를 몇 개 더 전송한 다음 aggregation을 확인합니다:

meter에서 Customers tab을 선택합니다.
test customer를 찾습니다.
Consumed Units column을 확인합니다. 총 사용 토큰 수가 표시됩니다.

test customer의 consumed units를 보여주는 meter의 Customers tab

meter는 모든 event의 totalTokens 값을 합산합니다.

Test the Free Tier

free tier를 초과할 만큼 토큰을 사용합니다:

총 사용량이 약 15,000 token을 넘을 때까지 대화를 몇 차례 더 진행합니다.
meter의 Customers tab을 다시 엽니다.
값을 확인합니다:
- Consumed Units: 15,000+ token
- Chargeable Units: 5,000(10,000 free token 적용)
- Total Price: ~$0.05

free tier 적용 후 consumed units, chargeable units 및 total price를 보여주는 meter의 Customers tab

Usage-based billing이 정상적으로 작동합니다. 고객에게 사용한 토큰에 대한 요금이 청구됩니다.

문제 해결

일반적인 문제와 해결 방법:

Events not appearing in dashboard

가능한 원인:

Event name이 meter configuration과 정확히 일치하지 않음
Customer ID가 account에 존재하지 않음
API key가 유효하지 않거나 만료됨
Network connectivity issues

해결 방법:

event name이 meter와 정확히 일치하는지 확인합니다. 대소문자를 구분합니다: ai_chat_usage.
Dodo Payments dashboard에 customer ID가 존재하는지 확인합니다.
간단한 API call로 API key를 테스트합니다.
server log에서 오류를 확인합니다.

Token counts showing zero

가능한 원인:

Model이 usage information을 반환하지 않음
SDK version이 잘못됨

해결 방법:

model이 usage를 반환하는지 확인합니다:

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

Blueprints package를 업데이트합니다: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

가능한 원인:

API key가 다른 mode에 속함
.env file에 여분의 공백이나 따옴표가 있음

해결 방법:

key는 생성된 mode에서만 작동합니다. DODO_PAYMENTS_ENVIRONMENT=test_mode에는 test mode key를 사용하고, live_mode에는 live mode key를 사용합니다.
.env file의 key 양쪽에 있는 따옴표를 제거합니다.
필요한 경우 새 key를 생성합니다.

도움이 필요하신가요?

축하합니다! AI 채팅 앱을 구축했습니다

토큰 사용량을 추적하고 Dodo Payments를 통해 고객에게 요금을 청구하는 작동하는 AI 채팅 애플리케이션을 완성했습니다.

더 알아보기

LLM Blueprint

LLM Ingestion Blueprint로 LLM token usage를 추적합니다.

Ingestion Blueprints SDK

GitHub repository에서 더 많은 예제를 확인하세요.

Join Community

Discord에서 도움을 받고 프로젝트를 공유하세요.

Integration Guides

Billing Deconstructions

Cookbooks

AI SDK 및 LLM Blueprint로 AI 채팅 앱 구축하기

우리가 구축할 내용

1단계: 사용량 미터기 생성하기

2단계: API 키 가져오기

3단계: 청구 제품 생성하기

4단계: 테스트 구매하기

5단계: 채팅 애플리케이션 구축하기

6단계: 채팅 인터페이스 추가하기

7단계: 채팅 애플리케이션 테스트하기

문제 해결

축하합니다! AI 채팅 앱을 구축했습니다

더 알아보기

LLM Blueprint

Ingestion Blueprints SDK

Join Community

​우리가 구축할 내용

​1단계: 사용량 미터기 생성하기

​2단계: API 키 가져오기

​3단계: 청구 제품 생성하기

​4단계: 테스트 구매하기

​5단계: 채팅 애플리케이션 구축하기

​6단계: 채팅 인터페이스 추가하기

​7단계: 채팅 애플리케이션 테스트하기

​문제 해결

​축하합니다! AI 채팅 앱을 구축했습니다

​더 알아보기

LLM Blueprint

Ingestion Blueprints SDK

Join Community

우리가 구축할 내용

1단계: 사용량 미터기 생성하기

2단계: API 키 가져오기

3단계: 청구 제품 생성하기

4단계: 테스트 구매하기

5단계: 채팅 애플리케이션 구축하기

6단계: 채팅 인터페이스 추가하기

7단계: 채팅 애플리케이션 테스트하기

문제 해결

축하합니다! AI 채팅 앱을 구축했습니다

더 알아보기