Web Admin & Dashboard Interfaces
Relevant source files
The following files were used as context for generating this wiki page:
The Web Admin and Dashboard interfaces serve as the primary web-based control plane for the Omi ecosystem. These interfaces provide users and administrators with the tools necessary to manage personal memories, configure device settings, monitor system usage, and interact with the application marketplace. Built primarily using the Next.js framework, these web components integrate with Firebase for authentication and data persistence, while providing a responsive, mobile-first design.
The dashboard encompasses several critical functional areas, including real-time chat interfaces, memory management, and extensive developer tools for webhook and API key configuration. It acts as a centralized hub that synchronizes data across wearable devices, mobile applications, and desktop clients.
Sources: web/frontend/README.md, web/app/src/components/settings/SettingsPage.tsx:1120-1200
User Settings and Profile Management
The SettingsPage component is the central hub for user-level configurations. It is organized into logical sections: Profile, Privacy, Integrations, Developer, and Account. This module handles critical tasks such as language selection, custom vocabulary management for transcription accuracy, and notification preferences.
Core Settings Components
The interface utilizes a set of reusable UI components to maintain consistency:
- Toggle: A custom switch for boolean settings like "Store Recordings" or "Training Data Opt-In".
- Dropdown: Used for single-choice selections such as "Primary Language".
- Card: A styled container providing visual depth and soft shadows for grouping related settings.
- SettingRow: A layout component that pairs a label and description with an interactive control.
Sources: web/app/src/components/settings/SettingsPage.tsx:50-130
Profile and Notification Logic
Users can manage their preferredName and selectedLanguageCode. The system also supports a "Daily Summary" feature, where users can enable or disable digests and specify a delivery hour.
Usage Analytics and Plan Management
The dashboard provides a detailed "Usage" section that visualizes activity data over different time periods (Today, Monthly, Yearly, All Time). It tracks four primary metrics: Listening (minutes), Words transcribed, Insights gained, and Memories created.
Metric Tracking
| Metric | Description | Source |
|---|---|---|
| Listening | Total minutes of active transcription. | transcription_seconds |
| Words | Number of words processed by the STT engine. | words_transcribed |
| Insights | AI-generated proactive suggestions or facts. | insights_gained |
| Memories | Discrete personal facts stored in the user's "2nd brain". | memories_created |
Sources: web/app/src/components/settings/SettingsPage.tsx:430-500
Subscription and Plans
The system identifies whether a user is on a "Basic" (free) plan or "Unlimited" (paid) plan. The Basic plan is subject to a "Monthly Listening Limit" (typically 1,200 minutes). The interface includes logic for checkout sessions via Stripe (Customer Portal) and plan upgrades/cancellations.
Sources: web/app/src/components/settings/SettingsPage.tsx:640-750
Developer Tools and API Integration
A dedicated "Developer" section exposes the underlying Omi platform to builders. This includes management of API keys, Model Context Protocol (MCP) keys, and Webhook configurations.
API and MCP Key Management
Administrators and developers can create keys with specific scopes (e.g., conversations:read, memories:write). MCP keys are specifically designed for integration with AI clients like Claude Desktop, providing a server URL and OAuth credentials for secure data access.
Webhook Configuration
The dashboard supports four distinct webhook types for real-time data integration:
- Conversation Events: Triggered on
memory_created. - Real-time Transcript: Triggered on
transcript_received. - Audio Bytes: Streams raw audio data with a configurable delay.
- Day Summary: Triggered when a daily recap is generated.
Sources: [web/app/src/components/settings/SettingsPage.tsx:1020-1110], web/app/src/components/settings/SettingsPage.tsx:1280-1320
Data Presentation and Recaps
The web interface includes specialized components for summarizing and sharing user data.
App Summary Cards
The AppSummaryCard component renders AI-generated content from specific apps in the ecosystem. It parses markdown content into logical sections based on H2 headers to present information clearly.
- Logic: Uses
parseMarkdownSectionsto split content. - UI: Implements
framer-motionfor smooth entry animations and includes aSparklesicon for AI-generated summaries.
Sources: web/app/src/components/conversations/AppSummaryCard.tsx:12-50
Daily Recaps
A dedicated page at /recaps/[id] provides a structured view of a user's day. This includes:
- Headline and Overview: High-level summaries of the day's activity.
- Stats: Aggregated counts of conversations, duration, and tasks.
- Topic Highlights: Specific subjects discussed with associated emojis.
- Action Items and Decisions: Concrete outcomes extracted from conversations.
Sources: web/frontend/src/app/recaps/[id]/page.tsx:75-150
Administrative Guidelines and "Agents"
The web/admin directory contains specialized instructions for AI agents (Claude, Codex) interacting with the admin interface.
- Single Source of Truth:
AGENTS.mdis the authoritative guide for agent behavior. - Autonomous Action: Agents are instructed to act autonomously without asking for permission to run commands or access folders.
- Design Rules: A strict rule prohibits the use of the color purple in any UI elements (icons, accents, hover states) to maintain brand consistency; white or neutral colors are preferred for primary actions.
Sources: web/admin/CLAUDE.md, web/admin/AGENTS.md:1-40
Conclusion
The Web Admin and Dashboard interfaces provide a comprehensive management layer for the Omi project, balancing user-friendly profile management with advanced developer integrations. By centralizing settings, usage analytics, and developer tools into a unified Next.js application, the project ensures that users have full transparency and control over their "2nd brain" data across all platforms.