OpenRouter Chat 💬

A beautiful, modern chat interface for OpenRouter AI with a stunning dark theme and creative design elements.

✨ Features

🎨 Beautiful Dark Theme

• Stunning gradient backgrounds with deep blues and purples
• Creative header design with texture overlay and glass effects
• Purple accent colors throughout the interface
• Professional dark theme optimized for eye comfort

🚀 Modern Chat Interface

• Real-time AI responses powered by OpenRouter API
• Perfect avatar positioning - AI (🤖) on left, User (👤) on right
• Compact message bubbles with optimal spacing
• Auto-scrolling to latest messages
• Markdown support for rich text formatting
• Responsive design that works on all devices

⚡ Advanced Functionality

• Shift+Enter for new lines, Enter to send
• Auto-resizing textarea (up to 6 lines)
• Loading animations while waiting for AI responses
• Error handling with user-friendly messages
• Keyboard shortcuts and accessibility features

🛠️ Installation

Prerequisites

• Python 3.7+
• OpenRouter API key
• Internet connection

Setup Steps

1. Clone or download the project files

2. Install dependencies:

   pip install flask flask-cors requests

3. Get your OpenRouter API key:

   • Visit OpenRouter.ai
   • Sign up and generate an API key

4. Set your OpenRouter API key as an environment variable:

   export OPENROUTER_API_KEY=your_actual_api_key_here

   Or on Windows:

   set OPENROUTER_API_KEY=your_actual_api_key_here
   

5. Run the application:

   python app.py

6. Open your browser and navigate to:

   http://localhost:5000
   

📁 Project Structure

openrouter-chat/
├── app.py              # Main Flask application
├── styles.css          # Dark theme styling
├── script.js           # Frontend JavaScript (if using separately)
├── index.html          # Standalone HTML version (if using separately)
└── README.md           # This file

🔧 Configuration

API Settings

The API key is retrieved from the OPENROUTER_API_KEY environment variable. Update the following in app.py if needed:

"HTTP-Referer": "http://localhost:5000"
"X-Title": "OpenRouter Chat"

Model Selection

You can change the model in the get_response_from_api() function in app.py to use any model supported by OpenRouter. The current code uses a free tier model for testing purposes.

🎯 Usage

1. Open the application in your browser
2. Type your message in the input field at the bottom
3. Press Enter or click the send button to chat with AI
4. Use Shift+Enter for new lines within your message
5. Watch the AI respond with beautifully formatted markdown

Keyboard Shortcuts

• Enter - Send message
• Shift+Enter - New line
• Auto-focus - Input field automatically focused

🌟 Design Highlights

Color Palette

• Primary Background: Deep gradient (#1a1a2e → #16213e → #0f3460)
• Header: Purple gradient (#9f7aea → #667eea)
• Messages: Dark containers with purple accents
• Text: Light colors for excellent readability

Creative Elements

• Header texture overlay using SVG patterns
• Glassmorphism effects with backdrop blur
• Smooth animations for message appearance
• Gradient text effects for enhanced visual appeal

🔌 API Integration

OpenRouter API

• Endpoint: https://openrouter.ai/api/v1/chat/completions
• Model: Any OpenRouter-supported model (change in app.py)
• Authentication: Bearer token
• Response Format: JSON with markdown content

Supported Features

• ✅ Text generation
• ✅ Markdown formatting
• ✅ Error handling
• ✅ Rate limiting awareness

📱 Responsive Design

Desktop Features

• Full-width chat interface
• Large message bubbles
• Comfortable spacing
• Hover effects and animations

Mobile Optimizations

• Touch-friendly interface
• Optimized message sizing
• Responsive typography
• Mobile-first approach

🚀 Performance

Optimizations

• Efficient API calls with error handling
• Lightweight frontend with minimal dependencies
• CSS variables for consistent theming
• Optimized animations for smooth performance

Dependencies

• Flask - Web framework
• Flask-CORS - Cross-origin resource sharing
• Requests - HTTP library
• Marked - Markdown parsing (CDN)

🛡️ Security & Privacy

Data Handling

• No message storage - Chat history is not saved
• API key protection - Store securely in environment variables
• No personal data collection - Privacy-focused design

Best Practices

• Store API keys in environment variables
• Use HTTPS in production
• Validate and sanitize inputs
• Implement rate limiting

🎨 Customization

Theme Customization

The dark theme can be customized by modifying the color values in styles.css:

/* Main background gradient */
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

/* Purple accents */
--purple-accent: #9f7aea;
--purple-secondary: #b794f6;

Adding New Features

• Modify app.py for backend changes
• Update styles.css for visual changes
• Extend JavaScript functionality in the HTML template

📝 License

This project is open source and available under the MIT License.

🤝 Contributing

Contributions are welcome! Please feel free to submit issues and enhancement requests.

Areas for Enhancement

• Voice input/output
• Message history persistence
• Multiple AI model selection
• File upload support
• Export chat functionality

📞 Support

For support and questions:

• Check the OpenRouter Documentation
• Review Flask documentation for backend issues
• Ensure your API key is valid and has credits

🎉 Acknowledgments

• OpenRouter for providing excellent AI API access and a wide range of models
• Flask for the lightweight web framework
• Modern CSS features for beautiful animations and effects

---

Made with ❤️ for the AI community

Experience the future of AI chat interfaces with OpenRouter Chat!