feat(mavrochat): implement BYOK feature for unlimited API usage and enhance rate limiting logic

Author: steliosmavro

apps/mavrochat/README.md

@@ -4,12 +4,14 @@ AI-powered chat application for developers with syntax highlighting, markdown su
 
 ## Features
 
-- 🤖 Multiple AI model support (currently GPT-4o)
+- 🤖 Multiple AI model support (GPT-4, GPT-3.5, Claude 3.5)
+- 🔑 Bring Your Own API Key (BYOK) support
 - 📝 Markdown rendering with syntax-highlighted code blocks
 - 🎨 Dark/light theme support
 - 💾 Chat history persistence
 - 🚀 Real-time streaming responses
 - 📋 One-click code copying
+- 🚦 No rate limits with your own API keys
 
 ## Development
 
@@ -32,13 +34,36 @@ npm run build --workspace=mavrochat
 Create `.env.development` in the app root:
 
 ```env
-# Required
+# Required (for server-side API keys)
 OPENAI_API_KEY=your_openai_api_key
+CLAUDE_API_KEY=your_claude_api_key
 
 # Optional
 NEXT_PUBLIC_APP_URL=http://localhost:3000
+
+# Rate limiting (optional)
+UPSTASH_REDIS_REST_URL=your_upstash_url
+UPSTASH_REDIS_REST_TOKEN=your_upstash_token
 ```
 
+## API Keys & Authentication
+
+### Using Your Own API Keys
+
+MavroChat supports bringing your own API keys (BYOK) to bypass rate limits:
+
+1. Click the key icon next to the model selector
+2. Enter your API key for the provider you want to use:
+   - **OpenAI**: Get your key from [platform.openai.com/api-keys](https://platform.openai.com/api-keys)
+   - **Anthropic**: Get your key from [console.anthropic.com/api-keys](https://console.anthropic.com/api-keys)
+3. Your keys are stored locally in your browser and never sent to our servers
+4. With your own API key, you have unlimited usage
+
+### Rate Limits
+
+- **Without API key**: 10 messages per day
+- **With your own API key**: Unlimited messages
+
 ## Project Structure
 
 ```
@@ -51,11 +76,15 @@ src/
 ├── components/            # React components
 │   ├── ChatContainer.tsx # Main chat UI
 │   ├── MessageInput.tsx  # Message input
-│   └── CodeBlock.tsx     # Code rendering
+│   ├── CodeBlock.tsx     # Code rendering
+│   └── ApiTokenIndicator.tsx # API key management
 ├── context/              # React contexts
-│   └── ModelContext.tsx  # AI model selection
+│   ├── ModelContext.tsx  # AI model selection
+│   └── ApiTokenContext.tsx # API token management
 ├── hooks/                # Custom React hooks
+│   └── useApiTokens.ts   # Local storage for tokens
 └── lib/                  # Utilities & helpers
+    └── rate-limit.ts     # Rate limiting logic
 ```
 
 ## API Routes
@@ -64,17 +93,24 @@ src/
 
 Handles chat completions with streaming support.
 
-**Request:**
+**Request Headers:**
+- `x-model`: AI model to use (e.g., "gpt-4o", "claude-3-5-sonnet-latest")
+- `x-api-key`: (Optional) Your own API key to bypass rate limits
+
+**Request Body:**
 
 ```json
 {
-    "messages": [{ "role": "user", "content": "Hello" }],
-    "model": "gpt-4o"
+    "messages": [{ "role": "user", "content": "Hello" }]
 }
 ```
 
 **Response:** Server-sent events stream
 
+**Rate Limiting:**
+- Requests without `x-api-key` header are rate-limited
+- Requests with valid `x-api-key` bypass all rate limits
+
 ## Key Dependencies
 
 - **Next.js 15** - React framework

apps/mavrochat/src/app/api/chat/route.ts

@@ -1,13 +1,13 @@
-import { openai } from '@ai-sdk/openai';
+import { openai, createOpenAI } from '@ai-sdk/openai';
 import { createAnthropic } from '@ai-sdk/anthropic';
 import { streamText, tool } from 'ai';
 import { z } from 'zod';
 import { NextResponse } from 'next/server';
 import { checkRateLimit } from '@/lib/rate-limit';
 import { headers } from 'next/headers';
 
-// Create Anthropic instance with custom API key
-const anthropic = createAnthropic({
+// Create default Anthropic instance (can be overridden with custom API key)
+const defaultAnthropic = createAnthropic({
     apiKey: process.env.CLAUDE_API_KEY,
 });
 
@@ -36,66 +36,93 @@ const allowedModels = [
 type AllowedModel = (typeof allowedModels)[number];
 
 // Provider configuration
-const modelProviders = {
+const defaultModelProviders = {
     'gpt-4o': openai,
     'gpt-4o-mini': openai,
     'gpt-3.5-turbo': openai,
-    'claude-3-5-sonnet-latest': anthropic,
-    'claude-3-5-haiku-latest': anthropic,
+    'claude-3-5-sonnet-latest': defaultAnthropic,
+    'claude-3-5-haiku-latest': defaultAnthropic,
 } as const;
 
-function getModelProvider(model: AllowedModel) {
-    const provider = modelProviders[model];
+function getModelProvider(model: AllowedModel, customApiKey?: string) {
+    // If custom API key is provided, create a new provider instance
+    if (customApiKey) {
+        if (model.includes('claude')) {
+            const customAnthropic = createAnthropic({
+                apiKey: customApiKey,
+            });
+            return customAnthropic(model);
+        } else if (model.includes('gpt') || model.includes('o1')) {
+            const customOpenai = createOpenAI({
+                apiKey: customApiKey,
+            });
+            return customOpenai(model);
+        }
+    }
+
+    // Use default provider
+    const provider = defaultModelProviders[model];
     return provider(model);
 }
 
 export async function POST(req: Request) {
     try {
-        // Check rate limit using IP address
+        // Get custom API key from headers
         const headersList = await headers();
-        const ipAddress =
-            headersList.get('x-forwarded-for') ||
-            headersList.get('x-real-ip') ||
-            'anonymous';
+        const customApiKey = headersList.get('x-api-key') || undefined;
 
-        // TODO: When auth is implemented, determine tier based on user
-        // For now, everyone is anonymous
-        const userTier = 'anonymous'; // Will be: getUserTier(request)
+        // Skip rate limiting if custom API key is provided
+        if (!customApiKey) {
+            // Check rate limit using IP address
+            const ipAddress =
+                headersList.get('x-forwarded-for') ||
+                headersList.get('x-real-ip') ||
+                'anonymous';
 
-        const { success, limit, reset, remaining } = await checkRateLimit(
-            ipAddress,
-            userTier,
-        );
+            // TODO: When auth is implemented, determine tier based on user
+            // For now, everyone is anonymous
+            const userTier = 'anonymous'; // Will be: getUserTier(request)
 
-        if (!success) {
-            const resetDate = new Date(reset);
-            const hoursUntilReset = Math.ceil(
-                (reset - Date.now()) / (1000 * 60 * 60),
+            const { success, limit, reset, remaining } = await checkRateLimit(
+                ipAddress,
+                userTier,
             );
 
-            return NextResponse.json(
-                {
-                    success: false,
-                    error: {
-                        code: 'RATE_LIMIT_EXCEEDED',
-                        message: `You've reached your daily limit of ${limit} messages. Come back in ${hoursUntilReset} hours or check out the code on GitHub to run your own instance!`,
-                        details: {
-                            limit,
-                            reset: resetDate.toISOString(),
-                            remaining,
-                            resetIn: `${hoursUntilReset} hours`,
+            if (!success) {
+                const resetDate = new Date(reset);
+                const msUntilReset = reset - Date.now();
+                const hoursUntilReset = Math.ceil(
+                    msUntilReset / (1000 * 60 * 60),
+                );
+                const secondsUntilReset = Math.ceil(msUntilReset / 1000);
+
+                return NextResponse.json(
+                    {
+                        success: false,
+                        error: {
+                            code: 'RATE_LIMIT_EXCEEDED',
+                            message:
+                                secondsUntilReset < 60
+                                    ? `You've reached your limit of ${limit} message. Try again in ${secondsUntilReset} seconds or bring your own API key for unlimited usage!`
+                                    : `You've reached your daily limit of ${limit} messages. Come back in ${hoursUntilReset} hours or bring your own API key for unlimited usage!`,
+                            details: {
+                                limit,
+                                reset: resetDate.toISOString(),
+                                remaining,
+                                resetIn: `${hoursUntilReset} hours`,
+                            },
                         },
                     },
-                },
-                {
-                    status: 429,
-                    headers: {
-                        'X-RateLimit-Limit': limit.toString(),
-                        'X-RateLimit-Remaining': remaining.toString(),
-                        'X-RateLimit-Reset': new Date(reset).toISOString(),
+                    {
+                        status: 429,
+                        headers: {
+                            'X-RateLimit-Limit': limit.toString(),
+                            'X-RateLimit-Remaining': remaining.toString(),
+                            'X-RateLimit-Reset': new Date(reset).toISOString(),
+                        },
                     },
-                },
-            );
+                );
+            }
         }
 
         // Parse request body
@@ -148,13 +175,14 @@ export async function POST(req: Request) {
         console.log('Chat API request:', {
             model,
             messageCount: messages.length,
+            usingCustomApiKey: !!customApiKey,
             timestamp: new Date().toISOString(),
         });
 
         // Create the stream
         const result = streamText({
             system: 'You are a helpful assistant. Respond to the user in Markdown format.',
-            model: getModelProvider(model),
+            model: getModelProvider(model, customApiKey),
             messages,
             tools: {
                 weather: tool({

apps/mavrochat/src/app/landing/page.tsx

@@ -7,7 +7,6 @@ import {
     ChevronsDown,
     Sparkles,
     Code2,
-    Wrench,
     GitBranch,
     Bug,
     FileCode,
@@ -16,15 +15,23 @@ import {
     ArrowRight,
     Github,
     Star,
+    Key,
+    Infinity as InfinityIcon,
 } from 'lucide-react';
 import { useRef } from 'react';
 
 export default function LandingPage() {
     const features = [
+        {
+            title: 'Bring Your Own Key',
+            description:
+                'Use your own OpenAI or Anthropic API keys for unlimited usage with no rate limits.',
+            icon: Key,
+        },
         {
             title: 'Model Selector',
             description:
-                "Swap between AI models on the fly so you're ready for every new release.",
+                'Choose between GPT-4, GPT-3.5, Claude 3.5 Sonnet & Haiku models on the fly.',
             icon: Sparkles,
         },
         {
@@ -33,12 +40,6 @@ export default function LandingPage() {
                 'Streaming responses with syntax-highlighted code blocks you can copy in one click.',
             icon: Code2,
         },
-        {
-            title: 'Built-in Tools',
-            description:
-                'Instant function calling for weather, unit conversion, and any custom logic you add.',
-            icon: Wrench,
-        },
         {
             title: 'Open Source',
             description:
@@ -157,7 +158,10 @@ export default function LandingPage() {
                         <span>Open Source</span>
                     </div>
                     <div className="w-1 h-1 bg-muted-foreground rounded-full" />
-                    <span>Self-Hostable</span>
+                    <div className="flex items-center gap-1">
+                        <InfinityIcon className="h-4 w-4" />
+                        <span>Unlimited with BYOK</span>
+                    </div>
                     <div className="w-1 h-1 bg-muted-foreground rounded-full" />
                     <span>Developer First</span>
                 </motion.div>
@@ -275,11 +279,15 @@ export default function LandingPage() {
                     {[
                         {
                             q: 'Is MavroChat free?',
-                            a: 'Yes, MavroChat is completely open-source. You can self-host or use the public instance for free.',
+                            a: 'Yes! You get 10 free messages per day. For unlimited usage, bring your own API key from OpenAI or Anthropic - no subscription required.',
                         },
                         {
                             q: 'Which AI models are supported?',
-                            a: 'Currently GPT-4o. More models (Anthropic, Gemini, Llama) are on the roadmap and the selector is future-proof.',
+                            a: 'GPT-4o, GPT-4o-mini, GPT-3.5-turbo, Claude 3.5 Sonnet, and Claude 3.5 Haiku. Switch between them instantly.',
+                        },
+                        {
+                            q: 'How does Bring Your Own Key work?',
+                            a: 'Simply click the key icon next to the model selector and enter your OpenAI or Anthropic API key. Keys are stored locally in your browser for security and give you unlimited usage.',
                         },
                         {
                             q: 'Can I add my own tools?',

apps/mavrochat/src/app/layout.tsx

@@ -5,6 +5,7 @@ import './globals.css';
 import { Providers } from '../providers';
 import { Header, ThemeToggle, LogoButton } from '@repo/ui/components';
 import { ConditionalModelSelector } from '../components/ConditionalModelSelector';
+import { ApiTokenIndicator } from '../components/ApiTokenIndicator';
 import { getOriginFor } from '@repo/ui/lib/utils';
 import { sharedConfig } from '@repo/shared-config';
 import { Analytics } from '@vercel/analytics/react';
@@ -75,7 +76,7 @@ export default function RootLayout({
                 className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col min-h-screen`}
             >
                 <Providers>
-                    <Header className="bg-background border-b xl:bg-transparent xl:border-none">
+                    <Header className="bg-background border-b 2xl:bg-transparent 2xl:border-none">
                         <div className="flex items-center justify-between w-full">
                             <div className="flex items-center gap-4">
                                 <LogoButton
@@ -84,11 +85,12 @@ export default function RootLayout({
                                     href={getOriginFor('mavrodev')}
                                 />
                                 <ConditionalModelSelector />
+                                <ApiTokenIndicator />
                             </div>
                             <ThemeToggle />
                         </div>
                     </Header>
-                    {children}
+                    <div className="flex-1 flex flex-col">{children}</div>
                     <Analytics />
                 </Providers>
             </body>