React AI Kit 🤖✨

A premium collection of highly customizable, modern, and production-ready AI components for React. Build stunning AI interfaces in minutes with glassmorphism, smooth animations, and a powerful multi-provider AI brain.

✨ Features

• 🧠 Multi-Provider AI Brain: Seamlessly switch between OpenAI, Anthropic, Gemini, OpenRouter, and Ollama.
• ⚡ Real-Time Streaming: High-performance, chunked responses for a natural "typing" effect.
• 🎭 Stunning Aesthetics: Premium designs with glassmorphism, vibrant gradients, and modern typography.
• 🧞 macOS Genie Effect: High-end animations for professional modal interactions.
• 📦 Portal Rendering: Conflict-free UI that always stays on top of your application layout.
• 🌓 Dark Mode Support: Beautifully crafted themes for both light and dark environments.
• 🛠️ Deeply Customizable: Control everything from AI personality (System Prompts) to visual tokens.

🖼️ Showcase

| Chat bot with modal (Light) | Chat bot Icon (Light) | | :---: | :---: | | | | | Chat bot with modal (Dark) | Chat bot Icon (Dark) | | | |

🚀 Quick Start

1. Installation

npm install react-ai-kit lucide-react
# or
yarn add react-ai-kit lucide-react

2. Styles Setup (Tailwind v4 / CSS)

Import the styles in your main entry file (e.g., main.tsx or App.tsx):

import 'react-ai-kit/dist/react-ai-kit.css';

🧠 AI Provider Configuration

The ChatBotModal uses a unified providerConfig to connect to various AI backends.

🌐 Cloud Providers (OpenAI, Anthropic, Gemini)

<ChatBotModal 
  providerConfig={{
    provider: 'openai', // or 'anthropic', 'gemini'
    apiKey: 'YOUR_API_KEY',
    model: 'gpt-4o',
    temperature: 0.7
  }}
/>

🌉 OpenRouter (The Universal Bridge)

Access 100+ models with one API key.

<ChatBotModal 
  providerConfig={{
    provider: 'openrouter',
    apiKey: 'YOUR_OPENROUTER_KEY',
    model: 'meta-llama/llama-3-70b-instruct',
    referer: 'https://your-site.com',
    title: 'Your App Name'
  }}
/>

🦙 Ollama (Local LLMs)

Run models locally for privacy and cost-efficiency.

<ChatBotModal 
  providerConfig={{
    provider: 'ollama',
    model: 'llama3',
    baseURL: 'http://localhost:11434'
  }}
/>

🛠️ Component API

ChatBotModal Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | providerConfig | ProviderConfig | - | AI connection details. | | streamingEnabled | boolean | true | Enable real-time typing effect. | | size | 'sm' \| 'md' \| 'lg' | 'md' | Modal and trigger dimensions. | | animation | 'genie' \| 'scale' \| 'slide' \| 'fade' | 'genie' | Opening animation style. | | systemPrompt | string | - | Instructions to define the AI personality. | | welcomeMessage| string | - | Initial greeting in the chat. | | mode | 'light' \| 'dark' | 'light' | visual theme. | | accentColor | string | Gradient | Primary UI color (supports CSS gradients). | | position | ChatBotPosition | bottom-right | Docking location. | | borderRadius | string | 1.5rem | Custom handle for UI curves. |

🔐 Security Best Practices

When using API keys in the frontend (Vite), always use environment variables:

1. Create a .env file:

   VITE_AI_API_KEY=your_key_here

2. Pass it to the component:

   apiKey: import.meta.env.VITE_AI_API_KEY

🤝 Contributing & Support

• Bugs & Features: Open an issue on GitHub.
• Show Love: Give us a ⭐️ if you find this useful!

MIT © Amit