🌱 We are GROOTS

AI Chatbot Powered by Puter.js & Supabase

A free, unlimited AI chatbot with Claude API access - no API keys required!

🚀 Live Demo • 📖 Documentation • 🤝 Contributing

🏆 Key Achievements

Achievement	Description
🧠 Superior AI Reasoning	Powered by Claude AI models (Sonnet 4.5, Opus 4) through Puter.js, delivering exceptional reasoning, coding assistance, and analytical capabilities that surpass competing AI chatbots
🌐 Advanced Real-Time Web Search	Ultra-enhanced web scraping capabilities leveraging 12 parallel SearXNG instances, Google News RSS, Bing News RSS, DuckDuckGo API, and Wikipedia—outperforming Gemini's web search in accuracy, speed, and source diversity
📚 Intelligent Source Citations	Every web-powered response includes properly cited sources with trust-scored rankings from 50+ verified domains
💰 100% Free & Unlimited	No API keys, no subscriptions, no hidden costs—complete Claude AI access at zero cost

📖 Table of Contents

🏆 Key Achievements
✨ Features
🔍 Web Search Architecture
🎬 Demo
🚀 Quick Start
📁 Project Structure
🔧 Configuration
🗃️ Database Schema
🤖 Available AI Models
📱 Usage Guide
🌐 How Puter.js Works
📚 Technology Stack & API Reference
🎨 Customization
🔒 Security
🤝 Contributing
📜 License
🙏 Credits & Attributions
👨‍💻 Author

✨ Features

Feature	Description
🆓 Free & Unlimited	Uses Puter.js for free, unlimited access to Claude AI models
🤖 Multiple Models	Support for Claude Sonnet, Opus, and Haiku variants
⚡ Streaming Responses	Real-time streaming for natural conversation flow
🔍 Ultra Web Search	Real-time web scraping with 12 SearXNG instances + news APIs
📰 Live News Access	Google News RSS, Bing News RSS for breaking news
📚 Source Citations	Every web search response includes cited sources
💾 Chat History	Conversations automatically saved to Supabase database
🔐 Google OAuth	Secure authentication via Supabase Google OAuth
🌓 Dark/Light Theme	Toggle between themes for comfortable viewing
📤 Export Chats	Export conversations as JSON files
🔄 Regenerate Response	Regenerate AI responses with one click
📱 Responsive Design	Works seamlessly on desktop and mobile
🌱 Dancing Groot 3D	Interactive 3D animated Groot model using Three.js
🔒 No Backend Required	Runs entirely in the browser

🔍 Web Search Architecture

Our ultra-enhanced web search system surpasses traditional AI web search capabilities through a multi-source parallel architecture:

┌─────────────────────────────────────────────────────────────────────────┐
│                    Ultra-Enhanced Web Search Engine                      │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│  ┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐        │
│  │   SearXNG       │   │  Google News    │   │   Bing News     │        │
│  │  (12 Instances) │   │     RSS         │   │     RSS         │        │
│  │  Meta-Search    │   │  Breaking News  │   │  Latest News    │        │
│  └────────┬────────┘   └────────┬────────┘   └────────┬────────┘        │
│           │                     │                     │                  │
│           └─────────────────────┼─────────────────────┘                  │
│                                 ▼                                        │
│  ┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐        │
│  │   DuckDuckGo    │   │    Wikipedia    │   │  Trust Scoring  │        │
│  │   Instant API   │   │      API        │   │   (50+ Sites)   │        │
│  └────────┬────────┘   └────────┬────────┘   └────────┬────────┘        │
│           │                     │                     │                  │
│           └─────────────────────┼─────────────────────┘                  │
│                                 ▼                                        │
│                    ┌─────────────────────────┐                          │
│                    │    Result Aggregator    │                          │
│                    │  Ranking & Deduplication│                          │
│                    │    Citation Generator   │                          │
│                    └─────────────────────────┘                          │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

Search Sources

Source	Purpose	Instances/Endpoints
SearXNG	Open-source meta-search engine	12 public instances (parallel)
Google News RSS	Real-time breaking news	Via CORS proxies
Bing News RSS	Latest news coverage	Via allorigins proxy
DuckDuckGo API	Instant answers & general search	Direct API
Wikipedia API	Factual knowledge base	Direct API

Intelligent Features

🎯 Auto-Detection: Automatically detects when queries need web search
⚡ Parallel Processing: Searches multiple sources simultaneously
🔒 Trust Scoring: 50+ trusted domains ranked for credibility
🇮🇳 India-Specific Detection: Enhanced coverage for Indian news
💾 Smart Caching: 5-minute cache for repeated queries
📊 Result Ranking: Combines freshness, relevance, and trust scores

🎬 Demo

Visit the live demo: i-am-groot-lp4qnoxbv-ratna-kirtis-projects.vercel.app

Features Showcase

3D Dancing Groot - Animated GLB model on the welcome screen
Real-time AI Chat - Instant responses with streaming
Conversation Management - Create, search, and delete conversations
Theme Toggle - Switch between dark and light modes

🚀 Quick Start

Option 1: Run Locally (Without Supabase)

# Clone the repository
git clone https://github.com/ratna3/iAmGROOT.git

# Navigate to the project
cd iAmGROOT

# Open in browser (or use a local server)
open index.html
# or
python -m http.server 8000

Note: Without Supabase, conversations won't be persisted.

Option 2: With Supabase Integration

Create a Supabase Project
- Visit supabase.com
- Create a new project
- Get your project URL and anon key from Settings → API

Configure the Application

Update js/config.js with your credentials:

SUPABASE_URL: 'https://your-project.supabase.co',
SUPABASE_ANON_KEY: 'your-anon-key'

Run the Database Migrations

Execute the SQL files in the migrations/ folder in your Supabase SQL Editor.
Launch the Application
```
open index.html
```

📁 Project Structure

iAmGROOT/
├── 📄 index.html           # Main chatbot interface
├── 📁 assets/
│   ├── 🖼️ groot.jpg         # Baby Groot logo
│   └── 🎬 groot_dancing.glb # 3D animated Groot model
├── 📁 css/
│   └── 🎨 styles.css        # Complete styling with themes
├── 📁 js/
│   ├── ⚙️ config.js         # Configuration settings
│   ├── 🗄️ supabase.js       # Database & Google OAuth
│   ├── 🤖 puter-chat.js     # Puter.js AI integration
│   ├── 🔍 web-search.js     # Ultra-enhanced web search engine
│   ├── 🌱 groot-model.js    # Three.js 3D model loader
│   └── 📱 app.js            # Main application logic
├── 📁 migrations/
│   └── 📊 *.sql             # Supabase migration files
├── 📄 vercel.json           # Vercel deployment config
├── 📄 progress.md           # Project progress tracker
├── 📄 LICENSE               # MIT License
├── 📄 SECURITY.md           # Security policy
├── 📄 CONTRIBUTING.md       # Contribution guidelines
└── 📄 README.md             # This file

🔧 Configuration

Edit js/config.js to customize the application:

const CONFIG = {
    // Supabase Configuration
    SUPABASE_URL: 'your-supabase-url',
    SUPABASE_ANON_KEY: 'your-anon-key',
    
    // AI Settings
    DEFAULT_MODEL: 'claude-sonnet-4-5',
    ENABLE_STREAMING: true,
    
    // App Settings
    APP_NAME: 'We are GROOTS',
    MAX_MESSAGE_LENGTH: 32000,
    
    // Storage Keys
    STORAGE_KEYS: {
        THEME: 'theme',
        USER_ID: 'userId',
        CURRENT_CONVERSATION: 'currentConversation'
    }
};

🗃️ Database Schema

Entity Relationship Diagram

┌─────────────┐       ┌─────────────────┐       ┌─────────────┐
│   users     │       │  conversations  │       │  messages   │
├─────────────┤       ├─────────────────┤       ├─────────────┤
│ id (PK)     │──┐    │ id (PK)         │──┐    │ id (PK)     │
│ created_at  │  └───>│ user_id (FK)    │  └───>│ conv_id(FK) │
│ email       │       │ title           │       │ role        │
│ anonymous_id│       │ model           │       │ content     │
│ display_name│       │ created_at      │       │ model       │
└─────────────┘       │ updated_at      │       │ created_at  │
                      └─────────────────┘       └─────────────┘

Tables

Table	Description
`users`	Stores user information (anonymous or authenticated)
`conversations`	Stores chat threads with titles and model info
`messages`	Stores individual messages with role and content

🤖 Available AI Models

Puter.js provides free, unlimited access to these Claude models:

Model	ID	Best For
Claude Sonnet 4.5	`claude-sonnet-4-5`	Balanced performance & speed
Claude Sonnet 4	`claude-sonnet-4`	Fast, general-purpose tasks
Claude Opus 4.5	`claude-opus-4-5`	Most capable, complex reasoning
Claude Opus 4.1	`claude-opus-4-1`	Advanced reasoning tasks
Claude Opus 4	`claude-opus-4`	Deep analytical work
Claude Haiku 4.5	`claude-haiku-4-5`	Fastest responses

Usage Example with Puter.js

// Simple chat
const response = await puter.ai.chat('Hello, how are you?');

// With streaming
const stream = await puter.ai.chat('Tell me a story', {
    model: 'claude-sonnet-4-5',
    stream: true
});

for await (const chunk of stream) {
    console.log(chunk);
}

📱 Usage Guide

Basic Operations

Action	How To
🆕 New Chat	Click the `+` button in the sidebar
📝 Send Message	Type and press `Enter` (or click Send)
🔄 Switch Conversations	Click any conversation in the sidebar
🗑️ Delete Conversation	Hover and click the trash icon
📤 Export Chat	Click the download icon in the header
🌓 Toggle Theme	Click the sun/moon icon
🔍 Search	Use the search box in the sidebar
🔄 Regenerate	Click the regenerate button in the header

Keyboard Shortcuts

Shortcut	Action
`Enter`	Send message
`Shift + Enter`	New line in message

🌐 How Puter.js Works

┌─────────────────────────────────────────────────────────┐
│                    Puter.js Architecture                 │
├─────────────────────────────────────────────────────────┤
│                                                         │
│   ┌─────────────┐    ┌─────────────┐    ┌───────────┐  │
│   │  Your App   │───>│  Puter.js   │───>│  Claude   │  │
│   │  (Browser)  │<───│   (SDK)     │<───│    API    │  │
│   └─────────────┘    └─────────────┘    └───────────┘  │
│                                                         │
│   • No API keys needed                                  │
│   • Free & unlimited for developers                     │
│   • Users authenticate through Puter                    │
│   • Runs entirely in the browser                        │
│                                                         │
└─────────────────────────────────────────────────────────┘

Puter.js uses the "User-Pays" model:

✅ Developers get free, unlimited API access
✅ Users authenticate through Puter and cover their usage
✅ No server-side setup required
✅ No API key management headaches

Learn more: Puter.js Documentation | GitHub

🎨 Customization

Themes

The app supports automatic theme detection and manual toggle. Customize colors in css/styles.css:

:root {
    /* Light Theme */
    --accent-color: #7c3aed;
    --bg-primary: #ffffff;
    --text-primary: #1a1a1a;
}

[data-theme="dark"] {
    /* Dark Theme */
    --bg-primary: #1a1a1a;
    --text-primary: #ffffff;
}

3D Model

Replace assets/groot_dancing.glb with your own GLB model. Update js/groot-model.js if needed.

📚 Technology Stack & API Reference

Core Technologies

Technology	Version	Purpose	Documentation
Puter.js	Latest	Free AI API Access (Claude)	docs.puter.com
Supabase	Latest	Database + Google OAuth	supabase.com/docs
Three.js	r128	3D Graphics & Animation	threejs.org/docs
SearXNG	Multiple	Meta-Search Engine	docs.searxng.org

🤖 Puter.js AI Integration

Puter.js provides free, unlimited access to Claude AI models with streaming support.

Basic Chat

// Simple message
const response = await puter.ai.chat('Hello, how are you?');
console.log(response.message.content);

Streaming Responses

// Real-time streaming with model selection
const response = await puter.ai.chat('Tell me a story', {
    model: 'claude-sonnet-4-5',
    stream: true
});

// Handle streaming chunks
for await (const chunk of response) {
    if (chunk?.text) {
        console.log(chunk.text);
    }
}

Available Models

// Supported Claude models through Puter.js
const models = [
    'claude-sonnet-4-5',  // Balanced - recommended
    'claude-sonnet-4',    // Fast general-purpose
    'claude-opus-4-5',    // Most capable
    'claude-opus-4-1',    // Advanced reasoning
    'claude-opus-4',      // Deep analytical
    'claude-haiku-4-5'    // Fastest
];

Usage in Project (`js/puter-chat.js`)

async function sendMessage(message, conversationHistory = []) {
    const messages = conversationHistory.map(msg => ({
        role: msg.role,
        content: msg.content
    }));
    messages.push({ role: 'user', content: message });

    const response = await puter.ai.chat(messages, {
        model: CONFIG.DEFAULT_MODEL,
        stream: true
    });

    return response;
}

🔐 Supabase Authentication

Supabase provides PostgreSQL database with built-in Google OAuth.

Google OAuth Setup

// Initialize Supabase client
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

// Sign in with Google
async function signInWithGoogle() {
    const { data, error } = await supabase.auth.signInWithOAuth({
        provider: 'google',
        options: {
            redirectTo: window.location.origin,
            queryParams: {
                access_type: 'offline',
                prompt: 'consent'
            }
        }
    });
    return { data, error };
}

Auth State Management

// Listen for auth changes
supabase.auth.onAuthStateChange((event, session) => {
    if (event === 'SIGNED_IN') {
        // User signed in
        const user = session.user;
    } else if (event === 'SIGNED_OUT') {
        // User signed out
    }
});

Database Operations

// Save message
async saveMessage(conversationId, role, content, model) {
    const { data, error } = await supabase
        .from('messages')
        .insert({ conversation_id: conversationId, role, content, model });
    return { data, error };
}

// Load conversations
async loadConversations(userId) {
    const { data, error } = await supabase
        .from('conversations')
        .select('*')
        .eq('user_id', userId)
        .order('updated_at', { ascending: false });
    return data;
}

🌱 Three.js 3D Model

Three.js powers the animated 3D Groot model on the welcome screen.

GLTFLoader Setup

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { AnimationMixer } from 'three';

const loader = new GLTFLoader();
let mixer;

loader.load('assets/groot_dancing.glb', (gltf) => {
    const model = gltf.scene;
    scene.add(model);

    // Setup animations
    mixer = new AnimationMixer(model);
    const clips = gltf.animations;

    if (clips.length > 0) {
        const action = mixer.clipAction(clips[0]);
        action.play();
    }
});

Animation Loop

// Update animations in render loop
function animate() {
    requestAnimationFrame(animate);

    const delta = clock.getDelta();
    if (mixer) {
        mixer.update(delta);
    }

    renderer.render(scene, camera);
}

Usage in Project (`js/groot-model.js`)

class GrootModel {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);
        this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        this.loadModel();
    }

    loadModel() {
        const loader = new THREE.GLTFLoader();
        loader.load('assets/groot_dancing.glb', (gltf) => {
            this.model = gltf.scene;
            this.scene.add(this.model);
            this.setupAnimation(gltf.animations);
        });
    }
}

🔍 Web Search API

Our custom web search module (js/web-search.js) aggregates multiple sources.

Core Search Function

async performSearch(query) {
    const searches = [
        this.searchSearXNG(query),
        this.searchGoogleNews(query),
        this.searchBingNews(query),
        this.searchDuckDuckGo(query),
        this.searchWikipedia(query)
    ];

    const results = await Promise.allSettled(searches);
    return this.aggregateResults(results);
}

SearXNG Integration (12 Instances)

const SEARXNG_INSTANCES = [
    'https://search.bus-hit.me',
    'https://search.sapti.me',
    'https://searx.be',
    'https://searx.tiekoetter.com',
    'https://searx.work',
    // ... 7 more instances
];

async searchSearXNG(query) {
    // Parallel search across all instances
    const promises = SEARXNG_INSTANCES.map(instance =>
        fetch(`${instance}/search?q=${encodeURIComponent(query)}&format=json`)
    );
    const results = await Promise.race(promises);
    return this.parseResults(results);
}

Trust Scoring System

const TRUSTED_DOMAINS = {
    // Tier 1 - Highest Trust (score: 100)
    'reuters.com': 100, 'apnews.com': 100, 'bbc.com': 100,

    // Tier 2 - Major News (score: 90)
    'nytimes.com': 90, 'theguardian.com': 90, 'washingtonpost.com': 90,

    // Tier 3 - Tech/Business (score: 85)
    'techcrunch.com': 85, 'bloomberg.com': 85, 'forbes.com': 85,

    // India-specific sources
    'ndtv.com': 85, 'hindustantimes.com': 85, 'thehindu.com': 90
    // ... 40+ more trusted domains
};

🔒 Security

Best Practices Implemented

✅ Row Level Security (RLS) enabled on all Supabase tables
✅ No sensitive data stored in client-side code
✅ HTTPS enforced via Vercel
✅ Security headers configured in vercel.json
✅ Input validation and sanitization

Reporting Vulnerabilities

Please report security vulnerabilities to: ratnakirtiscr@gmail.com

See SECURITY.md for our full security policy.

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

How to Contribute

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

Development Setup

# Clone your fork
git clone https://github.com/YOUR_USERNAME/iAmGROOT.git

# Install dependencies (if any)
# This is a static site, no npm install needed!

# Start a local server
python -m http.server 8000
# or
npx serve .

Code Style

Use consistent indentation (2 or 4 spaces)
Follow existing naming conventions
Add comments for complex logic
Test your changes before submitting

📜 License

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

MIT License

Copyright (c) 2025 Ratna Kirti

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.

🙏 Credits & Attributions

3D Model


	"Groot dancing" by Сhemaron
	🔗 Source: Sketchfab
	📜 License: Creative Commons Attribution 4.0

Logo Artwork


	"Baby Groot - Voodoo Doll Series: Marvel Universe" by Sylvain Drolet
	🔗 Source: Dribbble
	🎨 Artist: Sylvain Drolet

Core Technology


	Puter.js - Free, Unlimited AI API Access
	🔗 GitHub: github.com/heyPuter/puter
	📖 Docs: docs.puter.com
	📜 License: AGPL-3.0

Other Technologies

Technology	Purpose	Link
Supabase	Database & Google OAuth	supabase.com
Three.js	3D Graphics & Animation	threejs.org
SearXNG	Open-Source Meta-Search	docs.searxng.org
DuckDuckGo API	Instant Answers	duckduckgo.com
Wikipedia API	Knowledge Base	mediawiki.org/wiki/API
Vercel	Hosting & Deployment	vercel.com

👨‍💻 Author

Ratna Kirti

⭐ Star this repo if you find it useful!

Made with 💜 and 🌱 by Ratna Kirti

"I am Groot!" 🌱

Name		Name	Last commit message	Last commit date
Latest commit History 43 Commits
.codacy		.codacy
.github/instructions		.github/instructions
.vscode		.vscode
assets		assets
css		css
js		js
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
index.html		index.html
progress.md		progress.md
vercel.json		vercel.json

Folders and files

Latest commit

History

Repository files navigation

🌱 We are GROOTS

AI Chatbot Powered by Puter.js & Supabase

🏆 Key Achievements

📖 Table of Contents

✨ Features

🔍 Web Search Architecture

Search Sources

Intelligent Features

🎬 Demo

Features Showcase

🚀 Quick Start

Option 1: Run Locally (Without Supabase)

Option 2: With Supabase Integration

📁 Project Structure

🔧 Configuration

🗃️ Database Schema

Entity Relationship Diagram

Tables

🤖 Available AI Models

Usage Example with Puter.js

📱 Usage Guide

Basic Operations

Keyboard Shortcuts

🌐 How Puter.js Works

🎨 Customization

Themes

3D Model

📚 Technology Stack & API Reference

Core Technologies

🤖 Puter.js AI Integration

Basic Chat

Streaming Responses

Available Models

Usage in Project (js/puter-chat.js)

🔐 Supabase Authentication

Google OAuth Setup

Auth State Management

Database Operations

🌱 Three.js 3D Model

GLTFLoader Setup

Animation Loop

Usage in Project (js/groot-model.js)

🔍 Web Search API

Core Search Function

SearXNG Integration (12 Instances)

Trust Scoring System

🔒 Security

Best Practices Implemented

Reporting Vulnerabilities

🤝 Contributing

How to Contribute

Development Setup

Code Style

📜 License

🙏 Credits & Attributions

3D Model

Logo Artwork

Core Technology

Other Technologies

👨‍💻 Author

⭐ Star this repo if you find it useful!

About

Topics

Resources

License

Contributing

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Usage in Project (`js/puter-chat.js`)

Usage in Project (`js/groot-model.js`)

Packages