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!

🎯 Why Use This Template?

• No Frontend Skills Required : Get a professional interface without writing React, Vue, or complex JavaScript
• Real-Time AI Responses : Display AI responses directly in the interface with loading animations
• User-Friendly : Your clients get a beautiful UI instead of dealing with APIs or command-line tools
• Plug & Play: Just paste the code in an n8n Code node and connect your AI agents
• Fully Customizable : Easy to modify colors, add more agents, or change the layout
• Dark/Light Mode : Built-in theme toggle with localStorage persistence

🚀 When to Use This?

Perfect for:

• AI Agent Interactions : Let users chat with different specialized AI agents (Database, Web Search, RAG)
• Customer Support : Route customer questions to appropriate AI assistants
• Data Collection : Gather information from clients with instant AI-powered responses
• Customer Portals : Create simple interfaces for customers to interact with your AI automations
• Internal Tools : Build quick admin panels with AI assistance

📦 What's Included?

• ✅ Text Input Area : Large textarea for user messages
• ✅ Send Button : Main action button with smooth animations
• ✅ 4 Specialized Agent Buttons : Pre-configured for General, Database, Web, and RAG agents
• ✅ AI Response Display : Beautiful response area with agent badges and loading states
• ✅ Project Guide Modal : Built-in documentation for your users
• ✅ Theme Toggle : Dark/Light mode with localStorage persistence
• ✅ Responsive Design : Works perfectly on desktop, tablet, and mobile
• ✅ Font Awesome Icons : Beautiful icons throughout the interface
• ✅ Error Handling : Graceful error messages if something goes wrong

🛠️ 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

• Modal Guide : Lines ~754-810 - Update help text
• Placeholder : Line ~689 - Change textarea placeholder
• Subtitles : Lines ~677, ~693 - Modify section descriptions

Change Agent Descriptions

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

📱 Built-in Features

• Enter to Send : Press Enter to send (Shift+Enter for new line)
• Escape to Close : Press Esc to close modals
• Loading State : Animated spinner while AI processes
• Agent Badges : Color-coded badges show which agent responded
• Clear Button : Easily clear responses to start fresh
• Theme Persistence : Theme choice saved in browser
• Smooth Animations : Professional transitions and hover effects
• Error Handling : User-friendly error messages

💡 Example Workflow Ideas

Customer Support Bot

• General Agent : Answers common questions
• Database Agent : Looks up order status, account info
• Web Agent : Searches knowledge base articles
• RAG Agent : Searches company documentation

Data Analysis Tool

• General Agent : Explains data concepts
• Database Agent : Runs SQL queries on your data
• Web Agent : Fetches external data sources
• RAG Agent : Searches analysis reports

Internal Admin Panel

• General Agent : General assistance
• Database Agent : User management queries
• Web Agent : Check external integrations
• RAG Agent : Search internal docs/wikis

🐛 Troubleshooting

Response not displaying?

• Check that Code Node after AI Agent formats response with response field
• Verify webhook URL in main.js matches your n8n webhook path
• Check browser console for JavaScript errors

AI Agent not responding?

• Ensure Switch node routes match agent types: general, database, web, rag
• Verify AI Agent nodes are properly configured with API keys
• Check n8n execution logs for errors

Styling issues?

• Clear browser cache
• Check that Font Awesome CDN is loading
• Verify CSS variables are properly defined

📝 Technical Details

• Framework : Pure HTML/CSS/JavaScript (no dependencies!)
• Icons : Font Awesome 6.4.0
• Browser Support : All modern browsers (Chrome, Firefox, Safari, Edge)
• Mobile : Fully responsive with touch support
• File Size : ~1050 lines (~35KB minified)

🤝 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.

---