LLM Chat

Overview

LLM Chat is a reusable conversation component I built for Lowcoder, so app creators can add a complete AI chat experience without building one from scratch. They can place it on the canvas, select a Lowcoder query, and connect it to any LLM or AI provider. The component includes multiple conversations, saved history, message editing, file attachments, and rich assistant responses. I built it with React, TypeScript, and assistant-ui and integrated it with Lowcoder's component system, making the layout and appearance configurable. It also exposes chat data and events, so messages can trigger other actions and workflows inside an app.

Highlights

• Works with any LLM. App creators choose the Lowcoder query that handles messages, so they are free to use their preferred model, provider, or private AI service.

• Full conversation management. Users can create, switch, rename, edit, and delete chat threads from a dedicated sidebar.

• Chat history that survives refreshes. Conversations are saved automatically and remain available when the user returns.

• Rich assistant responses. Messages support Markdown, structured AI responses, copy actions, editing, and export to a Markdown file.

• Image and file attachments. Users can add supporting files to a message, including images that can be sent to compatible vision models.

• Designed for Lowcoder's visual editor. App creators can configure the layout, placeholder, sidebar, messages, input area, buttons, colors, and animations without changing code.

• Connects with the rest of the app. The current message and conversation history are available to other components, while chat and thread events can start additional workflows.