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.
(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:
const body = await req.json();
const { messages, mode = "general", provider = "groq", apiKey } = body;
-
messages
: The conversation history sent by the client. -
mode
: Determines which system prompt to use (e.g.,bff
,learning
, etc.). -
provider
: Specifies the AI backend to use (groq
,openai
,claude
,gemini
). -
apiKey
: Required for OpenAI and Claude if a user key is needed.
The code also validates whether the messages
array exists and is non-empty.
2. Assign System Prompt
Based on the selected mode, a system prompt is selected to guide the assistant's personality and purpose:
const systemPrompt = SYSTEM_PROMPTS[mode] || SYSTEM_PROMPTS.general;
Examples of modes include:
productivity
bff
creative
wellness
3. Route to the Correct Provider
The provider
field determines which AI model backend to use:
-
Gemini (
google
): Uses Google's Gemini 2.0 model. -
OpenAI: Uses GPT models (like
gpt-4o
,gpt-3.5-turbo
). -
Claude: Uses Anthropic models (like
claude-3-sonnet
). -
Groq: Defaults to models like
llama-3
andqwen
.
Each provider has custom logic to instantiate the model, handle errors, and stream the response using:
await streamText({...})
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";
} else if (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 context
let modelType = "fast"; // llama-3.1-8b-instant for quick responses
// Use reasoning model for complex analytical tasks
if (query.includes("analyze", "compare", "plan", "strategy", "decision", "problem")) {
modelType = "reasoning"; // llama-3.3-70b-versatile
}
// Use creative model for artistic and innovative tasks
if (query.includes("creative", "brainstorm", "idea", "write", "design", "story")) {
modelType = "creative"; // qwen/qwen3-32b
}
Model Configuration
Customize model selection in the API route:
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" }
}
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:
RADHIKA - Adaptive Reasoning & Intelligence Assistant
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
β¨ 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β¦
Β
Vibe Coding the UI
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
- Creative: Brainstorming, content creation, artistic inspiration
- General: Problem-solving, decision-making, everyday conversations
- BFF: Emotional support, casual chats, GenZ-friendly interactions
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:
- Live Demo: https://radhika-sharma.vercel.app/ (added modern/pixel UI options)
- Github Repo: https://github.com/RS-labhub/Radhika (Give it a star π )
- Youtube Demo: https://www.youtube.com/watch?v=2FW6IJeOkzI
Thank you for reading. You're wonderful. And I mean it. Ba-bye, see you in the next blog. (and PLEASE SPAM THE COMMENT SECTION AS ALWAYS)
Top comments (52)
Hey all, I hope you like it!
Bruh is killing me publicly
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.
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.
No no. That's fine! I'm happy that you liked my project. Thank you π
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.
I need to try blockchain too. But the thing is, this domain is still struggling.
osm
Thank you Aniruddha!
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?
Ahhh please ππ€£
Radhika is a lucky girl π
If she exists
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
Thank you so much.
Btw, this comments also seems like an AI generated one (or better I can say, chatGPT). Isn't it? ππ€£
This was a refreshing read, Rohan!
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!
Thank you.
Growth like this is always nice to see. Kinda makes me wonder - what keeps stuff going long-term? Like, beyond just the early hype?
I don't know the answer, but I just wanted to create this. Let's see how far it goes.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.