How Vercel AI Gateway Tracks Cost and Token Usage in DeskcommCRM

The Vercel AI Gateway automatically injects cost and token metrics into response headers, allowing applications to capture usage data without custom metering infrastructure.

The DeskcommCRM repository implements LLM-driven agents using the Vercel AI Gateway as its serverless runtime. All AI invocations route through the @ai-sdk abstraction, which delegates telemetry entirely to the platform layer. This architecture ensures that every request to models like anthropic/claude-3-5-sonnet arrives with pre-calculated usage statistics attached.

Automatic Header Injection

When the Vercel AI Gateway processes an LLM request, it computes consumption metrics server-side and appends them to the HTTP response. The gateway adds two specific headers that downstream code can inspect:

• x-vercel-ai-token-usage – Total input plus output tokens processed during the request
• x-vercel-ai-cost – Monetary cost calculated from the token count based on the model’s pricing tier

These headers propagate through the @ai-sdk response objects, making them accessible immediately after the call completes. The Vercel dashboard simultaneously aggregates these metrics to provide per-project historical views of total consumption and spending over time.

Reading Metrics in API Routes

The DeskcommCRM application captures usage data directly from gateway responses in its server-side handlers. In app/api/internal/agents/run/route.ts and similar endpoints, the code extracts the headers after invoking the SDK.

import { ai } from '@ai-sdk/core'
import { json } from 'next/headers'

export async function POST(req: Request) {
  const { prompt } = await req.json()

  // Invoke the Vercel AI Gateway via the SDK
  const response = await ai.complete({
    model: 'anthropic/claude-3-5-sonnet',
    prompt,
  })

  // Extract usage headers injected by the gateway
  const tokenUsage = response.headers.get('x-vercel-ai-token-usage')
  const cost = response.headers.get('x-vercel-ai-cost')

  console.log(`Tokens used: ${tokenUsage}, cost: $${cost}`)

  return json({ answer: response.text })
}

The lib/api/wrappers.ts file provides standardized ok() and fail() helpers used across route handlers, ensuring consistent response handling while preserving the gateway’s telemetry headers.

Project Configuration

The repository’s vercel.ts file defines runtime settings for the AI Gateway, such as maximum execution duration for internal agent runners. However, this configuration intentionally contains no custom cost-tracking logic. The tracking responsibility remains entirely within the Vercel platform layer, adhering to the project’s principle of keeping AI telemetry out of application code.

// vercel.ts - Gateway configuration without custom metering
export const config = {
  maxDuration: 60, // Seconds allocated for agent execution
  // No manual token counting or cost calculation implemented here
}

Displaying Usage in the UI

Frontend components retrieve aggregated statistics through dedicated API endpoints that return the header-derived data. A simplified implementation pattern from the codebase appears in components like UsageStats:

import useSWR from 'swr'

export default function UsageStats() {
  const { data } = useSWR('/api/usage', fetcher)

  if (!data) return <p>Loading…</p>

  return (
    <div className="p-4 bg-gray-100 rounded">
      <p>Total tokens used: {data.tokens}</p>
      <p>Total cost: ${data.cost.toFixed(4)}</p>
    </div>
  )
}

The corresponding /api/usage handler queries current totals, which may integrate with the SDK’s usage helpers or dashboard APIs to return the accumulated values captured from previous request headers.

Summary

• Automatic tracking: The Vercel AI Gateway computes token usage and cost for every request without requiring manual instrumentation.
• Header-based access: Applications read x-vercel-ai-token-usage and x-vercel-ai-cost from SDK response objects to capture real-time metrics.
• Zero custom logic: The vercel.ts configuration delegates all telemetry to the platform, keeping the codebase free of metering implementations.
• Dashboard aggregation: Vercel automatically aggregates header data into project-level analytics visible in the platform dashboard.
• SDK integration: The @ai-sdk forwards gateway headers transparently, allowing endpoints in app/api/internal/agents/run/route.ts to log or display consumption immediately.

Frequently Asked Questions

Does the Vercel AI Gateway require manual configuration to track tokens?

No configuration is required. The gateway automatically calculates token counts and costs for every LLM request based on the specific model’s pricing tier. These values appear in response headers without developer intervention, as implemented in the DeskcommCRM repository.

How can I access token usage data in my Next.js API routes?

Extract the values from the response headers after making an SDK call. The @ai-sdk forwards the gateway’s x-vercel-ai-token-usage and x-vercel-ai-cost headers, which you can retrieve using response.headers.get() in route handlers like those found in app/api/internal/agents/run/route.ts.

What is the difference between per-request headers and dashboard aggregates?

Per-request headers provide immediate, granular data for individual API calls, enabling real-time logging or rate-limiting within your application. The Vercel dashboard aggregates these same metrics across all requests to display total project consumption and cumulative spending over customizable time periods.

Why doesn't DeskcommCRM implement custom cost tracking?

The repository follows a platform-first architecture where AI telemetry remains in the infrastructure layer rather than application code. By relying on the Vercel AI Gateway’s built-in headers and dashboard, the project avoids maintenance overhead and accuracy risks associated with manually calculating token costs across different provider pricing models.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}