Generate a fully functional, multi-page Next.js MVP application for 'EdgeMind AI'. This application will serve as a SaaS platform and provide an SDK for deploying and managing lightweight, commercially viable 1-bit LLMs (like PrismML's 1-Bit Bonsai) on edge devices and mobile phones. The core value proposition is enabling high-performance AI on resource-constrained environments, reducing cloud dependency, and facilitating real-time decision-making.
PROJECT OVERVIEW:
EdgeMind AI aims to democratize on-device AI by providing developers and businesses with a powerful yet accessible platform to integrate and manage ultra-dense, 1-bit LLMs. Unlike large, cloud-dependent models, 1-Bit Bonsai models require significantly less memory, energy, and computational power, making them ideal for mobile, robotics, IoT, and real-time agent applications. The platform will consist of a web dashboard for management and an SDK for seamless integration into target applications.
PROBLEM SOLVED:
Large language models are computationally expensive, requiring substantial memory and energy, making them unsuitable for most mobile and edge devices. Cloud-based solutions introduce latency and dependency issues. EdgeMind AI solves this by leveraging highly optimized 1-bit LLMs that deliver competitive performance with a fraction of the resources, enabling intelligent applications directly on the device.
CORE VALUE PROPOSITION:
'Intelligent Edge, Effortless Deployment.' Empowering developers to build smarter, faster, and more efficient AI-powered applications that run anywhere, without compromising performance or user experience due to resource limitations.
TECH STACK:
- **Frontend Framework:** Next.js (App Router)
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM (PostgreSQL)
- **Database:** PostgreSQL
- **Authentication:** NextAuth.js (Credentials Provider for initial MVP, consider OAuth later)
- **UI Components:** shadcn/ui
- **State Management:** React Context API / Zustand (for global state like auth, user settings)
- **Charting:** Recharts or Chart.js for performance monitoring
- **Forms:** React Hook Form + Zod for validation
- **API Layer:** Server Actions and Route Handlers in Next.js
- **Deployment:** Vercel (recommended)
DATABASE SCHEMA (PostgreSQL with Drizzle ORM):
1. **`users` Table:**
* `id` (UUID, Primary Key, default: uuid_generate_v4())
* `name` (VARCHAR(255))
* `email` (VARCHAR(255), Unique)
* `emailVerified` (TIMESTAMP(6))
* `image` (VARCHAR(255))
* `createdAt` (TIMESTAMP(6), default: now())
* `updatedAt` (TIMESTAMP(6), default: now())
2. **`accounts` Table (for NextAuth.js):
* `id` (VARCHAR(255), Primary Key)
* `userId` (UUID, Foreign Key to `users.id`)
* `type` (VARCHAR(255)) - e.g., 'oauth', 'credentials'
* `provider` (VARCHAR(255))
* `providerAccountId` (VARCHAR(255))
* `refresh_token` (TEXT)
* `access_token` (TEXT)
* `expires_at` (BIGINT)
* `token_type` (VARCHAR(255))
* `scope` (VARCHAR(255))
* `id_token` (TEXT)
* `session_state` (VARCHAR(255))
3. **`sessions` Table (for NextAuth.js):
* `sessionToken` (VARCHAR(255), Primary Key)
* `userId` (UUID, Foreign Key to `users.id`)
* `expires` (TIMESTAMP(6))
4. **`verificationTokens` Table (for NextAuth.js):
* `identifier` (VARCHAR(255))
* `token` (VARCHAR(255))
* `expires` (TIMESTAMP(6))
5. **`organizations` Table:**
* `id` (UUID, Primary Key, default: uuid_generate_v4())
* `name` (VARCHAR(255), Not Null)
* `ownerId` (UUID, Foreign Key to `users.id`)
* `createdAt` (TIMESTAMP(6), default: now())
* `updatedAt` (TIMESTAMP(6), default: now())
6. **`organizationMembers` Table:**
* `id` (UUID, Primary Key, default: uuid_generate_v4())
* `organizationId` (UUID, Foreign Key to `organizations.id`)
* `userId` (UUID, Foreign Key to `users.id`)
* `role` (VARCHAR(50), default: 'member') -- e.g., 'admin', 'member', 'viewer'
* `joinedAt` (TIMESTAMP(6), default: now())
* Unique constraint on (`organizationId`, `userId`)
7. **`models` Table:**
* `id` (UUID, Primary Key, default: uuid_generate_v4())
* `organizationId` (UUID, Foreign Key to `organizations.id`)
* `name` (VARCHAR(255), Not Null)
* `version` (VARCHAR(50), Not Null)
* `description` (TEXT)
* `size_gb` (DECIMAL(10, 2)) -- e.g., 1.15, 0.57, 0.24
* `type` (VARCHAR(50)) -- e.g., '1-bit Bonsai 8B', '1-bit Bonsai 4B', '1-bit Bonsai 1.7B'
* `download_url` (VARCHAR(255))
* `is_public` (BOOLEAN, default: false)
* `createdAt` (TIMESTAMP(6), default: now())
* `updatedAt` (TIMESTAMP(6), default: now())
8. **`deployments` Table:**
* `id` (UUID, Primary Key, default: uuid_generate_v4())
* `modelId` (UUID, Foreign Key to `models.id`)
* `organizationId` (UUID, Foreign Key to `organizations.id`)
* `deviceId` (VARCHAR(255), Not Null) -- Unique identifier for the physical device
* `deviceName` (VARCHAR(255))
* `deviceType` (VARCHAR(100)) -- e.g., 'iOS', 'Android', 'Raspberry Pi', 'NVIDIA Jetson'
* `status` (VARCHAR(50), default: 'pending') -- e.g., 'pending', 'deploying', 'active', 'error', 'inactive'
* `lastHeartbeat` (TIMESTAMP(6))
* `createdAt` (TIMESTAMP(6), default: now())
* `updatedAt` (TIMESTAMP(6), default: now())
9. **`performance_metrics` Table:**
* `id` (BIGSERIAL, Primary Key)
* `deploymentId` (UUID, Foreign Key to `deployments.id`)
* `timestamp` (TIMESTAMP(6), default: now())
* `tokens_per_second` (DECIMAL(10, 2))
* `memory_usage_mb` (DECIMAL(10, 2))
* `cpu_usage_percent` (DECIMAL(10, 2))
* `energy_consumption_mwh` (DECIMAL(10, 2))
* `error_rate_percent` (DECIMAL(10, 2))
CORE FEATURES & USER FLOW:
1. **Authentication & Organization Management:**
* **Flow:** User registers/logs in via email/password using NextAuth.js. Upon first login, they are prompted to create or join an organization. Users can invite others to their organization via email.
* **Details:** Secure password handling. Role-based access control within organizations (Admin can manage models/deployments, Members can view and deploy).
2. **Model Hub (Public & Private):**
* **Flow:** Admins can upload or link to approved 1-Bit Bonsai models (initially curated list, later user uploads). Models can be marked as public (shared across orgs) or private (only within the organization). Users browse available models, view their specs (size, speed, efficiency benchmarks).
* **Details:** Display model cards with key metrics. Implement search and filtering based on model size, type, etc.
3. **Device Management & Deployment:**
* **Flow:** Admins register new edge devices by providing a unique device ID and selecting the device type. The system generates a deployment configuration. The SDK on the device polls the backend for its assigned model and configuration. Upon receiving it, the SDK downloads the model (if not already present) and initiates the LLM inference process. The device's status (active, inactive, error) is updated periodically.
* **Details:** SDK will need secure communication (API keys/tokens) to authenticate with the backend. The backend tracks which model is deployed to which device.
4. **Performance Monitoring Dashboard:**
* **Flow:** Deployed devices periodically send performance metrics (tokens/sec, memory, CPU, energy) to the backend API. The dashboard visualizes these metrics in near real-time using charts and tables, grouped by device, model, or organization.
* **Details:** Implement endpoints to receive metrics. Use charting library to display trends, averages, and potential anomalies. Allow users to filter by time range.
5. **SDK Integration:**
* **Flow:** Developers integrate the EdgeMind AI SDK into their mobile (iOS/Android) or edge device application. They configure the SDK with their API key and organization ID. The SDK handles model downloading, caching, and inference, exposing a simple API for the host application to send prompts and receive responses.
* **Details:** The SDK itself needs to be built (or instructions provided for building) using native code (Swift/Kotlin for mobile, Python/C++ for edge) that interfaces with the 1-bit LLM runtime (e.g., llama.cpp compiled for the target architecture). The SDK communicates with the EdgeMind AI backend for configuration and potentially for reporting metrics.
API & DATA FETCHING:
- **Authentication:** Use NextAuth.js's built-in API routes (`/api/auth/[...nextauth]`). Server Actions for authenticated mutations (creating orgs, adding models, registering devices).
- **Data Fetching:** Employ Server Components for initial page loads where possible. Use Route Handlers (`/api/v1/...`) for dynamic data fetching, especially for real-time metrics and potentially for SDK polling. Utilize React Query or SWR within Client Components for client-side data fetching, caching, and state synchronization for metrics and device status.
- **Example API Endpoints (Route Handlers):
- `POST /api/v1/deployments`: Register a new device deployment.
- `GET /api/v1/models`: Fetch list of available models (filtered by org/public).
- `GET /api/v1/deployments/{deviceId}/config`: SDK endpoint to fetch model configuration.
- `POST /api/v1/metrics`: Endpoint for devices to POST performance metrics.
- `GET /api/v1/organizations/{orgId}/devices`: Fetch devices within an organization.
- `GET /api/v1/devices/{deviceId}/metrics`: Fetch historical metrics for a specific device.
- **Request/Response Examples:**
- **`POST /api/v1/metrics` Request Body:**
```json
{
"tokens_per_second": 130.5,
"memory_usage_mb": 512.3,
"cpu_usage_percent": 75.2,
"energy_consumption_mwh": 15.1
}
```
- **`GET /api/v1/models` Response Body:**
```json
[
{
"id": "uuid-model-1",
"name": "1-Bit Bonsai 8B",
"version": "1.0.0",
"size_gb": 1.15,
"type": "1-bit Bonsai 8B"
}
]
```
COMPONENT BREAKDOWN (Next.js App Router):
- **`app/layout.tsx`:** Root layout. Includes global styles, providers (e.g., theme provider, possibly auth provider for client-side access), `<body>` tag.
- **`app/page.tsx`:** Landing Page. High-level overview, value proposition, CTA to sign up.
- **`app/(auth)/layout.tsx`:** Auth layout. Wrapper for login, signup pages.
- **`app/(auth)/login/page.tsx`:** Login form component.
- **`app/(auth)/signup/page.tsx`:** Registration form component.
- **`app/(app)/layout.tsx`:** Main application layout. Includes sidebar navigation, header, main content area. Protected route.
- **`app/(app)/dashboard/page.tsx`:** Dashboard. Overview of all devices, active deployments, recent alerts, summary of key metrics. Uses `DashboardHeader`, `DeviceStatusCard`, `MetricOverviewChart` components.
- **`app/(app)/organizations/[orgId]/layout.tsx`:** Organization-specific layout.
- **`app/(app)/organizations/[orgId]/devices/page.tsx`:** List of devices within the organization. Uses `DataTable` component with `DeviceRow` items.
- **`app/(app)/organizations/[orgId]/devices/[deviceId]/page.tsx`:** Detail view for a specific device. Shows device info, current model, status, and detailed performance metrics over time. Uses `DeviceDetailHeader`, `DeviceStatusBadge`, `PerformanceChart` components.
- **`app/(app)/models/page.tsx`:** Model Hub. Browse public and organization-specific models. Uses `ModelCard` component and filtering UI.
- **`app/(app)/models/new/page.tsx`:** Form to add/register a new model (or link to an external URL).
- **`app/(app)/settings/page.tsx`:** User and organization settings. Profile management, API keys, member management, billing (future).
- **`app/(app)/sdk/page.tsx`:** SDK documentation and download page. Instructions, code snippets, API references.
**Shared UI Components:**
- `Button`: From shadcn/ui.
- `Input`: From shadcn/ui.
- `Card`: From shadcn/ui.
- `Table`: From shadcn/ui (for devices list).
- `Form`: Using React Hook Form + Zod.
- `Chart`: Using Recharts/Chart.js.
- `SidebarNav`: Custom component for navigation.
- `Header`: Custom component for the top bar.
- `LoadingSpinner`: Custom component for loading states.
- `AlertBanner`: For notifications and errors.
- `DeviceStatusBadge`: Visual indicator for device status.
- `MetricOverviewChart`: Aggregated metrics chart.
- `PerformanceChart`: Detailed historical metrics chart.
- `ModelCard`: Displays model information.
- `DeviceStatusCard`: Summary card for devices on dashboard.
State Management:
- **Global State (Auth, User Org):** React Context API or Zustand.
- **Page-level State:** Local `useState` or `useReducer` for form inputs, UI toggles.
- **Data Fetching State:** Handled by React Query/SWR within Client Components for caching, background updates, and error handling.
- **Server State:** Server Actions and Route Handlers manage data mutations and fetches directly on the server.
UI/UX DESIGN & VISUAL IDENTITY:
- **Style:** Minimalist Clean with subtle futuristic accents.
- **Color Palette:**
- Primary: Deep Blue (`#1E3A8A` - Indigo-700)
- Secondary: Teal (`#14B8A6` - Teal-500)
- Accent: Electric Purple (`#8B5CF6` - Violet-500)
- Background: Dark Charcoal (`#1F2937` - Gray-800)
- Surface: Slightly lighter Charcoal (`#374151` - Gray-700)
- Text (Primary): Off-White (`#F3F4F6` - Gray-100)
- Text (Secondary): Light Gray (`#9CA3AF` - Gray-400)
- Success: Green (`#22C55E`)
- Warning: Yellow (`#F59E0B`)
- Danger: Red (`#EF4444`)
- **Typography:**
- Font Family: Inter (sans-serif)
- Headings: Inter Bold (e.g., `text-4xl font-bold`)
- Body Text: Inter Regular (e.g., `text-base font-normal`)
- **Layout:** Clean, card-based UI. Sidebar navigation on the left for authenticated users. Main content area is spacious. Use `max-w-` utilities for content width.
- **Responsiveness:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content adjusts fluidly. Use Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`).
- **Visual Elements:** Subtle gradients in backgrounds or active states. Clean icons (e.g., from Lucide Icons). Data visualizations should be clear and easy to read.
ANIMATIONS:
- **Page Transitions:** Subtle fade-in/slide-in animations for new pages/sections (using Framer Motion if needed, or CSS transitions).
- **Hover Effects:** Slight scale-up or background color change on interactive elements (buttons, cards).
- **Loading States:** Use `LoadingSpinner` components with skeleton loaders for table rows or chart data fetching.
- **Micro-interactions:** Smooth transitions for toggles, expanding/collapsing panels.
- **Chart Animations:** Recharts provides built-in animations for data loading.
EDGE CASES:
- **Authentication:** Handle expired sessions, invalid credentials, logout redirection.
- **Authorization:** Ensure users can only access data/actions for their organization.
- **Empty States:** Display helpful messages and CTAs when lists are empty (e.g., 'No devices found. Register your first device!').
- **Data Validation:** Use Zod and React Hook Form for robust form validation on both client and server sides.
- **Error Handling:** Graceful error display using `AlertBanner`. Implement global error handling for API failures. SDK should report errors back to the platform.
- **Network Failures:** Implement retry mechanisms for SDK and dashboard data fetching. Inform users of connection issues.
- **Model Download Failures:** Handle interruptions or failures during model download on the device.
- **Rate Limiting:** Implement rate limiting on public APIs/SDK endpoints to prevent abuse.
SAMPLE/MOCK DATA:
1. **User:**
```json
{
"id": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"name": "Alice Johnson",
"email": "alice@example.com",
"image": "/api/auth/me/avatar.png"
}
```
2. **Organization:**
```json
{
"id": "f0e9d8c7-b6a5-4321-fedc-ba0987654321",
"name": "Innovatech Robotics",
"ownerId": "a1b2c3d4-e5f6-7890-1234-567890abcdef"
}
```
3. **Model:**
```json
{
"id": "m1m2m3m4-n5n6-7890-o1o2-p3p4p5p6p7p8",
"organizationId": "f0e9d8c7-b6a5-4321-fedc-ba0987654321",
"name": "1-Bit Bonsai 8B - Optimized",
"version": "1.1.0",
"description": "High-performance 8B parameter model tuned for robotics.",
"size_gb": 1.15,
"type": "1-bit Bonsai 8B",
"download_url": "https://cdn.example.com/models/bonsai-8b-opt-v1.1.0.bin",
"is_public": false
}
```
4. **Deployment (Active):**
```json
{
"id": "d1d2d3d4-e5f6-7890-g1g2-h3h4h5h6h7h8",
"model": {
"name": "1-Bit Bonsai 8B - Optimized",
"version": "1.1.0"
},
"deviceName": "PX-007 Robot Arm",
"deviceType": "NVIDIA Jetson",
"status": "active",
"lastHeartbeat": "2023-10-27T10:30:00Z"
}
```
5. **Deployment (Pending):
```json
{
"id": "d9d8d7d6-e5f6-7890-g1g2-h3h4h5h6h7h8",
"model": null,
"deviceName": "Mobile Unit Alpha",
"deviceType": "Android",
"status": "pending",
"lastHeartbeat": null
}
```
6. **Performance Metrics (Sample Entry):
```json
{
"timestamp": "2023-10-27T10:35:15Z",
"tokens_per_second": 132.1,
"memory_usage_mb": 680.5,
"cpu_usage_percent": 85.0,
"energy_consumption_mwh": 22.5,
"error_rate_percent": 0.1
}
```
7. **Device List Item:**
```json
{
"id": "d1d2d3d4-e5f6-7890-g1g2-h3h4h5h6h7h8",
"deviceName": "PX-007 Robot Arm",
"deviceType": "NVIDIA Jetson",
"modelName": "1-Bit Bonsai 8B - Optimized",
"status": "active",
"lastHeartbeat": "2023-10-27T10:30:00Z"
}
```
8. **Model List Item:**
```json
{
"id": "m1m2m3m4-n5n6-7890-o1o2-p3p4p5p6p7p8",
"name": "1-Bit Bonsai 8B - Optimized",
"version": "1.1.0",
"size_gb": 1.15,
"type": "1-bit Bonsai 8B"
}
```
TURKISH TRANSLATIONS (for key UI elements):
- **App Title:** EdgeMind AI
- **Navbar:** Kontrol Paneli (Dashboard), Modeller (Models), Cihazlar (Devices), SDK Dokümanı (SDK Docs), Ayarlar (Settings)
- **Buttons:** Giriş Yap (Login), Kayıt Ol (Sign Up), Model Ekle (Add Model), Cihaz Kaydet (Register Device), Davet Et (Invite), Güncelle (Update), Sil (Delete), İndir (Download)
- **Labels:** Model Adı (Model Name), Versiyon (Version), Boyut (Size), Cihaz Adı (Device Name), Cihaz Tipi (Device Type), Durum (Status), Son Aktivite (Last Active)
- **Placeholders:** E-posta adresiniz (Your email address), Şifreniz (Your password)
- **Dashboard Section Titles:** Genel Bakış (Overview), Aktif Cihazlar (Active Devices), Son Metrikler (Recent Metrics)
- **Status Badges:** Aktif (Active), Bekliyor (Pending), Hata (Error), Aktif Değil (Inactive)
- **Charts:** Token/Saniye (Tokens/Second), Bellek Kullanımı (Memory Usage), CPU Kullanımı (CPU Usage), Enerji Tüketimi (Energy Consumption)
- **Empty States:** 'Henüz cihazınız yok. İlk cihazınızı kaydedin!' (No devices yet. Register your first device!)
- **Page Titles:** Dashboard, Model Kütüphanesi (Model Library), Cihaz Detayları (Device Details), SDK Bilgileri (SDK Information)