Nexus AI

Mock Data

Every page is powered by static TypeScript files in src/lib/mock-data/ — no API calls. The data is deterministic (generated from a fixed seed), so it looks the same on every render and never causes hydration mismatches.

Files

src/lib/mock-data/
├── seed.ts        Seeded RNG + a fixed "demo now" date (2026-05-27)
├── users.ts       60 diverse users + the signed-in currentUser
├── models.ts      6 real AI models with real pricing/specs
├── prompts.ts     120 realistic prompt/completion logs
├── agents.ts      8 agents + per-agent run logs
├── billing.ts     Subscription plans, invoices, payment methods
├── analytics.ts   Time-series + chart data, quota, budget
├── activity.ts    Activity feed events + API keys
└── roles.ts       Roles + the permission matrix

Shared types live in src/lib/types.ts — every mock file is typed against them, so the components don't care whether data comes from a mock or a real API.

How the seed works

seed.ts exports a tiny seeded PRNG (createRng) plus helpers (pick, int, float, daysAgo, hoursAgo). Because the seed is fixed, regenerating produces identical values:

import { createRng, int, pick } from "./seed";

const rng = createRng(0xa11ce);
const score = int(rng, 0, 100);     // same every run

A constant DEMO_NOW (2026-05-27) anchors all relative timestamps so "4m ago" stays stable.

Editing the data

Just edit the arrays. For example, to change the headline dashboard numbers, open analytics.ts:

export const dashboardStats = {
  totalApiCalls: { value: 2_418_902, change: 14.2 },
  tokensUsed: { value: 184_392_044, change: 9.7 },
  activeUsers: { value: 1_247, change: 4.3 },
  monthlyCost: { value: 14_872.43, change: -3.1 },
};

To add a user, push an object onto mockUsers in users.ts (or change the count passed to generateUsers).

Guidelines for realistic data

The demo follows a few rules that keep it believable — worth preserving:

  • Real model names and pricing (GPT-4o, Claude 3.5 Sonnet, Gemini 1.5 Pro…).
  • Specific numbers (1,247 users, $14,872.43) — never round placeholders.
  • Diverse, multi-cultural names and realistic email domains.
  • Charts with weekly cycles, growth trends and occasional dips.
  • Avatars via DiceBear (avatarUrl() in lib/utils.ts).

When you connect a real backend

Keep the same exported names and shapes; just change where the data comes from. See Connecting a Database.

Next: Connecting a Database →