AI Chatbot with Langflow Backend Integration and Custom Branding - n8n Workflow

This n8n template is ideal for:

Developers seeking robust, low-code AI backend orchestration using Langflow.
Businesses needing a fully branded, embedded website chat solution.
Users looking for advanced n8n templates focusing on AI deployment.
Automation specialists customizing the n8n node ecosystem for external AI services.

This powerful n8n workflow provides a complete solution for deploying a custom, branded AI chatbot on any website. By leveraging a specialized n8n trigger, the workflow manages the public-facing interaction while delegating complex Artificial Intelligence (AI) logic, such as Retrieval-Augmented Generation (RAG) and LLM orchestration, to a self-hosted or cloud-hosted Langflow instance. This architecture allows users to benefit from Langflow's visual AI building capabilities while using n8n for reliable deployment, custom branding, and streamlined response handling. This comprehensive n8n solution simplifies the process of creating and maintaining complex conversational agents using flexible n8n node configurations.

The logic of this n8n workflow flows sequentially from the user's interaction on the website to the final AI response:

1. Trigger Activation: The process begins with the specialized "When chat message received" n8n trigger. This n8n node listens for input from the embedded n8n chat widget deployed on your website.


2. Langflow Integration: The incoming message is immediately passed to the Langflow HTTP Request n8n node. This n8n node is critically configured to send a secure POST request containing the user's input (chatInput) to the designated Langflow API endpoint.


3. External Processing: Langflow processes the request using its defined AI flow and returns a response, typically a nested JSON object containing the model's output.


4. Data Parsing: The Edit Fields n8n node is then executed. This Set n8n node analyzes the complex JSON received from Langflow and uses a precise JSON path ({{ $json.outputs[0].outputs[0].results.message.data.text }}) to extract only the final, clean text response.


5. Final Response: The extracted text is mapped to the required output field, completing the n8n workflow. The initial n8n trigger automatically sends this clean response back to the chat widget embedded on the user's website, providing a real-time conversational experience.

To deploy this powerful n8n workflow template and integrate Langflow, follow these steps:

1. Import the n8n workflow: Import the provided JSON file into your n8n instance.


2. Configure Credentials: Set up the required 'Langflow API' HTTP Header Auth credentials referenced by the Langflow n8n node. This involves providing the API key or security token necessary to authorize requests to your Langflow instance.


3. Update Langflow Endpoint: In the Langflow HTTP Request n8n node, update the placeholder values in the URL (https://LANGFLOWURL/api/v1/run/FLOWID?stream=false) to match your live Langflow deployment URL and the specific flow ID you wish to use.


4. Activate and Copy Webhook: Save and activate the n8n workflow. Copy the generated production webhook URL from the "When chat message received" n8n trigger node.


5. Embed on Website: Use the JavaScript embedding code provided in the sticky notes, ensuring you replace YOURPRODUCTIONWEBHOOK_URL with the URL copied in the previous step. Utilize the customization options (also detailed in the sticky notes) to brand the chatbot title, initial messages, and language settings.

When chat message received (n8n trigger): This is the initiating n8n trigger node. Function: Starts the n8n workflow immediately upon receiving a message from the embedded chat widget on the website. Key Configuration: Configured for webhook mode, allowing embedding on public websites, and permitting all origins ().
Langflow (HTTP Request n8n node): Function: Serves as the crucial connector, sending the user's request to the external Langflow AI backend for processing. Key Configuration: Uses POST method, dynamically injects user input using JSON body: "input_value": "{{ $json.chatInput }}", and secures the connection using httpHeaderAuth credentials.
Edit Fields (Set n8n node): Function: Cleans and transforms the complex JSON output received from Langflow into a simple text response suitable for the n8n chat widget. Key Configuration: Extracts the desired text content using the precise JSON path expression {{ $json.outputs[0].outputs[0].results.message.data.text }} and assigns it to the output field.