E3Chat - AI Chat Application

A modern, production-ready AI chat application built with Next.js, TypeScript, Clerk authentication, Supabase database, and OpenRouter API integration.

✨ Features

• 🔐 User Authentication: Secure authentication via Clerk
• 💬 Real-time Chat: Beautiful chat interface with message bubbles
• 🤖 AI Integration: Connect to various AI models through OpenRouter API
• 🔒 Secure API Key Storage: Encrypted API key storage in Supabase
• 📱 Responsive Design: Works seamlessly on desktop and mobile
• 🎨 Modern UI: Beautiful gradient backgrounds and smooth animations
• ⚡ Fast & Performant: Built with Next.js 15 and optimized for speed
• 💾 Message Persistence: All conversations are saved to your account
• 🎯 Type Safety: Full TypeScript support throughout

🛠️ Tech Stack

• Frontend: Next.js 15, React 19, TypeScript
• Styling: Tailwind CSS, Framer Motion
• Authentication: Clerk
• Database: Supabase (PostgreSQL)
• AI API: OpenRouter
• Icons: Lucide React
• Encryption: CryptoJS

📋 Prerequisites

Before you begin, ensure you have:

1. Node.js 18+ installed
2. npm or yarn package manager
3. Git for version control

🚀 Quick Start

1. Clone the Repository

git clone <your-repo-url>
cd e3chat

2. Install Dependencies

npm install
# or
yarn install

3. Set Up Environment Variables

Copy the example environment file:

cp .env.local.example .env.local

Fill in your environment variables in .env.local:

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# Encryption Key (generate a random 32-character string)
ENCRYPTION_KEY=your_32_character_encryption_key

# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000

4. Set Up Authentication (Clerk)

1. Go to Clerk Dashboard
2. Create a new application
3. Get your publishable key and secret key
4. Configure the following URLs in your Clerk dashboard:
   • Homepage URL: http://localhost:3000
   • Sign in URL: http://localhost:3000/sign-in
   • Sign up URL: http://localhost:3000/sign-up
   • After sign in URL: http://localhost:3000
   • After sign up URL: http://localhost:3000

5. Set Up Database (Supabase)

1. Go to Supabase Dashboard
2. Create a new project
3. Get your project URL and API keys from Settings > API
4. Run the database setup script:
   • Go to SQL Editor in your Supabase dashboard
   • Copy and paste the contents of supabase-setup.sql
   • Run the script to create tables, policies, and triggers

6. Generate Encryption Key

Generate a secure 32-character encryption key:

# Using Node.js
node -e "console.log(require('crypto').randomBytes(16).toString('hex'))"

# Or use any secure random generator

7. Get OpenRouter API Key

1. Go to OpenRouter
2. Sign up for an account
3. Navigate to API Keys
4. Create a new API key
5. Users will add this key through the application interface

8. Start Development Server

npm run dev
# or
yarn dev

Visit http://localhost:3000 to see your application!

🔧 Configuration Details

Environment Variables Explained

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: Your Clerk application's publishable key
• CLERK_SECRET_KEY: Your Clerk application's secret key (keep this secure)
• NEXT_PUBLIC_SUPABASE_URL: Your Supabase project URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY: Supabase anonymous key (for client-side operations)
• SUPABASE_SERVICE_ROLE_KEY: Service role key (for server-side operations)
• ENCRYPTION_KEY: 32-character key for encrypting user API keys
• NEXT_PUBLIC_APP_URL: Your application URL (for OpenRouter API referrer header)

Database Schema

The application uses three main tables:

1. user_api_keys: Stores encrypted OpenRouter API keys
2. chats: Stores chat sessions
3. messages: Stores individual messages

All tables include Row Level Security (RLS) policies to ensure users can only access their own data.

🎨 Features Overview

Authentication Flow

1. Users sign up/sign in via Clerk
2. First-time users are prompted to add their OpenRouter API key
3. API keys are encrypted before storage in Supabase

Chat Interface

• Modern bubble-based chat design
• Distinct styling for user vs AI messages
• Animated typing indicators
• Smooth message animations
• Auto-scrolling to latest messages

Security Features

• API keys encrypted using AES encryption
• Row Level Security in Supabase
• User isolation at database level
• Secure session management via Clerk

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import your repository in Vercel
3. Add all environment variables in the Vercel dashboard
4. Update your Clerk URLs to use your production domain
5. Deploy!

Environment Variables for Production

Update these URLs in your production environment:

NEXT_PUBLIC_APP_URL=https://your-domain.com
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=https://your-domain.com
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=https://your-domain.com

🔒 Security Considerations

1. API Key Encryption: All OpenRouter API keys are encrypted before database storage
2. Row Level Security: Supabase RLS ensures users can only access their own data
3. Environment Variables: Keep all secrets secure and never commit them to version control
4. HTTPS: Always use HTTPS in production
5. Rate Limiting: Consider implementing rate limiting for API endpoints

🐛 Troubleshooting

Common Issues

1. "Unauthorized" errors: Check your Clerk configuration and environment variables
2. Database connection errors: Verify your Supabase credentials and RLS policies
3. API key validation fails: Ensure your OpenRouter API key is valid and has sufficient credits
4. Build errors: Make sure all dependencies are installed and TypeScript is properly configured

Debug Mode

Enable debug logging by setting:

DEBUG=true

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit your changes: git commit -am 'Add feature'
4. Push to the branch: git push origin feature-name
5. Submit a pull request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js for the amazing React framework
• Clerk for seamless authentication
• Supabase for the database and real-time features
• OpenRouter for AI model access
• Tailwind CSS for utility-first styling
• Framer Motion for beautiful animations

📞 Support

If you encounter any issues or have questions, please:

1. Check the troubleshooting section above
2. Search existing issues in the GitHub repository
3. Create a new issue with detailed information about your problem

---

Made with ❤️ using modern web technologies