Skip to main content
The Chat component provides a conversational interface for AI-powered interactions. It enables real-time messaging between users and AI agents within your FlowX applications.

​
Overview

Real-time messaging

Send and receive messages instantly with streaming support

AI agent integration

Connect to workflows powered by AI agents

Session management

Automatic session handling and persistence across page refreshes

Customizable UI

Themeable components with independent styling for agent and user messages

​
Adding to a UI Flow

1

Navigate to UI Flows

Open your project and go to UI Flows from the left navigation menu.
2

Select or create a UI Flow

Select an existing UI flow or create a new one.
UI Flows
3

Open UI Assets panel

In the left sidebar, expand the UI Assets panel. Find Chat alongside Table, Collection, and other components.
UI Assets
4

Add and configure

Drag Chat onto the canvas, then configure properties in the right panel.

​
Configuration

​
Required settings

PropertyDescription
WorkflowThe agent workflow that handles chat interactions (required)
Welcome MessageInitial greeting shown when chat opens
Thinking MessageText displayed while agent processes (default: “Thinking…”)

​
Component hierarchy

The Chat component has configurable sub-components: 
📁 Chat
  ├── 📄 Header (title, subtitle, new chat button)
  ├── 📁 Messages
  │     ├── 💬 Agent Message (avatar, text styling)
  │     └── 💬 User Message (bubble styling)
  └── ⌨️ Input (placeholder, send button)
Chat Component Anatomy

​
Settings by sub-component

PropertyDescription
WorkflowSelect the workflow handling chat interactions
Welcome MessageInitial greeting (supports variables: ${customerName})
Thinking MessageText shown during processing
Chat Component
PropertyDescription
Button Label”New chat” button text
TitleMain header text
SubtitleSecondary text below title
Show Chat IconToggle avatar icon visibility
Show SeparatorToggle separator line
Header
PropertyDescription
Show AvatarToggle agent avatar visibility
Agent Message
PropertyDescription
PlaceholderHint text (e.g., “Ask me anything…”)
Input

​
Styling

Configure visual styling through Theme Admin (Design Assets → Themes → Components → Chat).

​
Themeable elements

ElementKey properties
Chat containerPadding, border, background, shadow
HeaderTitle/subtitle text styles, separator
Messages areaPadding, gap between messages
Agent MessageAvatar icon, text style, background
User MessageBubble border, radius, background, text
Input areaBorder, background, send icon
All styling can be configured in Theme Admin for consistent branding. Changes preview in real-time.

​
Display modes

ModeDescriptionAvailable
Full screenDedicated chat experiencev5.4+
InlineEmbedded within larger UIv5.5+
ModalOverlay dialogv5.5+
SidebarSlide-in panelPlanned

​
Advanced documentation

For comprehensive documentation including runtime behavior, session management, custom persistence workflows, SDK integration, and troubleshooting:

Chat component - Full reference

Complete technical documentation in AI Platform section

Chat interface concepts

High-level chat integration patterns

Chat intents

Configure intent-based routing

Knowledge bases

Ground AI responses in your data

AI in FlowX

AI capabilities overview
Last modified on February 12, 2026