Beautiful web UI for GPT-4 multi-agent chat with specialized assistants
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: Webhook Node (GET): Method: GET Path: /your-interface (e.g., /ai-chat) Authentication: Optional Code Node: Copy the entire content of main.js Paste it into the Code field 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: Webhook Node (POST): Method: POST Path: /webhook-endpoint Response Mode: "Respond to Webhook" 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 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 Code Node - Format the response: javascript const webhookData = $('Webhook').first().json.body; const aiResponse = $input.first().json; return [{ json: { response: aiResponse.output || aiResponse.text || aiResponse.response, agenttype: webhookData.agenttype, user_message: webhookData.message, timestamp: new Date().toISOString() } }]; Respond to Webhook - Send back the formatted response 🔧 What to Update In main.js Line 847 - Update webhook URL to match your n8n path: javascript const WEBHOOK_URL = '/webhook/webhook-endpoint'; Line 20 - Customize project name: javascript const projectName = "AI Assistant Hub"; Lines 34-56 - Change colors (optional): javascript :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: html <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: css .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: Lines 1-23: Configuration and setup Lines 24-640: CSS styles Lines 641-751: HTML structure 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. ---
By HugoCompetitor intelligence agent: SERP monitoring + summary with Thordata + OpenAI
Who this is for? This workflow is designed for: Marketing analysts, SEO specialists, and content strategists who want automated intelligence on their online competitors. Growth teams that need quick insights from SERP (Search Engine Results Pages) without manual data scraping. Agencies managing multiple clients’ SEO presence and tracking competitive positioning in real-time. What problem is this workflow solving? Manual competitor research is time-consuming, fragmented, and often lacks actionable insights. This workflow automates the entire process by: Fetching SERP results from multiple search engines (Google, Bing, Yandex, DuckDuckGo) using Thordata’s Scraper API. Using OpenAI GPT-4.1-mini to analyze, summarize, and extract keyword opportunities, topic clusters, and competitor weaknesses. Producing structured, JSON-based insights ready for dashboards or reports. Essentially, it transforms raw SERP data into strategic marketing intelligence — saving hours of research time. What this workflow does Here’s a step-by-step overview of how the workflow operates: Step 1: Manual Trigger Initiates the process on demand when you click “Execute Workflow.” Step 2: Set the Input Query The “Set Input Fields” node defines your search query, such as: > “Top SEO strategies for e-commerce in 2025” Step 3: Multi-Engine SERP Fetching Four HTTP request tools send the query to Thordata Scraper API to retrieve results from: Google Bing Yandex DuckDuckGo Each uses Bearer Authentication configured via “Thordata SERP Bearer Auth Account.” Step 4: AI Agent Processing The LangChain AI Agent orchestrates the data flow, combining inputs and preparing them for structured analysis. Step 5: SEO Analysis The SEO Analyst node (powered by GPT-4.1-mini) parses SERP results into a structured schema, extracting: Competitor domains Page titles & content types Ranking positions Keyword overlaps Traffic share estimations Strengths and weaknesses Step 6: Summarization The Summarize the content node distills complex data into a concise executive summary using GPT-4.1-mini. Step 7: Keyword & Topic Extraction The Keyword and Topic Analysis node extracts: Primary and secondary keywords Topic clusters and content gaps SEO strength scores Competitor insights Step 8: Output Formatting The Structured Output Parser ensures results are clean, validated JSON objects for further integration (e.g., Google Sheets, Notion, or dashboards). Setup Prerequisites n8n Cloud or Self-Hosted instance Thordata Scraper API Key (for SERP data retrieval) OpenAI API Key (for GPT-based reasoning) Setup Steps Add Credentials Go to Credentials → Add New → HTTP Bearer Auth* → Paste your Thordata API token. Add OpenAI API Credentials* for the GPT model. Import the Workflow Copy the provided JSON or upload it into your n8n instance. Set Input In the “Set the Input Fields” node, replace the example query with your desired topic, e.g.: “Google Search for Top SEO strategies for e-commerce in 2025” Execute Click “Execute Workflow” to run the analysis. How to customize this workflow to your needs Modify Search Query Change the search_query variable in the Set Node to any target keyword or topic. Change AI Model In the OpenAI Chat Model nodes, you can switch from gpt-4.1-mini to another model for better quality or lower cost. Extend Analysis Edit the JSON schema in the “Information Extractor” nodes to include: Sentiment analysis of top pages SERP volatility metrics Content freshness indicators Export Results Connect the output to: Google Sheets / Airtable for analytics Notion / Slack for team reporting Webhook / Database for automated storage Summary This workflow creates an AI-powered Competitor Intelligence System inside n8n by blending: Real-time SERP scraping (Thordata) Automated AI reasoning (OpenAI GPT-4.1-mini) Structured data extraction (LangChain Information Extractors)
By Ranjan DailataAutomate commercial insurance submissions with Google Suite, PDF & email
Overview Supercharge your insurance agency's efficiency with this powerful automation template for n8n. Designed specifically for commercial insurance brokers and agents, this workflow transforms the tedious process of manual application submissions into a streamlined, one-click operation. Stop wasting hours on administrative tasks and start closing more deals. This template handles everything from reading new applications in a Google Sheet to generating custom PDFs and emailing them to the right carriers all in 40 seconds, allowing you to focus on what matters most: your clients. How it works This workflow provides a powerful foundation for automating your commercial insurance submissions. It's designed to save you hours of manual work by streamlining the entire process from application intake to carrier communication. At a high level, this is what the flow does: Fetches New Applications: Automatically reads new insurance applications from a designated Google Sheet. Filters Suitable Carriers: Filters a built-in list of carriers to find the best matches for each application based on revenue and industry requirements. Generates Professional PDFs: For each matched carrier, it automatically generates a professional PDF application using a pre-formatted Google Docs template. Distributes to Carriers: Emails the personalized application and unique PDF attachment to each matched carrier. Creates a Summary Report: Once all submissions are complete, it generates a clean HTML summary report and emails it to the broker. Set up steps Estimated Set Up Time: 10-15 minutes This template is designed for a quick setup. The detailed, step-by-step instructions are included in the Sticky Notes inside the workflow itself. The main setup steps are: Copy the Google Sheet: Make a copy of the provided Google Sheet template to your own Google Drive. Connect Your Google Account: Authorize your Google account for the three required nodes (Google Sheets, Google Drive, and Google Docs). Configure Your Email: Add your email credentials to the two Email Send nodes (one for sending to carriers and one for notifying the broker).
By David Olusola