andysonm's blog
How I built a Yoda AI chatbot

How I built a Yoda AI chatbot

Andyson Mupeta's photo
Andyson Mupeta
·

4 min read

Creating an AI chatbot is always an interesting project, but what makes it even more fun is adding a unique twist. In this case, I built one with a personality that resembles Yoda! Let me show you how I did it, step by step.

Building the User Interface

The first task was setting up the User Interface (UI). This is what the user sees and interacts with, so I kept it simple and user-friendly. The UI is divided into three sections:

  • The Header: This contains an image and the title of the website, setting the tone for what the user can expect.

  • The Chat Area: This is where all the messages appear, both from the user and the chatbot. I added simple functionality that distinguishes between the two, ensuring clarity during the conversation.

  • The Message Input Section: Just a basic input form with a send button.

 <div className="flex flex-col h-screen bg-gray-100">

//THE HEADER
    <header className="bg-white shadow">
      <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 ">
      <Image 
       width={100}
       height={100}
         alt=''
         src='/yoda.png' 
          />
        <h1 className="text-3xl font-bold text-gray-900">Yoda Bot</h1>
      </div>
    </header>

//THE CHAT AREA
    <main className="flex-1 overflow-y-auto p-4">
      <div className="max-w-3xl mx-auto space-y-4">
        {messages.map((message, index) => (
          <div
            key={index}
            className={`flex ${message.role == 'assistant' ? 'justify-start' : 'justify-end'}`}
          >
            <div
              className={`max-w-sm rounded-lg p-4 ${
                message.role == 'assistant' ? 'bg-white text-gray-800' : 'bg-[#75934E] text-white'
              }`}
            >
              {message.content}
            </div>
          </div>
        ))}
      </div>
    </main>

//THE MESSAGE INPUT SECTION
    <div className="bg-white border-t border-gray-200 px-4 py-4 sm:px-6">
      <div className="max-w-3xl mx-auto flex items-center">
        <input
          type="text"
           value={input}
          onChange={handleInputChange}
          placeholder="Talk to Yoda..."
          disabled={isLoading}
          className="flex-1 appearance-none border rounded-l-md w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
        />
        <button
           onClick={handleSubmit}
          className="flex-shrink-0 bg-[#75934E] text-white font-bold py-2 px-4 rounded-r-md hover:bg-[#75934E] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
        >
          <IoIosSend size={22}/>
          <span className="sr-only">Send message</span>
        </button>
      </div>
    </div>


  </div>

Adding Chat Functionality

Once the UI was in place, it was time to give the chatbot its voice—this is where the real magic happens. To make the chatbot actually function, I used the AI SDK package, which is a typescript toolkit designed to help you build AI-powered applications.

  • I started by installing the package and importing the useChat function from the AI SDK. This function does the heavy lifting, managing everything from user input to chat history and loading states.

  • With the useChat function in place, I integrated it into the UI sections, handling user input and ensuring the chatbot could respond in real-time. Now, the chatbot was ready to hold conversations.

//ADDING CHAT FUNCTIONALITY USING useChat
import { useChat } from 'ai/react';
  const { messages, input, handleSubmit, handleInputChange, isLoading } =
  useChat({});

Connecting to the AI Model

The chatbot was operational, but it still needed a brain—something to generate the responses. That’s where the OpenAI API comes in.

  • I created a function within an API file to handle the user’s messages, storing them in a variable for processing.

  • Next, I used streamText, a function from the npm “ai“ package that sends and receives messages in real time, keeping the conversation smooth and responsive.

  • For the chatbot’s personality, I chose to configure the OpenAI GPT-4o-mini model, giving it instructions on how to respond in a specific tone. You can adjust this to fit whatever style or tone you want your chatbot to have, but for this project, I went with Yoda.

  • The API returns a response from the OpenAI API and the useChat function gets this response and displays it as a message to the user.

//CONNECTING TO THE AI MODEL
import { CoreMessage,streamText } from "ai";
import { openai } from "@ai-sdk/openai";
import OpenAI from "openai";

export async function POST(req){
    const {messages} = await req.json();


    const result = await streamText({
        model:openai('gpt-4o-mini'),
        system:'Do your best Yoda impression!😄',
        messages

    });
    return result.toDataStreamResponse()
}

Once the setup was complete, I connected the chatbot’s UI to the model via the API and—boom—it was ready to chat with users, delivering real-time responses in its own unique style.

And that’s how I built my AI chatbot! By combining a clean, functional UI with powerful AI-backed chat functionality, I was able to create a conversational assistant with a lot of character. If you’re looking to build your own chatbot, start with these basics, and feel free to give it your own twist!

You can try out Yoda-bot for free here!👈

For more articles like this. Check my website!👈

starwarsNext.jsAIArtificial Intelligencechatgptchatbot