Lessons Learned While Building a React Chatbot UI

When I started building the React Chatbot UI for our AI chatbot project at Relia Software, I thought it would be straightforward — just a few components, an input box, and a scrollable message list. But as always, the deeper I went, the more subtle challenges I found hiding behind what looked like a simple interface.

What began as a quick prototype ended up teaching me a lot about state management, UI responsiveness, and the art of making a chatbot feel human.

The Chat Window That Wouldn’t Behave

At first, I built the chat layout with basic HTML and CSS. It looked fine — until messages started piling up. The scroll kept jumping, messages overlapped during quick typing, and responsiveness broke when resizing the window.

That’s when I realized: chat UIs aren’t just about rendering text — they’re about motion and continuity.

I switched to Tailwind CSS and Shadcn UI, which gave me more control and consistency. Still, getting auto-scroll to behave smoothly took trial and error. A simple scrollIntoView() worked fine… until it didn’t. Adding a useEffect() dependency on every new message finally fixed it — but not without hours of watching messages fly past the viewport like confetti.

Managing State: Why I Dropped Context for Zustand

Initially, I tried React Context for managing messages and user input. It worked, but quickly felt too heavy for something that updated this frequently.

That’s when I discovered Zustand — a lightweight state management library that’s refreshingly minimal. It made updating the message array and maintaining user state much cleaner.

export const useChatStore = create((set) => ({
  messages: [],
  addMessage: (msg) => set((state) => ({ messages: [...state.messages, msg] })),
}));

This tiny piece of code solved half my problems — no prop drilling, no reducers, no complex context re-renders. It was a reminder that sometimes the simplest tool is the most elegant one.

When Design Met Functionality

Even with the logic working, something felt off. The chatbot didn’t “feel” alive. That’s when I added typing indicators — those three bouncing dots. It’s such a small thing, but it changed everything. Suddenly, users weren’t staring at silence; they were waiting for something.

I also realized that spacing, colors, and timing matter. Chatbots are emotional interfaces — they simulate conversation, so the UI needs rhythm. Too much delay feels broken, too little feels robotic.

The Subtle Battle: Error States

I’ll admit it — I ignored error handling until late in the project. When the API failed, the chatbot just froze. No feedback, no retry, nothing. And if you’ve ever tested chatbots, you know how quickly silence kills the illusion.

I ended up writing detailed, human-friendly error messages for network issues, rate limits, and authentication errors. It wasn’t glamorous work, but it made the chatbot feel reliable — even when things went wrong.

Making It “Persistent”

One day, I refreshed the page and lost the whole chat. That’s when I decided to use localStorage to persist messages. It was surprisingly easy with Zustand’s persist middleware, and now the chatbot feels more like an app — you can close the tab and pick up right where you left off.

That’s when it hit me: even simple features like “remembering the chat” can make users trust your product more.

What I’d Do Differently Next Time

Start with accessibility in mind — adding ARIA roles and screen reader support later was harder than expected.

Define the data structure early — changing message formats midway broke my store logic.

Keep UI logic separate from API calls — debugging chat delays became easier once I split them.

If I were to rebuild it now, I’d structure it more like a mini front-end framework, ready to plug into any AI backend.

Final Thoughts

Building a chatbot UI in React was a humbling experience. It’s easy to underestimate how much detail goes into something that feels so simple. From managing state and UX timing to handling failures gracefully — it’s a project that forces you to think like both a developer and a user.

If you’re planning to build your own chatbot, start small, but focus on feeling — the sense that there’s something intelligent and reactive behind the screen.

And if you want to see how all these lessons came together in code, check out the full guide here: 👉 How to Build a React Chatbot UI