Sales demo platform for Vi Operate, a unified agentic platform for 1:1 personalized multimodal AI communications in the health & wellness industry. The app showcases the Vi Data Web, agent configuration, live voice/chat experiences, reporting dashboards, and feedback loops — customized per client brand in real time.
- Framework: Next.js 14 (App Router)
- Language: TypeScript 5
- Styling: Tailwind CSS 3, CSS custom properties for dynamic theming
- Animation: Framer Motion
- Charts: Recharts
- Fonts: Geist (local, via
next/font) + dynamic Google Fonts per brand (viasrc/app/lib/font-loader.ts)
npm install
npm run devOpen http://localhost:3000.
No environment variables are required — the app uses client-side mock data only.
| Script | Command | Description |
|---|---|---|
dev |
next dev |
Start development server |
build |
next build |
Production build |
start |
next start |
Serve production build |
lint |
next lint |
Run ESLint |
| Path | Page | Description |
|---|---|---|
/ |
Home | Platform overview, Data Web visualization, use cases, demo flow |
/dark-funnel |
Invisible Demand | Zip-code-based market scanner showing invisible intent signals |
/configure |
Configure Agent | Agent workflow, scripts, guardrails, tone sliders, segment examples |
/experience |
Live Experience | Voice call demo (auto-played transcript) and web chat demo |
/dashboard |
Dashboard | KPI reporting with conversion funnel, retention trends, upsell charts |
/feedback |
Feedback Loop | Call transcripts, summaries, actions, optimization insights, ROI |
The core feature is per-client brand theming. Switching clients (via the nav dropdown) re-skins the entire UI:
src/app/lib/clients.ts—ClientConfigdefinitions for 28+ wellness brands (colors, fonts, terminology, services)src/app/lib/theme-tokens.ts— Generates CSS custom property key-value pairs from aClientConfigsrc/app/lib/theme-utils.ts— Color math (hex-to-RGB, palette generation, lightness detection)src/app/components/ThemeInjector.tsx— Applies CSS custom properties to:rooton brand changesrc/app/lib/font-loader.ts— Loads Google Fonts dynamically for brand-specific typographytailwind.config.ts—brand-*color utilities that reference CSS custom properties for Tailwind opacity support
The system uses a dual-color approach:
vi-*colors — static Vi platform purple, always presentbrand-*colors — dynamic, driven by the selected client's palette
src/app/
├── components/
│ ├── BrandLogo.tsx # Per-brand logo rendering (28+ brands)
│ ├── ClientContext.tsx # React context for selected client + brand switching
│ ├── DataWebVisualization.tsx # Canvas-based animated network graph
│ ├── Navigation.tsx # Top nav with client selector dropdown
│ └── ThemeInjector.tsx # CSS custom property injector
├── lib/
│ ├── clients.ts # Client brand configurations
│ ├── font-loader.ts # Dynamic Google Fonts loader
│ ├── mock-data.ts # Demo data (KPIs, transcripts, signals, dark funnel)
│ ├── theme-tokens.ts # CSS custom property generator
│ └── theme-utils.ts # Color math utilities
├── configure/page.tsx # Agent configuration page
├── dark-funnel/page.tsx # Market scanner / invisible demand page
├── dashboard/page.tsx # Reporting dashboard
├── experience/page.tsx # Live voice + chat demo
├── feedback/page.tsx # Feedback loop page
├── globals.css # Global styles, CSS custom property defaults
├── layout.tsx # Root layout (Geist fonts, nav, client provider)
└── page.tsx # Home page