Interfaz Web de Agentes AI Multiespecializados

Genera una interfaz web interactiva para chatear con múltiples agentes de IA (general, base de datos, web, RAG) en n8n, mostrando respuestas en tiempo real y gestionando la lógica de enrutamiento.

AIn8n 24 nodos 7 tipos conectado

Cargando workflow...

Nodos

Webhook Code

RespondToWebhook StickyNote

Switch

Agent

LmChatOpenAi

Herramientas

Webhook

JavaScript

Switch

Langchain Agent

OpenAI

Detalles

ID: 9901
Nodos: 24
Conex.: Sí
Tipos: 7

Pertenece a:

IT & DevOps webhook javascript openai

¿Qué hace este workflow?

Este workflow permite crear una interfaz web totalmente interactiva dentro de n8n para comunicarse con un sistema de agentes de IA multiespecializados. Utiliza un Webhook para la entrada, enruta las peticiones con un Switch, y delega a agentes de IA específicos (general, base de datos, web, RAG) para procesar consultas complejas. Las respuestas se generan en tiempo real usando modelos de OpenAI y Langchain, ofreciendo una experiencia conversacional fluida y dinámica. Ideal para empresas que buscan desarrollar chatbots avanzados, asistentes virtuales o herramientas de soporte interno que requieren acceso a diversas fuentes de información y capacidades analíticas. Permite mejorar la eficiencia operativa y ofrecer respuestas precisas de forma automatizada, reduciendo la carga de trabajo manual y escalando las interacciones inteligentes.

¿Cómo funciona?

Este workflow usa 24 nodos conectados con 7 tipos diferentes: Webhook, Code, RespondToWebhook, StickyNote, Switch y 2 más. La estructura está totalmente conectada — listo para importar.

¿Para quién es?

Diseñado para equipos de IT & DevOps. Nivel avanzado — recomendado para usuarios experimentados. Alto valor de negocio: automatiza una tarea recurrente con impacto directo.

¿Lo quieres en tu empresa?

→

Lo implementamos por ti end-to-end: integración, deploy, mantenimiento y soporte. Consultoría B2B con Genai Sapiens.

Hablemos de tu proyecto

¿Quieres aprender a hacerlo?

→

Sprints de 30 días con companion IA + comunidad. Aprende n8n, automatización y agentes IA desde cero o nivel avanzado.

Ver formación Momentum

Workflows similares

Gestión Dinámica de LLMs: Optimiza Costos y Rendimiento con Switching Inteligente

avanzado ★ Alto

Extrae Datos Estructurados de Ciudades y Estados con LLM y n8n

intermedio ★ Alto

\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":"Respond to Webhook","type":"n8n-nodes-base.respondToWebhook","position":[384,0],"parameters":{"options":{},"respondWith":"binary"},"typeVersion":1.4},{"id":"a32db689-90a0-4e80-a0a1-02c5ccdadedf","name":"Sticky Note","type":"n8n-nodes-base.stickyNote","position":[-48,-80],"parameters":{"color":5,"width":640,"height":224,"content":"## Module - Create UI interface"},"typeVersion":1},{"id":"6e5fecbb-b0d3-4e11-8729-030c1786d27a","name":"Sticky Note1","type":"n8n-nodes-base.stickyNote","position":[-752,-80],"parameters":{"width":672,"height":1168,"content":"# 🎨 n8n AI Agent Interface Template\n\nBeautiful web UI for your AI agents - no frontend skills needed!\n\n## ⚡ Quick Setup (2 workflows)\n\n### Workflow 1: Display Interface (3 nodes)\n```\nWebhook (GET) → Code Node → Respond to Webhook\n```\n1. **Webhook**: GET, path `/your-interface`\n2. **Code Node**: Paste entire `main.js`\n3. **Respond**: Binary, property `data`\n\n### Workflow 2: Process Requests (5+ nodes)\n```\nWebhook (POST) → Switch → AI Agents → Code → Respond\n```\n1. **Webhook (POST)**: path `/webhook-endpoint`\n2. **Switch**: Route by `{{ $json.body.agent_type }}`\n3. **AI Agents**: 4 nodes (general, database, web, rag)\n4. **Code Node**:\n```javascript\nconst webhookData = $('Webhook').first().json.body;\nconst aiResponse = $input.first().json;\n\nreturn [{\n json: {\n response: aiResponse.output || aiResponse.text || aiResponse.response,\n agent_type: webhookData.agent_type\n }\n}];\n```\n5. **Respond**: Return JSON\n\n## 🔧 Update in main.js\n\n**Line 847**: Change webhook URL\n```javascript\nconst WEBHOOK_URL = '/webhook/webhook-endpoint';\n```\n\n## ✨ Features\n✅ Real-time AI responses \n✅ Loading animations \n✅ 4 agent types \n✅ Dark/light mode \n✅ Mobile responsive\n\n"},"typeVersion":1},{"id":"f963c77a-0296-4e46-a8c1-94c73913ce40","name":"Sticky Note2","type":"n8n-nodes-base.stickyNote","position":[-48,176],"parameters":{"color":3,"width":1376,"height":1184,"content":"## Module - AI Agent"},"typeVersion":1},{"id":"ec32a56d-3fe8-4155-b47e-da1032c6eadf","name":"Webhook1","type":"n8n-nodes-base.webhook","position":[0,656],"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":"Switch","type":"n8n-nodes-base.switch","position":[256,624],"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":"AI Agent - General","type":"@n8n/n8n-nodes-langchain.agent","position":[528,240],"parameters":{"text":"c'est un test simplement","options":{},"promptType":"define"},"typeVersion":2.2},{"id":"71c05943-b548-4d56-9b02-b4c394612d2f","name":"OpenAI Chat Model","type":"@n8n/n8n-nodes-langchain.lmChatOpenAi","position":[496,384],"parameters":{"model":{"__rl":true,"mode":"list","value":"gpt-4.1-mini"},"options":{}},"credentials":{"openAiApi":{"id":"Eyt0iPqZCLeZxqlC","name":"OpenAi account"}},"typeVersion":1.2},{"id":"20bfc5c1-8093-4533-85fa-49f9f5eff917","name":"OpenAI Chat Model1","type":"@n8n/n8n-nodes-langchain.lmChatOpenAi","position":[496,656],"parameters":{"model":{"__rl":true,"mode":"list","value":"gpt-4.1-mini"},"options":{}},"credentials":{"openAiApi":{"id":"Eyt0iPqZCLeZxqlC","name":"OpenAi account"}},"typeVersion":1.2},{"id":"1f1fc350-0ed9-433f-9527-a8c356f23d4a","name":"OpenAI Chat Model2","type":"@n8n/n8n-nodes-langchain.lmChatOpenAi","position":[496,944],"parameters":{"model":{"__rl":true,"mode":"list","value":"gpt-4.1-mini"},"options":{}},"credentials":{"openAiApi":{"id":"Eyt0iPqZCLeZxqlC","name":"OpenAi account"}},"typeVersion":1.2},{"id":"21e8e7c1-4b78-46c0-98ba-24006592a737","name":"OpenAI Chat Model3","type":"@n8n/n8n-nodes-langchain.lmChatOpenAi","position":[496,1232],"parameters":{"model":{"__rl":true,"mode":"list","value":"gpt-4.1-mini"},"options":{}},"credentials":{"openAiApi":{"id":"Eyt0iPqZCLeZxqlC","name":"OpenAi account"}},"typeVersion":1.2},{"id":"02e03088-7c40-421d-ab15-ccacdb2735c7","name":"Respond to Webhook1","type":"n8n-nodes-base.respondToWebhook","position":[1088,240],"parameters":{"options":{}},"typeVersion":1.4},{"id":"988aa029-e110-42b3-b62e-156ee79d08c7","name":"Respond to Webhook2","type":"n8n-nodes-base.respondToWebhook","position":[1088,512],"parameters":{"options":{}},"typeVersion":1.4},{"id":"6dbf918b-fdb9-4032-95a5-ece4aee5c63f","name":"Respond to Webhook3","type":"n8n-nodes-base.respondToWebhook","position":[1088,784],"parameters":{"options":{}},"typeVersion":1.4},{"id":"477b257c-d283-4783-a505-29f0c2f50782","name":"Respond to Webhook4","type":"n8n-nodes-base.respondToWebhook","position":[1088,1072],"parameters":{"options":{}},"typeVersion":1.4},{"id":"e28c1572-dec7-4b90-be86-46b434366678","name":"AI Agent Database","type":"@n8n/n8n-nodes-langchain.agent","position":[528,512],"parameters":{"text":"Configure Database Agent","options":{},"promptType":"define"},"typeVersion":2.2},{"id":"1bda319b-4aff-47bd-9350-0e337ecef08e","name":"AI Agent - Web","type":"@n8n/n8n-nodes-langchain.agent","position":[528,784],"parameters":{"text":"Configure Web Agent","options":{},"promptType":"define"},"typeVersion":2.2},{"id":"d0a6542a-bea2-472f-b254-7d30c95fc8f9","name":"AI Agent - Rag","type":"@n8n/n8n-nodes-langchain.agent","position":[528,1072],"parameters":{"text":"Configure Rag Agent","options":{},"promptType":"define"},"typeVersion":2.2},{"id":"4c290b16-aac4-4dad-8e29-8df886a191f5","name":"Format Response - Code","type":"n8n-nodes-base.code","position":[880,240],"parameters":{"jsCode":"// Récupère les données du webhook (le message de l'utilisateur)\nconst webhookData = $('Webhook1').first().json.body;\n\n// Récupère la réponse de l'agent IA\nconst aiAgentOutput = $input.first().json;\n\n// Extrait le texte de réponse de l'IA (les agents IA peuvent renvoyer différents formats)\nconst aiResponseText = aiAgentOutput.output || \n aiAgentOutput.text || \n aiAgentOutput.response || \n aiAgentOutput.message ||\n JSON.stringify(aiAgentOutput);\n\n// Formate la réponse pour l'interface utilisateur\nreturn [{\n json: {\n response: aiResponseText, // La réponse de l'IA\n agent_type: webhookData.agent_type, // Type d'agent utilisé\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 Response - Code1","type":"n8n-nodes-base.code","position":[880,512],"parameters":{"jsCode":"// Récupère les données du webhook (le message de l'utilisateur)\nconst webhookData = $('Webhook1').first().json.body;\n\n// Récupère la réponse de l'agent IA\nconst aiAgentOutput = $input.first().json;\n\n// Extrait le texte de réponse de l'IA (les agents IA peuvent renvoyer différents formats)\nconst aiResponseText = aiAgentOutput.output || \n aiAgentOutput.text || \n aiAgentOutput.response || \n aiAgentOutput.message ||\n JSON.stringify(aiAgentOutput);\n\n// Formate la réponse pour l'interface utilisateur\nreturn [{\n json: {\n response: aiResponseText, // La réponse de l'IA\n agent_type: webhookData.agent_type, // Type d'agent utilisé\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 Response - Code2","type":"n8n-nodes-base.code","position":[880,784],"parameters":{"jsCode":"// Récupère les données du webhook (le message de l'utilisateur)\nconst webhookData = $('Webhook1').first().json.body;\n\n// Récupère la réponse de l'agent IA\nconst aiAgentOutput = $input.first().json;\n\n// Extrait le texte de réponse de l'IA (les agents IA peuvent renvoyer différents formats)\nconst aiResponseText = aiAgentOutput.output || \n aiAgentOutput.text || \n aiAgentOutput.response || \n aiAgentOutput.message ||\n JSON.stringify(aiAgentOutput);\n\n// Formate la réponse pour l'interface utilisateur\nreturn [{\n json: {\n response: aiResponseText, // La réponse de l'IA\n agent_type: webhookData.agent_type, // Type d'agent utilisé\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 Response - Code3","type":"n8n-nodes-base.code","position":[880,1072],"parameters":{"jsCode":"// Récupère les données du webhook (le message de l'utilisateur)\nconst webhookData = $('Webhook1').first().json.body;\n\n// Récupère la réponse de l'agent IA\nconst aiAgentOutput = $input.first().json;\n\n// Extrait le texte de réponse de l'IA (les agents IA peuvent renvoyer différents formats)\nconst aiResponseText = aiAgentOutput.output || \n aiAgentOutput.text || \n aiAgentOutput.response || \n aiAgentOutput.message ||\n JSON.stringify(aiAgentOutput);\n\n// Formate la réponse pour l'interface utilisateur\nreturn [{\n json: {\n response: aiResponseText, // La réponse de l'IA\n agent_type: webhookData.agent_type, // Type d'agent utilisé\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":"91970e2d-6858-4881-8f5b-eea4c3a82eb1","connections":{"Switch":{"main":[[{"node":"AI Agent - General","type":"main","index":0}],[{"node":"AI Agent Database","type":"main","index":0}],[{"node":"AI Agent - Web","type":"main","index":0}],[{"node":"AI Agent - Rag","type":"main","index":0}]]},"Webhook":{"main":[[{"node":"Code in JavaScript","type":"main","index":0}]]},"Webhook1":{"main":[[{"node":"Switch","type":"main","index":0}]]},"AI Agent - Rag":{"main":[[{"node":"Format Response - Code3","type":"main","index":0}]]},"AI Agent - Web":{"main":[[{"node":"Format Response - Code2","type":"main","index":0}]]},"AI Agent Database":{"main":[[{"node":"Format Response - Code1","type":"main","index":0}]]},"OpenAI Chat Model":{"ai_languageModel":[[{"node":"AI Agent - General","type":"ai_languageModel","index":0}]]},"AI Agent - General":{"main":[[{"node":"Format Response - Code","type":"main","index":0}]]},"Code in JavaScript":{"main":[[{"node":"Respond to Webhook","type":"main","index":0}]]},"OpenAI Chat Model1":{"ai_languageModel":[[{"node":"AI Agent Database","type":"ai_languageModel","index":0}]]},"OpenAI Chat Model2":{"ai_languageModel":[[{"node":"AI Agent - Web","type":"ai_languageModel","index":0}]]},"OpenAI Chat Model3":{"ai_languageModel":[[{"node":"AI Agent - Rag","type":"ai_languageModel","index":0}]]},"Format Response - Code":{"main":[[{"node":"Respond to Webhook1","type":"main","index":0}]]},"Format Response - Code1":{"main":[[{"node":"Respond to Webhook2","type":"main","index":0}]]},"Format Response - Code2":{"main":[[{"node":"Respond to Webhook3","type":"main","index":0}]]},"Format Response - Code3":{"main":[[{"node":"Respond to Webhook4","type":"main","index":0}]]}}}