🤖 Looka AI - Next-Gen AI Chat Assistant

Fast, Beautiful, and Intelligent AI Conversations

🚀 Live Demo • 📖 Documentation • 🎯 Features • ⚡ Quick Start

Looka AI is a modern, feature-rich chatbot powered by multiple cutting-edge AI models including GLM 4.5 Air, DeepSeek R1, and Llama 3.3. Experience lightning-fast responses, beautiful UI, and seamless chat history management.

✨ Features

🎯 Core Capabilities

💬 Real-time AI Chat - Streaming responses with 90k token context
🔄 Multi-Model Support - Switch between 8 powerful AI models
📁 File Upload - Images, PDFs, and documents
🎨 Image Generation - Built-in image creation
💾 Chat History - Auto-save with Supabase
🗑️ Auto-cleanup - 7-day retention policy
📱 Fully Responsive - Works on all devices

🎨 Modern UI/UX

✨ Fluid Background - Interactive WebGL animation
🌊 Smooth Animations - Fade-in, bounce, shimmer effects
🎭 Glass-morphism - Modern blur design
🎯 ChatGPT-like Interface - Familiar and intuitive
📊 Code Highlighting - Syntax highlighting with Prism
🎨 Code Formatting - Auto-format with Prettier
⚡ Loading States - Beautiful thinking animations

🤖 Supported AI Models

Model	Provider	Parameters	Context	Speed
GLM 4.5 Air ⭐	Zhipu AI	-	90k tokens	⚡⚡⚡
DeepSeek R1	DeepSeek	-	32k tokens	⚡⚡
Llama 3.3	Meta	70B	8k tokens	⚡⚡⚡
Llama 3.1	Meta	405B	8k tokens	⚡⚡
Qwen 3	Alibaba	4B	8k tokens	⚡⚡⚡
Mistral Small	Mistral AI	24B	8k tokens	⚡⚡
Llama 3.2	Meta	3B	8k tokens	⚡⚡⚡
Gemma 3	Google	4B	8k tokens	⚡⚡⚡

🚀 Quick Start

Prerequisites

Modern web browser (Chrome, Firefox, Safari, Edge)
Supabase Account (for chat history)
OpenRouter API Key

Installation

# 1. Clone the repository
git clone https://github.com/Looka708/Looka-chat-bot
cd Looka-chat-bot

# 2. Copy environment variables
cp .env.example .env.local

# 3. Edit .env.local with your credentials
# Add your OpenRouter API key and Supabase credentials

# 4. Open in browser
# Simply open index.html in your browser
# or use a local server:
npx serve

Environment Variables

Create a .env.local file with:

# OpenRouter API Key
NEXT_PUBLIC_OPENROUTER_API_KEY=sk-or-v1-your-key-here

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here

# Model Settings
NEXT_PUBLIC_DEFAULT_MODEL=z-ai/glm-4.5-air:free
NEXT_PUBLIC_MAX_TOKENS=90000
NEXT_PUBLIC_TEMPERATURE=0.7

🗄️ Database Setup

Supabase Configuration

Run this SQL in your Supabase dashboard to create the required table:

-- Create chats table
CREATE TABLE chats (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  messages JSONB NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create index for faster queries
CREATE INDEX idx_chats_created_at ON chats(created_at DESC);

-- Enable Row Level Security
ALTER TABLE chats ENABLE ROW LEVEL SECURITY;

-- Create policy to allow all operations
CREATE POLICY "Enable all access for chats" ON chats
  FOR ALL USING (true);

-- Function to auto-delete old chats (older than 7 days)
CREATE OR REPLACE FUNCTION delete_old_chats()
RETURNS void AS $$
BEGIN
  DELETE FROM chats
  WHERE created_at < NOW() - INTERVAL '7 days';
END;
$$ LANGUAGE plpgsql;

-- Schedule automatic cleanup (requires pg_cron extension)
SELECT cron.schedule(
  'delete-old-chats',
  '0 0 * * *', -- Run daily at midnight
  $$SELECT delete_old_chats()$$
);

📖 Usage

Starting a Chat

Open the application in your browser
Type your message in the input box
Press Enter or click Send
Watch the AI respond in real-time with streaming

Uploading Files

Click the 📎 paperclip icon
Select files (images, PDFs, documents)
Files appear as badges above the input
Send your message with context

Generating Images

Type your image description
Click the 🖼️ gallery icon
Looka will create/describe your image

Managing Chat History

New Chat: Click "New Chat" button
View History: Click on any previous chat in the sidebar
Delete Chat: Click the delete icon on any chat
Auto-delete: Chats older than 7 days are automatically removed

Switching Models

Use the dropdown menu to switch between different AI models based on your needs:

Fast: Llama 3.2, Qwen 3, Gemma 3
Balanced: Llama 3.3, Mistral Small
Smart: GLM 4.5 Air, Llama 3.1
Planning: DeepSeek R1

🎨 Tech Stack

Category	Technologies
Frontend	HTML5, CSS3, JavaScript (ES6+)
Styling	Tailwind CSS, Custom CSS Animations
AI Models	OpenRouter API (GLM, DeepSeek, Llama, etc.)
Database	Supabase (PostgreSQL)
Animation	WebGL Fluid Simulation
Code Highlighting	Prism.js
Code Formatting	Prettier
Icons	Iconify
Font	Inter (Google Fonts)
Deployment	Vercel

📁 Project Structure

looka-ai/
├── 📄 index.html                    # Main application file
├── 🎨 animations.css                # Animation styles
├── ⚙️ config.js                     # Configuration & API keys
├── 💬 chat-history.js               # Supabase integration
├── 🔧 complete-integration.js       # Core chatbot logic
├── 🌊 streaming-animation.js        # Streaming effects
├── 🖼️ logo.svg                      # Looka logo
├── 📦 package.json                  # Node.js dependencies
├── 🔧 vercel.json                   # Vercel configuration
├── 📝 .env.example                  # Environment template
├── 🚫 .gitignore                    # Git ignore rules
├── 🚫 .vercelignore                 # Vercel ignore rules
├── 📜 LICENSE                       # MIT License
├── 📖 README.md                     # This file
├── 📚 DEPLOYMENT.md                 # Deployment guide
├── ⚡ QUICK_DEPLOY.md               # Quick deploy guide
└── 📂 api/
    └── proxy.js                     # Serverless API proxy

🚀 Deployment

Deploy to Vercel (Recommended)

Quick Deploy:

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel --prod

# Add environment variables
vercel env add OPENROUTER_API_KEY
vercel env add NEXT_PUBLIC_SUPABASE_URL
vercel env add NEXT_PUBLIC_SUPABASE_ANON_KEY

# Redeploy
vercel --prod

📚 Detailed guides:

DEPLOYMENT.md - Comprehensive deployment guide
QUICK_DEPLOY.md - 5-minute deployment

🎯 Customization

Change AI Model

Edit config.js:

AI_MODEL: 'z-ai/glm-4.5-air:free', // Change to your preferred model

Adjust Token Limit

max_tokens: 90000, // Modify as needed

Change Retention Period

Update the Supabase function:

WHERE created_at < NOW() - INTERVAL '14 days'; -- Change to 14 days

Customize Colors

Edit the CSS variables in index.html:

:root {
  --primary-color: #3b82f6;
  --background-color: #050505;
  --text-color: #ffffff;
}

🔐 Security Best Practices

For Production Deployment:

Enable Proxy Mode in config.js:

USE_PROXY: true,
PROXY_URL: '/api/proxy',

Store API Keys Server-Side:
- Use Vercel environment variables
- Never commit .env.local or config.js
Configure CORS:
- Update api/proxy.js to restrict origins
- Only allow your domain in production
Enable Rate Limiting:
- Use Vercel's built-in rate limiting
- Add custom rate limiting logic if needed

📊 Performance

Metric	Score	Details
First Contentful Paint	< 1s	⚡ Lightning fast
Time to Interactive	< 2s	🚀 Instant interaction
Lighthouse Score	95+	💯 Excellent
Bundle Size	< 100KB	📦 Lightweight
API Response Time	< 2s	⚡ Real-time streaming

🤝 Contributing

We welcome contributions! Here's how you can help:

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Contribution Guidelines

Follow existing code style
Add comments for complex logic
Test thoroughly before submitting
Update documentation as needed

🐛 Bug Reports & Feature Requests

Found a bug or have a feature idea? Please open an issue!

Bug Report: Create Issue
Feature Request: Create Issue

📜 License

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

MIT License

Copyright (c) 2026 Muhammad Umer

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

🙏 Acknowledgments

Powered by amazing open-source projects:

Project	Purpose
OpenRouter	AI model API access
Supabase	Database & backend
Tailwind CSS	Utility-first CSS
Prism.js	Syntax highlighting
Prettier	Code formatting
Iconify	Beautiful icons
Vercel	Deployment platform

Special thanks to:

Zhipu AI for GLM 4.5 Air
DeepSeek for DeepSeek R1
Meta for Llama models
Google for Gemma
Mistral AI for Mistral models
Alibaba for Qwen

🎯 Roadmap

Version 2.0 (Coming Soon)

Version 1.1 (In Progress)

📞 Support & Contact

Need help? Reach out!

Community:

💬 Discussions
🐛 Issues
📖 Wiki

📈 Stats

🌟 Star History

💖 Show Your Support

If you find Looka AI helpful, please consider:

⭐ Starring this repository
🐛 Reporting bugs
💡 Suggesting new features
🤝 Contributing to the code
📢 Sharing with others

Made with ❤️ by Muhammad Umer

⬆ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 21 Commits
.github/workflows		.github/workflows
api		api
.env.example		.env.example
.gitignore		.gitignore
.vercelignore		.vercelignore
.vercelrc		.vercelrc
LICENSE		LICENSE
README.md		README.md
animations.css		animations.css
chat-history.js		chat-history.js
complete-integration.js		complete-integration.js
config.production.js		config.production.js
index.html		index.html
logo.svg		logo.svg
package.json		package.json
streaming-animation.js		streaming-animation.js
vercel.json		vercel.json

License

Looka708/Looka-chat-bot

Folders and files

Latest commit

History

Repository files navigation