Context
After the revolution of LLMs and it’s impact on industries, as an AI company, we needed to leverage databases by integrating LLMs with user data. This would give users the ability to interact with their databases via text instead of SQL. We needed a chatbot that could answer questions about their databases and allow them to test the bot to ensure it provides accurate responses. Additionally, users should be able to fine-tune the bot’s behavior to meet specific requirements.Process
The primary use case of our chatbot is to allow users to connect or add data from over 150 different data sources or file types like CSV, PDF, HTML, etc. The chatbot then uses this information as a knowledge base to provide answers.We use the chatbot in various scenarios. Sometimes it converts text to SQL, and other times it functions as a basic chatbot. Therefore, we need to design it for scalability and a variety of use cases.
Large Language Model (LLM) chatbots generally have key elements: a chat interface for user interaction, model selection options, customizable settings, a prompt field for user instructions, and a knowledge base for accurate responses.
Our target audience comprises mid-level users familiar with LLM chats and developers building AI applications. These users require more than just chat dialogue; they need logging features for tracing output and monitoring consumption, along with enhancements to improve user experience and developer tools.
When designing a chatbot interface, I focused on:
- Creating a clear, welcoming initial experience. This is a common pattern in embedded support and generic chatbots like Intercom and HubSpot.
- Optimizing content loading and interaction flow.
- Educating users on effective query formulation.
- Promoting transparency in AI capabilities and accuracy.
- Logs for tracking resource consumption, debugging issues, and analyzing usage patterns.
- Offering customization options to tailor the chatbot’s behavior to specific user needs or industry requirements.
The goal was to develop a user-friendly and effective chatbot interface that sets clear expectations, prevents errors through education, and serves a wide range of users.
Users spend most of their time on other websites, so they expect your site to work like all the other sites they already know. When a design deviates from users’ expectations, usability suffers.
Chat messages apps have been around for a long time, and users interact with them daily, so we kept the layout and interaction familiar
Our research began by auditing and analyzing other chatbots and LLM chat systems like ChatGPT, Claude, and Gemini (Google Bard) for their behavior, along with three custom datasource websites. At that time, ChatGPT, Claude, and Gemini were only general chatbots and didn't support uploading files or connecting to datasources.
The design phase started with sketches and low-fidelity wireframes.
An initial personalized welcome message for first-time users interacting with the chatbot was inspired by an established pattern in technical support chatbots. Instead of presenting a blank screen, we suggested prompts or questions, drawing inspiration from messaging apps like Messenger that offer emoji suggestions to start chats. This approach makes the experience more engaging and offers explicit, actionable direction.
Machine learning (ML) apps often take time to respond. People usually don't like waiting for machines. So, we had to make sure the loading screen was interesting, not boring.
Error states may vary from exceeding the token limit or reaching usage limit to timeout errors, etc. The error message should be close to the user action, so we have added it inline.
Follow-ups, feedback, and actions help with transparency, allowing users to improve the chatbot, get more specific answers, increase speed, and reduce user effort.
These core elements form the foundation of our chatbot interface, used across our demo app, Chat LLM, and Minds Text-to-SQL model. This approach creates a consistent, user-friendly experience across our AI tools. The uniform design improves familiarity and ease of use, enhancing overall user experience. By implementing these key features, we've built a strong base for our AI products, enabling users to better interact with complex data and ML models.
Error state
Loading state
