About: Dive deeper than the deepest! || Programmer || Developer || Designer || Technical Writer
Location:
Bihar, India
Joined:
Aug 16, 2024
Creating a Chatbot from Scratch and Vibe Coding the UI💃
Publish Date: Jun 21
123 52
Hey all,
I hope you remember me. (Yes?? LMK in the comment section.)
In this blog, I will discuss Radhika: Adaptive Reasoning & Intelligence Assistant. It provides specialized assistance across six distinct modes: General, Productivity, Wellness, Learning, Creative, and BFF.
Radhika is a versatile AI chatbot designed to assist with a wide range of tasks, from answering questions to providing recommendations and engaging in casual conversation.
radhika-sharma.vercel.app
(try it out, give feedback and suggestions, request changes)
🛠️ Tech Stack
Frontend
Framework: Next.js 14 with App Router and React 18
Styling: Tailwind CSS with custom design system
Components: shadcn/ui component library
Icons: Lucide React icon library
3D Graphics: Three.js for particle visualizations
Animations: CSS transitions and keyframe animations
AI & Backend
AI Integration: Vercel AI SDK for unified LLM access
Providers: Groq, Google Gemini, OpenAI, Claude
Speech: WebKit Speech Recognition and Synthesis APIs
Storage: Browser localStorage for chat persistence and settings
API: Next.js API routes for secure LLM communication
Development
Language: TypeScript for type safety
Build: Next.js build system with optimizations
Deployment: Vercel-ready with environment variable support
Performance: Optimized bundle splitting and lazy loading
🚀 Implementing Main Logic
This section breaks down how the app/api/chat/route.ts endpoint processes requests, selects models, applies system prompts, and streams responses using different AI providers.
1. Parse Request
The request handler begins by parsing the JSON body from the incoming POST request:
Each provider has custom logic to instantiate the model, handle errors, and stream the response using:
awaitstreamText({...})
4. Model Selection (Groq Only)
If the provider is groq, model selection is dynamic. It analyzes the last message to determine the type of task:
if (lastMessage.includes("analyze")||lastMessage.includes("plan")){modelType="reasoning";}elseif (lastMessage.includes("creative")||lastMessage.includes("design")){modelType="creative";}else{modelType="fast";}
RADHIKA automatically selects the best model based on your query complexity:
// Determine which model to use based on conversation contextletmodelType="fast";// llama-3.1-8b-instant for quick responses// Use reasoning model for complex analytical tasksif (query.includes("analyze","compare","plan","strategy","decision","problem")){modelType="reasoning";// llama-3.3-70b-versatile}// Use creative model for artistic and innovative tasksif (query.includes("creative","brainstorm","idea","write","design","story")){modelType="creative";// qwen/qwen3-32b}
Then the appropriate model (reasoning, creative, or fast) is selected and used for the response.
📄 Multi-Provider Flow
This approach allows a single API route to serve multiple model providers and assistant personalities while maintaining clean, scalable logic.
If you're interested in knowing about the other logics like voice recognition and speech synthesis, light/dark mode, etc,. then please go over the github repo:
A sophisticated AI-powered assistant built with Next.js and powered by multiple LLM providers including Groq, Gemini, OpenAI, and Claude. RADHIKA adapts to different modes of interaction, providing specialized assistance for productivity, wellness, learning, creative tasks, and even acts as your GenZ bestie!
🎬 Project Showcase
Preview
Description
🎬 YouTube Demo Click the image to watch the full demo.
📝 Blog Post Read the blog for in-depth explanation.
✨ Features
🎯 Multi-Mode Intelligence
General Assistant: All-purpose AI companion for everyday queries and conversations
Productivity Coach: Task management, planning, organization, and time optimization expert
Wellness Guide: Health, fitness, mental well-being, and self-care support with sensitive guidance
Learning Mentor: Personalized education, skill development, and study planning
Creative Partner: Brainstorming, ideation, creative projects, and artistic inspiration
BFF Mode: Your GenZ bestie who speaks your language, provides emotional support, and vibes with…
When you have successfully implemented the main logic of your application, use the AI tools like v0, lovable, or bolt to create an interface according to your "thoughts".
I used v0 and ChatGPT. Prompting... Prompting... and never-ending prompting... Check out the video below to see a simple, short explanation of this project with features. However, you still have live access to it!
If you like it, then please star the repo 🌠 and follow me on GH.
Key Highlights
🤖 Multi-Modal AI - Six specialized assistant personalities in one app
⚡ Multi-Provider Support - Groq, Gemini, OpenAI, and Claude integration
🎤 Advanced Voice - Speech-to-text input and text-to-speech output
🎨 Dynamic 3D Visuals - Interactive particle system with mode-based colors
💾 Smart Persistence - Automatic chat history saving per mode
🚀 Quick Actions - One-click access to common tasks per mode
📊 Real-time Analytics - Live usage statistics and AI activity monitoring
🌙 Beautiful UI - Responsive design with dark/light themes
Modes
Productivity: Task planning, project management, time optimization
Wellness: Health guidance, fitness routines, mental well-being support
Learning: Educational assistance, study plans, skill development
Perfect for users who need a versatile AI assistant that adapts to different contexts, maintains conversation history across specialized domains, and provides an engaging visual experience with advanced voice capabilities.
Conclusion
Radhika is a sophisticated AI-powered assistant built with Next.js and powered by multiple LLM providers including Groq, Gemini, OpenAI, and Claude. RADHIKA adapts to different modes of interaction, providing specialized assistance for productivity, wellness, learning, creative tasks, and even acts as your GenZ bestie!
I personally suggest you try the "BFF" mode. You will like it for sure.
Once again, here are the links you don't want to miss out:
Nice one Rohan
I especially love the way you created the different modes
Looking at the system prompt made me chuckle though
What if Radhika decides to leave you?
Bonjour, je suis HUGUE,
Je suis ici pour une aide car j'ai eu a m'inscrire sur discord et fait des différents types de liaison avec bot-hosting. Et levanter-delta donc je suis a la recherche de CODE DE DÉPLOIEMENTS Pour créer un bot WhatsApp.. Merci pour votre soutien.
Beautiful product. We've got both a product designer and software developer. If you keep up with this you are in for several opportunities. Besides this, you've now got an excellent piece to add to your portfolio. If I may ask how do you combine AI tools like lovable and bolt to build the UI in conjunction with popular libraries and frameworks like Next and React. Are basic web technologies still relevant and how far do you go with these AI tools. Sorry if it's so long, I am drafting a tech stack plan.
Are basic web technologies still relevant and how far do you go with these AI tools.
Yes, it is. They are the basics. But with the help of AI tools like v0, lovable, bolt, etc., you will be able to ship the frontend very quickly. All you need to provide is a prompt, and keep prompting until you get the final result according to what you thought. But yeah, it's frustrating because these tools make a lot of mistakes.
Sorry if it's so long, I am drafting a tech stack plan.
No no. That's fine! I'm happy that you liked my project. Thank you 👑
Hey,
I checked your AI assistant, the UI is super amazing but I found a bug which can be turned into a opportunity if you seek the problem wisely... The Issue
Whenever I ask the bot to search something, it causes a internal server error. You can use public APIs like duckduckgo and wikipedia's summary API which are publically available without API limitations.
I'm working on my own LLM and I'm a JS developer too. I personally liked your designing skills so if you would like to work together directly mail me at codeclutch.adamyarao@gmail.com.
Bud!
This doesn't have tools support or MCP support, librechat has it but that's not a thing in next js and for production so will you add the support.
Very intresting topic is discused above regarding developing the chatbot. Most of the India based top blockchain game development services providers companies also were developing chatbots by integerating latest technology and doing innovation which makes the coding more engaging for developers.
Loved how you broke down the process of building a chatbot from scratch while also focusing on UI aesthetics — the "vibe coding" angle adds a fun and relatable twist. The conversational interface is clean and intuitive.
Would love to see a follow-up post on integrating NLP models or deploying it to platforms like Telegram or Slack. Keep sharing more builds like this!
Would love to see a follow-up post on integrating NLP models or deploying it to platforms like Telegram or Slack. Keep sharing more builds like this!
NOTED!
This is honestly one of the most ambitious AI UI integrations I’ve seen lately — combining multi-provider LLM logic with real-time mode switching, voice input, and a full frontend experience is no joke.
Loved how cleanly you've modularized the provider logic — especially the way you route through different system prompts and dynamically adjust the models (llama for reasoning, qwen for creativity etc). That’s smart.
Curious: how does latency behave when switching between providers mid-session? And are there fallback options if one fails (like Groq timing out, for example)?
Also really liked the use of v0 + ChatGPT for interface prototyping — the results actually look coherent, which isn't always easy when prompting UI
how does latency behave when switching between providers mid-session? And are there fallback options if one fails (like Groq timing out, for example)?
No, not yet. But nice suggestion. I will implement it.
the results actually look coherent, which isn't always easy when prompting UI
I don't depend on them totally. They give the response, I make changes and save, then again I ask for other features or UI changes. This practice saves a lot of time/.
Btw, this comments also seems like an AI generated one (or better I can say, chatGPT). Isn't it? 😂🤣
Hey all, I hope you like it!