DEV Community

Cover image for 🤖 YOGA AI ASSISTANT-BOT✨
YOGARATHNAM-S
YOGARATHNAM-S Subscriber

Posted on

🤖 YOGA AI ASSISTANT-BOT✨

🤖 YOGA AI Assistant -✨

🤔 What is this?

This is a smart chatbot website that can help you with different things depending on what you need. Think of it as having 6 different AI assistants in one app! 🎉

🎭 What can it do?

The AI has 6 different "modes" or personalities:

  1. 🧠 General — Answers everyday questions and has normal conversations 💬
  2. 🎯 Productivity — Helps you organize tasks and manage your time ⏰
  3. ❤️ Wellness — Gives advice about health, fitness, and feeling good 🌱
  4. 📚 Learning — Acts like a tutor to help you study and learn new things 🎓
  5. 💡 Creative — Helps with brainstorming ideas and creative projects 🎨
  6. 💕 BFF — Talks like a friendly Gen-Z bestie for emotional support 👯‍♀️

✨ Cool Features

  • 🎤 Voice Chat: Talk to it instead of typing — and it talks back!
  • 🧠 Multiple AI Brains: Powered by Groq, Google, OpenAI, Claude 🔥
  • 💾 Remembers Conversations: Keeps memory per mode 📝
  • 📱 Responsive Design: Works great on desktop, tablet, and phone
  • 🌙 Dark/Light Mode: Choose your vibe ☀️🌙

👨‍💻 Technical Stuff (for developers)

Built using modern web tech:

  • Next.js, React, TypeScript, Tailwind CSS
  • Uses Vercel AI SDK to connect with multiple AI models

🧠 Multi-Mode Intelligence

Mode Description
🧠 General All-purpose companion for everyday chats
🎯 Productivity Task manager, planner, and time optimizer
❤️ Wellness Health tips, mental support, and fitness guidance
📚 Learning Tutor-like help for learning and studying
💡 Creative Idea generator for all your creative projects
💕 BFF Casual chats, emotional support, Gen-Z style

🤖 Multi-Provider AI Support

Provider Description
Groq Fast responses via Llama models (no API key needed)
Google Gemini Multimodal AI from Google (no API key needed)
OpenAI GPT-4o, GPT-4 Turbo, GPT-3.5 (API key required)
Claude Anthropic's Claude models (API key required)

🚀 Advanced Chat Interface

  • ⚡ Streaming Responses
  • 🧠 Mode-Specific Memory
  • 💬 Persistent Chat History
  • 🎨 Beautiful Responsive UI
  • 🌓 Dark & Light Themes
  • 📤 Message Export (coming soon)

🎤 Voice Integration

  • Speech-to-Text input
  • Text-to-Speech output
  • Multi-language support
  • Voice Controls with indicators and interruption
  • Natural-Sounding Voices

⚡ Quick Actions & Smart Features

  • Quick Prompts per mode
  • One-Click Access for tasks
  • Context-Aware Suggestions
  • Robust Error Handling
  • Secure API Key Management

🎨 Dynamic AI Visualization

  • Interactive 3D Particle System
  • Mode-based Color Themes
  • Real-Time Activity Animation
  • Live AI Usage Analytics

📊 Activity Analytics

  • Track message counts, response times, and session data
  • Mode Usage Breakdown
  • Live AI Status + voice activity monitoring

🛠️ Tech Stack

Frontend

  • Next.js 14, React 18, TypeScript
  • Tailwind CSS, shadcn/ui, Lucide Icons
  • Three.js for 3D effects

Backend & AI

  • Vercel AI SDK
  • Providers: Groq, Gemini, OpenAI, Claude
  • Speech APIs: WebKit for STT/TTS
  • Storage: localStorage for persistence

💃 Smart Model Selection 

let modelType = "fast"; // llama-3.1-8b-instant

if (query.includes("analyze", "compare", "plan", "strategy")) {
  modelType = "reasoning"; // llama-3.3-70b
}
if (query.includes("creative", "idea", "write", "design")) {
  modelType = "creative"; // qwen3-32b
}
Enter fullscreen mode Exit fullscreen mode

🚀 Getting Started

Prerequisites

  • Node.js 18+
  • Modern browser (for speech features)
  • Optional: API Keys for OpenAI/Claude

Installation

Use

git clone https://github.com/yogarathnam-s/ai-assistant.git
cd ai-assistant
npm install     # or bun install
Enter fullscreen mode Exit fullscreen mode

Set up your .env file:

GROQ_API_KEY=your_key
GOOGLE_GENERATIVE_AI_API_KEY=your_key
# Optional:
# OPENAI_API_KEY=
# ANTHROPIC_API_KEY=
Enter fullscreen mode Exit fullscreen mode

Run dev server:

npm run dev     # or bun run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000

🎮 Usage Guide

Switching Modes

Click any of the six mode icons to shift the assistant’s behavior.

Choosing AI Providers

Select between:

  • Groq (default)
  • Gemini
  • OpenAI
  • Claude

Using Voice Features

  • Click 🎤 to talk
  • Click 🔊 to hear the AI speak
  • Works in multiple languages

Managing Chats

  • Auto-saves per mode
  • Clear history with trash button
  • Switch modes without losing past chats

Themes & UX

  • Toggle between Light and Dark
  • Fully responsive and accessible

🏗️ Project Structure 

ai-assistant/
├── app/
│   ├── api/chat/route.ts          # Multi-provider chat API endpoint
│   ├── globals.css                # Global styles and theme variables
│   ├── layout.tsx                 # Root layout with metadata
│   └── page.tsx                   # Main application orchestrator
├── components/
│   ├── ui/                        # shadcn/ui base components
│   ├── chat-header.tsx            # Header with controls and mode display
│   ├── chat-sidebar.tsx           # Mode selection and quick actions
│   ├── chat-messages.tsx          # Message display and formatting
│   ├── chat-input.tsx             # Input field with voice controls
│   ├── chat-container.tsx         # Chat logic and state management
│   ├── ai-visualization.tsx       # 3D particle system visualization
│   └── activity-matrix.tsx        # Real-time analytics dashboard
├── hooks/
│   └── use-speech.ts              # Speech recognition and synthesis
├── types/
│   └── speech.d.ts                # TypeScript definitions for speech APIs
└── lib/
    └── utils.ts                   # Utility functions and helpers
Enter fullscreen mode Exit fullscreen mode

Each folder is modularized for easy extension.

🔧 Configuration

Model Selection

Set preferred models per task:

const MODELS = {
  groq: {
    fast: "llama-3.1-8b-instant",
    reasoning: "llama-3.3-70b-versatile", 
    creative: "qwen/qwen3-32b"
  },
  gemini: { default: "gemini-2.0-flash" },
  openai: { default: "gpt-4o" },
  claude: { default: "claude-3-5-sonnet-20241022" }
}
Enter fullscreen mode Exit fullscreen mode

Customize:

  • Quick Actions — in app/page.tsx
  • Mode Styling — color and behavior
  • Particles — in ai-visualization.tsx
  • Voice Settings — in use-speech.ts

🌟 Key Highlights

  • Smart AI Model Routing
  • Per-Mode Chat History
  • Real-time 3D Feedback
  • Voice in + out
  • Multi-provider support
  • Analytics dashboard

🤝 Contributing

We welcome contributions!

git checkout -b feature/your-feature
# make changes
git commit -m "Add feature"
git push origin feature/your-feature
Enter fullscreen mode Exit fullscreen mode

Submit a pull request!

Dev Guidelines

  • Use TypeScript
  • Follow existing structure
  • Add tests if possible
  • Keep it accessible and responsive

📄 License

MIT License — See LICENSE

📞 Support & Community

🔮 Roadmap

Coming Soon

  • [ ] Export chat history
  • [ ] Custom AI personalities
  • [ ] Real-time collaboration
  • [ ] Voice cloning

Performance

  • [ ] Response caching
  • [ ] Data compression

⭐ Star the repo • 🐞 Report bugs

Top comments (0)