DEV Community

Cover image for Creating a Chatbot from Scratch and Vibe Coding the UIπŸ’ƒ
Rohan Sharma
Rohan Sharma Subscriber

Posted on

Creating a Chatbot from Scratch and Vibe Coding the UIπŸ’ƒ

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

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.

favicon 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:

const body = await req.json();
const { messages, mode = "general", provider = "groq", apiKey } = body;
Enter fullscreen mode Exit fullscreen mode
  • 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;
Enter fullscreen mode Exit fullscreen mode

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 and qwen.

Each provider has custom logic to instantiate the model, handle errors, and stream the response using:

await streamText({...})
Enter fullscreen mode Exit fullscreen mode

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";
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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" }
}
Enter fullscreen mode Exit fullscreen mode

Then the appropriate model (reasoning, creative, or fast) is selected and used for the response.

Β 

πŸ“„ Multi-Provider Flow

diagram

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:

GitHub logo RS-labhub / Radhika

Your day-2-day life assitant and bff πŸ’ž

banner

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


















Preview Description
YouTube Demo 🎬 YouTube Demo
Click the image to watch the full demo.
Blog Post πŸ“ 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…

Β 

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:

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)

Collapse
 
rohan_sharma profile image
Rohan Sharma

Hey all, I hope you like it!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
rohan_sharma profile image
Rohan Sharma

Bruh is killing me publicly

Collapse
 
uzondu9 profile image
Uzondu

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.

Collapse
 
rohan_sharma profile image
Rohan Sharma

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 πŸ‘‘

Collapse
 
abhiwantechnology profile image
Abhiwan Technology

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.

Collapse
 
rohan_sharma profile image
Rohan Sharma

I need to try blockchain too. But the thing is, this domain is still struggling.

Collapse
 
aniruddhaadak profile image
ANIRUDDHA ADAK

osm

Collapse
 
rohan_sharma profile image
Rohan Sharma

Thank you Aniruddha!

Collapse
 
anni profile image
Anietie Brownson

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?

Collapse
 
rohan_sharma profile image
Rohan Sharma

Ahhh please πŸ˜‚πŸ€£

Collapse
 
chiragagg5k profile image
Chirag Aggarwal

Radhika is a lucky girl πŸ˜‚

Collapse
 
rohan_sharma profile image
Rohan Sharma

If she exists

Collapse
 
njal profile image
Florios Katsouros

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

Collapse
 
rohan_sharma profile image
Rohan Sharma

Thank you so much.

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? πŸ˜‚πŸ€£

Collapse
 
itxitpro_llc profile image
ITXITPro LLC

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!

Collapse
 
rohan_sharma profile image
Rohan Sharma

Thank you.

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!

Collapse
 
nevodavid profile image
Nevo David

Growth like this is always nice to see. Kinda makes me wonder - what keeps stuff going long-term? Like, beyond just the early hype?

Collapse
 
rohan_sharma profile image
Rohan Sharma

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.