> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Chat interface

> Add conversational AI to your applications with the FlowX.AI Chat component.

The Chat component provides a conversational interface for users to interact with AI agents. It supports real-time messaging, context-aware responses, and direct integration with your business processes.

## Overview

<CardGroup cols={2}>
  <Card title="Real-time messaging" icon="bolt">
    Instant responses with streaming support
  </Card>

  <Card title="AI agent integration" icon="robot">
    Connect to custom agents or FlowX accelerators
  </Card>

  <Card title="Session management" icon="clock-rotate-left">
    Persistent conversations across sessions
  </Card>

  <Card title="Knowledge base access" icon="database">
    Context-aware responses from your data
  </Card>
</CardGroup>

## How it works

The Chat component follows a simple flow:

<Steps>
  <Step title="User initiates chat">
    User opens your application and the Chat component loads with a welcome message.
  </Step>

  <Step title="Message exchange">
    User sends a message. The component sends it to the configured AI agent workflow.
  </Step>

  <Step title="Agent processing">
    The agent processes the message, optionally querying knowledge bases or external systems.
  </Step>

  <Step title="Response delivery">
    The agent's response streams back to the user in real-time.
  </Step>
</Steps>

## Key concepts

### Agent workflows

The Chat component connects to an **agent workflow** that defines how messages are processed:

* **Input handling** - How user messages are received
* **AI processing** - Which models and prompts are used
* **Knowledge access** - What data sources the agent can query
* **Response generation** - How responses are formatted

### Session persistence

Conversations can be persisted to maintain context:

| Mode              | Description                            | Use case               |
| ----------------- | -------------------------------------- | ---------------------- |
| **Session-based** | Conversation lasts for browser session | Quick queries, support |
| **Persistent**    | Conversation saved to database         | Ongoing cases, history |

### Knowledge base integration

Agents can access knowledge bases for informed responses:

* **RAG (Retrieval-Augmented Generation)** - Agent searches relevant documents before responding
* **Semantic matching** - Finds conceptually similar content, not just keyword matches
* **Source attribution** - Responses can cite their sources

<Info>
  Knowledge base integration requires configuration in the agent workflow. See [Knowledge Base Overview](/5.9/docs/platform-deep-dive/integrations/knowledge-base-integration/knowledge-base-overview) for setup details.
</Info>

## Display modes

The Chat component supports different display modes:

| Mode           | Description                    |
| -------------- | ------------------------------ |
| **Standalone** | Full-page chat experience      |
| **Embedded**   | Chat panel within a larger UI  |
| **Floating**   | Expandable chat button overlay |

## Best practices

<AccordionGroup>
  <Accordion title="Set clear expectations" icon="comment">
    Use the welcome message to explain what the agent can help with. This reduces user frustration from mismatched expectations.
  </Accordion>

  <Accordion title="Provide context" icon="info">
    Pass relevant process data to the agent (user info, current step, etc.) so responses are contextually appropriate.
  </Accordion>

  <Accordion title="Handle limitations gracefully" icon="hand">
    Configure fallback responses for when the agent can't help. Offer escalation to human support when needed.
  </Accordion>

  <Accordion title="Design for mobile" icon="mobile">
    Test the chat experience on mobile devices. Ensure the interface works well with on-screen keyboards.
  </Accordion>
</AccordionGroup>

## Implementation

For detailed configuration and styling options, see the UI Designer documentation:

<Card title="Chat component configuration" icon="gear" href="/5.9/docs/building-blocks/ui-designer/ui-component-types/chat">
  Complete configuration reference for the Chat UI component
</Card>

## Related resources

<CardGroup cols={2}>
  <Card title="BPMN integration" icon="diagram-project" href="./bpmn-integration">
    Trigger agents from workflows
  </Card>

  <Card title="Agent Builder" icon="robot" href="../agent-builder/overview">
    Create custom agents
  </Card>

  <Card title="Chat intents" icon="bullseye" href="../chat-intents">
    Configure intent-based routing
  </Card>

  <Card title="Knowledge bases" icon="database" href="/5.9/docs/platform-deep-dive/integrations/knowledge-base-integration/knowledge-base-overview">
    Connect your data sources
  </Card>

  <Card title="Conversational workflows" icon="messages" href="../conversational-workflows">
    Build multi-turn chat experiences with session memory
  </Card>
</CardGroup>