AI SDKとLLM BlueprintでAIチャットアプリを構築する

Sentraにインテグレーションコードを作成してもらいましょう。
VS Code、Cursor、またはWindsurfでAIアシスタントを使用すると、作成したいものを説明するだけで、SDK/APIコード、LLM Blueprintインテグレーションコード、webhooksなどを生成できます。Sentraを試す：AIを活用したインテグレーション →

このチュートリアルでは、自動的な使用量ベースの課金に対応したAIチャットアプリケーションを構築します。ゼロからすべてを作成します。課金メーター、製品設定、会話を処理し、トークン使用量をリアルタイムで追跡するアプリケーションコードを用意します。

このチュートリアルでは、backendとfrontendの両方を含む完全に動作するアプリケーションを作成します。チャットアプリはGoogleのGemini AIを使用し、手動でカウントすることなくトークン使用量を自動的に追跡します。

このチュートリアルを終えると、次の機能を備えた動作するチャットアプリケーションが完成します。

Google Gemini（AI SDK）を使用したAI会話
トークン使用量の自動追跡（手動コード不要）
実際のトークン消費量に基づく顧客への課金
美しいチャットインターフェース

構築するもの

まず、AIチャットサービスの概要を確認しましょう。

サービス: Google Gemini（AI SDK）を使用したAI搭載チャット
料金モデル: トークン単位の従量課金（1,000トークンあたり$0.01）
無料枠: 顧客1人あたり月10,000トークンまで無料
機能: 会話履歴、自動トークン追跡

始める前に、次のものを用意してください。

A Dodo Payments account
Google AI API key（aistudioから取得）
Node.js v16+ installed

Step 1: 使用量メーターを作成する

まず、AIトークン使用量を追跡するメーターを、Dodo Payments dashboardに作成します。

構築するもの: チャット会話で消費されたすべてのトークンを合計する「AI Token Usage Meter」という名前のメーター。

Open the Meters section

Dodo Payments dashboardにログインします
左サイドバーのProductsをクリックします
Metersをクリックします
Create Meterボタンをクリックします

トークン追跡を設定するフォームが表示されます。

Fill in the basic meter information

ここで、AIチャットサービスの詳細を入力します。Meter Name → AI Token Usage MeterDescription → Tracks token consumption from AI chat conversations using AI SDKEvent Name → ai_chat_usage

イベント名ai_chat_usageは、後ほどアプリケーションコードから送信する値と完全に一致している必要があります。イベント名では大文字と小文字が区別されます。

Configure how we count tokens

集計（メーターがイベントをカウントする方法）を設定します。Aggregation Type: ドロップダウンからSumを選択しますAggregate Over: Type → totalTokensMeasurement Unit: Type → tokens

複数のチャットメッセージで消費されたすべてのトークンを合計するため、「Sum」を使用します。SDKは各イベントでtotalTokensを自動的に送信します。

Create your meter

すべての設定が上記の値と一致していることを再確認します
Create Meterをクリックします

メーターが作成されました。「AI Token Usage Meter」でトークンのカウントを開始できます。次に、これをbilling productに接続します。

Step 2: APIキーを取得する

アプリを構築する前に、必要なAPIキーを準備しましょう。

Get Dodo Payments API Key

Dodo Payments dashboardでDevelopers → API Keysに移動します
Create API Keyをクリックします
APIキーをコピーします。形式はtest_abc123...のようになります

このAPIキーを保存します。後ほど.env fileに追加します。

Get Google AI API Key

aistudio.google.comにアクセスします
Get API Keyをクリックします
新しいAPIキーを作成するか、既存のキーを使用します
キーをコピーします

このキーを安全に保管します。こちらも.env fileに追加します。

Step 3: billing productを作成する

次に、料金（1,000トークンあたり$0.01、無料トークン10,000）を定義するproductを作成します。これにより、メーターが実際の課金に接続されます。

構築するもの: トークン消費量に基づいて課金し、十分な無料枠を提供する「AI Chat Service」というproduct。

Navigate to Products

Dodo Payments dashboardで左サイドバーのProductsをクリックします
Create Productをクリックします
product typeとしてUsage-Basedを選択します

これは、固定サブスクリプションではなく、メーターの使用量に基づいて課金することをDodo Paymentsに伝える設定です。

Enter product details

必要な詳細を入力します。Product Name: → AI Chat ServiceDescription: → AI-powered chat service with automatic token-based billingProduct Image: 関連する画像をアップロードします

これらは顧客のinvoiceに表示されるため、明確でプロフェッショナルな内容にしてください。

Connect your meter

メーターを接続する前に、productのprice typeとしてUsage Based Billingが選択されていることを確認してください。さらに、基本料金なしで使用量に基づいてのみ顧客に課金されるよう、Fixed Priceを0に設定します。次に、作成したメーターをリンクします。

Associated Meterセクションまでスクロールします
Add Metersをクリックします
ドロップダウンから**「AI Token Usage Meter」**（先ほど作成したメーター）を選択します
product configurationに表示されていることを確認します

メーターがこのproductに正常に接続されました。

Set your pricing

ここでビジネスモデルを定義します。Price Per Unit: → 0.00001を入力します（1,000トークンあたり

0.01、または1トークンあたり

0.00001）Free Threshold: → 10000を入力します（顧客は月10,000トークンまで無料）

課金の仕組み: 顧客が1か月に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が作成されました。**課金の設定が完了しました。顧客にはトークン使用量に基づいて自動的に課金されます。

Step 4: テスト購入を行う

アプリの構築を始める前に、購入を行ってテスト顧客を作成しましょう。

Get your payment link

Dodo Payments dashboardでProductsに移動します
「AI Chat Service」productを見つけます
productの横にあるShareボタンをクリックします
表示されたpayment linkをコピーします

Complete a test purchase

新しいブラウザタブでpayment linkを開きます
テスト用のpayment detailsを入力し、購入を完了します

支払いが正常に完了すると、アプリケーションコードで使用するcustomer IDが取得できます。

Find your customer ID

Dodo Payments dashboardに戻ります
左サイドバーでSales -> Customersに移動します
作成した顧客（テスト用メールアドレス）を見つけます
customer IDをコピーします。形式はcus_123のようになります

このcustomer IDを保存します。チャットアプリケーションのテストで使用します。

Step 5: チャットアプリケーションを構築する

billing setupが完了し、テスト顧客も作成できました。次に、自動トークン追跡機能を備えたAIチャットアプリケーションを構築します。

Set up your project

新しいdirectoryを作成し、projectを初期化します。

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

Install dependencies

必要なpackagesをインストールします。

npm install express ai @ai-sdk/google @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を更新して、module typeとscriptsを追加します。

package.json

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

Create project structure

foldersとfilesを作成します。

mkdir src public

Set up environment variables

project rootに.env fileを作成します。

.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

プレースホルダーの値をStep 2で取得した実際のAPIキーに置き換えます。

Create the backend server

src/server.tsを作成し、この完全なserver codeをコピーします。

billingを統合した完全なAIチャットサーバーは次のとおりです。

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

Step 6: チャットインターフェースを追加する

完全な会話履歴に対応した、美しいチャットインターフェースを追加しましょう。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>

Step 7: チャットアプリケーションをテストする

AIチャットアプリをテストし、billingが実際に動作することを確認しましょう。すべてがエンドツーエンドで機能することを確認します。

テストするもの: AIと会話し、トークンイベントがDodo Paymentsに届いていることを確認し、課金計算が正しいことを検証します。

Start the server

まず、すべてが設定されていることを確認します。

.env fileにStep 2のAPIキーがすべて入っていることを確認します
development serverを起動します。

npm run dev

次のように表示されます。

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

serverが起動しました。チャットを始めましょう。

Open the chat interface

ブラウザを開きます
http://localhost:3000に移動します
美しいチャットインターフェースが表示されます

server.tsのCUSTOMER_IDを、Step 4で取得した実際のテスト用customer IDに更新してください。

Have your first conversation

テストしてみましょう。次のメッセージを試してください。

「人工知能とは何ですか？」
「機械学習はどのように機能しますか？」
「ニューラルネットワークについて説明してもらえますか？」

各レスポンスの後にトークン使用量の表示が更新されることを確認してください。

AIが応答し、トークン数が表示されれば、アプリは正常に動作しています。

Check your Dodo Payments dashboard

次に、イベントが受信されていることを確認します。

Dodo Payments dashboardを開きます
Usage Billing → AI Token Usage Meterに移動します
Eventsタブをクリックします
チャットイベントが一覧に表示されていることを確認します

確認する項目:

Event names: ai_chat_usage
Customer ID: テスト用customer id

送信した各メッセージにつき1件のイベントが表示されます。

Verify token counting

さらにメッセージを送信し、トークンの集計が機能しているか確認しましょう。

メーターでCustomersタブに移動します
テスト用customerを見つけます
「Consumed Units」列を確認します。使用したトークンの合計が表示されます

メーターがすべてのtotalTokensの値を自動的に合計しています。

Test the free tier

無料枠を超えるのに十分なトークンを使用してみましょう。

さらに複数回会話します（合計約15,000以上のトークンを目指します）
メーターdashboardのCustomersタブをもう一度確認します
次のように表示されます。
- Consumed Units: 15,000以上のトークン
- Chargeable Units: 5,000（無料10,000トークンを適用）
- Total Price: 約$0.05

**成功です。**使用量ベースの課金が正常に機能しています。顧客には実際のトークン消費量に基づいて自動的に課金されます。

トラブルシューティング

よくある問題と解決方法：

Events not appearing in dashboard

考えられる原因:

イベント名がメーター設定と完全には一致していない
customer IDがアカウントに存在しない
APIキーが無効または期限切れ
ネットワーク接続の問題

解決方法:

イベント名がメーター設定と完全に一致していることを確認します（大文字と小文字を区別: ai_chat_usage）
customer IDがDodo Payments dashboardに存在することを確認します
簡単なAPI callでAPIキーをテストします
server logsでエラーメッセージを確認します

Token counts showing zero

考えられる原因:

modelがusage informationを返していない
SDK versionが正しくない

解決方法:

modelがusageを返すかテストします。

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

最新のBlueprints SDKに更新します: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

考えられる原因:

environmentに対してAPIキーが間違っている
.env fileに余分なスペースまたは引用符がある

解決方法:

test keyがtest_で始まり、live keyがlive_で始まることを確認します
.env file内のキーを囲む引用符を削除します
必要に応じて新しいキーを生成します

サポートが必要ですか？

おめでとうございます。AIチャットアプリを構築しました

これで、Dodo Paymentsを利用した、自動トークン使用量追跡とbillingに対応する、完全に機能するAIチャットアプリケーションが完成しました。🎉

詳細情報

LLM Blueprint

LLM Ingestion Blueprintの詳細を見る

Ingestion Blueprints SDK

さらに詳しい例についてはGitHub repositoryをご覧ください

Join Community

Discordでサポートを受けたり、プロジェクトを共有したりできます

Integration Guides

Billing Deconstructions

Cookbooks

AI SDKとLLM BlueprintでAIチャットアプリを構築する

構築するもの

Step 1: 使用量メーターを作成する

Step 2: APIキーを取得する

Step 3: billing productを作成する

Step 4: テスト購入を行う

Step 5: チャットアプリケーションを構築する

Step 6: チャットインターフェースを追加する

Step 7: チャットアプリケーションをテストする

トラブルシューティング

おめでとうございます。AIチャットアプリを構築しました

詳細情報

LLM Blueprint

Ingestion Blueprints SDK

Join Community

​構築するもの

​Step 1: 使用量メーターを作成する

​Step 2: APIキーを取得する

​Step 3: billing productを作成する

​Step 4: テスト購入を行う

​Step 5: チャットアプリケーションを構築する

​Step 6: チャットインターフェースを追加する

​Step 7: チャットアプリケーションをテストする

​トラブルシューティング

​おめでとうございます。AIチャットアプリを構築しました

​詳細情報

LLM Blueprint

Ingestion Blueprints SDK

Join Community

構築するもの

Step 1: 使用量メーターを作成する

Step 2: APIキーを取得する

Step 3: billing productを作成する

Step 4: テスト購入を行う

Step 5: チャットアプリケーションを構築する

Step 6: チャットインターフェースを追加する

Step 7: チャットアプリケーションをテストする

トラブルシューティング

おめでとうございます。AIチャットアプリを構築しました

詳細情報