DEV Community: James

Quantization Explained: A Concise Guide for LLMs

James — Wed, 10 Sep 2025 16:33:00 +0000

Ever heard of people running powerful LLMs on their laptop or even a phone?

Or maybe you’ve seen models like DeepSeek or Qwen with names like FP8 or 8-bit attached?

Those aren’t brand-new models, they’re quantized versions. In other words, the same DeepSeek, Qwen, or other open-source LLMs, but optimized through a process called quantization.

So, what exactly is quantization?

What is Quantization?

Quantization is a technique that reduces the precision of a model’s weights and activations.

Most state-of-the-art (SOTA) LLMs use 32-bit (FP32) or 16-bit (FP16) numbers to represent their parameters. With quantization, these can be compressed down to 8-bit or even 4-bit without changing the model’s architecture.

Image from A Visual Guide to Quantization

Think of it like image compression, but for LLMs. Just as lowering an image’s resolution makes the file smaller while still keeping it recognizable, quantization reduces the size of a model by storing its numbers with fewer bits while trying to keep the overall quality intact.

Why Do We Need Quantization?

Modern open-source LLMs are massive:

DeepSeek V3.1 → 685B parameters
Kimi-K2-Instruct → 1T parameters

The problem? These huge models demand enormous storage, memory, and compute power, making them almost impossible to run locally on consumer hardware. Larger models also mean slower inference.

Think of it like carrying around a full-size water cooler when all you need is a bottle of water. Both give you water, but one is so big and heavy that it’s impractical for everyday use. Quantization is like pouring that same water into smaller bottles you still get what you need, but it’s lighter, portable, and way easier to handle.

That’s where quantization helps by:
✅ Shrinking model size (less disk storage)
✅ Reducing memory usage (fits in smaller GPUs/CPUs)
✅ Cutting down compute requirements
✅ Speeding up inference

Which makes it possible to:
✅ Run LLMs on personal machines (great for privacy and control)
✅ Deploy efficient models on servers without breaking the budget
✅ Enable startups to fine-tune and host models in-house

The Trade-Off

Of course, there’s no free lunch. Lowering precision comes with some loss in accuracy.

Think of it like saving a photo:

RAW format (32-bit) keeps every tiny detail.
JPEG (8-bit) is smaller and still looks good.
Compress it too much (say 2–4 bits), and it turns into a blurry mess.

A quantized model works the same way.

A quantized model may not be as “smart” as its original counterpart.
If you go too low (e.g., 2–4 bits), and the model may start to hallucinate or lose important details.

That’s why it’s important to find the sweet spot: balancing performance gains with acceptable accuracy. For some applications, 8-bit or 4-bit quantization works well without a noticeable drop in quality.

Final Thoughts

Quantization is one of the main reasons people can run LLMs on laptops, edge devices, or even phones. It makes models faster, smaller, and cheaper to operate. But it’s not a magic bullet. Always test your quantized model to see if it still meets your goals whether that’s accuracy, reliability, or user experience.

This post is meant to give a simple overview of quantization and quantized LLMs for readers who aren’t deep into LLM development. If you’d like to dive deeper into the technical side, I’ll share some great resources at the end that explain the math and implementation details.

Check this article for more details about Quantization:
👉 Quantization for Large Language Models (LLMs): Reduce AI Model Sizes Efficiently
👉 A Visual Guide to Quantization

Check this YouTube video by Former Chief Evangelist at Hugging Face:
👉 Deep Dive: Quantizing Large Language Models, part 1

(Part 8) Build a Simple Chat Character Gallery: Integrating Chat API

James — Fri, 29 Aug 2025 16:45:00 +0000

👋 Recap from Previous Post

Yesterday, we finished building:

✅ Chat Page UI with a header, conversation area, and input section.
✅ The page now displays mock chat history, shows typing indicators, and includes a functional input field with validation

Next step, API integration for the chat.

Integrating Chat API

🎯 Goals for This Post

In this part of the tutorial, we’ll integrate the Chat API with our ChatPage. By the end, you’ll be able to use the chatbot gallery end-to-end. From creating a new chatbot to having a full conversation with it. We’ll use the same API from earlier, which means each chatbot’s experience and personality will reflect exactly what the user described when creating it.

📱 Step by Step Guide

1. Create ChatService.tsx file

First, let’s create a new file ChatService.tsx in /src/services/. This file will store all the API request functions related to our chat feature.

import {
  AllChatGetResponse,
  ChatMessageGetResponse,
  PostChatMessageRequest,
  PostChatMessageResponse,
  PostChatResponse,
} from '@/types/chat';
import HttpClient from './HttpClient';

interface ChatServiceType {
  getAllChats: () => Promise<AllChatGetResponse>;
  getChatMessages: (id: string) => Promise<ChatMessageGetResponse>;
  postChat: (personaId: string) => Promise<PostChatResponse>;
  postChatMessage: (
    id: string,
    payload: PostChatMessageRequest
  ) => Promise<PostChatMessageResponse>;
}

class ChatService implements ChatServiceType {
  private _http: HttpClient;

  constructor(httpClient: HttpClient) {
    this._http = httpClient;
  }

  getAllChats: ChatServiceType['getAllChats'] = () => this._http.get('/chats');

  getChatMessages: ChatServiceType['getChatMessages'] = (id) =>
    this._http.get(`/chats/${id}/messages`);

  postChat: ChatServiceType['postChat'] = (personaId) =>
    this._http.post('/chats', { persona_id: personaId });

  postChatMessage: ChatServiceType['postChatMessage'] = (id, payload) =>
    this._http.post(`/chats/${id}/messages`, payload);
}

export default ChatService;

Inside this file, we have four API request functions for different endpoints:

getAllChats – Retrieves all ongoing chats with the available chatbots.
getChatMessages – Fetches the chat history between a specific user and chatbot.
postChat – Creates a new chat between a user and a chatbot.
postChatMessage – Sends a new message to a chatbot.

Since we already created the schema and types for chats in the previous post, all the types used here already exist meaning no annoying import errors this time.

Before moving on, make sure to export ChatService from /services/index.tsx so it can be easily imported throughout the app.

import ChatService from "./ChatService";
import HttpClient from "./HttpClient";
import PersonaService from "./PersonaService";

const httpClient = new HttpClient();
export const personaService = new PersonaService(httpClient);
export const chatService = new ChatService(httpClient);

2. Create a Hook for the Service

Next, we’ll create a hook to handle all the API requests from our service file using react-query. Create a new file: /src/hooks/chat.ts.

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  AllChatGetResponse,
  ChatMessageGetResponse,
  PostChatMessageRequest,
  PostChatMessageResponse,
} from "@/types/chat";
import toast from "react-hot-toast";
import { chatService } from "@/services";

export const useGetAllChats = () => {
  return useQuery<AllChatGetResponse, Error>({
    queryKey: ["get", "all", "chats"],
    queryFn: async () => await chatService.getAllChats(),
  });
};

export const useGetChatMessages = (chatId: string) => {
  return useQuery<ChatMessageGetResponse, Error>({
    queryKey: ["get", "chat", "messages", chatId],
    queryFn: async () => await chatService.getChatMessages(chatId),
  });
};

export const usePostChat = () => {
  const queryClient = useQueryClient();

  const { mutate, mutateAsync, isPending, isError, error } = useMutation({
    mutationFn: (personaId: string) => chatService.postChat(personaId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["get", "all", "chats"] });
      toast.success("Chat created successfully");
    },
    onError: (error: Error) => {
      console.error("Error creating chat:", error.message);
      toast.error(`Failed to create chat: ${error.message}`);
    },
  });

  return { mutate, mutateAsync, isPending, isError, error };
};

export const usePostChatMessage = () => {
  const queryClient = useQueryClient();

  const { mutate, isPending, isError, error } = useMutation<
    PostChatMessageResponse,
    Error,
    { chatId: string; payload: PostChatMessageRequest },
    Partial<{ prevData: ChatMessageGetResponse }>
  >({
    mutationFn: ({
      chatId,
      payload,
    }: {
      chatId: string;
      payload: PostChatMessageRequest;
    }) => chatService.postChatMessage(chatId, payload),
    onSuccess: (_, variables) => {
      queryClient.invalidateQueries({
        queryKey: ["get", "chat", "messages", variables.chatId],
      });
      toast.success("Message sent successfully");
    },
    onError: (error, { chatId }, context) => {
      console.error("Error sending chat messages:", error.message);
      toast.error(`Failed to send chat message: ${error.message}`);
      if (context?.prevData) {
        queryClient.setQueryData(
          ["get", "chat", "messages", chatId],
          context.prevData
        );
      }
    }, // After success or error, refetch data
    onSettled: (_, _unused, { chatId }) => {
      queryClient.invalidateQueries({
        queryKey: ["get", "chat", "messages", chatId],
      });
    },
  });

  return { mutate, isPending, isError, error };
};

We’ve created four hooks, matching the four API functions from ChatService.tsx:

useGetAllChats and useGetChatMessages – Straightforward hooks that simply call their respective get functions and assign them query keys, so we can easily invalidate and refetch them later if needed.
usePostChat – Similar to the above but includes onSuccess and onError callbacks. On success, it invalidates the chat-related query key so the UI refreshes with the new data. On error, it displays feedback to the user via a toast notification.
usePostChatMessage – Works the same way as usePostChat, but for messages. It invalidates the relevant query key to fetch the latest messages and shows a toast if an error occurs. 3. Update GalleryPage

Now, let’s add the hooks to GalleryPage and ChatPage. Why GalleryPage? Because before a user can start chatting with a chatbot, we need to call usePostChat to initiate the conversation. At the same time, we also need to check if there’s already an existing conversation between the user and that chatbot. If one exists, we’ll load it instead of creating a new one.

Update /gallery/index.tsx with the following code:

const GalleryPage = () => {
// ... rest of the codes
 // Fetch personas data
  const {
    data: personasResponse,
    isLoading,
    error,
    refetch,
  } = useGetAllPersona();

// ----- Add these codes -----
  const { data: conversationData } = useGetAllChats();
  const { mutateAsync } = usePostChat();
// ----- END -----

// ... rest of the codes

// ----- Add these codes ------
  const onCardClick = async (id: string) => {
    // Search for existing conversation
    const existingConversation = conversationData?.conversations.filter(
      (e) => e.persona_id === id
    );

    // If conversation exists, redirect to it
    if (existingConversation && existingConversation.length > 0) {
      router.push(`/chat/${id}/${existingConversation[0].id}`);
      return;
    }

    // Else create a new conversation
    const res = await mutateAsync(id);
    router.push(`/chat/${id}/${res.conversation_id}`);
  };
// ----- END -----
// ... rest of the codes

From the code above, we call useGetAllChats and usePostChat inside GalleryPage, placing them right below useGetAllPersona. These functions run when the user clicks Start Chat on a chatbot card. They check for any existing conversation, and if found, share the conversation ID so the user can continue where they left off. If not, they create a brand-new chat session with the selected chatbot.

Next, we’ll update ChatPage to use the new hooks.

4. Update ChatPage

const ChatPage: React.FC = () => {
  const { personaId, conversationId } = useParams();

  const {
    data: messagesData,
    isLoading: isMessagesLoading,
    error: messagesError,
  } = useGetChatMessages(conversationId as string);

  const [curInput, setCurInput] = useState<string>("");
  const [messages, setMessages] = useState<string[]>([]);

  const lastDataRef = useRef<Partial<ChatMessageGetResponse>>({});

  useEffect(() => {
    if (messagesData && messagesData !== lastDataRef.current) {
      lastDataRef.current = messagesData;
      setMessages([]);
    }
  }, [messagesData]);

  const updatedMessages = useMemo(() => {
    if (messages.length > 0) {
      const newMsgs = {
        id: "this-is-temporary-id",
        conversation_id: "this-is-temporary-conversation-id",
        role: "user",
        message: messages,
        updated_at: new Date(),
        created_at: new Date(),
      };

      return messagesData ? messagesData?.data.concat(newMsgs) : [newMsgs];
    }
    return messagesData?.data || [];
  }, [messagesData?.data, messages]);

  return (
   // ... rest of the code here
  )
}

From the code above, we added useParams to retrieve personaId and conversationId from the URL. These IDs are then used by useGetChatMessages to fetch the conversation history.

We also introduced a new messages state, which temporarily stores messages the user wants to send to the chatbot. These are then merged with messagesData. Make sure to remove any duplicate variables, especially mock data that’s now replaced by our new state.

Additionally, we added a useEffect hook to check if the data from useGetChatMessages is in sync with messages. If they don’t match, the messages state will be reset.

Next, we’ll handle sending messages to the chatbot using usePostChatMessage:

const ChatPage: React.FC = () => {
// ... rest of the codes

  const {
    data: messagesData,
    isLoading: isMessagesLoading,
    error: messagesError,
  } = useGetChatMessages(conversationId as string);

// ----- Add this line below -----
  const { mutate, isPending } = usePostChatMessage();

  const [curInput, setCurInput] = useState<string>('');
  const [messages, setMessages] = useState<string[]>([]);

  const lastDataRef = useRef<Partial<ChatMessageGetResponse>>({});

  useEffect(() => {
    if (messagesData && messagesData !== lastDataRef.current) {
      lastDataRef.current = messagesData;
      setMessages([]);
    }
  }, [messagesData]);

// ----- Add these -----
  const onCallMutate = useCallback(
    debounce((conversationId, messages) => {
      if (messages.length > 0 && curInput === '') {
        mutate({
          chatId: conversationId as string,
          payload: { query: messages },
        });
      }
    }, 3000),
    []
  );
// ----- END -----

// ----- Update these functions -----
  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setCurInput(value);

    onCallMutate(conversationId, messages);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const newMsg = messages.concat(curInput);
    setMessages(newMsg);
    setCurInput('');

    onCallMutate(conversationId, newMsg);
  };

  if (!data) return null;
// ----- END -----

// ... rest of the codes
}

Here, we added usePostChat to submit messages from the user to the chatbot. The onCallMutate function triggers the usePostChat mutation, and we wrap it with a debounce so the message is only sent once the user finishes typing or submits.

We’ll implement the debounce function shortly.

We updated both onInputChange and handleSubmit so they call onCallMutate when ready. In handleSubmit, we also add the new message to messages so it appears instantly in the UI before the API call completes.

Before moving on, let’s create our debounce function by editing src/lib/utils:

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export const cn = (...inputs: ClassValue[]) => {
  return twMerge(clsx(inputs));
};

// --- Add this ----
export function debounce<T extends (...args: any[]) => void>(
  func: T,
  wait: number
): (...args: Parameters<T>) => void {
  let timeout: ReturnType<typeof setTimeout>;

  return (...args: Parameters<T>) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func(...args);
    }, wait);
  };
}

The debounce function ensures a given function is only executed after a specified delay without being triggered again.

Next, we’ll enhance the chat header with persona details:

const ChatPage: React.FC = () => {
  const { personaId, conversationId } = useParams();

// ----- Add this line -----
  const { data } = useGetPersona(personaId as string);

  const {
    data: messagesData,
    isLoading: isMessagesLoading,
    error: messagesError,
  } = useGetChatMessages(conversationId as string);
  const { mutate, isPending } = usePostChatMessage();

// ... rest of the code

// ----- Add these codes -----
  const personalityArr = data?.data.personality
    ? data?.data.personality.split(",").map((item) => item.trim())
    : [];

  const interestsArr = data?.data.interests
    ? data?.data.interests.split(",").map((item) => item.trim())
    : [];
// ----- END -----

  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setCurInput(value);

    onCallMutate(conversationId, messages);
  };

// ... rest of the code
}

Here, we used useGetPersona to fetch persona information. You may notice that useGetPersona hasn’t been created yet, we’ll build it next.

We also introduced personalityArr and interestsArr to format persona details into arrays for display. Again, remember to remove duplicate variables, especially mock data.

In PersonaService.ts, we added a new getPersona function along with its type:

import {
  Persona,
  PersonaGetAllResponse,
  PersonaGetResponse,
  PersonaPostResponse,
} from "@/types/persona";
import HttpClient from "./HttpClient";

interface PersonaServiceType {
  getAllPersona: () => Promise<PersonaGetAllResponse>;
  getPersona: (id: string) => Promise<PersonaGetResponse>;
  addPersona: (payload: Persona) => Promise<PersonaPostResponse>;
}

class PersonaService implements PersonaServiceType {
  private _http: HttpClient;

  constructor(httpClient: HttpClient) {
    this._http = httpClient;
  }

  getPersona: PersonaServiceType["getPersona"] = (id) =>
    this._http.get(`/persona/${id}`);

  getAllPersona: PersonaServiceType["getAllPersona"] = () =>
    this._http.get("/persona");

  addPersona: PersonaServiceType["addPersona"] = (payload) =>
    this._http.post("/persona", payload);
}

export default PersonaService;

This function retrieves detailed persona data based on the given ID.

Finally, we updated /hooks/persona.ts:

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import {
  Persona,
  PersonaGetAllResponse,
  PersonaGetResponse,
} from '@/types/persona';
import toast from 'react-hot-toast';
import { personaService } from '@/services';

export const useCreatePersona = () => {
  const queryClient = useQueryClient();

  const { mutate, isPending, isError, error } = useMutation({
    mutationFn: (payload: Persona) => personaService.addPersona(payload),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['get', 'persona'] });
      toast.success('Persona created successfully');
    },
    onError: (error: Error) => {
      console.error('Error creating persona:', error.message);
      toast.error(`Failed to create persona: ${error.message}`);
    },
  });

  return { mutate, isPending, isError, error };
};

export const useGetPersona = (personaId: string) => {
  return useQuery<PersonaGetResponse, Error>({
    queryKey: ['get', 'persona', personaId],
    queryFn: async () => await personaService.getPersona(personaId),
  });
};

export const useGetAllPersona = () => {
  return useQuery<PersonaGetAllResponse, Error>({
    queryKey: ['get', 'all', 'persona'],
    queryFn: async () => await personaService.getAllPersona(),
  });
};

Here, we added useGetPersona, a simple react-query wrapper for our API request. This will fix the import error for useGetPersona in ChatPage.

🎉 Congratulations! You’ve now completed the tutorial and built a fully functional chat interface from start to finish. If you’d like to explore the complete source code for this project, you can find it here:

GitHub Repo

This should give you a solid foundation for integrating and customizing the API to fit your own projects. If you still have questions or want to dive deeper into how the API works, feel free to reach out—I’m happy to help you explore it further. Now go ahead and start building something amazing! 🚀

(Part 7) Build a Simple Chat Character Gallery: Implementing the Chat Page UI

James — Wed, 27 Aug 2025 16:45:00 +0000

👋 Recap from Previous Post

In the last post, we:

✅ Created a services folder with files for interacting with the API.
✅ Set up React Query in the project by creating a reactQuery.tsx file in the /hooks folder and wrapping our app with QueryClientProvider.
✅ Integrated hooks into GalleryPage to fetch all chatbots from the API, replacing the previous mock data (chatbotsData) with live API data.
✅ Implemented basic loading and error states for a better user experience while fetching data.
✅ Created a refresh mechanism so the chatbot list updates automatically after adding a new chatbot.
✅ Added API integration to the Add Chatbot form, allowing us to submit new chatbots, close the modal on success, and see them instantly in the gallery.

By the end of the last post, we had a fully functional flow to create and display chatbots directly from the API, replacing the placeholder mock data.

Implementing the Chat Page UI

🎯 Goals for This Post

In this part of the tutorial, we’ll begin implementing the Chat Page UI. The design is straightforward and divided into three main sections: the header, the conversation area, and the input section.

Header – This will include a placeholder for the chatbot’s avatar, the chatbot’s name, their personality traits, and their hobbies & interests.
Conversation Area – A simple chat bubble layout, with different colors for messages from the bot and the user. It will also feature a loading chat bubble to indicate when the bot is processing a message.
Input Section – A minimal input box with a submit button to send messages.

By the end of this tutorial, your app will be able to open the chat page for each chatbot. While chatting won’t work just yet (as we haven’t integrated the API), the UI will be fully set up and ready for the next step.

📱 Step by Step Guide

1. Create Header

The first step is to create the header section of the chat page. As shown in the image above, it contains the chatbot’s avatar, name, personality traits, and hobbies. We’ll place this section at the top of the page and make it sticky, so it stays visible when the user scrolls.

Before we begin coding, let’s set up the folder structure for the Chat module:

Create a new folder: /src/modules/chat
Inside it, create another folder named: /components
Add a file called: index.tsx

Here’s how it looks

Creating the Chat Header Component

Next, create a file: /src/modules/chat/components/ChatHeader.tsx

This file will contain all the UI code for the header section.

import React from 'react';
import { Chatbot } from '@/types/chatbot';

interface ChatHeaderProps {
  chatbot: Chatbot;
}

const ChatHeader: React.FC<ChatHeaderProps> = ({ chatbot }) => {
  return (
    <header className="border-b p-4 bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 sticky top-0 z-10 shadow-lg">
      <div className="flex items-center gap-4">
        <div className="h-12 w-12 rounded-full bg-white/20 backdrop-blur-sm flex-shrink-0 ring-2 ring-white/30">
          {chatbot.avatarUrl ? (
            <img
              src={chatbot.avatarUrl}
              alt={chatbot.name}
              className="h-full w-full rounded-full object-cover"
            />
          ) : (
            <div className="flex items-center justify-center h-full w-full text-white text-xl font-bold">
              {chatbot.name.charAt(0)}
            </div>
          )}
        </div>
        <div className="flex-1 min-w-0">
          <h1 className="text-lg font-bold text-white truncate drop-shadow-sm">
            {chatbot.name}
          </h1>
          <div className="space-y-2 mt-1">
            <div className="space-y-1">
              <p className="text-xs text-white/80">Personality</p>
              <div className="flex gap-1 flex-wrap">
                {chatbot.personality.map((trait) => (
                  <span
                    key={trait}
                    className="text-xs px-2 py-0.5 bg-white/20 text-white rounded-full backdrop-blur-sm"
                  >
                    {trait}
                  </span>
                ))}
              </div>
            </div>
            {chatbot.interests && (
              <div className="space-y-1">
                <p className="text-xs text-white/80">Hobbies & Interests</p>
                <div className="flex gap-1 flex-wrap">
                  {chatbot.interests.map((hobby) => (
                    <span
                      key={hobby}
                      className="text-xs px-2 py-0.5 bg-white/20 text-white rounded-full backdrop-blur-sm"
                    >
                      {hobby}
                    </span>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </header>
  );
};

export default ChatHeader;

In the code above:

All dynamic values (name, avatar, personality, and hobbies) are passed in from outside the component.
This makes ChatHeader a stateless component that only handles the presentation.
We added a placeholder avatar if none is provided.
The hobbies section is only shown if data exists.

Adding the ChatHeader to the Chat Page

Now, let’s add ChatHeader into /chat/index.tsx so you can see your progress. For now, we’ll feed it mock data.

import React from "react";
import ChatHeader from "./components/ChatHeader";

const data = {
  data: {
    id: "1",
    name: "Your Neighbour",
    created_at: new Date().toISOString(),
    updated_at: new Date().toISOString(),
    behaviour: "test",
    tone_style: "test",
  },
};
const personalityArr = ["warm", "caring"];
const interestsArr = ["dog", "yoga", "meditation"];

const ChatPage: React.FC = () => {
  return (
    <div className="flex h-screen flex-col">
      <ChatHeader
        chatbot={{
          id: data?.data.id,
          name: data?.data.name,
          avatarUrl: "",
          createdAt: new Date(data?.data.created_at).toISOString(),
          updatedAt: new Date(data?.data.updated_at).toISOString(),
          personality: personalityArr,
          interests: interestsArr,
          behavior: data?.data.behaviour || "",
          tone_style: data?.data.tone_style || "",
        }}
      />
    </div>
  );
};

export default ChatPage;

Setting Up the Chat Page Route

To make the ChatPage accessible from a URL, create a new file here: /app/chat/[personaId]/[conversationId]/page.tsx

We’re using both personaId and conversationId in the route so that when a user navigates here, we can fetch the correct conversation from the API later.

Here’s the code for /app/chat/[personaId]/[conversationId]/page.tsx

"use client";

import React from "react";
import ChatPage from "@/modules/chat";

const Chat = () => {
  return <ChatPage />;
};

export default Chat;

Connecting the Gallery Page to the Chat Page

Finally, let’s add a click interaction in the GalleryPage so that when a user clicks a chatbot card, they are redirected to the ChatPage (using mock data for now).

// ... rest of the codes

const GalleryPage = () => {
// ----- Add this -----
  const router = useRouter();

// ... rest of the codes

// ----- Update this -----
  const onCardClick = async (id: string) => {
    router.push(`/chat/${id}/testing`);
  };

// ... rest of the codes
}

Here’s what’s happening:

We import useRouter from next/navigation.
In GalleryPage, we update the previously empty onCardClick function to use router.push() and navigate to the ChatPage.

At this point, clicking on any chatbot card should take you to the ChatPage. For now, every card will lead to the same mock content.

2. Creating the Conversation Area

After finishing the header section, we’ll move on to building the conversation area. We’ll start with the chat bubble component, which we’ll call MessageBubble.

Create a new file: /src/modules/chat/components/MessageBubble.tsx

import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { MessageRole } from "@/types/general";
import React, { useMemo } from "react";

interface MessageBubbleProps {
  content: string;
  role: MessageRole;
  timestamp: Date | string;
}

const MessageBubble = ({ content, role, timestamp }: MessageBubbleProps) => {
  const formattedTime = useMemo(() => {
    const date = timestamp instanceof Date ? timestamp : new Date(timestamp);
    return date.toLocaleTimeString([], {
      hour: "2-digit",
      minute: "2-digit",
    });
  }, [timestamp]);

  return (
    <div
      className={`flex ${
        role === "user" ? "justify-end" : "justify-start"
      } animate-fadeIn`}
      aria-live="polite"
      role="log"
    >
      <Card
        className={cn(
          "max-w-xs md:max-w-md lg:max-w-lg shadow-lg transition-all duration-300 hover:shadow-xl",
          role === "user"
            ? "bg-gradient-to-br from-purple-500 to-pink-500 text-white border-0 rounded-2xl rounded-br-sm"
            : "bg-gradient-to-br from-blue-500 to-cyan-500 text-white border-0 rounded-2xl rounded-bl-sm"
        )}
      >
        <CardContent className="p-4">
          <p className="text-sm leading-relaxed">{content}</p>
          <p className="text-xs opacity-80 mt-2">{formattedTime}</p>
        </CardContent>
      </Card>
    </div>
  );
};

export default MessageBubble;

In the code above:

MessageBubble is another stateless component.
We’ve added time formatting to make timestamps shorter and more user-friendly.
You may notice we’re importing a missing file — we’ll create it now.

Create the following file: /src/types/general.ts

export type MessageRole = 'user' | 'assistant';

Creating a Typing Indicator

Next, let’s create a loading bubble that will appear whenever the chatbot is “typing.”

Create the file: /src/modules/chat/components/TypingIndicator.tsx

import React from 'react';
import { Card, CardContent } from '@/components/ui/card';

const TypingIndicator = ({ isLoading }: { isLoading: boolean }) => {
  if (!isLoading) return null;

  return (
    <div className="px-4 pb-2">
      <Card className="inline-block max-w-xs bg-gradient-to-r from-purple-400 via-pink-400 to-orange-400 border-0 rounded-2xl shadow-lg">
        <CardContent className="p-3">
          <div className="flex items-center gap-2">
            <div
              className="h-3 w-3 rounded-full bg-white animate-bounce"
              style={{ animationDelay: '0ms' }}
            />
            <div
              className="h-3 w-3 rounded-full bg-white animate-bounce"
              style={{ animationDelay: '200ms' }}
            />
            <div
              className="h-3 w-3 rounded-full bg-white animate-bounce"
              style={{ animationDelay: '400ms' }}
            />
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default TypingIndicator;

Building the Conversation Area

Now, let’s combine both MessageBubble and TypingIndicator into a single conversation area.

Create the file: /src/modules/chat/components/MessageList.tsx

import React, { useEffect, useRef, useMemo } from "react";
import { MessageRole } from "@/types/general";
import MessageBubble from "./MessageBubble";
import TypingIndicator from "./TypingIndicator";
import { ChatHistory } from "@/types/chat";

interface MessageListProps {
  data: ChatHistory[];
  isLoading?: boolean;
  isShowTyping?: boolean;
  error?: Error | null;
}

const MessageList = ({
  data,
  isLoading,
  isShowTyping,
  error,
}: MessageListProps) => {
  const messagesEndRef = useRef<HTMLDivElement>(null);

  const messages = useMemo(
    () =>
      data.flatMap((e) =>
        e.message.map((content, idx) => ({
          id: `${e.id}-${idx}`,
          content,
          role: e.role as MessageRole,
          timestamp: e.created_at,
        }))
      ),
    [data]
  );

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages, isShowTyping]);

  return (
    <div
      className="space-y-3 p-4 bg-gradient-to-b from-purple-50/30 via-transparent to-pink-50/30"
      aria-busy={isLoading}
      aria-live="polite"
    >
      {isLoading ? (
        <div className="flex h-64 items-center justify-center">
          <div className="text-center">
            <div className="text-4xl mb-2">⏳</div>
            <p className="text-purple-600 font-medium">Loading messages...</p>
          </div>
        </div>
      ) : error ? (
        <div className="flex h-64 items-center justify-center">
          <div className="text-center">
            <div className="text-4xl mb-2">⚠️</div>
            <p className="text-red-600 font-medium">Error loading messages</p>
            <p className="text-sm text-red-400">{error.message}</p>
          </div>
        </div>
      ) : messages.length === 0 ? (
        <div className="flex h-64 items-center justify-center">
          <div className="text-center">
            <div className="text-4xl mb-2">💬</div>
            <p className="text-purple-600 font-medium">No data yet</p>
            <p className="text-sm text-purple-400">Start the conversation!</p>
          </div>
        </div>
      ) : (
        messages.map((message) => (
          <MessageBubble
            key={message.id}
            content={message.content}
            role={message.role}
            timestamp={message.timestamp}
          />
        ))
      )}
      <TypingIndicator isLoading={isShowTyping || false} />
      <div ref={messagesEndRef} />
    </div>
  );
};

export default MessageList;

In this component:

We render different states depending on the data: loading, error, no messages, or message list.
We use messagesEndRef to automatically scroll to the latest message whenever a new one arrives, whether from the user or the chatbot.

Adding Missing Types & Schemas

You might see another import error due to missing files. Let’s create them now:

1. Create the chat schema file: /src/schema/chat.ts

import z from "zod/v4";
import { timeResponseSchema } from "./general";

const chatSchema = z.object({
  id: z.string(),
  persona_id: z.uuid(),
  created_at: z.date(),
});

export const allChatSchema = z.object({
  conversations: z.array(chatSchema),
});

export const chatMsgSchema = z
  .object({
    id: z.string(),
    conversation_id: z.uuid(),
    role: z.string(),
    message: z.array(z.string()),
  })
  .extend({ ...timeResponseSchema.shape });

export const chatMsgResponseSchema = z.object({
  data: z.array(chatMsgSchema),
});

export const postChatResSchema = z.object({ conversation_id: z.uuid() });

export const postChatMsgReqSchema = z.object({
  query: z.array(z.string()),
});

export const postChatMsgResSchema = z.object({
  response_message: z.array(z.string()),
});

2. Create the chat types file: /src/types/chat.ts

import {
  allChatSchema,
  chatMsgResponseSchema,
  chatMsgSchema,
  postChatMsgReqSchema,
  postChatMsgResSchema,
  postChatResSchema,
} from "@/schema/chat";
import z from "zod/v4";

export type AllChatGetResponse = z.infer<typeof allChatSchema>;
export type ChatMessageGetResponse = z.infer<typeof chatMsgResponseSchema>;
export type PostChatResponse = z.infer<typeof postChatResSchema>;
export type PostChatMessageRequest = z.infer<typeof postChatMsgReqSchema>;
export type PostChatMessageResponse = z.infer<typeof postChatMsgResSchema>;
export type ChatHistory = z.infer<typeof chatMsgSchema>;

At this point, any initial import errors should be resolved. If errors persist, try removing the problematic lines temporarily and re-importing them correctly.

Putting It All Together

Finally, let’s integrate everything into: /src/modules/chat/index.tsx

import React from "react";
import ChatHeader from "./components/ChatHeader";
import MessageList from "./components/MessageList";
import { ChatHistory } from "@/types/chat";

const data = {
  data: {
    id: "1",
    name: "Your Neighbour",
    created_at: new Date().toISOString(),
    updated_at: new Date().toISOString(),
    behaviour: "test",
    tone_style: "test",
  },
};
const personalityArr = ["warm", "caring"];
const interestsArr = ["dog", "yoga", "meditation"];

const updatedMessages: ChatHistory[] = [
  {
    id: "1",
    role: "user",
    message: ["Hello, how are you?"],
    created_at: new Date(),
    updated_at: new Date(),
    conversation_id: "test",
  },
  {
    id: "2",
    role: "assistant",
    message: ["I'm doing well, thank you."],
    created_at: new Date(),
    updated_at: new Date(),
    conversation_id: "test1",
  },
  {
    id: "3",
    role: "user",
    message: ["That's great to hear."],
    created_at: new Date(),
    updated_at: new Date(),
    conversation_id: "test2",
  },
  {
    id: "4",
    role: "assistant",
    message: ["How has your day been so far?"],
    created_at: new Date(),
    updated_at: new Date(),
    conversation_id: "test3",
  },
];

const isMessagesLoading = false;
const messagesError: Error | null = null;
const isPending = false;

const ChatPage: React.FC = () => {
  return (
    <div className="flex h-screen flex-col">
      <ChatHeader
        chatbot={{
          id: data?.data.id,
          name: data?.data.name,
          avatarUrl: "",
          createdAt: new Date(data?.data.created_at).toISOString(),
          updatedAt: new Date(data?.data.updated_at).toISOString(),
          personality: personalityArr,
          interests: interestsArr,
          behavior: data?.data.behaviour || "",
          tone_style: data?.data.tone_style || "",
        }}
      />
      <div className="flex-1 overflow-y-auto">
        <MessageList
          data={updatedMessages}
          isLoading={isMessagesLoading}
          error={messagesError}
          isShowTyping={isPending}
        />
      </div>
    </div>
  );
};

export default ChatPage;

In this step:

We place the MessageList component right under the header.
For now, we’re using mock data to populate the conversation.

Now, when you open the ChatPage, you should see a simple chat history displayed, complete with user and chatbot messages, plus a typing indicator when the bot is “responding.”

3. Creating the Input Section for the Chat

The next step is to create the input box for our chat.

This section will consist of:

A text input field
A send button
A character limit to prevent overly long messages

If the user exceeds the character limit, we’ll display a red warning message and prevent the message from being submitted.

Create the Input Component

Create the file: /src/modules/chat/components/MessageInput.tsx

"use client";

import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import Input from "@/components/ui/input";

interface MessageInputProps {
  messages: string;
  onSubmit: (e: React.FormEvent) => void;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  isSubmitting?: boolean;
}

const MAX_MESSAGE_LENGTH = 500;

const MessageInput = ({
  messages,
  onSubmit,
  onChange,
  isSubmitting = false,
}: MessageInputProps) => {
  const [isOverLimit, setIsOverLimit] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setIsOverLimit(value.length > MAX_MESSAGE_LENGTH);
    onChange(e);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!messages.trim() || isOverLimit) return;
    onSubmit(e);
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="flex gap-3 p-4 bg-gradient-to-r from-purple-50 via-pink-50 to-orange-50 border-t border-purple-100"
      aria-label="Message input form"
    >
      <div className="flex-1 relative">
        <Input
          value={messages}
          onChange={handleChange}
          placeholder="Type your message..."
          className={`w-full border-2 ${
            isOverLimit ? "border-red-300" : "border-purple-200"
          } focus:border-purple-400 focus:ring-2 focus:ring-purple-200 rounded-xl px-4 py-2 transition-all duration-200 bg-white/80 backdrop-blur-sm`}
          aria-label="Message input"
          aria-invalid={isOverLimit}
          maxLength={MAX_MESSAGE_LENGTH}
        />
        {isOverLimit && (
          <span className="absolute bottom-full mb-1 text-xs text-red-500">
            Message too long (max {MAX_MESSAGE_LENGTH} characters)
          </span>
        )}
      </div>
      <Button
        type="submit"
        disabled={!messages.trim() || isOverLimit || isSubmitting}
        className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-semibold rounded-xl px-6 py-2 transition-all duration-200 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg hover:shadow-xl"
        aria-busy={isSubmitting}
      >
        {isSubmitting ? (
          <span className="flex items-center gap-2">
            <span className="inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
            Sending...
          </span>
        ) : (
          "Send"
        )}
      </Button>
    </form>
  );
};

export default MessageInput;

Add the Input to the Chat Page

Once the MessageInput component is ready, let’s import it into our ChatPage component and place it at the very bottom of the layout.

const ChatPage: React.FC = () => {
  // ----- Add these -----
  const [curInput, setCurInput] = useState<string>("");

  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setCurInput(value);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    setCurInput("");
  };
  // ----- END -----

  return (
    <div className="flex h-screen flex-col">
      <ChatHeader
        chatbot={{
          id: data?.data.id,
          name: data?.data.name,
          avatarUrl: "",
          createdAt: new Date(data?.data.created_at).toISOString(),
          updatedAt: new Date(data?.data.updated_at).toISOString(),
          personality: personalityArr,
          interests: interestsArr,
          behavior: data?.data.behaviour || "",
          tone_style: data?.data.tone_style || "",
        }}
      />
      <div className="flex-1 overflow-y-auto">
        <MessageList
          data={updatedMessages}
          isLoading={isMessagesLoading}
          error={messagesError}
          isShowTyping={isPending}
        />
      </div>
      {/** Add These */}
      <MessageInput
        messages={curInput}
        onChange={onInputChange}
        onSubmit={handleSubmit}
      />
    </div>
  );
};

In the updated ChatPage:

We export MessageInput and place it directly below MessageList.
We introduce a new piece of state:

const [curInput, setCurInput] = useState("");

We add two new functions:
- onInputChange → handles the onChange event from MessageInput and updates the state.
- handleSubmit → handles the onSubmit event from MessageInput.

At this point, your Chat Page should:

✅ Display a static header

✅ Show a message list populated with mock data

✅ Contain a chat input box with character limit validation

The input box won’t actually send messages to the conversation yet — we’ll implement that in the next part when we integrate with the API.

🚀 What’s Next?

In the next post, we’ll connect our chat interface to the chatbot API, allowing you to have real conversations with each bot you’ve created and finally see all your hard work come to life.

New posts will be released every 2–3 days, so make sure to subscribe or bookmark this page to stay updated!

Please check Part 8 here:
👉 (Part 8) Build a Simple Chat Character Gallery: Integrating Chat API

(Part 6) Build a Simple Chat Character Gallery: Integrating the API

James — Mon, 25 Aug 2025 16:45:00 +0000

👋 Recap from Previous Post

In the last part, we enhanced our chatbot gallery by adding a new feature to add new chatbot to the gallery:
✅ A working button that opens the modal when clicked.
✅ A complete modal layout with header, form fields, and action buttons.
✅ Form state handling using react-hook-form.
✅ Schema-based validation with zod and zodResolver.

Integrating the API

🎯 Goals for This Post

In this tutorial, we’ll integrate our app with the API so the Add Chatbot button actually creates a new chatbot in the gallery. The mock data currently used in the gallery will be replaced with real data from the API. This means that whenever you add a new chatbot, it will appear instantly in the gallery.

We’ll also introduce a new /services folder in the repository to store all API request functions, and use react-query to manage their state.

By the end of this tutorial, you’ll have a fully functional chatbot gallery that can display your chatbots and let you add new ones seamlessly.

📱 Step by Step Guide

1. Create /services folder

First, let’s create a /services folder under /src, so the path becomes /src/services. This folder will contain all the files for storing our API request functions.

We’ll start by creating a new file called HttpClient.ts inside /src/services. This file will define an Axios-based object that we’ll use to manage all HTTP communication with the API. It will also handle tasks such as error responses, interceptors, and request/response schema validation.

The first thing we’ll add is objects related to error handling:

import { ZodError } from "zod/v4";

/**
 * Custom error class for HTTP client errors
 */
class HttpClientError extends Error {
  constructor(
    public readonly message: string,
    public readonly status?: number,
    public readonly data?: unknown
  ) {
    super(message);
    this.name = "HttpClientError";
  }
}

/**
 * Custom error class for validation errors
 */
class ValidationError extends Error {
  constructor(public readonly errors: ZodError) {
    super("Validation failed");
    this.name = "ValidationError";
  }
}

In the code above, we’ve created two new classes:

One for handling general errors that may occur whenever we send a request.
Another for handling schema validation errors, which will be triggered if the request body or response body doesn’t match with the expected schema.

Next, we’ll add a new type that defines the request configuration:

import { ZodError, ZodSchema } from "zod/v4";
import { AxiosRequestConfig } from "axios";


// ..... rest of the previous code

/**
 * Extended Axios request configuration with additional options
 */
interface RequestConfig extends AxiosRequestConfig {
  /**
   * Schema for validating the response data
   */
  responseSchema?: ZodSchema;

  /**
   * Whether to throw errors (true) or return them as rejected promises (false)
   * @default true
   */
  throwError?: boolean;
}

In the previous step, we created a new type that extends AxiosRequestConfig and added a few extra properties to it:

responseSchema – Allows the user to provide a schema for validating the API response.
throwError – Determines whether an error should be thrown if the API response doesn’t match the provided schema.

Now, let’s add the main part of this file: the HttpClient object. This is the object we’ll use for all API requests moving forward.

// ... previous codes above

class HttpClient {
  private baseUrl: string;
  protected client: AxiosInstance;

  /**
   * Creates an instance of HttpClient
   * @param {CreateAxiosDefaults} [options] - Axios configuration options
   */
  constructor(options?: CreateAxiosDefaults) {
    this.client = axios.create(options);
    this.baseUrl = API_URL ?? options?.baseURL ?? "";

    this.initializeRequestInterceptor();
    this.initializeResponseInterceptor();
  }
}

export default HttpClient;

Inside the HttpClient, we define a few key variables:

baseUrl – The URL of the API endpoints we’re calling. Normally, this points to the backend endpoint, but in our case, since we’ll be calling the third-party API directly, it will be set to that API’s URL.
client – The Axios instance that we’ll use for making HTTP requests.

You might notice a few missing references, such as initializeRequestInterceptor, initializeResponseInterceptor, and API_URL. We’ll add these later in this post.

For API_URL, we can create a file at /src/configs/env.ts. This file will simply retrieve environment variables from .env.

export const API_URL = process.env.NEXT_PUBLIC_API_URL ?? '';

Make sure to update your .env file accordingly by adding this in your .env:

NEXT_PUBLIC_API_URL=<your-api-url>

we will not add the interceptors to the HttpClient class:

class HttpClient {
// ... previous codes

  /**
   * Initialize request interceptor
   */
  protected initializeRequestInterceptor(): void {
    this.client.interceptors.request.use(
      (config) => {
        // Ensure headers exist
        config.headers = config.headers || {};

        // Add security headers
        config.headers['x-rapidapi-key'] = X_RAPID_API_KEY;
        config.headers['x-rapidapi-host'] = X_RAPID_API_HOST;
        config.headers['Authorization'] = 'Bearer ' + API_KEY;
        config.headers['Content-Type'] = 'application/json';

        return config;
      },
      (error) => {
        // Handle request error
        return Promise.reject(error);
      }
    );
  }

  /**
   * Initialize response interceptor
   */
  protected initializeResponseInterceptor(): void {
    this.client.interceptors.response.use(
      (response) => response?.data,
      (error: AxiosError) => {
        // Handle axios errors
        if (error.response) {
          const { status, data } = error.response;
          const message =
            typeof data === 'object' && data !== null && 'message' in data
              ? String(data.message)
              : error.message;

          const clientError = new HttpClientError(message, status, data);

          // Check if we should throw the error or return it as a rejected promise
          // Cast config to our custom RequestConfig type
          const config = error.config as unknown as RequestConfig;
          const throwError = config?.throwError !== false;

          if (throwError) {
            throw clientError;
          }

          return Promise.reject(clientError);
        }

        return Promise.reject(error);
      }
    );
  }
}

the new codes we added should resolve the previous errors, we added the interceptors:

initializeRequestInterceptor
this interceptor will be triggered each time we call request to the api. we are using this to add headers to each of the api call. a few modifications that you could make here are, if not all of the api request you called needed authorization or any other keys, then you can delete this part and or create a new HttpClient for api endpoints that doesn’t need a key.
initializeResponseInterceptor
this interceptor will be triggered each time we get a response from the api. we are using this to handle any error that might come from the api.

For X_RAPID_API_KEY, X_RAPID_API_HOST, and API_KEY, you can follow the same process we used for API_URL:

Add them to /src/configs/env.ts
Add them to your .env file

NEXT_PUBLIC_API_URL=YOUR_API_URL
NEXT_PUBLIC_X_RAPID_API_KEY=YOUR_X_RAPID_API_KEY
NEXT_PUBLIC_X_RAPID_API_HOST=YOUR_X_RAPID_API_HOST
NEXT_PUBLIC_API_KEY=YOUR_API_KEY

Next, we’ll add two private helper functions to HttpClient that will be used by the request methods we create later.

class HttpClient {

// ... previous codes

 /**
   * Create a full URL from a path
   * @param {string} path - The path to append to the base URL
   * @returns {string} The full URL
   */
  private createUrl(path: string): string {
    return this.baseUrl + path;
  }

  /**
   * Parse and validate response using Zod schema
   * @param {T} response - The response to validate
   * @param {ZodSchema} schema - The schema to validate against
   * @returns {T} The validated response
   * @throws {ValidationError} If validation fails
   */
  private parseResponse<T>(response: T, schema: ZodSchema): T {
    const parsed = schema.safeParse(response);

    if (!parsed.success) {
      throw new ValidationError(parsed.error);
    }

    return response;
  }
}

These functions are:

createUrl
Combines the baseUrl with the specific endpoint path to produce the full request URL.
parseResponse
Validates the response data from the API against the schema provided by the user (if any).

The final part of HttpClient is the modified HTTP methods (GET, POST, PUT, PATCH, DELETE).

class HttpClient {

// ... previous codes

  /**
   * Make a GET request
   * @param {string} path - The path to request
   * @param {RequestConfig} [config] - The request configuration
   * @returns {Promise<T>} The response data
   */
  async get<T>(path: string, config?: RequestConfig): Promise<T> {
    const url = this.createUrl(path);
    const response: T = await this.client.get(url, config);

    if (config?.responseSchema) {
      return this.parseResponse(response, config.responseSchema);
    }

    return response;
  }

  /**
   * Make a POST request
   * @param {string} path - The path to request
   * @param {unknown} [data] - The data to send
   * @param {RequestConfig} [config] - The request configuration
   * @returns {Promise<T>} The response data
   */
  async post<T>(
    path: string,
    data?: unknown,
    config?: RequestConfig
  ): Promise<T> {
    const url = this.createUrl(path);
    const response: T = await this.client.post(url, data, config);

    if (config?.responseSchema) {
      return this.parseResponse(response, config.responseSchema);
    }

    return response;
  }

  /**
   * Make a PUT request
   * @param {string} path - The path to request
   * @param {unknown} [data] - The data to send
   * @param {RequestConfig} [config] - The request configuration
   * @returns {Promise<T>} The response data
   */
  async put<T>(
    path: string,
    data?: unknown,
    config?: RequestConfig
  ): Promise<T> {
    const url = this.createUrl(path);
    const response: T = await this.client.put(url, data, config);

    if (config?.responseSchema) {
      return this.parseResponse(response, config.responseSchema);
    }

    return response;
  }

  /**
   * Make a PATCH request
   * @param {string} path - The path to request
   * @param {unknown} [data] - The data to send
   * @param {RequestConfig} [config] - The request configuration
   * @returns {Promise<T>} The response data
   */
  async patch<T>(
    path: string,
    data?: unknown,
    config?: RequestConfig
  ): Promise<T> {
    const url = this.createUrl(path);
    const response: T = await this.client.patch(url, data, config);

    if (config?.responseSchema) {
      return this.parseResponse(response, config.responseSchema);
    }

    return response;
  }

  /**
   * Make a DELETE request
   * @param {string} path - The path to request
   * @param {RequestConfig} [config] - The request configuration
   * @returns {Promise<T>} The response data
   */
  async delete<T>(path: string, config?: RequestConfig): Promise<T> {
    const url = this.createUrl(path);
    const response: T = await this.client.delete(url, config);

    if (config?.responseSchema) {
      return this.parseResponse(response, config.responseSchema);
    }

    return response;
  }
}

Each of these methods:

Merges the baseUrl with the provided endpoint path to form the complete URL
Sends the API request using Axios
Validates the response against the provided schema, if one is given

Now that HttpClient is complete, we can move on to creating our API endpoint services.

We’ll start with PersonaService. this file will contain all API request functions related to:

Creating a new chatbot
Getting a specific chatbot’s information
Fetching the full list of chatbots

Create a new file at /src/services/PersonaService.ts.

import {
  Persona,
  PersonaGetAllResponse,
  PersonaPostResponse,
} from "@/types/persona";
import HttpClient from "./HttpClient";

interface PersonaServiceType {
  getAllPersona: () => Promise<PersonaGetAllResponse>;
  addPersona: (payload: Persona) => Promise<PersonaPostResponse>;
}

class PersonaService implements PersonaServiceType {
  private _http: HttpClient;

  constructor(httpClient: HttpClient) {
    this._http = httpClient;
  }

  getAllPersona: PersonaServiceType["getAllPersona"] = () =>
    this._http.get("/persona");

  addPersona: PersonaServiceType["addPersona"] = (payload) =>
    this._http.post("/persona", payload);
}

export default PersonaService;

In the code above, we define a class called PersonaService, which provides methods such as getAllPersona and addPersona for interacting with the API. These methods make use of the HttpClient we built earlier to perform HTTP requests.

You’ll notice that this file references several types that don’t exist yet. We’ll create them in the next step.

First, we’ll define the schemas using zod, and from those schemas, we’ll generate the corresponding TypeScript types for persona.

Step 1 . Create the schema

File path: /src/schema/persona.ts

import z from "zod/v4";
import { timeResponseSchema } from "./general";

export const personaSchema = z.object({
  name: z.string(),
  personality: z.string().optional(),
  tone_style: z.string().optional(),
  interests: z.string().optional(),
  behaviour: z.string().optional(),
  age: z.number(),
  gender: z.string(),
});

const personaResponseSchema = personaSchema.extend({
  ...timeResponseSchema.shape,
  id: z.uuid(),
});

export const personaGetAllResponseSchema = z.object({
  data: z.array(personaResponseSchema),
});

export const personaPostResponseSchema = z.object({
  data: personaResponseSchema,
});

These schemas allow us to validate both request and response bodies, ensuring they match the API’s expected format.

Step 2. Create the types

File path: /src/types/persona.ts

import {
  personaGetAllResponseSchema,
  personaPostResponseSchema,
  personaSchema,
} from '@/schema/persona';
import z from 'zod/v4';

export type Persona = z.infer<typeof personaSchema>;
export type PersonaGetAllResponse = z.infer<typeof personaGetAllResponseSchema>;
export type PersonaPostResponse = z.infer<typeof personaPostResponseSchema>;
export type PersonaGetResponse = z.infer<typeof personaPostResponseSchema>; // PersonaPostResponseSchema have similar response type.

In this file, you’ll notice that two of the types are based on the same schema. This is intentional since they currently share the same structure, we reference the same schema. However, having separate type names gives us flexibility to easily change them in the future if their definitions diverge.

With these types and schemas in place, all errors should now be resolved.

The final step is to expose HttpClient and PersonaService so they can be accessed throughout the project.

Create this new files for it /src/services/index.ts:

import ChatService from './ChatService';
import HttpClient from './HttpClient';
import PersonaService from './PersonaService';

const httpClient = new HttpClient();
export const personaService = new PersonaService(httpClient);

2. Create /hooks folder

Now that we’ve finished building the services in the previous step, we can move on to creating hooks.

The /src/hooks folder will store all custom hooks in our project, whether they’re related to API calls or other functionalities. For now, we’ll focus on creating hooks to manage our PersonaService that we built earlier.

Step 1. Create the hooks folder

Here’s the path: /src/hooks

Step 2. Create the Persona hooks

Here’s the path: src/hooks/persona.ts. We’ll use react-query to handle data fetching and mutations.

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  Persona,
  PersonaGetAllResponse,
} from "@/types/persona";
import toast from "react-hot-toast";
import { personaService } from "@/services";

export const useCreatePersona = () => {
  const queryClient = useQueryClient();

  const { mutate, isPending, isError, error } = useMutation({
    mutationFn: (payload: Persona) => personaService.addPersona(payload),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["get", "persona"] });
      toast.success("Persona created successfully");
    },
    onError: (error: Error) => {
      console.error("Error creating persona:", error.message);
      toast.error(`Failed to create persona: ${error.message}`);
    },
  });

  return { mutate, isPending, isError, error };
};

export const useGetAllPersona = () => {
  return useQuery<PersonaGetAllResponse, Error>({
    queryKey: ["get", "all", "persona"],
    queryFn: async () => await personaService.getAllPersona(),
  });
};

The code above adds two hooks:

useCreatePersona
This hook is responsible for creating a new chatbot by calling the addPersona function from PersonaService.
- We added a toast notification to give users visual feedback when their action (creating a chatbot) succeeds or fails.
- On a successful request, we call invalidateQueries with the keys ["get", "persona"]. This tells React Query to invalidate the existing cached data for that query, which triggers a refetch and updates our chatbot gallery with the newly created chatbot.
useGetAllPersona
This hook retrieves all chatbots by calling getAllPersona from PersonaService.
- We use the query keys ["get", "all", "persona"] to uniquely identify this query.
- These keys allow us to selectively invalidate or refetch this specific data whenever needed.

You might notice another import in the code that throws an error. To fix this, install the required package:

pnpm add react-hot-toast

That’s it for creating hooks based on the service we built in the previous step.

In the next section, we’ll integrate these hooks into our UI components.

3. Integrate with GalleryPage

Before integrating the hooks into GalleryPage, we first need to set up react-query in our project.

Add a new file inside the /src/hooks folder called reactQuery.tsx. This file will be responsible for setting up the React Query Provider.

'use client';
import {
  QueryClient,
  QueryClientConfig,
  QueryClientProvider,
} from '@tanstack/react-query';
import React, { useState } from 'react';

const QueryProvider = ({ children }: { children: React.ReactNode }) => {
  const queryClientOptions: QueryClientConfig = {
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        refetchOnReconnect: false,
        retry: false,
      },
    },
  };

  const [queryClient] = useState(() => new QueryClient(queryClientOptions));
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
};

export default QueryProvider;

In the code above, we create a QueryClientProvider component, which will wrap our application so that query states can be accessed by any component inside it.

Next step, open /src/app/layout.tsx and import the QueryProvider component. Wrap the <body> element (and its children) with it.

import type { Metadata } from 'next';
import { Inter, Poppins, JetBrains_Mono } from 'next/font/google';
import './globals.css';

import React from 'react';
import QueryProvider from '@/hooks/reactQuery';
import { Toaster } from 'react-hot-toast';

const inter = Inter({
  variable: '--font-inter',
  subsets: ['latin'],
  display: 'swap',
});

const poppins = Poppins({
  variable: '--font-poppins',
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
  display: 'swap',
});

const jetbrainsMono = JetBrains_Mono({
  variable: '--font-jetbrains-mono',
  subsets: ['latin'],
  display: 'swap',
});

export const metadata: Metadata = {
  title: 'Chatbot Gallery - AI Chatbot Hub',
  description:
    'Discover and interact with unique AI chatbots featuring distinct personas. Create, share, and explore endless roleplay possibilities.',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <QueryProvider>
        <body
          className={`${inter.variable} ${poppins.variable} ${jetbrainsMono.variable} antialiased`}
        >
          <Toaster position="top-center" />
          {children}
        </body>
      </QueryProvider>
    </html>
  );
}

In addition to importing the QueryProvider, I also included the fonts we’ll be using throughout the project.

If I haven’t mentioned it earlier, make sure to add the Toaster component here as well. This component is required for displaying toast notifications whenever react-hot-toast is triggered.

Now that the QueryProvider is set up, we can move on to integrating our hooks into the GalleryPage.

Integrate with GalleryPage

Now that we’ve built the hooks to call our APIs, we can start by fetching all the chatbots we’ve created and displaying them on the GalleryPage. We’ll begin by working in /src/modules/gallery/index.

const GalleryPage = ()=>{
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedInterest, setSelectedInterest] = useState<string[]>([]);
  const [selectedPersonality, setSelectedPersonality] = useState<string[]>([]);
  const [isModalOpen, setModalOpen] = useState(false);

  // ---------- Add These ----------
  // Fetch chatbots data
  const { data: personasResponse, isLoading, error } = useGetAllPersona();

  const personas = personasResponse?.data || [];
 // --------------------

  const onCardClick = () => {
    // Do nothing yet
  };

  // Get all unique interests
  const allInterests = useMemo(() => {
    const interests = new Set<string>();
    personas.forEach((persona) => {
      // Collect unique interests from personas
      if (persona.interests) {
        persona.interests.split(",").forEach((el) => interests.add(el.trim()));
      }
    });
    return Array.from(interests).sort();
  }, [personas]);

// ..... rest of the codes
}

From the code above, the first step is calling useGetAllPersona to retrieve data, isLoading, and error.

We assign an alias to data as personasResponse for clarity. This is especially useful since we’ll be adding more hooks here in the future.

Next, we set personasResponse to personas and set it to default to an empty array in case the data is undefined.

const GalleryPage = ()=>{

  // ..... rest of the codes

  // Get all unique interests
  const allInterests = useMemo(() => {
    const interests = new Set<string>();
    personas.forEach((persona) => {
      // Collect unique interests from personas
      if (persona.interests) {
        persona.interests.split(",").forEach((el) => interests.add(el.trim()));
      }
    });
    return Array.from(interests).sort();
  }, [personas]);

  // Get all unique personality
  const allPersonality = useMemo(() => {
    const personalities = new Set<string>();
    personas.forEach((persona) => {
      // Collect unique interests from personas
      if (persona.personality) {
        persona.personality
          .split(",")
          .forEach((el) => personalities.add(el.trim()));
      }
    });
    return Array.from(personalities).sort();
  }, [personas]);

  const filteredChatbots = useMemo(() => {
    return personas.filter((persona) => {
      const matchesSearch = persona.name
        .toLowerCase()
        .includes(searchTerm.toLowerCase());

      const matchesInterests =
        selectedInterest.length === 0 ||
        selectedInterest.some((e) => persona.interests?.includes(e));

      const matchesPersonalities =
        selectedPersonality.length === 0 ||
        selectedPersonality.some((e) => persona.personality?.includes(e));

      return matchesSearch && matchesInterests && matchesPersonalities;
    });
  }, [personas, searchTerm, selectedInterest, selectedPersonality]);

  // ..... rest of the codes
}

In the updated code above, all occurrences of chatbotsData have been replaced with personas, along with related variables like allInterests, allPersonality, and filteredChatbots.

The next step is to add a simple fallback render for when data is still loading or when an error occurs.

const GalleryPage = ()=>{

// ... rest of the codes  

  const handlePersonalityToggle = (tag: string) => {
    setSelectedPersonality((prev) =>
      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
    );
  };

// ----- Add These -----

 const handlePersonaCreated = () => {
    refetch();
  };

  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-64" aria-live="polite">
        <p className="text-sm text-gray-500">Loading personas...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex justify-center items-center h-64" aria-live="polite">
        <p className="text-sm text-red-500">
          Error loading personas: {error.message}
        </p>
      </div>
    );
  }
// --------------------

  return (
    <div ....>
      {/** rest of the codes */}
         <AddChatbotModal
            isOpen={isModalOpen}
            onClose={() => setModalOpen(false)}
            onSubmitSuccess={handlePersonaCreated}
          />
      {/** rest of the codes */}
    </div>
}

Here, we’ve added basic conditional rendering, if the query is still loading, it shows a loading state; if an error is caught, it shows an error state. Additionally, we created a new function that runs after the AddChatbotModal finishes submission, which will automatically refetch the query to update the data.

At this point, if you run the project, you’ll notice that the chatbot cards are empty. This is expected since we haven’t created any chatbots yet (previously, the display relied on mock data).

In the next step, we’ll integrate the API into our Add Chatbot feature so we can start populating the gallery with actual chatbot data.

4. Integrate with Add Chatbot

Now onto the final part of this post, adding API calls when creating a new chatbot. We’ll start by adding useCreatePersona to the file: /src/modules/gallery/components/AddChatbotModal.tsx

// .. earlier part of the codes
export const AddChatbotModal: React.FC<AddChatbotModalProps> = ({
  isOpen,
  onClose,
  onSubmitSuccess,
}) => {
// Add this line
  const { mutate: createPersona, isPending } = useCreatePersona();

  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm({
    resolver: zodResolver(personaSchema),
    defaultValues: {
      name: "",
      personality: "",
      tone_style: "",
      interests: "",
      behaviour: "",
      age: 0,
      gender: "",
    },
  });

  const onFormSubmit = (data: {
    name: string;
    personality?: string;
    tone_style?: string;
    interests?: string;
    behaviour?: string;
    age: number;
    gender: string;
  }) => {
// Add this part as well
    createPersona(data, {
      onSuccess: () => {
        reset();
        onClose();
        onSubmitSuccess?.();
      },
    });
  };

// ... later part of the codes

From the code above, you can see that we’ve integrated useCreatePersona into the component and called it inside onFormSubmit. In the onSuccess callback, we reset the form, close the modal, and call onSubmitSuccess (if it’s defined).

Also, make sure to remove the previous isPending variable, since useCreatePersona already provides its own isPending state.

At this point, your form should be fully functional, you can now create new chatbots freely and see them immediately displayed on the screen.

🚀 What’s Next?

In the next post, we’ll start working on a new page which is the Chat UI.

New posts will be released every 2–3 days, so make sure to subscribe or bookmark this page to stay updated!

Please check Part 7 here:
👉 (Part 7) Build a Simple Chat Character Gallery: Implementing the Chat Page UI

(Part 5) Build a Simple Chat Character Gallery: Adding Create New Chatbot Feature

James — Fri, 22 Aug 2025 16:46:00 +0000

👋 Recap from Previous Post

In the last part, we enhanced our chatbot gallery by adding a new feature to add new chatbot to the gallery:

✅ Searchbar: Lets users dynamically search chatbots by name.
✅ Filter by Interests & Personality: Added interactive filter buttons (desktop view) and dropdowns (mobile view) to narrow down chatbot results.
✅ State Management: We used React useState to manage selected filters and updated the filtered list of chatbots accordingly.
✅ Dynamic Filtering: The filteredChatbots array now updates based on search input and selected tags in real-time.

By the end of that post, your Gallery Page allowed users to:

Search by chatbot name

Filter by selected Interests

Filter by selected Personality traits

Adding Create New Chatbot Feature

🎯 Goals for This Post

In this tutorial, we’ll add a new feature that allows users to add a new chatbot to the gallery. We’ll implement a new “Add Chatbot” button placed between the Searchbar and Filter. When clicked, it will open a modal (popup) containing a form where users can input chatbot details.

By the end of this section, you’ll have:

A fully functional “Add Chatbot” button
A responsive modal form to input chatbot details

📱 Step by Step Guide

1. Creating the Button

The first thing we’ll create is the “Add Chatbot” button. This will be a simple button, and we’ll re-use the existing Button component we’ve previously built. To keep things organized, we’ll place it in a new component called AddChatbotButton. Since this button is specific to the gallery page, the file will be located at: src/modules/gallery/components/AddChatbotButton.tsx

We will be needing an icon, so don’t forget to install

pnpm add @phospor-icons/react

Here’s the code for AddChatbotButton:


import { Button } from '@/components/ui/button';
import React from 'react';
import { cn } from '@/lib/utils';
import { PlusIcon } from '@phosphor-icons/react';

interface AddChatbotButtonProps {
  onClick: () => void;
}

export const AddChatbotButton: React.FC<AddChatbotButtonProps> = ({
  onClick,
}) => {
  return (
    <Button
      className={cn(
        'ml-2 px-6 py-3 flex',
        'bg-gradient-to-r from-purple-600 via-pink-500 to-orange-500',
        'text-white font-semibold text-sm',
        'border-0 rounded-xl',
        'shadow-lg shadow-purple-500/25',
        'hover:shadow-xl hover:shadow-purple-500/40',
        'hover:scale-105 hover:-translate-y-0.5',
        'transition-all duration-300 ease-out',
        'focus:outline-none focus:ring-4 focus:ring-purple-500/50',
        'active:scale-95 active:translate-y-0'
      )}
      onClick={onClick}
      aria-label="Add new chatbot"
    >
      <span className="flex items-center gap-2">
        <PlusIcon size={20} />
        Add Chatbot
      </span>
    </Button>
  );
};

As shown above, we’re importing the Button component from our shared components and applying some custom styles to it. We’ve also added an onClick handler for the button’s click event, along with an icon and label text. Simple and straightforward.

Now you can add it to the GalleryPage and place it in between the Searchbar and FilterControl. Then you can add a state to manage what happens when it is clicked:

Here’s what the code looks like:

// .... imports etc

const GalleryPage = () => {
  const router = useRouter();

  const [searchTerm, setSearchTerm] = useState('');
  const [selectedInterest, setSelectedInterest] = useState<string[]>([]);
  const [selectedPersonality, setSelectedPersonality] = useState<string[]>([]);
  // Add state here
  const [isModalOpen, setModalOpen] = useState(false);

// ....

  return (
// ........ other html before
            <div className="flex gap-x-2">
              <SearchBar
                value={searchTerm}
                onChange={setSearchTerm}
                placeholder="Search chatbots by name or description..."
              />
            </div>
            {/* Add the Chatbot Button here */}
            <AddChatbotButton onClick={() => setModalOpen(true)} />

            {/* Filter for Interests */}
            <div className="bg-white p-4 rounded-lg shadow">
              <h2 className="text-lg font-medium mb-3">Filter by Interests</h2>
              <FilterControls
                values={allInterests}
                selectedValues={selectedInterest}
                onToggle={handleInterestsToggle}
              />
            </div>
// ........ other html after
  )

2. Creating the Modal

Now let’s build the form for creating a new chatbot. We’ll structure it from top to bottom starting with the header, followed by the form fields, and then the action buttons.

Creating Dialog (Modal) reusable components

To begin, we’ll install the @radix-ui/react-dialog package. This will serve as the foundation for our custom dialog component. It provides accessible, unstyled primitives, making it a great choice for building consistent and flexible modal components.

Run the following command to install it:

pnpm add @radix-ui/react-dialog

We’ll place our custom dialog component inside src/components/ui/dialog.tsx. This file will contain all custom dialog components based on @radix-ui/react-dialog. We’ll also apply our own styles to these components to match the overall design of the app.

Here’s the full code for the file:

import React, { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { cn } from '@/lib/utils';
import { XIcon } from '@phosphor-icons/react';

const Dialog = DialogPrimitive.Root;

const DialogPortal = DialogPrimitive.Portal;

const DialogOverlay = ({
  className,
  ...props
}: ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>) => (
  <DialogPrimitive.Overlay
    className={cn(
      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
      className
    )}
    {...props}
  />
);

const DialogContent = ({
  className,
  children,
  ...props
}: ComponentPropsWithoutRef<typeof DialogPrimitive.Content>) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      className={cn(
        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
        className
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <XIcon className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
);

const DialogHeader = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col space-y-1.5 text-center sm:text-left',
      className
    )}
    {...props}
  />
);

const DialogFooter = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
      className
    )}
    {...props}
  />
);

const DialogTitle = ({
  className,
  ...props
}: ComponentPropsWithoutRef<typeof DialogPrimitive.Title>) => (
  <DialogPrimitive.Title
    className={cn(
      'text-lg font-semibold leading-none tracking-tight',
      className
    )}
    {...props}
  />
);

const DialogDescription = ({
  className,
  ...props
}: ComponentPropsWithoutRef<typeof DialogPrimitive.Description>) => (
  <DialogPrimitive.Description
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
);

export {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
};

We’ve created several components to build a custom, reusable dialog system. Here’s a brief explanation of each one:

Dialog: The root component that manages the open/close state of the dialog.
DialogPortal: Renders the overlay and content in a React portal (typically into the ), allowing the dialog to appear above other content regardless of DOM hierarchy.
DialogOverlay: A full-screen background layer that dims the rest of the UI and prevents interaction with it while the dialog is open.
DialogContent: The main dialog window. It includes the portal and overlay, and renders any custom content passed via children. It also includes a close button in the top-right corner.
DialogHeader: A layout wrapper for the top section of the dialog, typically used to contain the title and optional description.
DialogFooter: A layout wrapper for the bottom section of the dialog, usually used for action buttons. It stacks vertically on mobile and horizontally on desktop.
DialogTitle: An accessible title element that is announced by screen readers when the dialog opens.
DialogDescription: An optional accessible description for additional context, also announced by screen readers when the dialog opens.

Creating AddChatbotModal component

Now that we’ve built our reusable dialog components, it’s time to create the AddChatbotModal component. This modal will be located at: src/modules/gallery/components/AddChatbotModal.tsx. We’ll begin by building the header section of the modal.

Here’s the code for the header:

import React from "react";
import { Button } from "@/components/ui/button";
import Input from "@/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { cn } from "@/lib/utils";

interface AddChatbotModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmitSuccess?: () => void;
}

export const AddChatbotModal: React.FC<AddChatbotModalProps> = ({
  isOpen,
  onClose,
  onSubmitSuccess,
}) => {

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-lg max-h-[90vh] overflow-y-auto rounded-2xl border-0 p-0">
        <div className="bg-gradient-to-br from-purple-600 via-pink-500 to-orange-500 p-6 rounded-t-2xl">
          <DialogHeader>
            <DialogTitle className="text-2xl font-bold text-white">
              Create New Chatbot
            </DialogTitle>
            <DialogDescription className="text-purple-100 mt-2">
              Design a unique AI personality for the marketplace
            </DialogDescription>
          </DialogHeader>
        </div>
      </DialogContent>
    </Dialog>
  );
};

In this section, we’re using the Dialog and DialogContent components we created earlier to structure the modal. Inside the DialogContent, we build the header portion of the modal. If you render this component now, you should be able to clearly see the header appear.

Next, we’ll add the main content of the modal, the form. If you refer to the screenshot I shared earlier, most of the form fields follow a consistent layout: a label followed by an input element. The only exception is the “Personality” field, which will use a <textarea> instead of a standard input.

Here’s an example of the markup for one field. You can duplicate this structure to create the other inputs:

// ... rest of the code

export const AddChatbotModal: React.FC<AddChatbotModalProps> = ({
  isOpen,
  onClose,
  onSubmitSuccess,
}) => {
return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-lg max-h-[90vh] overflow-y-auto rounded-2xl border-0 p-0">
        <div className="bg-gradient-to-br from-purple-600 via-pink-500 to-orange-500 p-6 rounded-t-2xl">
          <DialogHeader>
            <DialogTitle className="text-2xl font-bold text-white">
              Create New Chatbot
            </DialogTitle>
            <DialogDescription className="text-purple-100 mt-2">
              Design a unique AI personality for the marketplace
            </DialogDescription>
          </DialogHeader>
        </div>

        {/* The Form Part */}
        <div className="p-6 space-y-6">
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">
                Name
                <span className="text-red-500 ml-1">*</span>
              </label>
              <Input
                placeholder="e.g., Tech Assistant Pro"
                className="border-2 border-purple-200 focus:border-purple-500 focus:ring-purple-500/20 rounded-lg"
              />
            </div>

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">
                Personality
              </label>
              <textarea
                placeholder="Describe the chatbot's core personality traits..."
                className={cn(
                  "w-full px-4 py-3 border-2 border-purple-200 rounded-lg bg-white",
                  "focus:border-purple-500 focus:ring-purple-500/20",
                  "text-sm leading-relaxed resize-none",
                  "transition-all duration-200"
                )}
                rows={2}
              />
           </div>

            {/* Put the rest of the input here */}
         </div>
        </div>
      </DialogContent>
    </Dialog>
)

Finally, let’s add the footer section with the action buttons. This includes two buttons:

Cancel – Closes the modal
Create Chatbot – Submits the form and triggers the API call to create a new chatbot

Here’s the code for the button group:

    return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-lg max-h-[90vh] overflow-y-auto rounded-2xl border-0 p-0">
        {/** Form */}
        <div className="p-6 space-y-6">
            {/** Form here */}
        </div>

        {/** Footer here */}
        <DialogFooter className="px-6 py-4 bg-gradient-to-r from-purple-50 to-pink-50 border-t border-purple-200 rounded-b-2xl">
          <Button
            variant="outline"
            onClick={onClose}
            className="border-purple-300 text-purple-700 hover:bg-purple-100 hover:border-purple-400"
          >
            Cancel
          </Button>
          <Button
            onClick={() => {}}
            disabled={isPending}
            className={cn(
              "bg-gradient-to-r from-purple-600 to-pink-600",
              "hover:from-purple-700 hover:to-pink-700",
              "text-white font-semibold",
              "border-0 shadow-lg shadow-purple-500/25",
              "hover:shadow-xl hover:shadow-purple-500/40",
              "hover:scale-105 transition-all duration-200",
              isPending && "opacity-70 cursor-not-allowed"
            )}
          >
            {isPending ? "Creating..." : "Create Chatbot"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
    )

You might notice that isPending is used but not defined yet. For now, you can set it to false as a placeholder we’ll implement its functionality later.

At this point, your modal should visually match the screenshot I showed earlier. However, it’s still non-functional. In the next step, we’ll integrate react-hook-form to handle form state, validation, and submission.

Before we continue, make sure to install the necessary dependencies:

pnpm install react-hook-form @hookform/resolvers

These are required for integrating react-hook-form along with the zodResolver, which we’ll use for schema validation.

I’ll provide the personaSchema we’re using shortly.

Here’s the updated version of the AddChatbotModal component:

// ... rest of code

export const AddChatbotModal: React.FC<AddChatbotModalProps> = ({
  isOpen,
  onClose,
  onSubmitSuccess,
}) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm({
    resolver: zodResolver(personaSchema),
    defaultValues: {
      name: "",
      personality: "",
      tone_style: "",
      interests: "",
      behaviour: "",
      age: 0,
      gender: "",
    },
  });

  const onFormSubmit = (data: {
    name: string;
    personality?: string;
    tone_style?: string;
    interests?: string;
    behaviour?: string;
    age: number;
    gender: string;
  }) => {
    // Handle Form Here
  };

  const isPending = false;

  return (
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent className="sm:max-w-lg max-h-[90vh] overflow-y-auto rounded-2xl border-0 p-0">
          {/** ... other HTML tags above */}
          <DialogFooter className="px-6 py-4 bg-gradient-to-r from-purple-50 to-pink-50 border-t border-purple-200 rounded-b-2xl">
            <Button
              variant="outline"
              onClick={onClose}
              className="border-purple-300 text-purple-700 hover:bg-purple-100 hover:border-purple-400"
            >
              Cancel
            </Button>
            <Button
              onClick={handleSubmit(onFormSubmit)}
              disabled={isPending}
              className={cn(
                "bg-gradient-to-r from-purple-600 to-pink-600",
                "hover:from-purple-700 hover:to-pink-700",
                "text-white font-semibold",
                "border-0 shadow-lg shadow-purple-500/25",
                "hover:shadow-xl hover:shadow-purple-500/40",
                "hover:scale-105 transition-all duration-200",
                isPending && "opacity-70 cursor-not-allowed"
              )}
            >
              {isPending ? "Creating..." : "Create Chatbot"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
  )

In the example above, we’ve initialized useForm from react-hook-form and used zodResolver from @hookform/resolvers to connect our schema validation.

Next, I’ll show you how to register each input field using register, and how to display validation error messages beneath them.

Here’s a sample input field with validation applied:

return (
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent className="sm:max-w-lg max-h-[90vh] overflow-y-auto rounded-2xl border-0 p-0">
            <div className="p-6 space-y-6">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Name
                    <span className="text-red-500 ml-1">*</span>
                  </label>
                  <Input
                    {...register('name')}
                    placeholder="e.g., Tech Assistant Pro"
                    className="border-2 border-purple-200 focus:border-purple-500 focus:ring-purple-500/20 rounded-lg"
                  />
                  {errors.name && (
                    <p className="text-red-500 text-xs mt-1">
                      {errors.name.message}
                    </p>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Personality
                  </label>
                  <textarea
                    {...register('personality')}
                    placeholder="Describe the chatbot's core personality traits..."
                    className={cn(
                      'w-full px-4 py-3 border-2 border-purple-200 rounded-lg bg-white',
                      'focus:border-purple-500 focus:ring-purple-500/20',
                      'text-sm leading-relaxed resize-none',
                      'transition-all duration-200'
                    )}
                    rows={2}
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Tone Style
                  </label>
                  <Input
                    {...register('tone_style')}
                    placeholder="e.g., professional, casual, humorous"
                    className="border-2 border-purple-200 focus:border-purple-500 focus:ring-purple-500/20 rounded-lg"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Interests
                  </label>
                  <Input
                    {...register('interests')}
                    placeholder="e.g., technology, sports, music"
                    className="border-2 border-purple-200 focus:border-purple-500 focus:ring-purple-500/20 rounded-lg"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    Behavior
                  </label>
                  <Input
                    {...register('behaviour')}
                    placeholder="e.g., helpful, inquisitive, reserved"
                    className="border-2 border-purple-200 focus:border-purple-500 focus:ring-purple-500/20 rounded-lg"
                  />
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">
                      Age
                    </label>
                    <Input
                      type="number"
                      {...register('age', { valueAsNumber: true })}
                      placeholder="e.g., 25"
                      className="border-2 border-purple-200 focus:border-purple-500 focus:ring-purple-500/20 rounded-lg"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">
                      Gender
                    </label>
                    <Input
                      {...register('gender')}
                      placeholder="e.g., male, female, non-binary"
                      className="border-2 border-purple-200 focus:border-purple-500 focus:ring-purple-500/20 rounded-lg"
                    />
                  </div>
                </div>
              </div>
            </div>
            {/** ... footer HTML tags */}
        </DialogContent>
      </Dialog>
)

We’ll place the new personaSchema.ts file under a new directory: src/schema/personaSchema.ts. This folder will be used to store all schema definitions, whether for form validation or API response validation.

Here’s the code for personaSchema.ts:

import z from "zod/v4";

export const personaSchema = z.object({
  name: z.string(),
  personality: z.string().optional(),
  tone_style: z.string().optional(),
  interests: z.string().optional(),
  behaviour: z.string().optional(),
  age: z.number(),
  gender: z.string(),
});

🚀 What’s Next?

By now, you should have a working “Add Chatbot” button that opens a modal when clicked. In the next part, we’ll integrate the API so you can create new chatbots and fetch all the chatbots you’ve created to display them in your gallery.

New posts will be released every 2–3 days, so make sure to subscribe or bookmark this page to stay updated!

Please check Part 6 here:
👉 (Part 6) Build a Simple Chat Character Gallery: Integrating the API

(Part 4) Build a Simple Chat Character Gallery: Adding Searchbar & Filter

James — Wed, 20 Aug 2025 16:35:00 +0000

👋 Recap from Previous Post

In the previous post, we focused on building the ChatbotCard component—an essential part of our Gallery UI. You learned how to:

✅ Create reusable UI components like Card, CardContent, CardFooter, and Button.
✅ Set up a flexible utility function cn() to manage dynamic Tailwind class names.
✅ Define the Chatbot and Persona types for clean data structure.
✅ Render a responsive grid of chatbot cards on the Gallery page using sample data.
✅ Ensure the Gallery is the default landing page by updating app/page.tsx.

By the end of that post, your app should’ve been able to display a functional and neatly designed grid of chatbot cards that preview character info.

Creating Searchbar & Filter

🎯 Goals for This Post

In this part of the tutorial, we’ll focus on building the Searchbar and Filter functionality for the Gallery page. To keep things simple and digestible, we’ll save the “Add Chatbot” button for the next post.

By the end of this guide, you’ll have a fully functional UI where users can:

Search by Name – Filter visible ChatbotCards by typing a name in the search bar.
Filter by Interests – Click on an interest tag to show only characters who have that interest.
Filter by Personality – Click on a personality tag to display only characters matching that trait.

Your final result will look like the image below—a responsive page with cards, a searchbar, and clickable filters ready to enhance user experience.

📱 Step by Step Guide

1. Creating the Searchbar

First thing first, we’ll create a new file called Searchbar.tsx and we’ll put it in src/modules/gallery/components/Searchbar.tsx, the reason is the Searchbar will be used in this page only hence it will be better to put it in components under gallery instead of shared components folder.

Here’s the code for it:

import React from "react";
import Input from "@/components/ui/input";
import { cn } from "@/lib/utils";

interface SearchBarProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
}

export const SearchBar = ({
  value,
  onChange,
  placeholder = "Search chatbots...",
}: SearchBarProps) => {
  return (
    <div className="relative flex-grow">
      <Input
        type="text"
        value={value}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          onChange(e.target.value)
        }
        placeholder={placeholder}
        className={cn(
          "w-full",
          "border-2 border-purple-200 bg-white/80 backdrop-blur-sm",
          "text-gray-700 placeholder:text-purple-400/70",
          "rounded-xl shadow-sm",
          "focus:border-purple-500 focus:ring-4 focus:ring-purple-500/20",
          "focus:bg-white focus:shadow-lg focus:shadow-purple-500/10",
          "transition-all duration-300 ease-out",
          "hover:border-purple-300 hover:shadow-md"
        )}
        aria-label="Search chatbots"
      />
    </div>
  );
};

The Searchbar UI follows a common design found in many modern web apps. It accepts standard props such as value, onChange, and placeholder. This allows us to control its state and update the input dynamically as the user types.

If you take a closer look, you might notice we’re using a component that hasn’t been created yet: the Input component from our shared UI folder and that’s what we’ll work on next.

Creating Input component

The Input component is essentially a styled wrapper around the standard <input> element. Its purpose is to maintain a consistent design and behavior across all input fields in our project.

Since this is a shared UI component, we’ll place it in src/components/ui/input.tsx.

Here’s the code:

import React, { FC, InputHTMLAttributes } from "react";
import { cn } from "@/lib/utils";

type InputProps = InputHTMLAttributes<HTMLInputElement>;

const Input: FC<InputProps> = ({ className, ...props }) => {
  return (
    <input
      className={cn(
        "flex h-10 w-full rounded-md border border-input bg-white dark:bg-gray-800 px-3 py-2 text-sm text-black dark:text-black ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 dark:placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    />
  );
};

export default Input;

Integrating the Searchbar into the Gallery Page

Now that our Searchbar component is complete, we can add it to the GalleryPage and connect it to the component’s state. This will allow us to dynamically filter the displayed ChatbotCards based on the character names as the user types.

First, let’s create a new <div> positioned alongside the existing ChatbotCard components. Inside this new container, we’ll place the Searchbar component.


    <div className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">Chatbot Gallery</h1>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div className="md:col-span-1">
          <div
            className="sticky top-4 space-y-6"
            role="search"
            aria-label="Search and filter chatbots"
          >
            <div className="flex gap-x-2">
              <SearchBar
                value={""}
                onChange={() => {}}
                placeholder="Search chatbots by name or description..."
              />
            </div>
          </div>
        </div>
        <div className="md:col-span-3">
          <div
            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
            role="region"
            aria-label="Chatbot list"
            aria-live="polite"
          >
            {/* ------------ Rest of the HTMLS ------------- */}
          </div>
        </div>
      </div>
    </div>

Next, we’ll add a new state inside the GalleryPage component called searchTerm. This state will store the value typed into the search bar.

We’ll then pass searchTerm as the value prop to the Searchbar, and set the onChange prop to update it using setSearchTerm.

Here’s the full example of how that looks in context:

const GalleryPage = () => {
  const [searchTerm, setSearchTerm] = useState("");

  const onCardClick = () => {
    // Do nothing yet
  };

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">Chatbot Gallery</h1>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div className="md:col-span-1">
          <div
            className="sticky top-4 space-y-6"
            role="search"
            aria-label="Search and filter chatbots"
          >
            <div className="flex gap-x-2">
              <SearchBar
                value={searchTerm}
                onChange={setSearchTerm}
                placeholder="Search chatbots by name or description..."
              />
            </div>
          </div>
        </div>
        <div className="md:col-span-3">
          <div
            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
            role="region"
            aria-label="Chatbot list"
            aria-live="polite"
          >
            {/* ------------ Unrelated Parts ------------- */}
          </div>
        </div>
      </div>
    </div>
  );
};

Next, we’ll filter the chatbot data based on the searchTerm, and pass the filtered result to the ChatbotCards group. This allows the list to dynamically update and only show chatbot cards that match the user’s input in the search bar.

First, we’ll rename the existing sample data from filteredChatbots to chatbotsData to avoid confusion. Then, inside the GalleryPage component, we’ll create a new variable called filteredChatbots.

This new variable will filter chatbotsData using the searchTerm, returning a refined list of chatbot cards that match the search query.

Here’s an example of the code:

// ... imports and sample datas 

const GalleryPage = () => {
  const [searchTerm, setSearchTerm] = useState("");

  const onCardClick = () => {
    // Do nothing yet
  };

  const filteredChatbots = useMemo(() => {
    return chatbotsData.filter((persona) => {
      const matchesSearch = persona.name
        .toLowerCase()
        .includes(searchTerm.toLowerCase());

      return matchesSearch;
    });
  }, [chatbotsData, searchTerm]);

// ... rest of the codes

By now, your search functionality should be working. Typing into the search bar will dynamically filter the displayed ChatbotCards based on their names.

It should look something like this:

2. Creating the Filter

Now, let's move on to building the filter functionality.

On desktop, filters will be displayed as clickable tag-like buttons (as shown in the image above). On mobile, the same filters will be accessible through dropdown menus for a more compact and user-friendly interface (see image below). Once you select an interest or personality from the dropdown, a tag will appear showing your selected filter—making it easy to see and manage which filters are currently active.

First, we’ll begin by building the desktop view of the filter component.

Create a new file named FilterControl.tsx, located at: src/modules/gallery/components/FilterControl.tsx.

Since each tag-like filter should be interactive (clickable), we’ll use the reusable Button component to render them. This ensures consistent styling and behavior across the app.

Here’s the code for FilterControl.tsx:

import React from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface FilterControlsProps {
  value: string[];
  selectedValue: string[];
  onToggle: (value: string) => void;
}

export const FilterControls = ({
  value,
  selectedValue,
  onToggle,
}: FilterControlsProps) => {
  // Shared tag styling for both mobile and desktop
  const getTagStyles = (isSelected: boolean) => {
    return cn(
      "rounded-full px-4 py-2 text-sm font-semibold",
      "transition-all duration-200",
      isSelected
        ? "bg-gradient-to-r from-purple-600 to-pink-500 text-white shadow-md shadow-purple-500/25 hover:shadow-lg hover:shadow-purple-500/40"
        : "border-2 border-purple-200 text-purple-600 hover:bg-purple-100 hover:border-purple-300 hover:shadow-md"
    );
  };

  return (
    <>
      {/* Desktop view: Button group */}
      <div className="hidden md:flex flex-wrap gap-2">
        {value.map((e) => (
          <Button
            key={e}
            onClick={() => onToggle(e)}
            variant={selectedValue.includes(e) ? "default" : "outline"}
            size="sm"
            className={getTagStyles(selectedValue.includes(e))}
            aria-pressed={selectedValue.includes(e)}
            role="checkbox"
            aria-checked={selectedValue.includes(e)}
          >
            {e}
          </Button>
        ))}
      </div>
    </>
  );
};

In the code above, we created a helper function called getTagStyles to keep things tidy and avoid repeating the same classNames. This function will also be reused by other components in this file later on.

The FilterControls component accepts several props:

values: the values to be displayed.
selectedValue: the currently selected filter.
onToggle: a callback function triggered when the button is clicked

These props allow the filter controls to behave dynamically and respond to user interaction effectively.

Next, we’ll move on to building the mobile view, starting with the dropdown button. For this, we’ll use the native <select> and <option> elements, styled to match the rest of our UI.

Here’s the updated code for FilterControls:

import React, { useRef } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface FilterControlsProps {
  values: string[];
  selectedValue: string[];
  onToggle: (value: string) => void;
}

export const FilterControls = ({
  values,
  selectedValue,
  onToggle,
}: FilterControlsProps) => {
  const selectRef = useRef<HTMLSelectElement>(null);

  // For mobile view, we'll use a Select component
  const handleSelectChange = (value: string) => {
    if (value) {
      onToggle(value);
      // Reset the select to default option after selection
      if (selectRef.current) {
        selectRef.current.value = "";
      }
    }
  };

  // Shared tag styling for both mobile and desktop
  const getTagStyles = (isSelected: boolean) => {
    return cn(
      "rounded-full px-4 py-2 text-sm font-semibold",
      "transition-all duration-200",
      isSelected
        ? "bg-gradient-to-r from-purple-600 to-pink-500 text-white shadow-md shadow-purple-500/25 hover:shadow-lg hover:shadow-purple-500/40"
        : "border-2 border-purple-200 text-purple-600 hover:bg-purple-100 hover:border-purple-300 hover:shadow-md"
    );
  };

  return (
    <>
      {/* Mobile view: Select dropdown and tags */}
      <div className="md:hidden space-y-3">
        <select
          ref={selectRef}
          onChange={(e) => handleSelectChange(e.target.value)}
          className={cn(
            "w-full h-12 px-4 py-3 text-sm bg-white/80 backdrop-blur-sm",
            "border-2 border-purple-200 rounded-xl",
            "text-gray-700 placeholder:text-purple-400/70",
            "focus:border-purple-500 focus:ring-4 focus:ring-purple-500/20",
            "focus:bg-white focus:shadow-lg focus:shadow-purple-500/10",
            "transition-all duration-300 ease-out",
            "hover:border-purple-300 hover:shadow-md"
          )}
          aria-label="Filter by personality"
        >
          <option value="">Select an interest</option>
          {values.map((e) => (
            <option key={e} value={e}>
              {e}
            </option>
          ))}
        </select>
      </div>

      {/* Desktop view: Button group */}
      <div className="hidden md:flex flex-wrap gap-2">
        {values.map((e) => (
          <Button
            key={e}
            onClick={() => onToggle(e)}
            variant={selectedValue.includes(e) ? "default" : "outline"}
            size="sm"
            className={getTagStyles(selectedValue.includes(e))}
            aria-pressed={selectedValue.includes(e)}
            role="checkbox"
            aria-checked={selectedValue.includes(e)}
          >
            {e}
          </Button>
        ))}
      </div>
    </>
  );
};

As shown in the code above, we added a new container next to the desktop view’s container to hold the dropdown menu. This mobile-specific container is only visible on screens smaller than the medium breakpoint (i.e., mobile devices).

We also introduced a new function to handle dropdown selections called handleSelectChange. When a user selects an option, this function calls the onToggle handler to update the selected filter, and then resets the <select> value to allow for repeated selections. The selected values will then be displayed as buttons below the dropdown which we’ll implement next.

next we’ll work on the tags like component for the mobile view. it’s pretty simple and similar to the desktop view part.

Here’s the updated code:

import React, { useRef } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface FilterControlsProps {
  values: string[];
  selectedValues: string[];
  onToggle: (value: string) => void;
}

export const FilterControls = ({
  values,
  selectedValues,
  onToggle,
}: FilterControlsProps) => {
  const selectRef = useRef<HTMLSelectElement>(null);

  // For mobile view, we'll use a Select component
  const handleSelectChange = (value: string) => {
    if (value) {
      onToggle(value);
      // Reset the select to default option after selection
      if (selectRef.current) {
        selectRef.current.value = "";
      }
    }
  };

  // Shared tag styling for both mobile and desktop
  const getTagStyles = (isSelected: boolean) => {
    return cn(
      "rounded-full px-4 py-2 text-sm font-semibold",
      "transition-all duration-200",
      isSelected
        ? "bg-gradient-to-r from-purple-600 to-pink-500 text-white shadow-md shadow-purple-500/25 hover:shadow-lg hover:shadow-purple-500/40"
        : "border-2 border-purple-200 text-purple-600 hover:bg-purple-100 hover:border-purple-300 hover:shadow-md"
    );
  };

  return (
    <>
      {/* Mobile view: Select dropdown and tags */}
      <div className="md:hidden space-y-3">
        <select
          ref={selectRef}
          onChange={(e) => handleSelectChange(e.target.value)}
          className={cn(
            "w-full h-12 px-4 py-3 text-sm bg-white/80 backdrop-blur-sm",
            "border-2 border-purple-200 rounded-xl",
            "text-gray-700 placeholder:text-purple-400/70",
            "focus:border-purple-500 focus:ring-4 focus:ring-purple-500/20",
            "focus:bg-white focus:shadow-lg focus:shadow-purple-500/10",
            "transition-all duration-300 ease-out",
            "hover:border-purple-300 hover:shadow-md"
          )}
          aria-label="Filter by personality"
        >
          <option value="">Select an interest</option>
          {values.map((e) => (
            <option key={e} value={e}>
              {e}
            </option>
          ))}
        </select>

        {/* Mobile selected tags display */}
        {selectedValues.length > 0 && (
          <div className="flex flex-wrap gap-2 mt-2">
            {selectedValues.map((e) => (
              <Button
                key={e}
                onClick={() => onToggle(e)}
                variant="default"
                size="sm"
                className={getTagStyles(true)}
                aria-pressed={true}
                role="checkbox"
                aria-checked={true}
              >
                {e}
              </Button>
            ))}
          </div>
        )}
      </div>

      {/* Desktop view: Button group */}
      <div className="hidden md:flex flex-wrap gap-2">
        {values.map((e) => (
          <Button
            key={e}
            onClick={() => onToggle(e)}
            variant={selectedValues.includes(e) ? "default" : "outline"}
            size="sm"
            className={getTagStyles(selectedValues.includes(e))}
            aria-pressed={selectedValues.includes(e)}
            role="checkbox"
            aria-checked={selectedValues.includes(e)}
          >
            {e}
          </Button>
        ))}
      </div>
    </>
  );
};

The new section marked with the comment Mobile selected tags display checks whether there are any selectedValues. If so, it displays them accordingly.

Now, the final step is to integrate these components into the GalleryPage and manage the state for the selected values.

Let’s begin with the Interest Filter. First, add the FilterControl component right below the Searchbar. Then, create a new state to hold the selected filter value and define a function to handle the onToggle logic for the FilterControl.

Here’s an example implementation:

const GalleryPage = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedInterest, setSelectedInterest] = useState<string[]>([]);

  const onCardClick = () => {
    // Do nothing yet
  };

  // Get all unique interests
  const allInterests = useMemo(() => {
    const interests = new Set<string>();
    chatbotsData.forEach((persona) => {
      // Collect unique interests from personas
      if (persona.interests) {
        persona.interests.split(",").forEach((el) => interests.add(el.trim()));
      }
    });
    return Array.from(interests).sort();
  }, [chatbotsData]);

  const filteredChatbots = useMemo(() => {
    return chatbotsData.filter((persona) => {
      const matchesSearch = persona.name
        .toLowerCase()
        .includes(searchTerm.toLowerCase());

      const matchesInterests =
        selectedInterest.length === 0 ||
        selectedInterest.some((e) => persona.interests?.includes(e));

      return matchesSearch && matchesInterests;
    });
  }, [chatbotsData, searchTerm, selectedInterest]);

  const handleInterestsToggle = (tag: string) => {
    setSelectedInterest((prev) =>
      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
    );
  };

  return (
// .... rest of the code
            <div className="flex gap-x-2">
              <SearchBar
                value={searchTerm}
                onChange={setSearchTerm}
                placeholder="Search chatbots by name or description..."
              />
            </div>
            {/* Filter for Interests */}
            <div className="bg-white p-4 rounded-lg shadow">
              <h2 className="text-lg font-medium mb-3">Filter by Interests</h2>
              <FilterControls
                values={allInterests}
                selectedValues={selectedInterest}
                onToggle={handleInterestsToggle}
              />
            </div>
/// .... rest of the code
  );
};

As shown above, we’ve made several updates to the GalleryPage:

Added a useState hook to manage the selectedInterests.
Defined allInterests to extract all unique interests from the chatbot data.
Updated filteredChatbots to include filtering logic based on selected interests.
Created handleInterestsToggle to handle changes when a filter button is toggled.

At this point, the filter should be functional and working as expected. Feel free to try it out and see it in action!

The final step is to implement the filter for Personality. This will follow the same pattern as the Interests filter—so if you’d like, you can give it a try yourself first before checking the solution below.

Here’s the code example:

"use client";

import React, { useMemo, useState } from "react";
import { ChatbotCard } from "./components/ChatbotCard";
import { SearchBar } from "./components/Searchbar";
import { FilterControls } from "./components/FilterControl";

const chatbotsData = [
  {
    id: "1",
    name: "Chatbot 1",
    avatarUrl: "",
    behaviour: "Chatbot 1 behaviour",
    personality: "professional, detail-oriented, calm",
    interests: "planning, data organization, note taking",
    tone_style: "formal, friendly",
    created_at: new Date().getTime(),
    updated_at: new Date().getTime(),
  },
  {
    id: "2",
    name: "Chatbot 2",
    avatarUrl: "",
    behaviour: "Chatbot 2 behaviour",
    personality: "playful, witty, chill",
    interests: "astrology, indie music, coffee",
    tone_style: "casual, friendly, flirty sometimes",
    created_at: new Date().getTime(),
    updated_at: new Date().getTime(),
  },
  {
    id: "3",
    name: "Chatbot 3",
    avatarUrl: "",
    behaviour: "Chatbot 3 behaviour",
    personality: "playful, teasing, proud",
    interests: "Sweets, Desserts, Fashion",
    tone_style: "casual with friends, cold with others",
    created_at: new Date().getTime(),
    updated_at: new Date().getTime(),
  },
];

const GalleryPage = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedInterest, setSelectedInterest] = useState<string[]>([]);
  const [selectedPersonality, setSelectedPersonality] = useState<string[]>([]);

  const onCardClick = () => {
    // Do nothing yet
  };

  // Get all unique interests
  const allInterests = useMemo(() => {
    const interests = new Set<string>();
    chatbotsData.forEach((persona) => {
      // Collect unique interests from personas
      if (persona.interests) {
        persona.interests.split(",").forEach((el) => interests.add(el.trim()));
      }
    });
    return Array.from(interests).sort();
  }, [chatbotsData]);

  // Get all unique personality
  const allPersonality = useMemo(() => {
    const personalities = new Set<string>();
    chatbotsData.forEach((persona) => {
      // Collect unique interests from personas
      if (persona.personality) {
        persona.personality
          .split(",")
          .forEach((el) => personalities.add(el.trim()));
      }
    });
    return Array.from(personalities).sort();
  }, [chatbotsData]);

  const filteredChatbots = useMemo(() => {
    return chatbotsData.filter((persona) => {
      const matchesSearch = persona.name
        .toLowerCase()
        .includes(searchTerm.toLowerCase());

      const matchesInterests =
        selectedInterest.length === 0 ||
        selectedInterest.some((e) => persona.interests?.includes(e));

      const matchesPersonalities =
        selectedPersonality.length === 0 ||
        selectedPersonality.some((e) => persona.personality?.includes(e));

      return matchesSearch && matchesInterests && matchesPersonalities;
    });
  }, [chatbotsData, searchTerm, selectedInterest, selectedPersonality]);

  const handleInterestsToggle = (tag: string) => {
    setSelectedInterest((prev) =>
      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
    );
  };

  const handlePersonalityToggle = (tag: string) => {
    setSelectedPersonality((prev) =>
      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
    );
  };

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">Chatbot Gallery</h1>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div className="md:col-span-1">
          <div
            className="sticky top-4 space-y-6"
            role="search"
            aria-label="Search and filter chatbots"
          >
            <div className="flex gap-x-2">
              <SearchBar
                value={searchTerm}
                onChange={setSearchTerm}
                placeholder="Search chatbots by name or description..."
              />
            </div>

            {/* Filter for Interests */}
            <div className="bg-white p-4 rounded-lg shadow">
              <h2 className="text-lg font-medium mb-3">Filter by Interests</h2>
              <FilterControls
                values={allInterests}
                selectedValues={selectedInterest}
                onToggle={handleInterestsToggle}
              />
            </div>

            {/* Filter for Personality */}
            <div className="bg-white p-4 rounded-lg shadow">
              <h2 className="text-lg font-medium mb-3">
                Filter by Personality
              </h2>
              <FilterControls
                values={allPersonality}
                selectedValues={selectedPersonality}
                onToggle={handlePersonalityToggle}
              />
            </div>
          </div>
        </div>
        <div className="md:col-span-3">
          <div
            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
            role="region"
            aria-label="Chatbot list"
            aria-live="polite"
          >
            {filteredChatbots.map((persona) => {
              const interests = persona.interests
                ? persona.interests.split(",").map((i) => i.trim())
                : [];
              const personality = persona.personality
                ? persona.personality.split(",").map((p) => p.trim())
                : [];

              return (
                <div key={persona.id}>
                  <ChatbotCard
                    chatbot={{
                      id: persona.id,
                      name: persona.name,
                      avatarUrl: "",
                      behavior: persona.behaviour || "",
                      personality: personality,
                      interests: interests,
                      tone_style: persona.tone_style || "",
                      createdAt:
                        new Date(persona.created_at).toISOString() ||
                        new Date().toISOString(),
                      updatedAt:
                        new Date(persona.updated_at).toISOString() ||
                        new Date().toISOString(),
                    }}
                    onClick={onCardClick}
                  />
                </div>
              );
            })}

            {filteredChatbots.length === 0 && (
              <div className="col-span-full text-center py-12">
                <p className="text-sm text-gray-500">
                  No chatbots match your search criteria
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default GalleryPage;

As you can see above, we added the same pieces of logic we used previously for the Interests filter. These include:

handlePersonalityToggle – handles toggle changes for the Personality filter.
allPersonality – extracts all unique personality traits from the chatbot data.
A new useState hook to store the selectedPersonality value.
An updated filteredChatbots logic to include the Personality filter

That’s all for today! 🎉

You can now try out what you’ve built in this post. You should be able to filter chatbot results by name (using the Searchbar), personality, and/or interests. It should looks like these images below

🚀 What’s Next?

In the next post, we’ll work on adding the Add Chatbot button and form, including how to integrate it with the API we discussed back in Part 2.

New posts will be released every 2–3 days, so make sure to subscribe or bookmark this page to stay updated!

Please check Part 5 here:
👉 (Part 5) Build a Simple Chat Character Gallery: Adding Create New Chatbot Feature

(Part 3) Build a Simple Chat Character Gallery: Creating Card Component

James — Mon, 18 Aug 2025 16:45:00 +0000

👋 Recap from Previous Post

In the last post, we set up the project, installed the necessary tools to get started, and update some of the configs file. Now, let’s move on to building one of the core UI elements: the Character Card Component, which will be used to display each AI character in the gallery.

Creating Card Component

🎯 Goals for This Post

In this part of the tutorial, our goals are to:

Create a reusable Character Card component to display each AI chatbot.
Make the component responsive, so it looks good on all screen sizes.
Build a layout that can render multiple Character Cards in a flexible grid.

By the end, you’ll have a responsive grid of character cards and ready to be filled with any AI persona you want!

📱 Step by Step Guide

1. Create New Folders for Gallery Page
Let’s start by creating a folder to organize the code for our Gallery Page. This will be placed at: src/modules/gallery/index.tsx.

Why use a modules folder? The modules directory will serve as the central place for all your app’s main features or pages. This helps keep the codebase modular and easier to maintain as the project grows.

Next, let’s create a reusable component for displaying each character card. We’ll place this component in the following path:

src/modules/gallery/components/ChatbotCard.tsx

We’re also creating a new components folder inside the gallery module. This folder will serve as the home for all reusable UI components specific to the Gallery Page. Keeping components organized like this helps maintain a clean and modular project structure as the app grows.

2. Creating ChatbotCard

In this step, our goal is to build the main ChatbotCard component, the card UI you saw earlier in the gallery layout and shown above. This component will display a chatbot’s avatar, name, personality, interests, and a start chat button.

To begin, I’ll show you the full code for ChatbotCard.tsx, and then we’ll break down and create the smaller components and utilities used inside it.

Here’s the full code for ChatbotCard.tsx:

import React from 'react';
import { Chatbot } from '@/types/chatbot';
import { Card, CardContent, CardFooter } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

const gradientColors = [
  'from-purple-500 via-pink-500 to-red-500',
  'from-blue-500 via-cyan-500 to-teal-500',
  'from-green-500 via-emerald-500 to-teal-500',
  'from-orange-500 via-amber-500 to-yellow-500',
  'from-indigo-500 via-purple-500 to-pink-500',
];

interface ChatbotCardProps {
  chatbot: Chatbot;
  onClick: (id: string) => void;
}

export function ChatbotCard({ chatbot, onClick }: ChatbotCardProps) {
  const randomGradient =
    gradientColors[chatbot.id.charCodeAt(0) % gradientColors.length];

  const handleClick = () => {
    onClick(chatbot.id);
  };

  return (
    <Card
      className={cn(
        'bg-white rounded-2xl shadow-lg overflow-hidden',
        'transition-all duration-300 hover:shadow-xl hover:-translate-y-1',
        'border border-gray-100',
        'cursor-pointer group flex flex-col h-full'
      )}
      onClick={handleClick}
      aria-label={`Chatbot: ${chatbot.name}`}
      tabIndex={0}
      onKeyDown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          handleClick();
        }
      }}
    >
      <div
        className={`h-32 bg-gradient-to-br ${randomGradient} relative overflow-hidden`}
      >
        <div className="absolute inset-0 bg-black/10" />
        <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-white/20 to-transparent" />
        <div className="absolute top-4 right-4">
          <div className="w-3 h-3 bg-green-400 rounded-full animate-pulse" />
        </div>
      </div>

      <div className="grow flex flex-col justify-between">
        <CardContent className="p-5">
          <div className="flex items-start gap-4 mb-4">
            <div
              className={cn(
                'w-16 h-16 rounded-xl bg-gradient-to-br flex-shrink-0',
                randomGradient,
                'flex items-center justify-center text-white font-bold text-xl'
              )}
            >
              {chatbot.name.charAt(0).toUpperCase()}
            </div>
            <div className="flex-1">
              <h3 className="font-bold text-lg text-gray-900 mb-1 group-hover:text-purple-600 transition-colors">
                {chatbot.name}
              </h3>
              <div className="space-y-1">
                <p className="text-xs font-medium text-gray-500">Personality</p>
                <div className="flex flex-wrap gap-1.5">
                  {chatbot.personality.map((trait) => (
                    <span
                      key={trait}
                      className="px-2.5 py-1 text-xs font-semibold text-purple-700 bg-purple-100 rounded-full"
                    >
                      {trait}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </div>

          <div className="space-y-2">
            {chatbot.interests && (
              <div className="space-y-1">
                <p className="text-xs font-medium text-gray-500">
                  Hobbies & Interests
                </p>
                <div className="flex flex-wrap gap-1.5">
                  {chatbot.interests.map((el) => (
                    <span
                      key={el}
                      className="px-2.5 py-1 text-xs font-semibold text-blue-700 bg-blue-100 rounded-full"
                    >
                      {el}
                    </span>
                  ))}
                </div>
              </div>
            )}
          </div>
        </CardContent>

        <CardFooter className="px-5 py-4 bg-gradient-to-r from-purple-50 to-pink-50 border-t border-purple-100">
          <Button
            className={cn(
              'w-full bg-gradient-to-r from-purple-600 to-pink-600',
              'hover:from-purple-700 hover:to-pink-700',
              'text-white font-semibold',
              'transition-all duration-200 hover:scale-105',
              'shadow-md hover:shadow-lg cursor-pointer'
            )}
            onClick={(e) => {
              e.stopPropagation();
              handleClick();
            }}
            aria-label={`Start chat with ${chatbot.name}`}
          >
            Start Chat
          </Button>
        </CardFooter>
      </div>
    </Card>
  );
}

This file introduces a few building blocks and utilities:

cn - A utility function to help conditionally combine Tailwind class names.
CardContent, CardFooter, Card, Button - Reusable UI components that help keep the layout clean and consistent.
Chatbot - A TypeScript type to describe the structure of our chatbot data.

We’ll go over each of these next, so don’t worry if they’re unfamiliar.

Creating the cn Utility Function

Before we dive into building the components, let’s start by setting up a utility function called cn. This function will help us manage and combine Tailwind className strings more effectively.

We’ll place this utility in a file located at @/lib/utils.ts (or src/lib/utils.ts, depending on your project setup). The utils.ts file will serve as a central place to store any general-purpose helper functions you create throughout the project.

Here’s the code for the cn function:

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export const cn = (...inputs: ClassValue[]) => {
  return twMerge(clsx(inputs));
};

Creating CardContent, CardFooter, Card, and Button components

Next, we’ll build a set of reusable UI components that will be shared throughout the project. To keep things organized, we’ll place these components inside the src/components/ui/ directory, grouped into two files: button.tsx and card.tsx.

These components will help us maintain consistent design and structure across the app.

Button Component

Here’s the code for Button:

import React, { ComponentProps } from 'react';
import { cva, type VariantProps } from 'class-variance-authority';

import { cn } from '@/lib/utils';

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default:
          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
        destructive:
          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  }
);

const Button = ({
  className,
  variant,
  size,
  ...props
}: ComponentProps<'button'> &
  VariantProps<typeof buttonVariants>) => {
  return (
    <button
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  );
};

export { Button };

By this time, there should be some errors in importing from some of these files. For those that needs to be installed please add them.

pnpm add class-variance-authority

Card, CardContent, and CardFooter Components

Here’s the code for CardContent, CardFooter, and Card in card.tsx:

import React, { HTMLAttributes } from 'react';

import { cn } from '@/lib/utils';

const Card = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'rounded-xl border bg-card text-card-foreground shadow',
      className
    )}
    {...props}
  />
);

const CardContent = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div className={cn('p-6 pt-0', className)} {...props} />
);

const CardFooter = ({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) => (
  <div className={cn('flex items-center p-6 pt-0', className)} {...props} />
);

export { Card, CardFooter, CardContent };

Defining the Chatbot Type
Now let’s define the Chatbot type, which will be used as part of the ChatbotCardProps to define the expected structure of a chatbot object.

To keep things clean and maintainable, we’ll create a dedicated folder for all our types. Place this file in src/types/chatbot.ts.

Here’s the code for the Chatbot type:

interface Persona {
  behavior: string;
  personality: string[];
  interests: string[];
  tone_style: string;
}

export interface Chatbot extends Persona {
  id: string;
  name: string;
  avatarUrl?: string;
  createdAt: string;
  updatedAt: string;
}

The reason why we separate the types into Persona and Chatbot to keep our codebase modular and maintainable. By isolating the Persona type, we make it reusable across other parts of the project where only persona related data is needed. It’s generally a good practice to split types when it makes logical sense. This helps with scalability, clarity, and type safety in larger projects.

Now that we have created the ChatbotCard component, it’s time for us to add them to the Gallery Page and group them all together.

3. Updating Gallery Page with ChatbotCard

Now that we’ve created the ChatbotCard component, it’s time to integrate it into the GalleryPage. In this step, we’ll render a collection of chatbot cards, each representing a unique AI character.

The goal is to display multiple ChatbotCard components in a responsive layout that feels clean and easy to browse.

When populating the characters, feel free to adjust and add their personality traits or interests. Just remember: each trait should be separated by a comma for it to work correctly.

"use client";

import React from "react";
import { ChatbotCard } from "./components/ChatbotCard";

const filteredChatbots = [
  {
    id: "1",
    name: "Chatbot 1",
    avatarUrl: "",
    behaviour: "Chatbot 1 behaviour",
    personality: "professional, detail-oriented, calm",
    interests: "planning, data organization, note taking",
    tone_style: "formal, friendly",
    created_at: new Date().getTime(),
    updated_at: new Date().getTime(),
  },
  {
    id: "2",
    name: "Chatbot 2",
    avatarUrl: "",
    behaviour: "Chatbot 2 behaviour",
    personality: "playful, witty, chill",
    interests: "astrology, indie music, coffee",
    tone_style: "casual, friendly, flirty sometimes",
    created_at: new Date().getTime(),
    updated_at: new Date().getTime(),
  },
  {
    id: "3",
    name: "Chatbot 3",
    avatarUrl: "",
    behaviour: "Chatbot 3 behaviour",
    personality: "playful, teasing, proud",
    interests: "Sweets, Desserts, Fashion",
    tone_style: "casual with friends, cold with others",
    created_at: new Date().getTime(),
    updated_at: new Date().getTime(),
  },
];

const GalleryPage = () => {
  const onCardClick = () => {
    // Do nothing yet
  };

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">Chatbot Gallery</h1>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div className="md:col-span-3">
          <div
            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
            role="region"
            aria-label="Chatbot list"
            aria-live="polite"
          >
            {filteredChatbots.map((persona) => {
              const interests = persona.interests
                ? persona.interests.split(",").map((i) => i.trim())
                : [];
              const personality = persona.personality
                ? persona.personality.split(",").map((p) => p.trim())
                : [];

              return (
                <div key={persona.id}>
                  <ChatbotCard
                    chatbot={{
                      id: persona.id,
                      name: persona.name,
                      avatarUrl: "",
                      behavior: persona.behaviour || "",
                      personality: personality,
                      interests: interests,
                      tone_style: persona.tone_style || "",
                      createdAt:
                        new Date(persona.created_at).toISOString() ||
                        new Date().toISOString(),
                      updatedAt:
                        new Date(persona.updated_at).toISOString() ||
                        new Date().toISOString(),
                    }}
                    onClick={onCardClick}
                  />
                </div>
              );
            })}

            {filteredChatbots.length === 0 && (
              <div className="col-span-full text-center py-12">
                <p className="text-sm text-gray-500">
                  No chatbots match your search criteria
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default GalleryPage;

To wrap up today’s post, let’s update app/page.tsx to ensure users are directed to the GalleryPage by default when they visit the root URL of the app.

Here’s the code for app/page.tsx:

import React from "react";
import GalleryPage from "@/modules/gallery";

export default function Home() {
  return <GalleryPage />;
}

Now it’s time to see everything in action! You can run your app locally with the following command:

pnpm dev

Once it’s up and running, open your browser and navigate to:

http://localhost:3000

You should see a page that looks like this:

That’s it for today!

In this post, you’ve built the foundation of the Chat Character Gallery by setting up reusable UI components and displaying multiple chatbot cards on the Gallery page. You now have a clean and responsive layout that’s ready to be expanded with real data and interactivity.

🚀 What’s Next?

In the next post, we’ll start connecting the chatbots with dynamic content. You’ll learn how to manage character data, store it, and eventually enable user-generated bots.

New posts will be released every 2–3 days, so make sure to subscribe or bookmark this page to stay updated!

Please check Part 4 here:
👉 (Part 4) Build a Simple Chat Character Gallery: Adding Searchbar & Filter

(Part 2) Build a Simple Chat Character Gallery: Project Setup

James — Fri, 15 Aug 2025 16:40:00 +0000

📚 Tutorial Series: Build a Chat Character Gallery

Introduction & Overview
Project Setup - You’re here

Part 2: Project Setup

In the previous post, we talked about the concept behind the Chat Character Gallery, what it is, what features it includes, and what you’ll build by the end of this tutorial series.

Now, let’s roll up our sleeves and dive into the tech stack and project setup. In this part, we’ll go over the tools we’ll be using and set up the foundation of our app so we can start building in the next steps.

Here’s the tools that we will use to build our project:

Tech Stack:

Next.js
TypeScript
TailwindCSS
Axios

API:
Companion AI - An API designed to generate natural, human-like responses for chatbots

🚀 Step 1: Initialize Your Project

npx create-next-app@latest chat-character-gallery
cd chat-character-gallery

Choose Yes for everything except for Turbopack and import alias

Add tailwind.config.js to your directory and add this file

/** @type {import('tailwindcss').Config} */
const config = {
  darkMode: ['class'],
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          50: '#fef2f2',
          100: '#fee2e2',
          200: '#fecaca',
          300: '#fca5a5',
          400: '#f87171',
          500: '#ef4444',
          600: '#dc2626',
          700: '#b91c1c',
          800: '#991b1b',
          900: '#7f1d1d',
          DEFAULT: '#ef4444',
          foreground: '#ffffff',
        },
        secondary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          DEFAULT: '#0ea5e9',
          foreground: '#ffffff',
        },
        accent: {
          50: '#fdf4ff',
          100: '#fae8ff',
          200: '#f5d0fe',
          300: '#f0abfc',
          400: '#e879f9',
          500: '#d946ef',
          600: '#c026d3',
          700: '#a21caf',
          800: '#86198f',
          900: '#701a75',
          DEFAULT: '#d946ef',
          foreground: '#ffffff',
        },
        success: {
          50: '#f0fdf4',
          100: '#dcfce7',
          200: '#bbf7d0',
          300: '#86efac',
          400: '#4ade80',
          500: '#22c55e',
          600: '#16a34a',
          700: '#15803d',
          800: '#166534',
          900: '#14532d',
          DEFAULT: '#22c55e',
          foreground: '#ffffff',
        },
        warning: {
          50: '#fffbeb',
          100: '#fef3c7',
          200: '#fde68a',
          300: '#fcd34d',
          400: '#fbbf24',
          500: '#f59e0b',
          600: '#d97706',
          700: '#b45309',
          800: '#92400e',
          900: '#78350f',
          DEFAULT: '#f59e0b',
          foreground: '#ffffff',
        },
        destructive: {
          50: '#fef2f2',
          100: '#fee2e2',
          200: '#fecaca',
          300: '#fca5a5',
          400: '#f87171',
          500: '#ef4444',
          600: '#dc2626',
          700: '#b91c1c',
          800: '#991b1b',
          900: '#7f1d1d',
          DEFAULT: '#ef4444',
          foreground: '#ffffff',
        },
        muted: {
          DEFAULT: '#f8fafc',
          foreground: '#475569',
        },
        popover: {
          DEFAULT: '#ffffff',
          foreground: '#0f172a',
        },
        card: {
          DEFAULT: '#ffffff',
          foreground: '#0f172a',
        },
        // Vibrant marketplace colors
        marketplace: {
          purple: '#8b5cf6',
          pink: '#ec4899',
          orange: '#f97316',
          teal: '#14b8a6',
          lime: '#84cc16',
          rose: '#f43f5e',
          indigo: '#6366f1',
          cyan: '#06b6d4',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        display: ['Poppins', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      backgroundImage: {
        'gradient-primary': 'linear-gradient(135deg, #ef4444 0%, #d946ef 100%)',
        'gradient-secondary':
          'linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%)',
        'gradient-accent': 'linear-gradient(135deg, #d946ef 0%, #f97316 100%)',
        'gradient-marketplace':
          'linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #f97316 100%)',
        'gradient-card':
          'linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%)',
      },
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'bounce-gentle': 'bounceGentle 2s infinite',
        'pulse-glow': 'pulseGlow 2s ease-in-out infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        bounceGentle: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-5px)' },
        },
        pulseGlow: {
          '0%, 100%': { boxShadow: '0 0 0 0 rgba(217, 70, 239, 0.4)' },
          '50%': { boxShadow: '0 0 0 10px rgba(217, 70, 239, 0)' },
        },
      },
    },
  },
  plugins: [import('tailwindcss-animate')],
};

export default config;

Please update the global.css as well:

@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --radius: 0.75rem;
  --background: oklch(0.985 0.002 247.839);
  --foreground: oklch(0.141 0.005 247.839);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 247.839);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 247.839);
  --primary: oklch(0.623 0.214 259.815);
  --primary-foreground: oklch(0.97 0.001 106.424);
  --secondary: oklch(0.586 0.144 245.096);
  --secondary-foreground: oklch(0.97 0.001 106.424);
  --muted: oklch(0.967 0.001 106.424);
  --muted-foreground: oklch(0.556 0.002 106.424);
  --accent: oklch(0.714 0.203 292.717);
  --accent-foreground: oklch(0.97 0.001 106.424);
  --destructive: oklch(0.637 0.237 25.331);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.623 0.214 259.815);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0.002 247.839);
  --sidebar-foreground: oklch(0.141 0.005 247.839);
  --sidebar-primary: oklch(0.623 0.214 259.815);
  --sidebar-primary-foreground: oklch(0.97 0.001 106.424);
  --sidebar-accent: oklch(0.967 0.001 106.424);
  --sidebar-accent-foreground: oklch(0.141 0.005 247.839);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.623 0.214 259.815);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

📦 Step 2: Install other dependencies

pnpm add axios @tanstack/react-query clsx tailwind-merge

axios - Promise based HTTP client for browsers

@tanstack/react-query - Powerful asynchronous state management for TS/JS or React

clsx and tailwind-merge - Packages to be used to merge TailwindCSS

🎨 Step 3: Set up ESLint

Refer to this documentation for more about ESLint in NextJs: NextJs - ESLint

Install these devDependencies:

pnpm add -D typescript-eslint @eslint/js globals eslint-plugin-react

🧪 Step 4: Update `next.config.ts` and `tsconfig.json`

These are just to make sure you’re using the same config as what I’m using. Feel free to edit these to your preference later:

Update next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  reactStrictMode: true,
  transpilePackages: [],
  experimental: {
    typedRoutes: true,
  },
  devIndicators: false,
};

export default nextConfig;

Update tsconfig.json

{
  "compilerOptions": {
    "target": "es2020",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "baseUrl": ".",
    "paths": {
      "@/modules/*": ["src/modules/*"],
      "@/components/*": ["src/components/*"],
      "@/*": ["src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

🤖 Step 5: Setup your .env

Here’s the example of .env file. Please make sure to not push .env to your Git.

NEXT_PUBLIC_API_URL=YOUR_API_URL
NEXT_PUBLIC_X_RAPID_API_KEY=YOUR_X_RAPID_API_KEY
NEXT_PUBLIC_X_RAPID_API_HOST=YOUR_X_RAPID_API_HOST
NEXT_PUBLIC_API_KEY=YOUR_API_KEY

Next would be to Sign up to the API that we will be using for this project, which is Companion AI API.

Please follow their tutorial to get your API Key.

New posts will be released every 2–3 days, so make sure to subscribe or bookmark this page to stay updated!

Please check Part 3 here:
(Part 3) Build a Simple Chat Character Gallery: Creating Card Component

Build a Simple Chat Character Gallery like Character AI Tutorial

James — Wed, 13 Aug 2025 16:45:00 +0000

What is a Chat Character Gallery?

Chat character gallery simply a term I come up with to describe apps like Character AI or other similar apps where you can browse, discover, and chat with a wide range of AI-powered characters. Each chatbot is designed to emulate a unique personality, speaking style, and backstory, allowing you to experience lifelike conversations that feel true to the character’s identity.

Think of it as a blend of roleplay, storytelling, and AI, wrapped in an interactive chat format.

What You’ll Build

In this tutorial, you’ll learn how to build a simple Chat Character Gallery. A web app where users can explore a collection of unique AI characters and chat with them in real time.

By the end, you’ll have a fully functional app that allows users to:

🧠 Create and customize new characters, defining how they talk, behave, and interact.
🔍 Browse a list of AI characters, each with their own name, personality, and behavior.
💬 Start conversations with any character and experience context-aware, human-like replies.
🗂️ Maintain conversation history so users can come back and continue previous chats.

By the end, you’ll have an app similar in spirit to Character AI (not exactly the same, but the essential features are there 😁), you can improve the app to make it your own!

🎬 Demo Preview

ik.imagekit.io

📝 About This Tutorial Series

To keep things digestible and beginner-friendly, this tutorial is broken down into a multi-part posts. Each part will focus on a specific feature or step — so you won’t feel overwhelmed with too much content at once.

New posts will be released every 2–3 days, so make sure to subscribe or bookmark this page to stay updated!

Please check Part 2 here: (Part 2) Build a Simple Chat Character Gallery: Project Setup

What is Dead Code and How to Clean Them

James — Tue, 20 May 2025 05:00:00 +0000

A practical guide to identifying, understanding, and safely cleaning up dead code to keep your codebase fast, clean, and maintainable.

What is Dead Code?
What is considered Dead Code?
Tools for scanning Dead Code
How to scan and remove unused code with knip

What Is Dead Code?

Dead code refers to parts of a codebase that are written but never executed, called, imported, or otherwise needed during the normal operation of the application.

Over time, as features are added, changed, or removed, some code becomes obsolete but is accidentally left behind. This can lead to:

Increased bundle size
Slower build times
Harder maintenance and onboarding
Potential security risks

Cleaning up unused code improves clarity, performance, and long-term maintainability.

What Is Considered Dead Code?

Here are the common categories of unused code:

Unused Variables
Declared but never used in any operation.
Unused Functions or Methods
Defined but never called anywhere.
Unused Imports
Imported modules or packages that are never referenced.
Unused Exports
Functions or components exported from a module but not imported
elsewhere.
Unused Files
Complete files (components, modules, etc.) that are never imported
or required.
Unused Dependencies
Libraries listed in your package manager (e.g., package.json) that
are not imported or used in the codebase.

Some exceptions:

Disabled Features Features that are temporarily disabled or taken out, but will be used in the future.
Helper functions Utility functions that help with common tasks can be reviewed regularly to check if it needs to be removed.

Tools for Scanning Dead Code

The following tools help detect and analyze unused code, imports, functions, variables, and dependencies. Choose tools based on your tech stack:

ts-prune
- Detects unused exported functions, constants, and types in TypeScript projects.
- On Maintenance (no further update)
depcheck
- Checks for unused npm dependencies and missing ones.
knip.dev (We are going to use this!)
- Knip finds and fixes unused dependencies, exports and files in your JavaScript and TypeScript projects. Less code and dependencies lead to improved performance, less maintenance and easier refactorings.

How to Scan and Remove Unused Code with `knip`

Follow these steps to identify and safely remove unused code from your project using knip:

Install knip (if not already installed):

  yarn add -D knip
  # or
  npm install -D knip

Run the analysis:
```
  yarn knip
```
Replace yarn with your preferred package manager (npm, pnpm, etc.).
Review the list of unused files or exports:
- Go through the list from top-down, starting with high-level components, constants, and utilities.
- Search your codebase to verify whether each flagged file or export is truly unused. (this is just to make sure it's unused)
  - If it's used elsewhere, skip it.
  - If it has no references, it’s safe to delete.
Remove confirmed dead code
- Delete unused files, exports, or lines confidently after reviewing
- Check with your teammates if the components/files is not used anymore or just temporarily not used
Validate your codebase:
1. Run linters and TypeScript checks to catch any issues:
```
 yarn lint
 npx tsc --noEmit
```
2. Start the development server to confirm everything still works:
```
 yarn dev
```

Final step: Commit your changes with a clear message, e.g.:

 git commit -m "chore: remove unused code and dependencies"

Getting rid of dead code might feel like a chore, but it’s totally worth it. Cleaner code means fewer headaches, faster builds, and easier debugging down the line. With the right tools and a step-by-step approach, it’s not that hard to keep your codebase in shape. If you’re working in a fast-paced company where keeping track of all the new code is challenging, making this part of your regular workflow is a must.

If you have any other better approach or just want to share your own process, feel free to share in the comment! I would love to hear your thought!

Using Regex in JavaScript to Validate Email

James — Fri, 19 Aug 2022 07:30:00 +0000

Validating email is one of the things you'll "encounter" often when building an app (web/mobile). If you're new to programming, you'll probably wonder on how to do that. Using Regex is one of the easiest way to do the validation.

There are a few constraints to make sure a text is a valid email address:

@ is present
Top level domain can't start with dot ".".]
There should be characters before @.
Email/Personal info can't start with a dot "."
Email/Personal info can't end with a dot "."
No double dots.
Characters, digits, underscore, and dash are allowed.

Here are the regex to use to check those constraints:
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/

Here how you can put it in your JavaScript code:

const isValidEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailAddress);

if (isValidEmail){
   return true;
} else {
   return false;
}

Check this link for more detailed information about this:
https://www.w3resource.com/javascript/form/email-validation.php

Resources for Creating Your Own Visual Studio Code Theme

James — Sat, 20 Nov 2021 09:29:04 +0000

Hi everyone!

I recently made a Color Theme for Visual Studio Code. You can find it here or visit the repo here. I'll share all the websites/tools that I used along the way. Here they are:

1. Theme Studio for VS Code

Theme Studio for VS Code is a website where you can browse, fork or create your own theme. The process to create a theme is straightforward.

2. VS Code Extension Generator

microsoft / vscode-generator-code

Visual Studio Code extension generator

VS Code Extension Generator is the easiest way to create extensions like color theme. It also provides a detailed explanation on how to publish it after you finish making the theme.

3. Coolors

I use this website to get inspiration for colors to use in the color theme that I made. You can easily generate colors in this website or explore the combination of colors picked by others.

4. Image Color Picker

This is another website where I pick a shade of a color that I'm using or to find a complementary color to match a color that I'm using.

5. VS Code Theme Color Reference

If you're new to editing color theme for VS Code, then you might need this. It has all the color code for the VS Code

DEV Community: James

Quantization Explained: A Concise Guide for LLMs

What is Quantization?

Why Do We Need Quantization?

The Trade-Off

Final Thoughts

(Part 8) Build a Simple Chat Character Gallery: Integrating Chat API

👋 Recap from Previous Post

Integrating Chat API

🎯 Goals for This Post

📱 Step by Step Guide

(Part 7) Build a Simple Chat Character Gallery: Implementing the Chat Page UI

👋 Recap from Previous Post

Implementing the Chat Page UI

🎯 Goals for This Post

📱 Step by Step Guide

🚀 What’s Next?

(Part 6) Build a Simple Chat Character Gallery: Integrating the API

👋 Recap from Previous Post

Integrating the API

🎯 Goals for This Post

📱 Step by Step Guide

🚀 What’s Next?

(Part 5) Build a Simple Chat Character Gallery: Adding Create New Chatbot Feature

👋 Recap from Previous Post

Adding Create New Chatbot Feature

🎯 Goals for This Post

📱 Step by Step Guide

🚀 What’s Next?

(Part 4) Build a Simple Chat Character Gallery: Adding Searchbar & Filter

👋 Recap from Previous Post

Creating Searchbar & Filter

🎯 Goals for This Post

📱 Step by Step Guide

🚀 What’s Next?

(Part 3) Build a Simple Chat Character Gallery: Creating Card Component

👋 Recap from Previous Post

Creating Card Component

🎯 Goals for This Post

📱 Step by Step Guide

🚀 What’s Next?

(Part 2) Build a Simple Chat Character Gallery: Project Setup

📚 Tutorial Series: Build a Chat Character Gallery

Part 2: Project Setup

🚀 Step 1: Initialize Your Project

📦 Step 2: Install other dependencies

🎨 Step 3: Set up ESLint

🧪 Step 4: Update next.config.ts and tsconfig.json

🤖 Step 5: Setup your .env

Build a Simple Chat Character Gallery like Character AI Tutorial

What is a Chat Character Gallery?

What You’ll Build

🎬 Demo Preview

📝 About This Tutorial Series

What is Dead Code and How to Clean Them

Table of Contents

What Is Dead Code?

What Is Considered Dead Code?

Tools for Scanning Dead Code

How to Scan and Remove Unused Code with knip

Using Regex in JavaScript to Validate Email

Resources for Creating Your Own Visual Studio Code Theme

1. Theme Studio for VS Code

2. VS Code Extension Generator

microsoft / vscode-generator-code

Visual Studio Code extension generator

3. Coolors

4. Image Color Picker

5. VS Code Theme Color Reference

🧪 Step 4: Update `next.config.ts` and `tsconfig.json`

How to Scan and Remove Unused Code with `knip`