Add AI analytics page with token usage chart and summary stats

Co-authored-by: joaquim.verges <[email protected]>

Author: cursoragent

apps/dashboard/src/@/api/analytics.ts

@@ -4,6 +4,7 @@ import { unstable_cache } from "next/cache";
 import { ANALYTICS_SERVICE_URL } from "@/constants/server-envs";
 import { normalizeTime } from "@/lib/time";
 import type {
+  AIUsageStats,
   AnalyticsQueryParams,
   EcosystemWalletStats,
   EngineCloudStats,
@@ -204,6 +205,44 @@ export function getInAppWalletUsage(
   return cached_getInAppWalletUsage(normalizedParams(params), authToken);
 }
 
+const cached_getAiUsage = unstable_cache(
+  async (
+    params: AnalyticsQueryParams,
+    authToken: string,
+  ): Promise<AIUsageStats[]> => {
+    const searchParams = buildSearchParams(params);
+    const res = await fetchAnalytics({
+      authToken,
+      url: `v2/nebula/usage?${searchParams.toString()}`,
+      init: {
+        method: "GET",
+      },
+    });
+
+    if (res?.status !== 200) {
+      const reason = await res?.text();
+      console.error(
+        `Failed to fetch AI usage, ${res?.status} - ${res.statusText} - ${reason}`,
+      );
+      return [];
+    }
+
+    const json = await res.json();
+    return json.data as AIUsageStats[];
+  },
+  ["getAiUsage"],
+  {
+    revalidate: 60 * 60, // 1 hour
+  },
+);
+
+export function getAiUsage(
+  params: AnalyticsQueryParams,
+  authToken: string,
+) {
+  return cached_getAiUsage(normalizedParams(params), authToken);
+}
+
 const cached_getUserOpUsage = unstable_cache(
   async (
     params: AnalyticsQueryParams,

apps/dashboard/src/@/types/analytics.ts

@@ -78,6 +78,14 @@ export interface WebhookSummaryStats {
   errorBreakdown: Record<string, number>;
 }
 
+export interface AIUsageStats {
+  date: string;
+  totalPromptTokens: number;
+  totalCompletionTokens: number;
+  totalSessions: number;
+  totalRequests: number;
+}
+
 export interface AnalyticsQueryParams {
   teamId: string;
   projectId?: string;

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/chart/AiTokenUsageChartCard.tsx

@@ -0,0 +1,116 @@
+"use client";
+import { format } from "date-fns";
+import { useMemo } from "react";
+import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
+import { DocLink } from "@/components/blocks/DocLink";
+import { ExportToCSVButton } from "@/components/blocks/ExportToCSVButton";
+import type { ChartConfig } from "@/components/ui/chart";
+import { ReactIcon } from "@/icons/brand-icons/ReactIcon";
+import { TypeScriptIcon } from "@/icons/brand-icons/TypeScriptIcon";
+import type { AIUsageStats } from "@/types/analytics";
+
+type ChartData = {
+  time: string; // human readable date
+  tokens: number;
+};
+
+export function AiTokenUsageChartCardUI(props: {
+  aiUsageStats: AIUsageStats[];
+  isPending: boolean;
+  title: string;
+  description: string;
+}) {
+  const { aiUsageStats } = props;
+
+  const { chartConfig, chartData } = useMemo(() => {
+    const _chartConfig: ChartConfig = {
+      tokens: {
+        color: "hsl(var(--chart-1))",
+        label: "Tokens",
+      },
+    };
+
+    const _chartData: ChartData[] = aiUsageStats.map((stat) => ({
+      time: stat.date,
+      tokens: stat.totalPromptTokens + stat.totalCompletionTokens,
+    }));
+
+    return {
+      chartConfig: _chartConfig,
+      chartData: _chartData.sort(
+        (a, b) => new Date(a.time).getTime() - new Date(b.time).getTime(),
+      ),
+    };
+  }, [aiUsageStats]);
+
+  const disableActions =
+    props.isPending ||
+    chartData.length === 0 ||
+    chartData.every((data) => data.tokens === 0);
+
+  return (
+    <ThirdwebBarChart
+      chartClassName="aspect-[1.5] lg:aspect-[3.5]"
+      config={chartConfig}
+      customHeader={
+        <div className="relative px-6 pt-6">
+          <h3 className="mb-0.5 font-semibold text-xl tracking-tight">
+            {props.title}
+          </h3>
+          <p className="mb-3 text-muted-foreground text-sm">
+            {props.description}
+          </p>
+
+          <ExportToCSVButton
+            className="top-6 right-6 mb-4 w-full bg-background md:absolute md:mb-0 md:flex md:w-auto"
+            disabled={disableActions}
+            fileName="AI Token Usage"
+            getData={async () => {
+              const header = ["Date", "Tokens"];
+              const rows = chartData.map((data) => [
+                data.time,
+                data.tokens.toString(),
+              ]);
+              return { header, rows };
+            }}
+          />
+        </div>
+      }
+      data={chartData}
+      emptyChartState={<AiTokenUsageEmptyChartState />}
+      hideLabel={false}
+      isPending={props.isPending}
+      showLegend={false}
+      toolTipLabelFormatter={(_v, item) => {
+        if (Array.isArray(item)) {
+          const time = item[0].payload.time as string;
+          return format(new Date(time), "MMM d, yyyy");
+        }
+        return undefined;
+      }}
+      variant="default"
+    />
+  );
+}
+
+function AiTokenUsageEmptyChartState() {
+  return (
+    <div className="flex flex-col items-center justify-center px-4">
+      <span className="mb-6 text-center text-lg">
+        Start using AI to interact with any EVM chain
+      </span>
+      <div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
+        <DocLink
+          icon={TypeScriptIcon}
+          label="TypeScript"
+          link="https://portal.thirdweb.com/ai/chat"
+        />
+        <DocLink
+          icon={ReactIcon}
+          label="React"
+          link="https://portal.thirdweb.com/ai/chat"
+        />
+      </div>
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/chart/Summary.tsx

@@ -0,0 +1,94 @@
+import { ActivityIcon, MessageSquareIcon, CoinsIcon } from "lucide-react";
+import { Suspense } from "react";
+import { getAiUsage } from "@/api/analytics";
+import type { Range } from "@/components/analytics/date-range-selector";
+import { StatCard } from "@/components/analytics/stat";
+import type { AIUsageStats } from "@/types/analytics";
+
+function AiSummaryInner(props: {
+  stats: AIUsageStats[] | undefined;
+  isPending: boolean;
+}) {
+  const totalRequests = props.stats?.reduce((acc, curr) => {
+    return acc + curr.totalRequests;
+  }, 0);
+
+  const totalSessions = props.stats?.reduce((acc, curr) => {
+    return acc + curr.totalSessions;
+  }, 0);
+
+  const totalTokens = props.stats?.reduce((acc, curr) => {
+    return acc + curr.totalPromptTokens + curr.totalCompletionTokens;
+  }, 0);
+
+  return (
+    <div className="grid grid-cols-3 gap-4">
+      <StatCard
+        icon={ActivityIcon}
+        isPending={props.isPending}
+        label="Requests"
+        value={totalRequests || 0}
+      />
+      <StatCard
+        icon={MessageSquareIcon}
+        isPending={props.isPending}
+        label="Sessions"
+        value={totalSessions || 0}
+      />
+      <StatCard
+        icon={CoinsIcon}
+        isPending={props.isPending}
+        label="Tokens"
+        value={totalTokens || 0}
+      />
+    </div>
+  );
+}
+
+async function AsyncAiSummary(props: {
+  teamId: string;
+  projectId: string;
+  authToken: string;
+  range: Range;
+}) {
+  const { teamId, projectId, authToken, range } = props;
+  const aggregatedStatsPromise = getAiUsage(
+    {
+      from: range.from,
+      period: "all",
+      projectId,
+      teamId,
+      to: range.to,
+    },
+    authToken,
+  );
+
+  const aggregatedStats = await aggregatedStatsPromise.catch(() => null);
+
+  return (
+    <AiSummaryInner
+      stats={aggregatedStats || undefined}
+      isPending={false}
+    />
+  );
+}
+
+export function AiSummary(props: {
+  teamId: string;
+  projectId: string;
+  authToken: string;
+  range: Range;
+}) {
+  return (
+    <Suspense
+      fallback={<AiSummaryInner stats={undefined} isPending={true} />}
+    >
+      <AsyncAiSummary
+        projectId={props.projectId}
+        teamId={props.teamId}
+        authToken={props.authToken}
+        range={props.range}
+      />
+    </Suspense>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/chart/index.tsx

@@ -0,0 +1,80 @@
+import { ResponsiveSuspense } from "responsive-rsc";
+import { getAiUsage } from "@/api/analytics";
+import {
+  getLastNDaysRange,
+  type Range,
+} from "@/components/analytics/date-range-selector";
+import type { AIUsageStats } from "@/types/analytics";
+import { AiTokenUsageChartCardUI } from "./AiTokenUsageChartCard";
+
+type AiAnalyticsProps = {
+  interval: "day" | "week";
+  range: Range;
+  stats: AIUsageStats[];
+  isPending: boolean;
+};
+
+function AiAnalyticsUI({
+  stats,
+  isPending,
+}: AiAnalyticsProps) {
+  return (
+    <AiTokenUsageChartCardUI
+      title="Token Usage"
+      description="The total number of tokens used for AI interactions on your project."
+      aiUsageStats={stats || []}
+      isPending={isPending}
+    />
+  );
+}
+
+type AsyncAiAnalyticsProps = Omit<
+  AiAnalyticsProps,
+  "stats" | "isPending"
+> & {
+  teamId: string;
+  projectId: string;
+  authToken: string;
+};
+
+async function AsyncAiAnalytics(
+  props: AsyncAiAnalyticsProps,
+) {
+  const range = props.range ?? getLastNDaysRange("last-30");
+
+  const stats = await getAiUsage(
+    {
+      from: range.from,
+      period: props.interval,
+      projectId: props.projectId,
+      teamId: props.teamId,
+      to: range.to,
+    },
+    props.authToken,
+  ).catch((error) => {
+    console.error(error);
+    return [];
+  });
+
+  return (
+    <AiAnalyticsUI
+      {...props}
+      isPending={false}
+      range={range}
+      stats={stats}
+    />
+  );
+}
+
+export function AiAnalytics(props: AsyncAiAnalyticsProps) {
+  return (
+    <ResponsiveSuspense
+      searchParamsUsed={["from", "to", "interval"]}
+      fallback={
+        <AiAnalyticsUI {...props} isPending={true} stats={[]} />
+      }
+    >
+      <AsyncAiAnalytics {...props} />
+    </ResponsiveSuspense>
+  );
+}