使用AI SDK和LLM Blueprint构建AI聊天应用

让Sentra为您编写集成代码。
在VS Code、Cursor或Windsurf中使用我们的AI助手，只需描述您想要实现的功能，就可以生成SDK/API代码、LLM Blueprint集成代码、webhooks等。试用Sentra：AI驱动的集成 →

在本教程中，您将构建一个具有自动基于使用计费的AI聊天应用程序。我们将从头开始创建所有内容：计费仪表、产品配置以及支持对话的应用代码，并实时跟踪令牌使用情况。

本教程提供了一个完整的工作应用，包括后端和前端。聊天应用使用谷歌的Gemini AI，自动跟踪令牌使用，无需手动计数。

在本教程结束时，您将拥有一个可工作的聊天应用程序，其功能包括：

使用Google Gemini（AI SDK）支持AI对话
自动跟踪令牌使用（无手动代码）
根据实际令牌消耗向客户收费
包含美观的聊天界面

我们正在构建的内容

让我们先了解我们的AI聊天服务：

服务：使用Google Gemini（AI SDK）支持的AI聊天
定价模式：按令牌付费（每1,000个令牌$0.01）
免费层级：每位客户每月10,000个免费令牌
功能：对话历史、自动令牌跟踪

在开始之前，确保您拥有：

一个Dodo Payments账户
一个Google AI API密钥（从aistudio获取）
安装了Node.js v16+

步骤1：创建您的使用计量器

我们将首先在您的Dodo Payments仪表板中创建一个计量器，用于跟踪AI令牌的使用。

我们正在构建的内容：一个名为”AI令牌使用计量器”的计量器，汇总在聊天对话中消耗的所有令牌。

Open the Meters section

登录到您的Dodo Payments仪表板
点击左侧边栏中的产品
点击计量器
点击创建计量器按钮

您应该会看到一个表单，我们将在此配置令牌跟踪。

Fill in the basic meter information

现在我们将输入AI聊天服务的具体细节：计量器名称 → AI Token Usage Meter描述 → Tracks token consumption from AI chat conversations using AI SDK事件名称 → ai_chat_usage

事件名称 ai_chat_usage 必须与我们稍后从应用程序代码发送的内容完全匹配。事件名称区分大小写！

Configure how we count tokens

设置聚合（计量器如何对我们的事件进行计数）：聚合类型：从下拉菜单中选择Sum聚合范围：类型 → totalTokens计量单位：类型 → tokens

我们使用”Sum”是因为我们要将多个聊天消息中消耗的所有令牌相加。SDK会自动在每个事件中发送 totalTokens。

Create your meter

仔细检查您的所有设置是否与上述值匹配
点击创建计量器

计量器已创建！ 您的”AI令牌使用计量器”现在已准备好开始计数令牌。接下来，我们将其连接到计费产品中。

步骤2：获取您的API密钥

在我们构建应用之前，让我们收集所需的API密钥。

Get Dodo Payments API Key

在您的Dodo Payments仪表板中，依次进入开发者 → API密钥
点击创建API密钥
复制API密钥 - 看起来像test_abc123...

保存此API密钥 - 稍后我们将在文件.env中添加它。

Get Google AI API Key

访问 aistudio.google.com
点击获取API密钥
创建新API密钥或使用现有密钥
复制密钥

保管好此密钥 - 我们也将在文件.env中加入它。

步骤3：创建您的计费产品

现在我们需要创建一个定义定价的产品（每1,000个令牌$0.01，含10,000个免费令牌）。这将我们的计量器与实际计费相连接。

我们正在构建的内容：一个名为”AI聊天服务”的产品，基于令牌消耗收费，并有慷慨的免费层级。

Navigate to Products

在您的Dodo Payments仪表板中，点击左侧边栏的产品
点击创建产品
选择基于使用作为产品类型

这告诉Dodo Payments，将根据计量器使用情况收费，而不是固定订阅。

Enter product details

填写必需的详细信息：产品名称: → AI Chat Service描述: → AI-powered chat service with automatic token-based billing产品图片: 上传相关图片

这些将在客户发票上显示，因此要清晰和专业。

Connect your meter

在连接您的计量器之前，请确保您已选择基于使用计费作为产品的价格类型。另外，将固定价格设置为0，以确保客户仅根据其使用情况收费，没有基础费用。现在，链接您刚创建的计量器：

向下滚动到关联计量器部分
点击添加计量器
从下拉列表中选择**“AI令牌使用计量器”**（您之前创建的）
确认其显示在您的产品配置中

您的计量器现已成功连接到此产品。

Set your pricing

这里是我们定义商业模式的地方：每单位价格: 输入 → 0.00001（即每1,000个令牌

0.01或每个令牌

0.00001）免费阈值: 输入 → 10000（客户每月可获得10,000个免费令牌）

计费方式：如果客户在一个月内使用了25,000个令牌，他们将被收取15,000个令牌的费用（25,000 - 10,000免费）= 15,000 ×

0.00001 =

0.15

Save your product

检查您的所有设置：
- 名称：AI聊天服务
- 计量器：AI令牌使用计量器
- 价格：每1,000个令牌$0.01
- 免费层级：10,000个令牌
点击保存更改

产品已创建！ 您的计费现已配置完毕。客户将根据其令牌使用情况自动收费。

步骤4：进行测试购买

在我们开始构建应用之前，让我们通过购买创建一个测试客户。

Get your payment link

在您的Dodo Payments仪表板中，进入产品
找到您的”AI聊天服务”产品
点击产品旁边的分享按钮
复制出现的付款链接

Complete a test purchase

在新的浏览器标签中打开支付链接
输入测试支付详情并完成购买

支付成功后，您将获得一个客户ID，我们将在我们的应用程序代码中使用。

Find your customer ID

回到您的Dodo Payments仪表板
导航到左侧边栏的销售 -> 客户
找到您刚创建的客户（使用测试电子邮件）
复制客户ID - 看起来像cus_123

保存此客户ID - 我们将在测试聊天应用程序时使用它。

步骤5：构建聊天应用程序

现在我们已经完成了计费设置并创建了一个测试客户。让我们构建一个具有自动令牌跟踪的AI聊天应用程序。

Set up your project

创建一个新目录并初始化项目：

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

Install dependencies

安装我们需要的软件包：

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以添加模块类型和脚本：

package.json

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

Create project structure

创建文件夹和文件：

mkdir src public

Set up environment variables

在项目根目录下创建.env文件：

.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

将占位符值替换为您在步骤2中获得的实际API密钥。

Create the backend server

创建src/server.ts并复制完整的服务器代码：

这里是集成了计费的完整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"
  }
}

步骤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>

步骤7：测试您的聊天应用程序

是时候测试我们的AI聊天应用程序，并查看计费是否正常工作！让我们确保整个过程都能顺利运行。

我们正在测试的内容：我们将与AI进行一些对话，验证令牌事件是否到达Dodo Payments，并确认计费计算是否正确。

Start the server

首先，确保一切准备就绪：

验证您的.env文件包含步骤2中的所有API密钥
启动开发服务器：

npm run dev

您应该会看到：

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

服务器正在运行！是时候聊天了。

Open the chat interface

打开浏览器
导航到http://localhost:3000
您应该会看到美观的聊天界面

确保您将文件server.ts中的CUSTOMER_ID更新为步骤4中的实际测试客户ID。

Have your first conversation

让我们测试一下！试试这些消息：

“什么是人工智能？”
“机器学习如何工作？”
“你能解释一下神经网络吗？”

查看每次响应后的令牌使用显示是否更新！

如果您看到AI响应和令牌计数出现，您的应用程序就正常工作了！

Check your Dodo Payments dashboard

现在，让我们验证事件是否被接收：

打开您的Dodo Payments仪表板
进入使用计费 → AI令牌使用计量器
点击事件标签
您应该会看到列出的聊天事件

要查看的内容：

事件名称：ai_chat_usage
客户ID：您的测试客户ID

您应该会看到您发送的每条消息对应一个事件！

Verify token counting

让我们发送更多的消息，检查令牌聚合是否正常工作：

在计量器中，进入客户标签
找到您的测试客户
检查”消耗单位”列 - 它应显示使用的总令牌

计量器正在自动汇总所有totalTokens值！

Test the free tier

让我们使用足够的令牌以超出免费层级：

发起更多对话（目标是总计超过15,000个令牌）
再次检查计量器仪表板中的客户标签
您现在应该会看到：
- 消耗单位：15,000+个令牌
- 可收费单位：5,000（应用10,000免费令牌）
- 总价格：约$0.05

成功！ 您的基于使用的计费工作正常。客户将根据其实际令牌消耗量自动收费。

故障排除

常见问题及解决方案：

Events not appearing in dashboard

可能原因：

事件名称与计量器配置不完全匹配
客户ID在您的账户中不存在
API密钥无效或已过期
网络连接问题

解决方案：

验证事件名称与计量器配置完全匹配（区分大小写：ai_chat_usage）
检查客户ID是否存在于Dodo Payments仪表板中
使用简单API调用测试API密钥
检查服务器日志中的错误消息

Token counts showing zero

可能原因：

模型未返回使用信息
SDK版本不正确

解决方案：

测试模型是否返回使用信息：

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

将LLM Blueprints SDK更新至最新版本：npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

可能原因：

使用了错误的API密钥环境
在文件.env中有多余的空格或引号

解决方案：

确保测试密钥以test_开头，实时密钥以live_开头
删除文件.env中密钥周围的任何引号
如有需要，生成新密钥

需要帮助吗？

恭喜！您已成功构建AI聊天应用

您现在拥有一个功能齐全的AI聊天应用程序，具备由Dodo Payments支持的自动令牌使用跟踪和计费功能。🎉

Integration Guides

Billing Deconstructions

Cookbooks

使用AI SDK和LLM Blueprint构建AI聊天应用

我们正在构建的内容

步骤1：创建您的使用计量器

步骤2：获取您的API密钥

步骤3：创建您的计费产品

步骤4：进行测试购买

步骤5：构建聊天应用程序

步骤6：添加聊天界面

步骤7：测试您的聊天应用程序

故障排除

恭喜！您已成功构建AI聊天应用

了解更多

​我们正在构建的内容

​步骤1：创建您的使用计量器

​步骤2：获取您的API密钥

​步骤3：创建您的计费产品

​步骤4：进行测试购买

​步骤5：构建聊天应用程序

​步骤6：添加聊天界面

​步骤7：测试您的聊天应用程序

​故障排除

​恭喜！您已成功构建AI聊天应用

​了解更多

我们正在构建的内容

步骤1：创建您的使用计量器

步骤2：获取您的API密钥

步骤3：创建您的计费产品

步骤4：进行测试购买

步骤5：构建聊天应用程序

步骤6：添加聊天界面

步骤7：测试您的聊天应用程序

故障排除

恭喜！您已成功构建AI聊天应用

了解更多