Announcing reachat - open-source ui building blocks for LLM/chat UIs

Introducing Reachat

Today, we are excited to announce Reachat, a set of UI building blocks for creating LLM/chat UIs in React. This library is designed to make it as easy as including a React chat component and connecting a data source to get started. While our goal was to ensure ease of use, we did not want to compromise on customization. Therefore, we made it easy to swap out components and provide styling via Tailwind for ultimate control.

Why Did We Build Reachat?

At Good Code, we help enterprises, particularly cybersecurity product companies, design and build cutting-edge user experiences. After building four chat experiences in various ways, it became clear that while these chat experiences seem easy to build, the devil is in the details. We set out to create something we could share with our customers and the community that packaged all those little details but still allowed for tweaking and styling to the radical designs we deliver.

What Does Reachat Do Exactly?

Reachat is a UI library for React that handles the interaction and rendering for complex responses typically sent by chatbots. It does not have any opinions about your backend technology or LLM stack, though we provide some examples of how to leverage it on various platforms.

What Features Does It Have Out of the Box?

Out of the box, Reachat supports the following features:

• Multiple UI Layouts: Choose between console or companion to find the perfect spot for your chat experience.
• Advanced Rendering: Prompts and responses are fed through a markdown rendering engine that supports code highlighting, tables, YouTube embeds, links, custom remark plugins, and more!
• File Support: Built-in support for handling files and previewing their contents.
• Extensible Theming: All elements are exposed to theming in Tailwind. It also comes with a light and dark theme out of the box.
• Flexible Components: Using React slots, you can swap out components and keep all the logic to provide a completely custom experience.
• Responsive Layout: Based on screen size, the UI will shift to a companion layout that prioritizes chat.

How Do I Get Started?

Head over to reachat.dev to learn more!

Who Is Good Code?

Good Code is a consulting company specializing in design and UI engineering for enterprise products, particularly in cybersecurity. We turn ideas into memorable companies. Learn more at GoodCode.us. If you like open-source (who doesn’t?), check out our collection of open-source libraries at GitHub.com/reaviz.