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

# Chat Web Apps

> Turn your chatflow into a fully-featured conversation interface with persistent history and interactive features

Chat web apps transform your chatflow into a complete conversation experience. Users get persistent chat sessions, smart interactions, and all the features you've configured—without installing anything.

## How Chat Apps Work

Your chatflow automatically becomes a web app when you publish it. The system creates a responsive interface that:

* **Maintains conversation context** across user sessions
* **Inherits all orchestration settings** from your chatflow configuration
* **Adapts to any screen size** from mobile to desktop
* **Handles user authentication** if you've enabled access controls

<Tip>
  Unlike single-use text generators, chat apps maintain conversation memory and let users build on previous exchanges.
</Tip>

## Interactive Features

Your web app automatically includes these capabilities based on your chatflow settings:

<CardGroup cols={2}>
  <Card title="Pre-conversation Forms" icon="clipboard-list">
    Collect context before chatting starts—better than asking mid-conversation
  </Card>

  <Card title="AI Conversation Starters" icon="message">
    Eliminate the blank page problem with helpful opening messages
  </Card>

  <Card title="Smart Follow-ups" icon="arrow-right">
    System generates 3 contextual next questions after each response
  </Card>

  <Card title="Voice Input" icon="microphone">
    Speech-to-text lets users talk instead of type
  </Card>

  <Card title="Source Citations" icon="quote">
    References show exactly where information comes from
  </Card>

  <Card title="Response Feedback" icon="thumbs-up">
    Users can rate responses to help improve your app
  </Card>
</CardGroup>

## Pre-conversation Setup

When your chatflow uses variables, users complete a form before chatting starts. This front-loads context gathering instead of interrupting the conversation flow.

<Frame>
  ![Pre-conversation Variable Form](https://assets-docs.dify.ai/dify-enterprise-mintlify/en/guides/application-publishing/launch-your-webapp-quickly/8decae00eeea24622e1f2ef73d4c447e.png)
</Frame>

Here's how the user experience works:

<Steps>
  <Step title="User lands on your app">
    They see a clean form requesting necessary context information.
  </Step>

  <Step title="Form completion unlocks chat">
    The "Start Conversation" button activates only after required fields are filled.
  </Step>

  <Step title="AI has full context">
    The conversation begins with all the background information it needs.
  </Step>
</Steps>

<Warning>
  Every form field adds friction. Only ask for information that meaningfully improves responses.
</Warning>

## Conversation Experience

Once chatting begins, users get an interface designed for natural interaction:

<Frame>
  ![Chat Interface with Response Options](https://assets-docs.dify.ai/dify-enterprise-mintlify/en/guides/application-publishing/launch-your-webapp-quickly/5b7a6f950ed8a2ce3a705f362b4813fe.png)
</Frame>

Every AI response includes these actions:

* **Copy button** - One-click copying for easy sharing or note-taking
* **Feedback buttons** - Like/dislike ratings to improve your app over time
* **Follow-up suggestions** - AI generates 3 contextually relevant next questions

## Session Management

Users can manage multiple conversation threads like modern messaging apps:

<Frame>
  ![Conversation Management Sidebar](https://assets-docs.dify.ai/dify-enterprise-mintlify/en/guides/application-publishing/launch-your-webapp-quickly/46372ad4d79a3ea943d43f9434974956.png)
</Frame>

**Conversation Controls**:

* **Start new** - Begin fresh conversations without losing context from previous ones
* **Pin important** - Keep crucial conversations accessible at the top of the list
* **Delete finished** - Clean up conversations that are no longer relevant

<Info>
  Each conversation thread maintains its own memory and context. Users can seamlessly switch between different topics or projects.
</Info>

## Conversation Openers

Enable conversation openers to eliminate the intimidating blank chat screen:

<Frame>
  ![AI Conversation Opener Message](https://assets-docs.dify.ai/dify-enterprise-mintlify/en/guides/application-publishing/launch-your-webapp-quickly/22e59e509296d25eb85cbd541e161c6d.png)
</Frame>

When users start new conversations, the AI proactively introduces itself and explains its capabilities. This immediately shows users what they can accomplish and increases engagement.

<Tip>
  Conversation openers work especially well for specialized apps where users might not know all available features.
</Tip>

## Follow-up Questions

The system automatically generates contextual follow-up questions after each AI response:

<Frame>
  ![Follow-up Question Suggestions](https://assets-docs.dify.ai/dify-enterprise-mintlify/en/guides/application-publishing/launch-your-webapp-quickly/f88a7ffd777d51299f8b604249c044b3.png)
</Frame>

These suggestions are:

* **Contextually relevant** to the current conversation topic
* **Dynamically generated** based on the AI's response
* **Clickable shortcuts** that help users explore deeper or pivot to related topics

## Voice Input

Speech-to-text transforms your chat app into a voice-first experience:

<Frame>
  ![Speech-to-text Microphone Button](https://assets-docs.dify.ai/dify-enterprise-mintlify/en/guides/application-publishing/launch-your-webapp-quickly/3a64c79792f1166301403f6c44cf4c85.png)
</Frame>

**How it works**:

1. The microphone button appears when you enable speech-to-text in your chatflow
2. Users click to start recording their question
3. Speech converts to text in real-time as they speak
4. They can edit the text before sending or send immediately

<Warning>
  Users must grant microphone permissions in their browser. The app will prompt for this permission when they first try to use voice input.
</Warning>

## Citations and Attributions

When this feature is enabled, if the AI references content from the knowledge base while answering a user question, the specific knowledge sources will be displayed below the response.

Citations build user trust by providing transparency about information sources. Users can click through to verify details or explore source materials further.