💬 Beautiful web UI for GPT-4 multi-agent chat with specialized assistants

⚡ 1,755 views · 💬 Support Chatbots

Description

n8n Graphical Input Template - AI Agent Interface

A beautiful, ready-to-use HTML interface for n8n workflows that allows your users to interact with AI agents through a clean web UI. No frontend skills required!

Version License

🎯 Why Use This Template?

🚀 When to Use This?

Perfect for:

📦 What’s Included?

🛠️ How to Use

Part 1: Display the Interface

Create a 3-node workflow to show the UI:

Webhook (GET) → Code Node → Respond to Webhook

Configuration:

  1. Webhook Node (GET):

    • Method: GET
    • Path: /your-interface (e.g., /ai-chat)
    • Authentication: Optional

  2. Code Node:

    • Copy the entire content of main.js
    • Paste it into the Code field

  3. Respond to Webhook:

    • Respond With: First incoming item
    • Response Data Source: Binary
    • Binary Property: data

Part 2: Process AI Requests

Create a separate workflow to handle AI processing:

Webhook (POST) → Switch → AI Agents → Code Node → Respond to Webhook

Configuration:

  1. Webhook Node (POST):

    • Method: POST
    • Path: /webhook-endpoint
    • Response Mode: “Respond to Webhook”

  2. Switch Node - Route by agent type:

    • Rule 1: {{ $json.body.agent_type }} equals general
    • Rule 2: {{ $json.body.agent_type }} equals database
    • Rule 3: {{ $json.body.agent_type }} equals web
    • Rule 4: {{ $json.body.agent_type }} equals rag

  3. AI Agent Nodes (4 nodes, one per agent type):

    • Connect one AI Agent to each Switch output
    • Configure with OpenAI, Anthropic, or local LLM
    • Add tools, memory, system prompts as needed

  4. Code Node - Format the response:

const webhookData = $('Webhook').first().json.body;
const aiResponse = $input.first().json;

return [{
  json: {
    response: aiResponse.output || aiResponse.text || aiResponse.response,
    agent_type: webhookData.agent_type,
    user_message: webhookData.message,
    timestamp: new Date().toISOString()
  }
}];
  1. Respond to Webhook - Send back the formatted response

🔧 What to Update

In main.js

Line 847 - Update webhook URL to match your n8n path:

const WEBHOOK_URL = '/webhook/webhook-endpoint';

Line 20 - Customize project name:

const projectName = "AI Assistant Hub";

Lines 34-56 - Change colors (optional):

:root {
  --primary: #6366f1;        /* Main accent color */
  --primary-hover: #4f46e5;  /* Hover state */
  --background: #ffffff;     /* Background */
}

📊 How It Works

User visits /your-interface
    ↓
Sees the chat interface
    ↓
Types message + clicks agent button
    ↓
POST to /webhook/webhook-endpoint
{
  "message": "Find users in database",
  "agent_type": "database",
  "timestamp": "2025-10-19T..."
}
    ↓
Switch routes to Database AI Agent
    ↓
AI Agent processes with tools/memory
    ↓
Code Node formats response
    ↓
Returns { "response": "Found 10 users..." }
    ↓
Interface displays response with badge + animation

🎨 Customization Guide

Add More Agents

Copy an agent card (lines ~700-730) and modify:

<div>
  <div>
    <i></i>
  </div>
  <div>Custom AI Agent</div>
  <div>
    Specialized in your custom task.
  </div>
</div>

Then add CSS for the new agent type:

.agent-card.custom-agent::before { background: #f59e0b; }
.agent-card.custom-agent:hover { border-color: #f59e0b; }
.agent-icon.custom-icon { background: linear-gradient(135deg, #f59e0b, #d97706); }
.response-agent-badge.custom-badge {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

And update the Switch node to handle the new agent type!

Modify Text Content

Change Agent Descriptions

Lines ~705, ~717, ~729 - Update the description text for each agent.

📱 Built-in Features

💡 Example Workflow Ideas

Customer Support Bot

Data Analysis Tool

Internal Admin Panel

🐛 Troubleshooting

Response not displaying?

AI Agent not responding?

Styling issues?

📝 Technical Details

🤝 Contributing & Support

This template is designed to be simple and self-explanatory. The code structure:

  1. Lines 1-23: Configuration and setup
  2. Lines 24-640: CSS styles
  3. Lines 641-751: HTML structure
  4. Lines 752-1048: JavaScript functions

Feel free to modify and adapt to your needs!

📝 License

Free to use and modify for your n8n workflows. No attribution required.

🔗 Nodes Used

Webhook, AI Agent, OpenAI Chat Model

📥 Import

Download workflow.json and import into n8n: Workflow menu → Import from File

📖 Importing guide · 🔑 Credential setup