Creating a Chatbot from Scratch and Vibe Coding the UI💃
Rohan Sharma

Rohan Sharma @rohan_sharma

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

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)

Comments 52 total

  • Rohan Sharma
    Rohan SharmaJun 21, 2025

    Hey all, I hope you like it!

  • Nevo David
    Nevo DavidJun 21, 2025

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

    • Rohan Sharma
      Rohan SharmaJun 21, 2025

      I don't know the answer, but I just wanted to create this. Let's see how far it goes.

  • Dotallio
    DotallioJun 21, 2025

    Love the multi-mode approach, and the extra effort on UI and voice is awesome.
    Which provider do you find gives the best vibes for BFF mode?

  • Priya Yadav
    Priya YadavJun 21, 2025

    nice !!

  • Chirag Aggarwal
    Chirag AggarwalJun 21, 2025

    Radhika is a lucky girl 😂

  • АнонимJun 21, 2025

    [deleted]

  • Anietie Brownson
    Anietie BrownsonJun 21, 2025

    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?

  • K Om Senapati
    K Om Senapati Jun 21, 2025

    Great

  • ANIRUDDHA  ADAK
    ANIRUDDHA ADAKJun 21, 2025

    osm

  • Nikhil Raj
    Nikhil RajJun 21, 2025

    Good Job Bhai!!

  • Dmitrii
    DmitriiJun 21, 2025

    Is it real that you're trying to understand model type based on hardcodes? No offense, but it might be handled more efficiently.

    • Rohan Sharma
      Rohan SharmaJun 22, 2025

      It was easy, actually. If you see my code, it's very unorganized. However, I will organize it soon. I have pre-done most of the work already.

      But I would love to hear about the most efficient methods from you.

  • Hugue Delmas Poe
    Hugue Delmas Poe Jun 21, 2025

    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.

  • Uzondu
    UzonduJun 21, 2025

    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.

    • Rohan Sharma
      Rohan SharmaJun 22, 2025

      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 👑

  • Kyle
    KyleJun 22, 2025

    Why did you go with Vercel AI SDK instead of Openrouter, for example?

    • Rohan Sharma
      Rohan SharmaJun 22, 2025

      It's free, and we can add api key for multi-llm providers specifically. Openrouter is good(single api for all providers), but with balance.

  • T-Bot
    T-BotJun 23, 2025

    Dope 😎

  • Jyoti Ranjan Jena
    Jyoti Ranjan JenaJun 23, 2025

    Wow imaginary gf app

    • Rohan Sharma
      Rohan SharmaJun 23, 2025

      Ehehehe.

      Anyway, it's my gf. You can still ask something productive to her. 😂🤣

  • Adamya Khairwal
    Adamya KhairwalJun 23, 2025

    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

    1. 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.

  • nadeem zia
    nadeem ziaJun 23, 2025

    Its perfect

  • Khaja Hussain
    Khaja HussainJun 23, 2025

    Woww!!. Nice.👍

  • Faseeu
    FaseeuJun 23, 2025

    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.

    • Rohan Sharma
      Rohan SharmaJun 23, 2025

      I need to research about it a bit. Thanks for your suggestions. How you come up with this?

  • Tabot Konrald Eyong
    Tabot Konrald EyongJun 24, 2025

    Thanks really impactful

  • Priya Yadav
    Priya YadavJun 24, 2025

    wohhhhhhoooo

  • Abhiwan Technology
    Abhiwan TechnologyJun 24, 2025

    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.

    • Rohan Sharma
      Rohan SharmaJun 24, 2025

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

  • ITXITPro LLC
    ITXITPro LLCJun 25, 2025

    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!

    • Rohan Sharma
      Rohan SharmaJun 25, 2025

      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!

  • Emilia greendevald
    Emilia greendevaldJun 25, 2025

    great! thanks

  • leet blogger
    leet bloggerJun 25, 2025

    Nice Rohan!!

  • Florios Katsouros
    Florios KatsourosJun 25, 2025

    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

    • Rohan Sharma
      Rohan SharmaJun 25, 2025

      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? 😂🤣

Add comment