Discover how Rohan Sharma crafted Radhika, a versatile AI chatbot blending multiple providers and modes, and vibe-coded a dazzling UI using Next.js, Tailwind, and cheeky prompts. It’s AI assistant glow-up time!

Meet Radhika: Your New AI Sidekick, Built from Scratch and Vibe-Coded to Perfection 💃

Hey there, fellow dev! Ready for a juicy deep dive into building an AI chatbot that’s not just smart but has all the vibes? Meet Radhika, the Adaptive Reasoning & Intelligence Assistant, designed by Rohan Sharma to be your all-rounder AI BFF.

Radhika AI Cover

🧠 What’s Radhika All About?

Radhika isn’t your average chatbot. It juggles SIX distinct personalities or "modes," each tailored to a different facet of your life:

General: Your everyday AI assistant
Productivity: Task planner and time optimizer
Wellness: Health & mental well-being guide
Learning: Education and skill-building mentor
Creative: Brainstorming buddy and idea generator
BFF: The Gen Z BFF who vibes and supports emotionally

Sounds like a multitasking wizard, right? 🤯 All this wrapped in a friendly AI you can chat with, get recommendations from, or simply hang out for some digital company.

Want to test-drive her? Check out the live app here: radhika-sharma.vercel.app (go on, I dare you!).

🛠️ Tech Stack Breakdown: How This Magic Was Built

Let's pull back the curtain on the wizardry:

Frontend

Next.js 14 with App Router + React 18 (modern and sleek!)
Tailwind CSS + Custom Design System for that pixel-perfect look
shadcn/ui components — because reusable is the name of the game
Lucide React Icons — keeping it stylish and readable
Three.js for dazzling 3D particle visualizations that react to the chatbot modes
Smooth CSS transitions & keyframe animations for bounce and flow

AI & Backend

Powered by Vercel AI SDK letting Radhika tap into multiple LLMs under one hood
AI Providers:
- Groq (llama-3 & qwen models)
- Google Gemini 2.0
- OpenAI GPTs (gpt-4o, 3.5-turbo, etc.)
- Anthropic Claude
Uses WebKit Speech Recognition & Synthesis APIs for voice input/output — fancy, right?
Chat conversation and user settings stored with browser localStorage (smart persistence!)
API communication via Next.js API routes, secured and streamlined

Development Workflow

Full TypeScript for safer code (goodbye runtime surprises!)
Next.js build optimizations like bundle splitting & lazy loading
Hassle-free deployment with Vercel, environment variables ready

🚀 The Heart of Radhika: Main Chat Logic

Here’s the juicy tech behind how incoming chat requests turn into meaningful responses:

Parse Request

Incoming requests bring your conversation history (messages), desired mode (like BFF or productivity), the provider you want to tap into (Groq, OpenAI, etc.), and any apiKey needed.
```
const body = await req.json();
const { messages, mode = "general", provider = "groq", apiKey } = body;
// validations here to keep things clean
```
Assign System Prompt

Each mode tweaks Radhika's personality & focus with a specialized system prompt. For example, the "creative" prompt encourages brainstorming, while "wellness" mode acts like a gentle health coach.
```
const systemPrompt = SYSTEM_PROMPTS[mode] || SYSTEM_PROMPTS.general;
```
Pick the Right Provider

Depending on your choice, Radhika routes requests through:
- Google Gemini 2.0 for flash and versatility
- OpenAI’s GPTs, because who can ignore GPT?
- Claude from Anthropic for safe, thoughtful replies
- Groq’s llama & qwen models for custom on-premise vibes

Dynamic Model Selection for Groq

Here’s where the smart stuff kicks in. Groq models auto-select based on the last user message’s intent:

if (lastMessage.includes("analyze") || lastMessage.includes("plan")) {
  modelType = "reasoning"; // big brain mode
} else if (lastMessage.includes("creative") || lastMessage.includes("design")) {
  modelType = "creative"; // bring out the artsy
} else {
  modelType = "fast"; // quick and snappy
}

This way, Radhika adapts on the fly — whether you’re planning your next project or brainstorming that poem.

You can check out the full flow diagram in the article screenshots or in the repo!

📄 Multi-Provider Flow Diagram

Having a single API route talk to multiple AI engines and modes? It’s wild but totally doable and elegant with proper routing logic. This keeps your codebase tidy while giving users the power of choice and variety.

Multi-provider Flow Diagram

Want to geek out fully? Dive into the GitHub repo: RS-labhub/Radhika — it’s got all the goodies including voice recognition, speech synthesis, light/dark modes, and more.

💃 Vibe Coding the UI: Making It Feel Right

Once the brain (logic) is done, the next step is dressing up your AI for the party — the UI. Rohan used AI tools like v0, lovable, and the ever-helpful ChatGPT to produce an interface that matches the chatbot’s moods and functions.

Live demo and a quick project explainer are beautifully captured in this YouTube video — a must-watch for UI lovers:

Trust me, endless prompt refining (aka “prompting... prompting... and never-ending prompting...”) is totally worth it when your AI looks and feels on point.

If you dig it as much as I do, go show some love by starring the repo and following Rohan on GitHub!

✨ Key Highlights to Drool Over

🤖 Multi-Modal AI: Six tailored bots in one app — truly one-stop shop for your digital needs
⚡ Multi-Provider Support: Groq, Gemini, OpenAI, Claude — mix & match your favorite AI
🎤 Voice Power: Speech-to-text input + text-to-speech output, making talks hands-free
🎨 Dynamic 3D Visuals: Mode-based particle visuals that dance along with responses
💾 Smart Persistence: Your conversations saved automatically, separate by mode
🚀 Quick Actions: One-click shortcuts customized for each mode’s common tasks
📊 Real-time Analytics: Monitoring AI usage live, because numbers matter
🌙 Beautiful UI: Responsive with dark and light themes — eye candy! 🍬

🔄 Modes Recap

Radhika isn’t one-size-fits-all. Here’s what she specializes in:

Productivity — Organize, plan, and smash tasks
Wellness — Get mindful tips, routines, and support
Learning — Personalized study help and skill coaching
Creative — Brainstorm new ideas, stories, art projects
General — Everyday problem-solver and conversationalist
BFF — Your friendly, chill Gen Z AI pal who gets emotional support & casual chats right

Who’s this for? Anyone who wants a smart assistant that adapts to what YOU need and remembers your history, all with a slick interactive UI and voice smarts.

💬 Final Thoughts: Why Radhika Rules

Radhika is a stellar example of an AI assistant powered by fresh tech, built from scratch but with a versatile soul. Multi-provider support means you get the best of all worlds, and the six modes ensure it feels personal and practical.

Psst... if you only check out one mode, try the BFF — trust me, it’s fun and surprisingly heartfelt. 💞

Don’t Miss These Links:

🌐 Live Demo: radhika-sharma.vercel.app (with modern & pixel UI options)
⭐ GitHub Repo: RS-labhub/Radhika (star it, spread love!)
🎥 YouTube Demo: Watch here

Thanks for hanging out with me on this AI journey. You rock. Now go chat with Radhika and spam those comments — Rohan is all ears! 🤗

💡 Commentary

Isn't it refreshing to see an AI project that’s not stuck in just one use case? Radhika’s multi-mode approach is perfect for anyone who hates switching apps and loves a chatbot that actually adapts with character. Plus, the multi-provider backend is an expert move — it keeps options open and performance sharp.

The UI workflow shows the power of blending human creativity with AI-assisted coding — a glimpse into the future where we "vibe code" interfaces rather than drudge through endless manual tweaks.

Whether you’re a hobbyist, a pro dev, or just curious about chatbot magic, the Radhika project is super inspiring and packed with practical nuggets.

Happy coding and vibing! 🚀✨