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

Sentra को आपके लिए integration code लिखने दें।
SDK/API code, LLM Blueprint integration code, webhooks और बहुत कुछ generate करने के लिए VS Code, Cursor या Windsurf में हमारे AI assistant का उपयोग करें—बस बताएँ कि आपको क्या चाहिए।Sentra आज़माएँ: AI-Powered Integration →

इस tutorial में आप automatic usage-based billing वाला एक AI chat application बनाएँगे। हम सब कुछ शुरू से बनाएँगे: billing meter, product configuration और वह application code जो conversations को संचालित करता है तथा real-time में token usage track करता है।

यह tutorial backend और frontend दोनों के साथ एक complete working application प्रदान करता है। chat app Google के Gemini AI का उपयोग करता है और बिना किसी manual counting के token usage को automatically track करता है।

इस tutorial के अंत तक आपके पास एक working chat application होगा, जो:

Google Gemini (AI SDK) का उपयोग करके AI conversations संचालित करता है
token usage को automatically track करता है (किसी manual code की आवश्यकता नहीं)
actual token consumption के आधार पर customers से charge करता है
एक सुंदर chat interface शामिल करता है

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

पहले अपनी AI chat service को समझते हैं:

Service: Google Gemini (AI SDK) का उपयोग करने वाली AI-powered chat
Pricing Model: Pay-per-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 (aistudio से प्राप्त करें)
Node.js v16+ installed

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

हम आपके Dodo Payments dashboard में एक meter बनाकर शुरू करेंगे, जो AI token usage को track करेगा।

हम क्या बना रहे हैं: “AI Token Usage Meter” नाम का एक meter, जो chat conversations में consume हुए सभी tokens का योग करेगा।

Open the Meters section

अपने Dodo Payments dashboard में log in करें
बाएँ sidebar में Products पर click करें
Meters पर click करें
Create Meter button पर click करें

आपको एक form दिखाई देगा, जहाँ हम अपना token tracking configure करेंगे।

Fill in the basic meter information

अब अपनी AI chat service के specific details दर्ज करें: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 बाद में application code से भेजे जाने वाले नाम से exactly match होना चाहिए। Event names case-sensitive होते हैं!

Configure how we count tokens

Aggregation सेट करें (meter हमारे events को कैसे count करेगा):Aggregation Type: dropdown से Sum चुनेंAggregate Over: Type → totalTokensMeasurement Unit: Type → tokens

हम “Sum” का उपयोग कर रहे हैं क्योंकि हम अनेक chat messages में consume हुए सभी tokens को जोड़ना चाहते हैं। SDK प्रत्येक event में automatically totalTokens भेजता है।

Create your meter

जाँच लें कि आपकी सभी settings ऊपर दिए गए values से match करती हैं
Create Meter पर click करें

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

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

App बनाने से पहले आवश्यक API keys एकत्र करते हैं।

Get Dodo Payments API Key

अपने Dodo Payments dashboard में Developers → API Keys पर जाएँ
Create API Key पर click करें
API key copy करें—यह test_abc123... जैसी दिखाई देगी

इस API key को save करें—हम इसे बाद में अपनी .env file में जोड़ेंगे।

Get Google AI API Key

aistudio.google.com पर जाएँ
Get API Key पर click करें
नई API key बनाएँ या मौजूदा key का उपयोग करें
Key copy करें

इस key को सुरक्षित रखें—हम इसे भी अपनी .env file में जोड़ेंगे।

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

अब हमें ऐसा product बनाना है जो हमारी pricing ($0.01 प्रति 1,000 tokens और 10,000 free tokens) define करे। इससे हमारा meter actual billing से connect होगा।

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

Navigate to Products

अपने Dodo Payments dashboard में बाएँ sidebar के Products पर click करें
Create Product पर click करें
Product type के रूप में Usage-Based चुनें

इससे Dodo Payments को पता चलता है कि billing meter usage पर आधारित होगी, fixed subscription पर नहीं।

Enter product details

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

ये customer invoices पर दिखाई देंगे, इसलिए इन्हें स्पष्ट और professional रखें।

Connect your meter

Meter connect करने से पहले सुनिश्चित करें कि आपने अपने product के price type के रूप में Usage Based Billing चुना है।इसके अतिरिक्त, Fixed Price को 0 पर set करें, ताकि customers से केवल उनके usage के आधार पर charge हो और कोई base fee न हो।अब आपके द्वारा बनाए गए meter को link करें:

नीचे scroll करके Associated Meter section पर जाएँ
Add Meters पर click करें
dropdown से “AI Token Usage Meter” चुनें (जिसे आपने पहले बनाया था)
पुष्टि करें कि यह आपके product configuration में दिखाई दे रहा है

आपका meter अब इस product से successfully connect हो गया है।

Set your pricing

यहाँ हम अपना business model define करते हैं:Price Per Unit: → 0.00001 दर्ज करें (यह 1,000 tokens के लिए

0.01 या प्रति token

0.00001 है)Free Threshold: → 10000 दर्ज करें (customers को प्रति माह 10,000 free tokens मिलेंगे)

Billing कैसे काम करती है: यदि कोई customer एक महीने में 25,000 tokens का उपयोग करता है, तो उससे 15,000 tokens (25,000 - 10,000 free) के लिए charge लिया जाएगा = 15,000 ×

0.00001 =

0.15

Save your product

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

Product बन गया! आपकी billing अब configure हो चुकी है। Customers से उनके token usage के आधार पर automatically charge लिया जाएगा।

Step 4: Test Purchase करें

App बनाना शुरू करने से पहले purchase करके एक test customer बनाएँ।

Get your payment link

अपने Dodo Payments dashboard में Products पर जाएँ
अपना “AI Chat Service” product खोजें
Product के पास Share button पर click करें
दिखाई देने वाले payment link को copy करें

Complete a test purchase

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

Successful payment के बाद आपको एक customer ID मिलेगी, जिसका उपयोग हम अपने application code में करेंगे।

Find your customer ID

अपने Dodo Payments dashboard पर वापस जाएँ
बाएँ sidebar में Sales -> Customers पर जाएँ
अभी बनाए गए customer को खोजें (test email वाला)
Customer ID copy करें—यह cus_123 जैसी दिखाई देगी

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

Step 5: Chat Application बनाएँ

अब हमारा billing setup complete है और एक test customer भी बनाया जा चुका है। अब automatic token tracking वाली AI 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 @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"]
}

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

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

Placeholder values को Step 2 से प्राप्त अपनी actual API keys से replace करें।

Create the backend server

src/server.ts बनाएँ और यह complete server code copy करें:

यह integrated billing वाला complete AI chat server है:

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: Chat Interface जोड़ें

अब full conversation history वाला सुंदर 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>

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

अब अपनी AI chat app को test करने और billing को action में देखने का समय है! सुनिश्चित करें कि सब कुछ end-to-end काम कर रहा है।

हम क्या test कर रहे हैं: हम AI के साथ कुछ conversations करेंगे, verify करेंगे कि token events Dodo Payments तक पहुँच रहे हैं, और पुष्टि करेंगे कि billing calculations सही हैं।

Start the server

पहले सुनिश्चित करें कि सब कुछ set up है:

Verify करें कि आपकी .env file में Step 2 की सभी API keys हैं
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 चल रहा है! अब chat करने का समय है।

Open the chat interface

अपना browser खोलें
http://localhost:3000 पर जाएँ
आपको सुंदर chat interface दिखाई देना चाहिए

सुनिश्चित करें कि server.ts में CUSTOMER_ID को Step 4 की अपनी actual test customer ID से update करें।

Have your first conversation

इसे test करते हैं! ये messages आज़माएँ:

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

हर response के बाद token usage display को update होते देखें!

यदि आपको AI का response और token counts दिखाई दे रहे हैं, तो आपका app काम कर रहा है!

Check your Dodo Payments dashboard

अब verify करते हैं कि events receive हो रहे हैं:

अपना Dodo Payments dashboard खोलें
Usage Billing → AI Token Usage Meter पर जाएँ
Events tab पर click करें
आपको अपने chat events की सूची दिखाई देनी चाहिए

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

Event names: ai_chat_usage
Customer ID: आपकी test customer id

आपके द्वारा भेजे गए प्रत्येक message के लिए एक event दिखाई देना चाहिए!

Verify token counting

कुछ और messages भेजकर जाँचें कि token aggregation काम कर रही है:

अपने meter में Customers tab पर जाएँ
अपना test customer खोजें
“Consumed Units” column देखें—इसमें उपयोग किए गए total tokens दिखाई देने चाहिए

Meter सभी totalTokens values का योग automatically कर रहा है!

Test the free tier

Free tier से अधिक tokens का उपयोग करें:

कई और conversations करें (कुल ~15,000+ tokens का लक्ष्य रखें)
Meter dashboard में अपने Customers tab को फिर से देखें
अब आपको यह दिखाई देना चाहिए:
- Consumed Units: 15,000+ tokens
- Chargeable Units: 5,000 (10,000 free tokens लागू)
- Total Price: ~$0.05

सफलता! आपकी usage-based billing पूरी तरह काम कर रही है। Customers से उनके actual token consumption के आधार पर automatically charge लिया जाएगा।

Troubleshooting

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

Events not appearing in dashboard

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

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

Solutions:

Verify करें कि event name meter configuration से exactly match करता है (case-sensitive: ai_chat_usage)
जाँचें कि customer ID Dodo Payments dashboard में मौजूद है
Simple API call से API key test करें
Error messages के लिए server logs देखें

Token counts showing zero

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

Model usage information return नहीं कर रहा
Incorrect SDK version

Solutions:

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

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

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

API key invalid error

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

Environment के लिए गलत API key
.env file में extra spaces या quotes

Solutions:

सुनिश्चित करें कि test key test_ से शुरू होती है और live key live_ से
.env file में keys के आसपास के quotes हटाएँ
आवश्यकता होने पर नई key generate करें

मदद चाहिए?

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

अब आपके पास Dodo Payments द्वारा powered automatic token usage tracking और billing वाला एक fully functional AI chat application है। 🎉

और जानें

LLM Blueprint

LLM Ingestion Blueprint के बारे में और जानें

Ingestion Blueprints SDK

अधिक examples के लिए GitHub repository देखें

Join Community

Discord पर मदद पाएँ और अपने projects share करें

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 बना लिया

और जानें