Langflow Chat Frontend

A containerized Flask web application that integrates the Langflow embedded chat widget.

Prerequisites

• Docker
• Docker Compose

Initial Setup

1. Create the Persistent Volumes

Before starting the application for the first time, you must create the persistent volumes for Langflow data:

# Create the external Docker volumes that will store all Langflow data
docker volume create langflow-data
docker volume create langflow-postgres

This step is critical as it ensures your flows, configurations, and database persist between container restarts and removals.

2. Configure Environment Variables

Update the .env file with your configuration:

FLOW_ID=your_flow_id
LANGFLOW_URL=http://localhost:7860

3. Start the Application

Run the application with Docker Compose:

docker-compose up -d

This will start three containers:

• langflow-frontend: The Flask application serving the chat interface
• langflow-service: The Langflow backend service
• langflow-backend: PostgreSQL database for Langflow

4. Create Your Flow

1. Access the Langflow backend at http://localhost:7860
2. Create a flow in Langflow and copy the flow ID
3. Update the .env file with your new flow ID
4. Restart the containers:

docker-compose restart

5. Access the Frontend

Access the frontend application at http://localhost:8080

Environment Configuration

The application uses the following environment variables:

• FLOW_ID: ID of the flow created in Langflow (required)
• LANGFLOW_URL: URL of the Langflow instance (default: http://localhost:7860)

Both variables should be configured in the .env file.

Using Docker Compose

The project includes a Docker Compose configuration that sets up both the Langflow backend and the frontend application:

1. Start the entire stack:

docker-compose up -d

2. Access Langflow at http://localhost:7860 to create your flow

3. Access the frontend at http://localhost:8080

4. Stop the services:

docker-compose down

5. View logs:

docker-compose logs -f

Data Persistence

The Langflow backend uses two external named volumes to persist data:

• langflow-data: Stores flows, file storage, monitor data and secret keys
• langflow-postgres: Stores the PostgreSQL database

This ensures that your flows and configurations are preserved even when you run docker-compose down.

To completely remove the persistent data:

# First stop the containers
docker-compose down

# Then remove the volumes
docker volume rm langflow-data
docker volume rm langflow-postgres

Development

To run the application locally without Docker:

1. Install dependencies:

pip install -r requirements.txt

2. Run the Flask application:

python app.py

Note: When running locally, you'll still need a Langflow instance accessible at the URL specified in your .env file.

Production Deployment

For production deployment:

1. Update the .env file with your production configuration:

LANGFLOW_URL=https://your-production-langflow-instance.com
FLOW_ID=your_production_flow_id

2. Deploy using Docker Compose:

docker-compose up -d frontend

This allows you to connect to an existing Langflow instance in production without deploying the Langflow backend.

Troubleshooting

If you encounter connection issues:

1. Check that all containers are running:

docker-compose ps

2. Verify the Langflow health endpoint is accessible:

curl http://localhost:7860/health

3. Ensure your flow ID is correct in the .env file

4. Check the logs for any errors:

docker-compose logs -f

Technical Details

• Frontend: Flask 3.0.0 web application
• Embedded Chat: Using Langflow's embedded chat widget (v1.0.7)
• Database: PostgreSQL 16
• Langflow: Latest version from Docker Hub