AI SDK और LLM Blueprint के साथ AI Chat App बनाएँ

इंटीग्रेशन लिखने के लिए अपने coding agent का उपयोग करने हेतु Dodo Agent Plugin इंस्टॉल करें। यह Claude Code, Codex CLI, Cursor, VS Code / GitHub Copilot, Kiro और OpenCode में Dodo Payments skills और MCP servers जोड़ता है।

आप एक AI chat application बनाएँगे जो ग्राहकों द्वारा उपयोग किए गए tokens के लिए बिल करती है। आप billing meter और product बनाते हैं, साथ ही वह application code भी लिखते हैं जो conversations चलाता है और token usage को उसी समय रिपोर्ट करता है।

यह tutorial backend और frontend के साथ एक complete application बनाता है। चैट ऐप Google Gemini का उपयोग करता है, और LLM Blueprint प्रत्येक response के लिए token usage रिपोर्ट करता है, इसलिए आपको स्वयं tokens गिनने की आवश्यकता नहीं है।

पूरा होने पर आपके पास एक chat application होगी जो:

AI SDK के माध्यम से Google Gemini के साथ AI conversations चलाती है।
बिना किसी counting code के token usage को automatically track करती है।
ग्राहकों द्वारा वास्तव में उपयोग किए गए tokens के लिए charge करती है।
ऐसी chat interface शामिल करती है जो conversation history बनाए रखती है।

पूरी हुई AI chat app का chat interface, जिसमें प्रत्येक response के नीचे token counts दिखाई दे रहे हैं

हम क्या बनाएँगे

Chat service इस तरह काम करती है:

Service: AI SDK के माध्यम से Google Gemini के साथ AI chat
Pricing Model: प्रति token भुगतान ($0.01 प्रति 1,000 tokens)
Free Tier: प्रत्येक customer के लिए प्रति माह 10,000 free tokens
Features: Conversation history और automatic token tracking

शुरू करने से पहले आपको चाहिए:

Dodo Payments account।
Google AI API key। Google AI Studio से एक प्राप्त करें।
Node.js 22 या बाद का संस्करण।

Step 1: अपना Usage Meter बनाएँ

AI token usage को track करने के लिए Dodo Payments dashboard में meter बनाएँ।

आप क्या बना रहे हैं: “AI Token Usage Meter” नाम का meter, जो chat conversations में उपयोग किए गए tokens को जोड़ता है।

Open the Meters Section

Dodo Payments dashboard में लॉग इन करें।
Sidebar में Products पर क्लिक करें।
Meters पर क्लिक करें।
Create Meter पर क्लिक करें।

Dodo Payments dashboard का Meters page, जिसमें Create Meter button दिखाई दे रहा है

Meter form खुलता है।

Enter the Meter Details

Chat 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 से match होना चाहिए जिसे application code भेजता है। Event names case-sensitive होते हैं।

Configure How Tokens Are Counted

Aggregation सेट करें, जो यह नियंत्रित करता है कि meter events को किस तरह combine करता है:Aggregation Type: SumOver Property: totalTokensMeasurement Unit: tokens

Sum प्रत्येक chat message से tokens को जोड़ता है। LLM Blueprint प्रत्येक event के metadata में inputTokens, outputTokens और totalTokens भेजता है, और यह meter totalTokens का sum करता है।

Create the Meter

जाँचें कि प्रत्येक setting ऊपर दिए गए values से match करती है। Meter बनाने के बाद आप उसे edit नहीं कर सकते।
Create Meter पर क्लिक करें।

AI Token Usage Meter name, ai_chat_usage event और Sum aggregation से भरा हुआ meter form

Meter बन गया। “AI Token Usage Meter” अब tokens count करने के लिए तैयार है। अब इसे billing product से connect करें।

Step 2: अपनी API Keys प्राप्त करें

ऐप के लिए आवश्यक दो API keys प्राप्त करें।

Get a Dodo Payments API Key

Dodo Payments dashboard में Developer → API Keys पर जाएँ।
Add API Key पर क्लिक करें।
API key कॉपी करें।

Key को test mode में बनाएँ: 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 को private रखें। आप इसे Step 5 में .env file में जोड़ेंगे।

Step 3: अपना Billing Product बनाएँ

Pricing निर्धारित करने वाला product बनाएँ: प्रति 1,000 tokens $0.01, जिसमें 10,000 free tokens हों। Product meter को billing से connect करता है।

आप क्या बना रहे हैं: “AI Chat Service” नाम का product, जो free tier से अधिक token usage के लिए charge करता है।

Navigate to Products

Dodo Payments dashboard में sidebar के Products पर क्लिक करें।
Add Product पर क्लिक करें।
Pricing Type के अंतर्गत Usage Based Billing चुनें।

इस pricing type के साथ Dodo Payments fixed subscription price के बजाय meter usage के आधार पर billing करता है।

Enter Product Details

आवश्यक विवरण भरें:Product Name: → AI Chat ServiceDescription: → AI-powered chat service with automatic token-based billingProduct Image: संबंधित image upload करें।

Name और description customer invoices पर दिखाई देते हैं।

Connect Your Meter

जाँचें कि product का pricing type Usage Based Billing है।Price को 0 पर सेट करें, ताकि customers केवल usage के लिए भुगतान करें और कोई base fee न हो।इसके बाद आपके बनाए हुए meter को link करें:

Associated Meters section तक scroll करें।
Add meters पर क्लिक करें।
Dropdown से “AI Token Usage Meter” चुनें।
Confirm करें कि meter product configuration में दिखाई दे रहा है।

Meter product से connect हो गया है।

Set Your Pricing

Per-token price और free tier निर्धारित करें:Price per unit: → 0.00001। यह प्रति token $0.00001, या प्रति 1,000 tokens $0.01 है।Free Threshold: → 10000। प्रत्येक customer को प्रति माह 10,000 free tokens मिलते हैं।

AI Chat Service product पर meter pricing, जिसमें price per unit और free threshold भरे हुए हैं

Billing कैसे काम करती है: जो customer एक महीने में 25,000 tokens उपयोग करता है, वह 15,000 tokens के लिए भुगतान करता है (25,000 − 10,000 free)। 15,000 × $0.00001 = $0.15।

Save Your Product

Settings की समीक्षा करें:
- Name: AI Chat Service
- Meter: AI Token Usage Meter
- Price: प्रति 1,000 tokens $0.01
- Free tier: 10,000 tokens
Save Changes पर क्लिक करें।

Product बन गया। Billing configure हो गई है और customers द्वारा उपयोग किए गए tokens के लिए उन्हें charge किया जाता है।

Step 4: Test Purchase करें

Product खरीदकर एक test customer बनाएँ। ऐप इस customer के लिए usage events भेजता है।

Get Your Payment Link

Dodo Payments dashboard में Products पर जाएँ।
“AI Chat Service” product खोजें।
Product के पास Share पर क्लिक करें।
Payment link कॉपी करें।

Complete a Test Purchase

Payment link को नए browser tab में खोलें।
test payment details दर्ज करें और purchase पूरा करें।

Payment सफल होने के बाद purchase एक customer बनाता है। Application code उस customer की ID का उपयोग करता है।

Find Your Customer ID

Dodo Payments dashboard पर वापस जाएँ।
Sidebar में Sales → Customers पर जाएँ।
बनाए गए customer को उसके test email address से खोजें।
Customer ID कॉपी करें। यह cus_ से शुरू होती है।

इस customer ID को save करें। Chat application को test करते समय आप इसका उपयोग करेंगे।

Step 5: Chat Application बनाएँ

Billing setup और test customer बनाने के बाद chat application बनाएँ।

Set Up Your Project

एक directory बनाएँ और project initialize करें:

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

Install Dependencies

Packages install करें:

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

module type और scripts जोड़ने के लिए package.json update करें:

package.json

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

Create the Project Structure

Source और static-file folders बनाएँ:

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 values को Step 2 की API keys से replace करें। AI SDK का Google provider default रूप से GOOGLE_GENERATIVE_AI_API_KEY पढ़ता है।

Create the Backend Server

src/server.ts बनाएँ और नीचे दिया गया server code paste करें।

Billing सहित complete chat server, साथ ही matching .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"
  }
}

Step 6: Chat Interface जोड़ें

ऐसा chat interface जोड़ें जो पूरी conversation history बनाए रखे। 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: अपनी Chat Application Test करें

Chat app को end to end test करें और usage को Dodo Payments तक पहुँचते हुए देखें।

आप क्या test कर रहे हैं: आप AI के साथ chat करते हैं, confirm करते हैं कि token events Dodo Payments तक पहुँचते हैं, और billing calculation जाँचते हैं।

Start the Server

जाँचें कि .env file में Step 2 की दोनों API keys हैं।
Development server शुरू करें:

npm run dev

Server logs:

🚀 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 load होती है।

Chat करने से पहले, Step 4 की test customer ID को server.ts में CUSTOMER_ID पर set करें, फिर server restart करें।

Have Your First Conversation

ये messages भेजें:

“Artificial intelligence क्या है?”
“Machine learning कैसे काम करती है?”
“क्या आप neural networks समझा सकते हैं?”

प्रत्येक response में उसके द्वारा उपयोग किए गए tokens की संख्या दिखाई देती है।

यदि AI response देती है और token counts दिखाई देते हैं, तो ऐप काम कर रहा है।

Check Your Dodo Payments Dashboard

Confirm करें कि Dodo Payments को events प्राप्त हो रहे हैं:

Dodo Payments dashboard खोलें।
Products → Meters पर जाएँ और AI Token Usage Meter खोलें।
Events tab चुनें।
List में अपने chat events खोजें।

क्या देखना है:

Event name: ai_chat_usage
Customer ID: आपकी test customer ID

AI Token Usage Meter का Events tab, जिसमें ai_chat_usage events सूचीबद्ध हैं

आपके द्वारा भेजे गए प्रत्येक message के लिए list में एक event है।

Verify Token Counting

कुछ और messages भेजें, फिर aggregation जाँचें:

Meter में Customers tab चुनें।
अपना test customer खोजें।
Consumed Units column जाँचें। इसमें उपयोग किए गए कुल tokens दिखाई देते हैं।

Meter का Customers tab, जिसमें test customer के consumed units दिखाई दे रहे हैं

Meter प्रत्येक event से totalTokens value का sum करता है।

Test the Free Tier

Free tier पार करने के लिए पर्याप्त tokens का उपयोग करें:

कई और conversations करें, जब तक total लगभग 15,000 tokens से अधिक न हो जाए।
Meter का Customers tab फिर से खोलें।
Values जाँचें:
- Consumed Units: 15,000+ tokens
- Chargeable Units: 5,000 (10,000 free tokens लागू)
- Total Price: ~$0.05

Meter का Customers tab, जिसमें free tier के बाद consumed units, chargeable units और total price दिखाई दे रहे हैं

Usage-based billing काम करती है। Customers द्वारा उपयोग किए गए tokens के लिए उन्हें charge किया जाता है।

Troubleshooting

सामान्य समस्याएँ और उनके समाधान:

Events not appearing in dashboard

संभावित कारण:

Event name meter configuration से बिल्कुल match नहीं करता
Customer ID आपके account में मौजूद नहीं है
API key invalid या expired है
Network connectivity issues

समाधान:

जाँचें कि event name meter से बिल्कुल match करता है। यह case-sensitive है: ai_chat_usage।
जाँचें कि customer ID Dodo Payments dashboard में मौजूद है।
Simple API call के साथ API key test करें।
Errors के लिए server logs जाँचें।

Token counts showing zero

संभावित कारण:

Model usage information return नहीं कर रहा है
SDK version गलत है

समाधान:

जाँचें कि model usage return करता है या नहीं:

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

Blueprints package update करें: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

संभावित कारण:

API key दूसरे mode की है।
.env file में extra spaces या quotes हैं।

समाधान:

Key केवल उसी mode में काम करती है जिसमें उसे बनाया गया था। DODO_PAYMENTS_ENVIRONMENT=test_mode के साथ test mode key और live_mode के साथ live mode key का उपयोग करें।
.env file में keys के चारों ओर मौजूद quotes हटाएँ।
आवश्यकता होने पर नई key generate करें।

मदद चाहिए?

बधाई हो! आपने AI Chat App बनाई

अब आपके पास एक working AI chat application है जो token usage track करती है और Dodo Payments के माध्यम से उसके लिए customers को bill करती है।

और जानें

LLM Blueprint

LLM Ingestion Blueprint के साथ LLM token usage track करें।

Ingestion Blueprints SDK

GitHub repository में और examples देखें।

Join Community

Discord पर मदद प्राप्त करें और अपने projects साझा करें।

Integration Guides

Billing Deconstructions

Cookbooks

AI SDK और LLM Blueprint के साथ AI Chat App बनाएँ

हम क्या बनाएँगे

Step 1: अपना Usage Meter बनाएँ

Step 2: अपनी API Keys प्राप्त करें

Step 3: अपना Billing Product बनाएँ

Step 4: Test Purchase करें

Step 5: Chat Application बनाएँ

Step 6: Chat Interface जोड़ें

Step 7: अपनी Chat Application Test करें

Troubleshooting

बधाई हो! आपने AI Chat App बनाई

और जानें

LLM Blueprint

Ingestion Blueprints SDK

Join Community

​हम क्या बनाएँगे

​Step 1: अपना Usage Meter बनाएँ

​Step 2: अपनी API Keys प्राप्त करें

​Step 3: अपना Billing Product बनाएँ

​Step 4: Test Purchase करें

​Step 5: Chat Application बनाएँ

​Step 6: Chat Interface जोड़ें

​Step 7: अपनी Chat Application Test करें

​Troubleshooting

​बधाई हो! आपने AI Chat App बनाई

​और जानें

LLM Blueprint

Ingestion Blueprints SDK

Join Community

हम क्या बनाएँगे

Step 1: अपना Usage Meter बनाएँ

Step 2: अपनी API Keys प्राप्त करें

Step 3: अपना Billing Product बनाएँ

Step 4: Test Purchase करें

Step 5: Chat Application बनाएँ

Step 6: Chat Interface जोड़ें

Step 7: अपनी Chat Application Test करें

Troubleshooting

बधाई हो! आपने AI Chat App बनाई

और जानें