Case study

Aipalbot chat experience

An AI chat interface where replies stream in as they're written, earlier conversations are a click away, and code answers stay readable.

Client: Aipalbot
Period: 2022 – 2023
Focus: AI · Conversational product

+ New chat

Today

Debounce a search inputExplain React keysCentre a div with grid

Yesterday

Write a cover letterSQL joins, simplyPlan a 3-day trip

How do I debounce a search input in React?

Wrap the value in a small hook, then search with the debounced value:

function useDebounce(value, delay = 300) {  const [debounced, setDebounced] = useState(value);  useEffect(() => {    const id = setTimeout(() => setDebounced(value), delay);    return () => clearTimeout(id);  }, [value, delay]);  return debounced;}

Now the search only runs once typing pauses.

Message Aipalbot…↑

Illustration · the real product is private

monthly users: 10,000+

01The problem

An AI chat product is judged by how the conversation feels. Answers need to appear as they're generated, long responses with code need to stay readable, people expect to pick up earlier conversations, and the connection to the models has to be reliable across web and mobile.

02My role

Frontend Engineer. I built the core chat experience and the real-time connection behind it.

03Approach

Responses rendered token by token as the model generates them, so nobody waits on a blank screen.
REST APIs and WebSocket connections to the AI models, for real-time communication that holds up.
Conversation history, so people can return to earlier chats.
Markdown rendering with code syntax highlighting, so long technical answers stay readable.
Responsive, reusable UI components in Tailwind CSS, backed by tests.

04Impact

Higher request success rates between the app and the AI models.
More stable releases.

05Stack

React
Next.js
TypeScript
Tailwind CSS
Component libraries
REST APIs
WebSockets
Responsive design