January 22, 2026

OpenAI to Slack, support answers in one clean chat

Lisa Granqvist Partner Workflow Automation Expert

Get a free AI assessment → ⬇️ Use template

Support requests don’t arrive politely. They show up in bursts, with missing details, and they always seem to hit right when you’re trying to do real work.

This is where OpenAI Slack automation earns its keep. A Support Lead wants cleaner handoffs. A marketing ops person wants a simple way to triage “is this a lead or a ticket?”. And a founder just wants faster answers without living in the inbox.

This workflow publishes a slick web chat, routes each question to the right AI agent, and pushes the conversations that matter into Slack. You’ll see how it works, what you need, and what to tweak so it fits your process.

How This Automation Works

The full n8n workflow, from trigger to final output:

n8n Workflow Template: OpenAI to Slack, support answers in one clean chat

Click to explore

flowchart LR

    subgraph sg0["AI Agent - General Flow"]
        direction LR
        n3["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Webhook1"]
        n4@{ icon: "mdi:swap-horizontal", form: "rounded", label: "Switch", pos: "b", h: 48 }
        n5@{ icon: "mdi:robot", form: "rounded", label: "AI Agent - General", pos: "b", h: 48 }
        n6@{ icon: "mdi:brain", form: "rounded", label: "OpenAI Chat Model", pos: "b", h: 48 }
        n7@{ icon: "mdi:brain", form: "rounded", label: "OpenAI Chat Model1", pos: "b", h: 48 }
        n8@{ icon: "mdi:brain", form: "rounded", label: "OpenAI Chat Model2", pos: "b", h: 48 }
        n9@{ icon: "mdi:brain", form: "rounded", label: "OpenAI Chat Model3", pos: "b", h: 48 }
        n10["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Respond to Webhook1"]
        n11["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Respond to Webhook2"]
        n12["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Respond to Webhook3"]
        n13["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Respond to Webhook4"]
        n14@{ icon: "mdi:robot", form: "rounded", label: "AI Agent Database", pos: "b", h: 48 }
        n15@{ icon: "mdi:robot", form: "rounded", label: "AI Agent - Web", pos: "b", h: 48 }
        n16@{ icon: "mdi:robot", form: "rounded", label: "AI Agent - Rag", pos: "b", h: 48 }
        n17["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Format Response - Code"]
        n18["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Format Response - Code1"]
        n19["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Format Response - Code2"]
        n20["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Format Response - Code3"]
        n4 --> n5
        n4 --> n14
        n4 --> n15
        n4 --> n16
        n3 --> n4
        n16 --> n20
        n15 --> n19
        n14 --> n18
        n6 -.-> n5
        n5 --> n17
        n7 -.-> n14
        n8 -.-> n15
        n9 -.-> n16
        n17 --> n10
        n18 --> n11
        n19 --> n12
        n20 --> n13
    end

    subgraph sg1["Flow 2"]
        direction LR
        n0["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Webhook"]
        n1["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Code in JavaScript"]
        n2["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Respond to Webhook"]
        n0 --> n1
        n1 --> n2
    end

    %% Styling
    classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
    classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
    classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
    classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
    classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
    classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
    classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
    classDef disabled stroke-dasharray: 5 5,opacity: 0.5
    class n5,n14,n15,n16 ai
    class n6,n7,n8,n9 aiModel
    class n4 decision
    class n3,n10,n11,n12,n13,n0,n2 api
    class n17,n18,n19,n20,n1 code
    classDef customIcon fill:none,stroke:none
    class n3,n10,n11,n12,n13,n17,n18,n19,n20,n0,n1,n2 customIcon

The Problem: Support Answers Get Messy Fast

Most teams don’t have a “support system.” They have a pile of places people ask for help. A customer writes in with a vague question, someone pings a teammate, the teammate replies with a guess, and then you get the dreaded follow-up: “Can you clarify?” That loop burns time and trust. The worst part is the mental switching. You’re answering the same categories of questions all day, but in different tabs, with different context, and no consistent voice.

It adds up fast. And the cracks usually show up in the same few spots:

People ask “quick questions” that still take 10 minutes to interpret, route, and reply to.
Answers vary by who’s online, which means customers get different guidance for the same issue.
High-signal conversations get buried, so product feedback and recurring issues never make it to the team.
You end up doing copy-paste triage into Slack anyway, usually after you’ve already lost momentum.

The Solution: A Web Chat That Routes to the Right AI (Then Slack)

This workflow gives you a ready-to-use web chat interface (served directly from n8n) and a separate AI-processing endpoint behind it. A user opens your chat page, types a message, and chooses the kind of help they need. Behind the scenes, the workflow sends that request to a webhook, routes it through a Switch based on the chosen agent type, and hands it to the right AI Agent. Each agent can have its own system prompt, tools, and memory, so “general support” doesn’t sound like “database lookup” or “documentation search.” Finally, n8n formats the output consistently and returns the response back to the interface so the user sees a clean answer in real time.

Practically, you get one chat UI and multiple specialized brains. The workflow starts with a GET webhook that serves the HTML interface, then a POST webhook that processes messages. Routing happens in the Switch node, responses are shaped in code, and the output is ready to send to Slack when you want key conversations visible to the team.

What You Get: Automation vs. Results

What This Workflow Automates

Results You’ll Get

Serves a polished web chat UI from an n8n webhook.
Routes each message by agent type (general, database, web, RAG).
Runs the right OpenAI chat model through n8n AI Agent nodes.
Formats and returns a consistent JSON response to the interface.

Most teams cut “who handles this?” time from about 10 minutes to basically zero.
Faster first replies, because routing happens instantly and answers return in the same chat.
More consistent support tone, since each agent follows your prompt and rules.
Cleaner internal visibility when key threads are posted into Slack for review.
Less context switching, so your team stays focused on actual fixes and customers.

Example: What This Looks Like

Say you handle about 20 incoming questions a day. Manually, a typical flow is: read the message (2 minutes), decide who owns it (3 minutes), paste into Slack with context (3 minutes), then wait for a teammate or search docs (another 5 minutes). That’s roughly 10 minutes per question, or about 3 hours daily. With this workflow, the user chooses the right agent in the chat, the AI responds in under a minute, and you only push the few important conversations into Slack. You get most of that time back, and the rest feels calmer.

What You’ll Need

n8n instance (try n8n Cloud free)
Self-hosting option if you prefer (Hostinger works well)
OpenAI for the chat model powering the agents
Slack to send key conversations to your team
OpenAI API key (get it from the OpenAI dashboard)

Skill level: Intermediate. You’ll copy the provided UI code, set two webhook paths, and connect your OpenAI (and optional Slack) credentials.

Don’t want to set this up yourself? Talk to an automation expert (free 15-minute consultation).

How It Works

A visitor opens your chat page. A GET webhook triggers n8n to return a complete HTML/CSS/JS interface, so you can publish a clean support chat without building a frontend.

The message is posted back to n8n. When the user hits Send (and selects an agent button like General, Database, Web, or RAG), the UI makes a POST request to your AI webhook with the message and agent_type.

n8n routes it to the right agent. A Switch node checks agent_type and forwards the request to the matching AI Agent, backed by an OpenAI chat model and optional memory so responses stay coherent over a session.

The response is formatted and returned. A code step normalizes the output into a consistent response field, and “Respond to Webhook” sends it back so the UI can display it immediately. From there, you can also send selected conversations into Slack for visibility.

You can easily modify the agent types to match your real queues (billing, onboarding, bug reports) based on your needs. See the full implementation guide below for customization options.

Step-by-Step Implementation Guide

Step 1: Configure the Webhook Trigger

This workflow uses two webhook entry points: one to serve the HTML UI and another to receive agent requests.

Open Inbound Webhook Trigger and set Path to b6f698e9-c16c-4273-8af2-20a958f691c1.
Set Response Mode to responseNode on Inbound Webhook Trigger.
Open Inbound Agent Webhook and set HTTP Method to POST.
Set the Path on Inbound Agent Webhook to webhook-endpoint and Response Mode to responseNode.

Tip: The GET UI and POST agent endpoints are separate. Use the GET URL in a browser to load the interface and the POST URL in your front-end JavaScript.

Step 2: Connect OpenAI

The AI agents rely on OpenAI language models connected via dedicated OpenAI chat engine nodes.

In OpenAI Chat Engine, select the model gpt-4.1-mini and confirm the connection to General AI Agent.
Credential Required: Connect your openAiApi credentials in OpenAI Chat Engine.
Credential Required: Connect your openAiApi credentials in OpenAI Chat Engine A (used by Database AI Agent).
Credential Required: Connect your openAiApi credentials in OpenAI Chat Engine B (used by Web AI Agent).
Credential Required: Connect your openAiApi credentials in OpenAI Chat Engine C (used by RAG AI Agent).

⚠️ Common Pitfall: Do not add credentials directly to General AI Agent, Database AI Agent, Web AI Agent, or RAG AI Agent. The credentials must be added to the connected OpenAI chat engine nodes.

Step 3: Set Up the HTML Interface Generator

The UI is generated dynamically and returned as a binary HTML file for the GET webhook.

Open Generate HTML Interface and confirm the script includes the placeholder const WEBHOOK_URL = '[YOUR_WEBHOOK_URL]';.
Replace [YOUR_WEBHOOK_URL] in Generate HTML Interface with the POST URL for Inbound Agent Webhook.
Verify Return UI Response is set to Respond With binary so the HTML is delivered correctly.

⚠️ Common Pitfall: If the UI loads but sending messages fails, the most common cause is leaving [YOUR_WEBHOOK_URL] unchanged in Generate HTML Interface.

Step 4: Configure Agent Routing and Prompts

Messages are routed based on agent type and processed by the appropriate AI agent node.

Open Route by Agent Type and confirm the rules match the agent types: general, database, web, and rag.
In each rule, ensure the left value is the expression {{ $json.body.agent_type }} and the right value matches the agent type string.
Update General AI Agent Text from c'est un test simplement to your desired instruction.
Set Text in Database AI Agent, Web AI Agent, and RAG AI Agent to the specific prompts your agents should follow.

Step 5: Configure Output Formatting and Responses

Each agent’s output is normalized in a code node and then returned to the requesting client.

Review Format General Output, Format Database Output, Format Web Output, and Format RAG Output to ensure they read input from Inbound Agent Webhook and return JSON with response, agent_type, and timestamp.
Keep the expression reference inside each formatter intact: $('Inbound Agent Webhook').first().json.body.
Confirm each formatter connects to its response node: Format General Output → Send General Response, Format Database Output → Send Database Response, Format Web Output → Send Web Response, and Format RAG Output → Send RAG Response.

Step 6: Test and Activate Your Workflow

Run a manual test to confirm the UI renders and the AI agents respond correctly.

Click Execute Workflow and open the test URL for Inbound Webhook Trigger in your browser to load the interface.
Enter a message, select an agent, and confirm the response appears in the UI and the workflow shows a successful execution path through Route by Agent Type.
Verify that each response node (Send General Response, Send Database Response, Send Web Response, Send RAG Response) returns JSON containing the response field.
Switch the workflow to Active to enable production use.

🔒

Unlock Full Step-by-Step Guide

Get the complete implementation guide + downloadable template

Common Gotchas

OpenAI credentials can expire or be scoped incorrectly. If things break, check your OpenAI API key status and billing limits in the OpenAI dashboard first.
If you’re using Wait nodes or external rendering, processing times vary. Bump up the wait duration if downstream nodes fail on empty responses.
Default prompts in AI nodes are generic. Add your brand voice early or you’ll be editing outputs forever.

Frequently Asked Questions

How long does it take to set up this OpenAI Slack automation automation?

About an hour if you already have your OpenAI key and n8n running.

Do I need coding skills to automate OpenAI Slack automation?

No. You will paste the provided UI code and edit a webhook URL. The rest is connecting nodes and credentials in n8n.

Is n8n free to use for this OpenAI Slack automation workflow?

Yes. n8n has a free self-hosted option and a free trial on n8n Cloud. Cloud plans start at $20/month for higher volume. You’ll also need to factor in OpenAI API costs, which are usually a few cents per conversation depending on model and prompt size.

Where can I host n8n to run this automation?

Two options: n8n Cloud (managed, easiest setup) or self-hosting on a VPS. For self-hosting, Hostinger VPS is affordable and handles n8n well. Self-hosting gives you unlimited executions but requires basic server management.

Can I customize this OpenAI Slack automation workflow for billing vs. technical support routing?

Yes, and it’s one of the best reasons to use this template. You can add new agent buttons in the UI (the agent cards in the HTML section) and then mirror that change in n8n by adding a new Switch rule for agent_type. From there, connect the new route to a dedicated AI Agent node with its own prompt (for billing language, refund rules, escalation rules). Common customizations include adding “Sales” and “Onboarding” agents, changing the default tone, and tagging certain keywords so those chats are the ones that get posted into Slack.

Why is my OpenAI connection failing in this workflow?

Usually it’s an invalid or expired API key, or a billing limit on the OpenAI account. Update the credential in n8n, then run a single test execution and check the node error output. If the UI is loading but replies never show, it can also be a mismatched webhook path in the UI code (the WEBHOOK_URL value) pointing at the wrong endpoint.

How many messages can this OpenAI Slack automation handle?

A lot, but it depends on your n8n plan and your OpenAI rate limits.

Is this OpenAI Slack automation better than using Zapier or Make?

For a multi-agent chat interface, n8n is usually the more practical choice. You can serve the UI from a webhook, route by agent type with unlimited branching, and keep the formatting consistent in code without fighting platform limits. Zapier and Make can work for “send this to OpenAI, then post to Slack” flows, but they get awkward when you need multiple agents, memory, and custom response shaping. Also, self-hosting means you’re not paying per tiny step. If you’re unsure, Talk to an automation expert and you’ll get a straight recommendation.

Once this is in place, support stops feeling like whack-a-mole. The workflow handles the routing and the first reply, and Slack only gets the conversations worth a human’s attention.

Need Help Setting This Up?

Our automation experts can build and customize this workflow for your specific needs. Free 15-minute consultation—no commitment required.

Lisa Granqvist

Workflow Automation Expert

Expert in workflow automation and no-code tools.

{
"id": "",
"meta": {
"instanceId": "5645f174de5492a1de3f0ca1762bd8feff54f4c47d6cf93bd0bc284b6e4d92ce"
},
"name": "Automated AI Agent Web Interface",
"tags": [],
"nodes": [
{
"id": "flowpast-topbar-9901",
"name": "Flowpast Branding",
"type": "n8n-nodes-base.stickyNote",
"position": [
0,
20
],
"parameters": {
"color": 7,
"width": 1340,
"height": 80,
"content": "## Flowpast.com | Automation Workflow Library\n**\ud83d\udcd6 Full tutorial & setup guide:** flowpast.com"
},
"typeVersion": 1
},
{
"id": "fcec0359-3e21-4953-b3be-781671b20151",
"name": "Inbound Webhook Trigger",
"type": "n8n-nodes-base.webhook",
"position": [
1190,
125
],
"webhookId": "b6f698e9-c16c-4273-8af2-20a958f691c1",
"parameters": {
"path": "b6f698e9-c16c-4273-8af2-20a958f691c1",
"options": [],
"responseMode": "responseNode"
},
"typeVersion": 2.1
},
{
"id": "bf62e968-3190-4337-b5da-822fe7db3ebf",
"name": "Generate HTML Interface",
"type": "n8n-nodes-base.code",
"position": [
815,
140
],
"parameters": {
"jsCode": "// YOUR_AWS_SECRET_KEY_HERE=================\n// === n8n GRAPHICAL INPUT TEMPLATE - AI AGENT INTERFACE ===\n// YOUR_AWS_SECRET_KEY_HERE=================\n//\n// This template demonstrates how to create a beautiful graphical\n// interface for your n8n workflows, allowing your clients to\n// interact with your AI agents through a user-friendly web UI.\n//\n// HOW IT WORKS:\n// 1. Webhook node (GET) receives the request\n// 2. Code node generates the HTML interface\n// 3. Respond to Webhook node returns the HTML as a binary file\n//\n// YOUR_AWS_SECRET_KEY_HERE=================\n\n// === Example: Retrieving data from previous nodes ===\n// const userData = $items(\"Get User Data\")[0].json;\n// const apiKey = userData.api_key || \"default-key\";\n\nconst projectName = \"AI Agent Interface\";\nconst projectVersion = \"1.0\";\n\n// === HTML Generation ===\nconst html = `\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>${projectName} - Powered by n8n</title>\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css\">\n  <style>\n    /* === CSS VARIABLES === */\n    :root {\n      --background: #ffffff;\n      --foreground: #000000;\n      --card: #f8f9fa;\n      --card-foreground: #000000;\n      --primary: #6366f1;\n      --primary-hover: #4f46e5;\n      --secondary: #3b82f6;\n      --muted: #9ca3af;\n      --border: #e5e7eb;\n    }\n\n    body.dark {\n      --background: #0b142c;\n      --foreground: #f1f5f9;\n      --card: #1e293b;\n      --card-foreground: #f1f5f9;\n      --primary: #818cf8;\n      --primary-hover: #6366f1;\n      --secondary: #60a5fa;\n      --muted: #64748b;\n      --border: #334155;\n    }\n\n    /* === BASE STYLES === */\n    * {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n\n    body {\n      background: var(--background);\n      color: var(--foreground);\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      padding: 20px;\n      transition: background-color 0.3s ease, color 0.3s ease;\n      min-height: 100vh;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .container {\n      max-width: 1200px;\n      margin: 0 auto;\n      width: 100%;\n    }\n\n    /* === HEADER === */\n    .header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding-bottom: 20px;\n      margin-bottom: 40px;\n      border-bottom: 2px solid var(--border);\n      flex-wrap: wrap;\n      gap: 16px;\n    }\n\n    .header h1 {\n      font-size: 2.5rem;\n      font-weight: 700;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .header h1 i {\n      color: var(--primary);\n    }\n\n    .header-actions {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    /* === BUTTONS === */\n    .info-button {\n      background: #6366f1;\n      color: white;\n      border: none;\n      border-radius: 8px;\n      padding: 10px 18px;\n      font-size: 14px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.3s ease;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n    }\n\n    .info-button:hover {\n      background: #4f46e5;\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);\n    }\n\n    /* === THEME TOGGLE === */\n    .theme-toggle {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      cursor: pointer;\n      user-select: none;\n    }\n\n    .toggle-switch {\n      width: 48px;\n      height: 24px;\n      background: var(--border);\n      border-radius: 12px;\n      position: relative;\n      cursor: pointer;\n      transition: background-color 0.3s ease;\n    }\n\n    .toggle-switch::after {\n      content: '';\n      position: absolute;\n      width: 20px;\n      height: 20px;\n      background: var(--card);\n      border-radius: 50%;\n      top: 2px;\n      left: 2px;\n      transition: transform 0.3s ease;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.3);\n    }\n\n    body.dark .toggle-switch::after {\n      transform: translateX(24px);\n    }\n\n    .theme-icon {\n      font-size: 1.2rem;\n    }\n\n    /* === MAIN CONTENT === */\n    .main-content {\n      background: var(--card);\n      border-radius: 16px;\n      padding: 32px;\n      border: 1px solid var(--border);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n      margin-bottom: 32px;\n    }\n\n    .section-title {\n      font-size: 1.75rem;\n      font-weight: 600;\n      margin-bottom: 24px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      color: var(--foreground);\n    }\n\n    .section-title i {\n      color: var(--primary);\n    }\n\n    .section-subtitle {\n      font-size: 0.95rem;\n      color: var(--muted);\n      margin-bottom: 24px;\n      line-height: 1.6;\n    }\n\n    /* === TEXT INPUT === */\n    .input-area {\n      margin-bottom: 24px;\n    }\n\n    .input-label {\n      display: block;\n      font-size: 0.95rem;\n      font-weight: 600;\n      margin-bottom: 8px;\n      color: var(--foreground);\n    }\n\n    .text-input {\n      width: 100%;\n      min-height: 140px;\n      padding: 16px;\n      font-size: 15px;\n      font-family: inherit;\n      background: var(--background);\n      color: var(--foreground);\n      border: 2px solid var(--border);\n      border-radius: 12px;\n      resize: vertical;\n      transition: all 0.3s ease;\n    }\n\n    .text-input:focus {\n      outline: none;\n      border-color: var(--primary);\n      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n    }\n\n    .text-input::placeholder {\n      color: var(--muted);\n    }\n\n    /* === SEND BUTTON === */\n    .send-button {\n      width: 100%;\n      background: linear-gradient(135deg, var(--primary), var(--primary-hover));\n      color: white;\n      border: none;\n      border-radius: 12px;\n      padding: 16px 24px;\n      font-size: 16px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.3s ease;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n      margin-bottom: 32px;\n    }\n\n    .send-button:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);\n    }\n\n    .send-button:active {\n      transform: translateY(0);\n    }\n\n    /* === AGENT SECTION === */\n    .agent-section-title {\n      font-size: 1.3rem;\n      font-weight: 600;\n      margin-bottom: 16px;\n      color: var(--foreground);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .agent-section-subtitle {\n      font-size: 0.9rem;\n      color: var(--muted);\n      margin-bottom: 20px;\n      line-height: 1.5;\n    }\n\n    .agent-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n      gap: 16px;\n    }\n\n    /* === AGENT CARDS === */\n    .agent-card {\n      background: var(--background);\n      border: 2px solid var(--border);\n      border-radius: 12px;\n      padding: 20px;\n      cursor: pointer;\n      transition: all 0.3s ease;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .agent-card:hover {\n      transform: translateY(-4px);\n      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\n    }\n\n    .agent-card::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 4px;\n      height: 100%;\n      transition: transform 0.3s ease;\n      transform: scaleY(0);\n    }\n\n    .agent-card:hover::before {\n      transform: scaleY(1);\n    }\n\n    .agent-card.db-agent::before { background: #3b82f6; }\n    .agent-card.web-agent::before { background: #10b981; }\n    .agent-card.rag-agent::before { background: #8b5cf6; }\n\n    .agent-card.db-agent:hover { border-color: #3b82f6; }\n    .agent-card.web-agent:hover { border-color: #10b981; }\n    .agent-card.rag-agent:hover { border-color: #8b5cf6; }\n\n    .agent-icon {\n      width: 48px;\n      height: 48px;\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-bottom: 12px;\n      font-size: 1.5rem;\n      color: white;\n    }\n\n    .agent-icon.db-icon { background: linear-gradient(135deg, #3b82f6, #2563eb); }\n    .agent-icon.web-icon { background: linear-gradient(135deg, #10b981, #059669); }\n    .agent-icon.rag-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }\n\n    .agent-title {\n      font-size: 1.1rem;\n      font-weight: 600;\n      margin-bottom: 8px;\n      color: var(--foreground);\n    }\n\n    .agent-description {\n      font-size: 0.875rem;\n      color: var(--muted);\n      line-height: 1.5;\n    }\n\n    /* === RESPONSE AREA === */\n    .response-area {\n      background: var(--card);\n      border-radius: 16px;\n      padding: 32px;\n      border: 1px solid var(--border);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n      margin-top: 32px;\n      animation: slideUp 0.3s ease;\n    }\n\n    .response-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      padding-bottom: 16px;\n      border-bottom: 2px solid var(--border);\n    }\n\n    .response-header h3 {\n      font-size: 1.5rem;\n      font-weight: 600;\n      color: var(--foreground);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .response-header h3 i {\n      color: var(--primary);\n    }\n\n    .clear-button {\n      background: var(--border);\n      color: var(--foreground);\n      border: none;\n      border-radius: 8px;\n      padding: 8px 16px;\n      font-size: 14px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.3s ease;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .clear-button:hover {\n      background: var(--muted);\n      transform: translateY(-1px);\n    }\n\n    .response-content {\n      background: var(--background);\n      border-radius: 12px;\n      padding: 20px;\n      color: var(--foreground);\n      line-height: 1.7;\n      font-size: 0.95rem;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      max-height: 500px;\n      overflow-y: auto;\n    }\n\n    .response-agent-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      border-radius: 6px;\n      font-size: 0.85rem;\n      font-weight: 600;\n      margin-bottom: 12px;\n    }\n\n    .response-agent-badge.db-badge {\n      background: rgba(59, 130, 246, 0.1);\n      color: #3b82f6;\n    }\n\n    .response-agent-badge.web-badge {\n      background: rgba(16, 185, 129, 0.1);\n      color: #10b981;\n    }\n\n    .response-agent-badge.rag-badge {\n      background: rgba(139, 92, 246, 0.1);\n      color: #8b5cf6;\n    }\n\n    .response-agent-badge.general-badge {\n      background: rgba(99, 102, 241, 0.1);\n      color: #6366f1;\n    }\n\n    .loading-spinner {\n      display: inline-block;\n      width: 16px;\n      height: 16px;\n      border: 2px solid var(--border);\n      border-top-color: var(--primary);\n      border-radius: 50%;\n      animation: spin 0.6s linear infinite;\n    }\n\n    @keyframes spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* === MODAL === */\n    .modal {\n      display: none;\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.7);\n      backdrop-filter: blur(4px);\n      z-index: 1000;\n      align-items: center;\n      justify-content: center;\n      animation: fadeIn 0.3s ease;\n    }\n\n    .modal.active {\n      display: flex;\n    }\n\n    .modal-content {\n      background: var(--card);\n      border-radius: 16px;\n      padding: 32px;\n      max-width: 700px;\n      width: 90%;\n      max-height: 85vh;\n      overflow-y: auto;\n      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n      animation: slideUp 0.3s ease;\n      border: 1px solid var(--border);\n    }\n\n    .modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 24px;\n      padding-bottom: 16px;\n      border-bottom: 2px solid var(--border);\n    }\n\n    .modal-header h2 {\n      font-size: 1.75rem;\n      color: var(--foreground);\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .modal-header h2 i {\n      color: #6366f1;\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      font-size: 1.5rem;\n      color: var(--muted);\n      cursor: pointer;\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      transition: all 0.2s ease;\n    }\n\n    .modal-close:hover {\n      background: var(--border);\n      color: var(--foreground);\n    }\n\n    .modal-body h3 {\n      color: var(--primary);\n      font-size: 1.25rem;\n      margin-top: 24px;\n      margin-bottom: 12px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .modal-body h3:first-child {\n      margin-top: 0;\n    }\n\n    .modal-body p {\n      color: var(--foreground);\n      line-height: 1.7;\n      margin-bottom: 16px;\n      font-size: 0.95rem;\n    }\n\n    .modal-body ul {\n      margin: 12px 0 16px 24px;\n      color: var(--foreground);\n    }\n\n    .modal-body li {\n      margin-bottom: 10px;\n      line-height: 1.6;\n    }\n\n    .modal-body strong {\n      color: var(--primary);\n      font-weight: 600;\n    }\n\n    .modal-body code {\n      background: var(--background);\n      padding: 2px 6px;\n      border-radius: 4px;\n      font-family: 'Courier New', monospace;\n      font-size: 0.9em;\n      color: var(--primary);\n    }\n\n    /* === ANIMATIONS === */\n    @keyframes fadeIn {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n\n    @keyframes slideUp {\n      from {\n        opacity: 0;\n        transform: translateY(30px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    /* === RESPONSIVE === */\n    @media (max-width: 768px) {\n      .header {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n\n      .header h1 {\n        font-size: 2rem;\n      }\n\n      .header-actions {\n        width: 100%;\n        justify-content: space-between;\n      }\n\n      .agent-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .modal-content {\n        padding: 24px;\n        width: 95%;\n      }\n    }\n  </style>\n<link rel="preload" as="image" href="https://flowpast.s3.eu-north-1.amazonaws.com/featured_blog_images/106399.webp"><link rel="preload" as="image" href="https://flowpast.s3.eu-north-1.amazonaws.com/featured_blog_images/106399.webp"></head>
\n<body class=\"dark\">\n  <div class=\"container\">\n    <!-- === HEADER === -->\n    <div class=\"header\">\n      <h1>\n        <i class=\"fas fa-robot\"></i>\n        ${projectName}\n      </h1>\n      <div class=\"header-actions\">\n        <button class=\"info-button\" onclick=\"openModal()\">\n          <i class=\"fas fa-info-circle\"></i>\n          Project Guide\n        </button>\n        <div class=\"theme-toggle\" onclick=\"toggleTheme()\">\n          <i class=\"fas fa-moon theme-icon\"></i>\n          <div class=\"toggle-switch\"></div>\n          <i class=\"fas fa-sun theme-icon\"></i>\n        </div>\n      </div>\n    </div>\n\n    <!-- === MAIN CONTENT === -->\n    <div class=\"main-content\">\n      <div class=\"section-title\">\n        <i class=\"fas fa-comments\"></i>\n        Chat with AI Agents\n      </div>\n      <p class=\"section-subtitle\">\n        Enter your message below and select one of our specialized AI agents to get the most accurate response.\n      </p>\n\n      <!-- Text input area -->\n      <div class=\"input-area\">\n        <label class=\"input-label\" for=\"messageInput\">\n          <i class=\"fas fa-edit\"></i> Your Message\n        </label>\n        <textarea\n          id=\"messageInput\"\n          class=\"text-input\"\n          placeholder=\"Type your question or message here...\"\n        >

\n\n \n \n\n \n

\n \n Or Select a Specialized Agent\n

\n Choose an agent that best fits your needs. Each agent has access to different tools and data sources.\n

\n\n

\n \n

Database Search Agent

\n Specialized in searching and querying your database. Perfect for finding specific records or analyzing stored data.\n

\n\n \n

\n \n

Web Search Agent

\n Searches the internet for real-time information, news, and public data. Ideal for current events and research.\n

\n\n \n

\n \n

RAG Knowledge Agent

\n Uses RAG to search your documents and knowledge base. Best for company-specific information.\n

\n\n \n

\n \n AI Response\n

\n \n

\n\n \n \n\n \n \n\n\n`;\n\n// === Binary Conversion for n8n ===\nconst buffer = Buffer.from(html, \"utf8\");\n\nreturn [\n {\n json: {\n message: \"AI Agent Interface generated successfully\",\n version: projectVersion\n },\n binary: {\n data: {\n data: buffer.toString(\"base64\"),\n mimeType: \"text/html\"\n },\n },\n },\n];\n" }, "typeVersion": 2 }, { "id": "d0fa19da-d969-4484-b1b4-c876851a8e46", "name": "Return UI Response", "type": "n8n-nodes-base.respondToWebhook", "position": [ 500, 120 ], "parameters": { "options": [], "respondWith": "binary" }, "typeVersion": 1.4 }, { "id": "ec32a56d-3fe8-4155-b47e-da1032c6eadf", "name": "Inbound Agent Webhook", "type": "n8n-nodes-base.webhook", "position": [ 1240, 295 ], "webhookId": "e0181c5e-25b5-498a-b409-49fdacabd523", "parameters": { "path": "webhook-endpoint", "options": [], "httpMethod": "POST", "responseMode": "responseNode" }, "typeVersion": 2.1 }, { "id": "5031a89a-723a-4a70-a945-2190249e224c", "name": "Route by Agent Type", "type": "n8n-nodes-base.switch", "position": [ 910, 320 ], "parameters": { "rules": { "values": [ { "conditions": { "options": { "version": 2, "leftValue": "", "caseSensitive": true, "typeValidation": "strict" }, "combinator": "and", "conditions": [ { "id": "e3cd26ff-42a1-4f9a-b720-78db8d579196", "operator": { "name": "filter.operator.equals", "type": "string", "operation": "equals" }, "leftValue": "={{ $json.body.agent_type }}", "rightValue": "general" } ] } }, { "conditions": { "options": { "version": 2, "leftValue": "", "caseSensitive": true, "typeValidation": "strict" }, "combinator": "and", "conditions": [ { "id": "c0e4c5ff-0c06-4cbb-97ba-def595e4fff1", "operator": { "name": "filter.operator.equals", "type": "string", "operation": "equals" }, "leftValue": "={{ $json.body.agent_type }}", "rightValue": "database" } ] } }, { "conditions": { "options": { "version": 2, "leftValue": "", "caseSensitive": true, "typeValidation": "strict" }, "combinator": "and", "conditions": [ { "id": "9a756446-f021-4d74-bc6b-e4a8fa64bcbe", "operator": { "name": "filter.operator.equals", "type": "string", "operation": "equals" }, "leftValue": "={{ $json.body.agent_type }}", "rightValue": "web" } ] } }, { "conditions": { "options": { "version": 2, "leftValue": "", "caseSensitive": true, "typeValidation": "strict" }, "combinator": "and", "conditions": [ { "id": "e61d61c2-7819-4c22-b70f-7410c87a98d7", "operator": { "name": "filter.operator.equals", "type": "string", "operation": "equals" }, "leftValue": "={{ $json.body.agent_type }}", "rightValue": "rag" } ] } } ] }, "options": [] }, "typeVersion": 3.3 }, { "id": "14ab7851-36f6-4d61-a43e-f3ceaf45123b", "name": "General AI Agent", "type": "@n8n/n8n-nodes-langchain.agent", "position": [ 560, 265 ], "parameters": { "text": "c'est un test simplement", "options": [], "promptType": "define" }, "typeVersion": 2.2 }, { "id": "71c05943-b548-4d56-9b02-b4c394612d2f", "name": "OpenAI Chat Engine", "type": "@n8n/n8n-nodes-langchain.lmChatOpenAi", "position": [ 775, 210 ], "parameters": { "model": { "__rl": true, "mode": "list", "value": "gpt-4.1-mini" }, "options": [] }, "credentials": { "openAiApi": { "id": "credential-id", "name": "" } }, "typeVersion": 1.2 }, { "id": "20bfc5c1-8093-4533-85fa-49f9f5eff917", "name": "OpenAI Chat Engine A", "type": "@n8n/n8n-nodes-langchain.lmChatOpenAi", "position": [ 760, 360 ], "parameters": { "model": { "__rl": true, "mode": "list", "value": "gpt-4.1-mini" }, "options": [] }, "credentials": { "openAiApi": { "id": "credential-id", "name": "" } }, "typeVersion": 1.2 }, { "id": "1f1fc350-0ed9-433f-9527-a8c356f23d4a", "name": "OpenAI Chat Engine B", "type": "@n8n/n8n-nodes-langchain.lmChatOpenAi", "position": [ 780, 455 ], "parameters": { "model": { "__rl": true, "mode": "list", "value": "gpt-4.1-mini" }, "options": [] }, "credentials": { "openAiApi": { "id": "credential-id", "name": "" } }, "typeVersion": 1.2 }, { "id": "21e8e7c1-4b78-46c0-98ba-24006592a737", "name": "OpenAI Chat Engine C", "type": "@n8n/n8n-nodes-langchain.lmChatOpenAi", "position": [ 750, 610 ], "parameters": { "model": { "__rl": true, "mode": "list", "value": "gpt-4.1-mini" }, "options": [] }, "credentials": { "openAiApi": { "id": "credential-id", "name": "" } }, "typeVersion": 1.2 }, { "id": "02e03088-7c40-421d-ab15-ccacdb2735c7", "name": "Send General Response", "type": "n8n-nodes-base.respondToWebhook", "position": [ 5, 245 ], "parameters": { "options": [] }, "typeVersion": 1.4 }, { "id": "988aa029-e110-42b3-b62e-156ee79d08c7", "name": "Send Database Response", "type": "n8n-nodes-base.respondToWebhook", "position": [ 0, 350 ], "parameters": { "options": [] }, "typeVersion": 1.4 }, { "id": "6dbf918b-fdb9-4032-95a5-ece4aee5c63f", "name": "Send Web Response", "type": "n8n-nodes-base.respondToWebhook", "position": [ 10, 485 ], "parameters": { "options": [] }, "typeVersion": 1.4 }, { "id": "477b257c-d283-4783-a505-29f0c2f50782", "name": "Send RAG Response", "type": "n8n-nodes-base.respondToWebhook", "position": [ 0, 595 ], "parameters": { "options": [] }, "typeVersion": 1.4 }, { "id": "e28c1572-dec7-4b90-be86-46b434366678", "name": "Database AI Agent", "type": "@n8n/n8n-nodes-langchain.agent", "position": [ 565, 340 ], "parameters": { "text": "Configure Database Agent", "options": [], "promptType": "define" }, "typeVersion": 2.2 }, { "id": "1bda319b-4aff-47bd-9350-0e337ecef08e", "name": "Web AI Agent", "type": "@n8n/n8n-nodes-langchain.agent", "position": [ 570, 500 ], "parameters": { "text": "Configure Web Agent", "options": [], "promptType": "define" }, "typeVersion": 2.2 }, { "id": "d0a6542a-bea2-472f-b254-7d30c95fc8f9", "name": "RAG AI Agent", "type": "@n8n/n8n-nodes-langchain.agent", "position": [ 555, 590 ], "parameters": { "text": "Configure Rag Agent", "options": [], "promptType": "define" }, "typeVersion": 2.2 }, { "id": "4c290b16-aac4-4dad-8e29-8df886a191f5", "name": "Format General Output", "type": "n8n-nodes-base.code", "position": [ 290, 235 ], "parameters": { "jsCode": "// R\u00e9cup\u00e8re les donn\u00e9es du webhook (le message de l'utilisateur)\nconst webhookData = $('Inbound Agent Webhook').first().json.body;\n\n// R\u00e9cup\u00e8re la r\u00e9ponse de l'agent IA\nconst aiAgentOutput = $input.first().json;\n\n// Extrait le texte de r\u00e9ponse de l'IA (les agents IA peuvent renvoyer diff\u00e9rents formats)\nconst aiResponseText = aiAgentOutput.output || \n aiAgentOutput.text || \n aiAgentOutput.response || \n aiAgentOutput.message ||\n JSON.stringify(aiAgentOutput);\n\n// Formate la r\u00e9ponse pour l'interface utilisateur\nreturn [{\n json: {\n response: aiResponseText, // La r\u00e9ponse de l'IA\n agent_type: webhookData.agent_type, // Type d'agent utilis\u00e9\n user_message: webhookData.message, // Message original de l'utilisateur\n timestamp: new Date().toISOString()\n }\n}];" }, "typeVersion": 2 }, { "id": "10e971ac-4ddd-4d4b-b746-4ea1e3adae80", "name": "Format Database Output", "type": "n8n-nodes-base.code", "position": [ 310, 385 ], "parameters": { "jsCode": "// R\u00e9cup\u00e8re les donn\u00e9es du webhook (le message de l'utilisateur)\nconst webhookData = $('Inbound Agent Webhook').first().json.body;\n\n// R\u00e9cup\u00e8re la r\u00e9ponse de l'agent IA\nconst aiAgentOutput = $input.first().json;\n\n// Extrait le texte de r\u00e9ponse de l'IA (les agents IA peuvent renvoyer diff\u00e9rents formats)\nconst aiResponseText = aiAgentOutput.output || \n aiAgentOutput.text || \n aiAgentOutput.response || \n aiAgentOutput.message ||\n JSON.stringify(aiAgentOutput);\n\n// Formate la r\u00e9ponse pour l'interface utilisateur\nreturn [{\n json: {\n response: aiResponseText, // La r\u00e9ponse de l'IA\n agent_type: webhookData.agent_type, // Type d'agent utilis\u00e9\n user_message: webhookData.message, // Message original de l'utilisateur\n timestamp: new Date().toISOString()\n }\n}];" }, "typeVersion": 2 }, { "id": "bfbd9514-cde8-4b90-bff4-af935251126d", "name": "Format Web Output", "type": "n8n-nodes-base.code", "position": [ 305, 480 ], "parameters": { "jsCode": "// R\u00e9cup\u00e8re les donn\u00e9es du webhook (le message de l'utilisateur)\nconst webhookData = $('Inbound Agent Webhook').first().json.body;\n\n// R\u00e9cup\u00e8re la r\u00e9ponse de l'agent IA\nconst aiAgentOutput = $input.first().json;\n\n// Extrait le texte de r\u00e9ponse de l'IA (les agents IA peuvent renvoyer diff\u00e9rents formats)\nconst aiResponseText = aiAgentOutput.output || \n aiAgentOutput.text || \n aiAgentOutput.response || \n aiAgentOutput.message ||\n JSON.stringify(aiAgentOutput);\n\n// Formate la r\u00e9ponse pour l'interface utilisateur\nreturn [{\n json: {\n response: aiResponseText, // La r\u00e9ponse de l'IA\n agent_type: webhookData.agent_type, // Type d'agent utilis\u00e9\n user_message: webhookData.message, // Message original de l'utilisateur\n timestamp: new Date().toISOString()\n }\n}];" }, "typeVersion": 2 }, { "id": "60586be5-536a-4561-bfbf-7643d70eedf1", "name": "Format RAG Output", "type": "n8n-nodes-base.code", "position": [ 295, 635 ], "parameters": { "jsCode": "// R\u00e9cup\u00e8re les donn\u00e9es du webhook (le message de l'utilisateur)\nconst webhookData = $('Inbound Agent Webhook').first().json.body;\n\n// R\u00e9cup\u00e8re la r\u00e9ponse de l'agent IA\nconst aiAgentOutput = $input.first().json;\n\n// Extrait le texte de r\u00e9ponse de l'IA (les agents IA peuvent renvoyer diff\u00e9rents formats)\nconst aiResponseText = aiAgentOutput.output || \n aiAgentOutput.text || \n aiAgentOutput.response || \n aiAgentOutput.message ||\n JSON.stringify(aiAgentOutput);\n\n// Formate la r\u00e9ponse pour l'interface utilisateur\nreturn [{\n json: {\n response: aiResponseText, // La r\u00e9ponse de l'IA\n agent_type: webhookData.agent_type, // Type d'agent utilis\u00e9\n user_message: webhookData.message, // Message original de l'utilisateur\n timestamp: new Date().toISOString()\n }\n}];" }, "typeVersion": 2 } ], "active": true, "pinData": [], "settings": { "executionOrder": "v1" }, "versionId": "", "connections": { "Route by Agent Type": { "main": [ [ { "node": "General AI Agent", "type": "main", "index": 0 } ], [ { "node": "Database AI Agent", "type": "main", "index": 0 } ], [ { "node": "Web AI Agent", "type": "main", "index": 0 } ], [ { "node": "RAG AI Agent", "type": "main", "index": 0 } ] ] }, "Inbound Webhook Trigger": { "main": [ [ { "node": "Generate HTML Interface", "type": "main", "index": 0 } ] ] }, "Inbound Agent Webhook": { "main": [ [ { "node": "Route by Agent Type", "type": "main", "index": 0 } ] ] }, "RAG AI Agent": { "main": [ [ { "node": "Format RAG Output", "type": "main", "index": 0 } ] ] }, "Web AI Agent": { "main": [ [ { "node": "Format Web Output", "type": "main", "index": 0 } ] ] }, "Database AI Agent": { "main": [ [ { "node": "Format Database Output", "type": "main", "index": 0 } ] ] }, "OpenAI Chat Engine": { "ai_languageModel": [ [ { "node": "General AI Agent", "type": "ai_languageModel", "index": 0 } ] ] }, "General AI Agent": { "main": [ [ { "node": "Format General Output", "type": "main", "index": 0 } ] ] }, "Generate HTML Interface": { "main": [ [ { "node": "Return UI Response", "type": "main", "index": 0 } ] ] }, "OpenAI Chat Engine A": { "ai_languageModel": [ [ { "node": "Database AI Agent", "type": "ai_languageModel", "index": 0 } ] ] }, "OpenAI Chat Engine B": { "ai_languageModel": [ [ { "node": "Web AI Agent", "type": "ai_languageModel", "index": 0 } ] ] }, "OpenAI Chat Engine C": { "ai_languageModel": [ [ { "node": "RAG AI Agent", "type": "ai_languageModel", "index": 0 } ] ] }, "Format General Output": { "main": [ [ { "node": "Send General Response", "type": "main", "index": 0 } ] ] }, "Format Database Output": { "main": [ [ { "node": "Send Database Response", "type": "main", "index": 0 } ] ] }, "Format Web Output": { "main": [ [ { "node": "Send Web Response", "type": "main", "index": 0 } ] ] }, "Format RAG Output": { "main": [ [ { "node": "Send RAG Response", "type": "main", "index": 0 } ] ] } } }

OpenAI to Slack, support answers in one clean chat

How This Automation Works

n8n Workflow Template: OpenAI to Slack, support answers in one clean chat

The Problem: Support Answers Get Messy Fast

The Solution: A Web Chat That Routes to the Right AI (Then Slack)

What You Get: Automation vs. Results

Example: What This Looks Like

What You’ll Need

How It Works

Step-by-Step Implementation Guide

Step 1: Configure the Webhook Trigger

Step 2: Connect OpenAI

Step 3: Set Up the HTML Interface Generator

Step 4: Configure Agent Routing and Prompts

Step 5: Configure Output Formatting and Responses

Step 6: Test and Activate Your Workflow

Unlock Full Step-by-Step Guide

Common Gotchas

Related Workflows

Frequently Asked Questions

Need Help Setting This Up?

Lisa Granqvist

Use template

\n \n AI Response\n

Template Guide

What is this Template?

How it Works

The Agent Buttons

Connecting to Your Workflow

Customization

🔓 Unlock All 10,000+ Templates Free