Saltar al contenido

Asistente de Voz con Interfaz HTML y OpenAI

Crea una interfaz de asistente de voz con n8n y OpenAI. Permite a los usuarios interactuar por voz con una IA que responde con síntesis de voz, todo desde el navegador.

AI 14 nodos 8 tipos conectado
Cargando workflow...

Nodos

Webhook Html RespondToWebhook Agent MemoryBufferWindow OpenAi StickyNote LmChatOpenAi

Herramientas

n8n OpenAI Langchain Web Speech API

Detalles

ID
6399
Nodos
14
Conex.
Sí
Tipos
8

Pertenece a:

IT & DevOps openai langchain

¿Qué hace este workflow?

Este workflow te permite implementar de forma sencilla un asistente de voz conversacional utilizando la potencia de n8n, OpenAI y una interfaz HTML personalizada. Los usuarios pueden interactuar verbalmente con la inteligencia artificial a través de su navegador, recibiendo respuestas generadas con síntesis de voz, creando una experiencia dinámica y accesible. Es ideal para mejorar la interacción en páginas web, proporcionar soporte instantáneo o desarrollar herramientas internas interactivas. La solución gestiona la entrada de voz, el procesamiento de la consulta con OpenAI (incluyendo memoria conversacional para mantener el contexto) y la generación de la respuesta audible. Transforma cualquier sitio web en una plataforma de diálogo interactivo, eliminando barreras y ofreciendo una nueva dimensión en la comunicación digital. Optimiza la experiencia del usuario y abre nuevas posibilidades para la automatización de interacciones complejas.

¿Cómo funciona?

Este workflow usa 14 nodos conectados con 8 tipos diferentes: Webhook, Html, RespondToWebhook, Agent, MemoryBufferWindow y 3 más. La estructura está totalmente conectada — listo para importar.

¿Para quién es?

Diseñado para equipos de IT & DevOps. Nivel intermedio — necesitas familiaridad con n8n.

¿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

Genera consultas SQL y visualiza datos desde texto con IA avanzada

avanzado ★ Alto

Optimiza OpenAI en n8n: Cambio Dinámico de LLM con Reintento y Validación

avanzado ★ Alto

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

Mejora tu Refinamiento Scrum: IA para Historias de Usuario y Criterios DoR

avanzado ★ Alto

Genera citaciones con IA de OpenAI para respuestas RAG precisas

avanzado ★ Alto

Crea un Chatbot IA experto con RAG para respuestas precisas y ágiles

avanzado ★ Alto
\n\n\n"},"typeVersion":1.2},{"id":"cbfca6b1-5b62-414d-a71b-e5a6b03236f1","name":"Send HTML Interface","type":"n8n-nodes-base.respondToWebhook","position":[1300,180],"parameters":{"options":{},"respondWith":"text","responseBody":"={{ $json.html }}"},"typeVersion":1.1},{"id":"028000ca-2232-4168-867b-88f53eab9760","name":"Audio Processing Endpoint","type":"n8n-nodes-base.webhook","position":[720,720],"webhookId":"287d40b1-4172-4ba0-9a1d-6d971dd9cf68","parameters":{"path":"process-audio","options":{},"httpMethod":"POST","responseMode":"responseNode"},"typeVersion":2},{"id":"d86e58ed-a0be-4853-a1dd-7d59bd6d2c1f","name":"Process User Query","type":"@n8n/n8n-nodes-langchain.agent","position":[940,720],"parameters":{"text":"={{ $json.body.question }}","options":{"systemMessage":"You are a helpful AI assistant. Respond in a friendly and conversational manner."},"promptType":"define"},"typeVersion":1.8},{"id":"9f336bfd-1dfc-4d4a-9fad-74d3df57bf0c","name":"Conversation Memory","type":"@n8n/n8n-nodes-langchain.memoryBufferWindow","position":[1040,920],"parameters":{"sessionKey":"voice-assistant-session","sessionIdType":"customKey","contextWindowLength":30},"typeVersion":1.3},{"id":"4e400995-440d-4a2b-927c-9e612a649fe8","name":"Send Audio Response","type":"n8n-nodes-base.respondToWebhook","position":[1520,720],"parameters":{"options":{},"respondWith":"binary"},"typeVersion":1.1},{"id":"e468576e-22b6-44ef-9b0e-d2a95d72d2aa","name":"Generate Voice Response","type":"@n8n/n8n-nodes-langchain.openAi","disabled":true,"position":[1300,720],"parameters":{"input":"={{ $json.output }}","voice":"onyx","options":{},"resource":"audio"},"typeVersion":1.8},{"id":"be60d217-d893-497f-87ff-a882ef11afc9","name":"Sticky Note","type":"n8n-nodes-base.stickyNote","position":[740,-20],"parameters":{"color":5,"width":840,"height":420,"content":"## VOICE ASSISTANT INTERFACE\n\nThis webhook serves the HTML interface with the interactive orb that users click to speak with the AI assistant.\n\nAccess this webhook URL in your browser to use the voice assistant."},"typeVersion":1},{"id":"12cca86e-0868-4569-b89c-7f0d638254d1","name":"Sticky Note1","type":"n8n-nodes-base.stickyNote","position":[620,500],"parameters":{"color":3,"width":1100,"height":580,"content":"## BACKEND PROCESSING\n\nThis section handles:\n1. Receiving transcribed speech from the frontend\n2. Processing through AI with conversation memory\n3. Converting response to speech\n4. Sending audio back to the browser"},"typeVersion":1},{"id":"e5a3196b-2865-4a62-b2d9-d755a67fcb38","name":"Template Description","type":"n8n-nodes-base.stickyNote","position":[-120,-20],"parameters":{"color":6,"width":600,"height":1460,"content":"## Voice Assistant Interface with n8n and OpenAI\n\nThis workflow creates a voice-activated AI assistant interface that runs directly in your browser. Users can click on a glowing orb to speak with the AI, which responds with voice using OpenAI's text-to-speech capabilities.\n\n## Who is it for?\n\nThis template is perfect for:\n- Developers looking to add voice interfaces to their applications\n- Customer service teams wanting to create voice-enabled support systems\n- Content creators building interactive voice experiences\n- Anyone interested in creating their own \"Alexa-like\" assistant\n\n## How it works\n\nThe workflow consists of two main parts:\n\n1. **Frontend Interface**: A beautiful animated orb that users click to activate voice recording\n2. **Backend Processing**: Receives the audio transcription, processes it through an AI agent with memory, and returns voice responses\n\nThe system uses:\n- Web Speech API for voice recognition (browser-based)\n- OpenAI GPT-4o-mini for intelligent responses\n- OpenAI Text-to-Speech for voice synthesis\n- Session memory to maintain conversation context\n\n## Setup requirements\n\n- n8n instance (self-hosted or cloud)\n- OpenAI API key with access to:\n - GPT-4o-mini model\n - Text-to-Speech API\n- Modern web browser with Web Speech API support (Chrome, Edge, Safari)\n\n## How to set up\n\n1. Import the workflow into your n8n instance\n2. Add your OpenAI credentials to both OpenAI nodes\n3. Copy the webhook URL from the \"Audio Processing Endpoint\" node\n4. Edit the \"Voice Assistant UI\" node and replace `YOUR_WEBHOOK_URL_HERE` with your webhook URL\n5. Access the \"Voice Interface Endpoint\" webhook URL in your browser\n6. Click the orb and start talking!\n\n## How to customize the workflow\n\n- **Change the AI personality**: Edit the system message in the \"Process User Query\" node\n- **Modify the visual style**: Customize the CSS in the \"Voice Assistant UI\" node\n- **Add more capabilities**: Connect additional tools to the AI Agent\n- **Change the voice**: Select a different voice in the \"Generate Voice Response\" node\n- **Adjust memory**: Modify the context window length in the \"Conversation Memory\" node\n\n## Demo\n\nWatch the template in action: https://youtu.be/0bMdJcRMnZY"},"typeVersion":1},{"id":"eba88594-9e7e-47b1-b1de-5e19e4607035","name":"Setup Instructions","type":"n8n-nodes-base.stickyNote","position":[1820,-40],"parameters":{"color":7,"width":400,"height":500,"content":"## ⚙️ SETUP INSTRUCTIONS\n\n1. **Add OpenAI Credentials**:\n - Click on \"GPT-4o-mini Model\" node\n - Add your OpenAI API credentials\n - Do the same for \"Generate Voice Response\" node\n\n2. **Configure Webhook URL**:\n - Copy the webhook URL from \"Audio Processing Endpoint\"\n - Edit \"Voice Assistant UI\" node\n - Replace YOUR_WEBHOOK_URL_HERE with the copied URL\n\n3. **Test the Assistant**:\n - Open the \"Voice Interface Endpoint\" webhook URL in your browser\n - Click the glowing orb\n - Allow microphone permissions\n - Start speaking!"},"typeVersion":1},{"id":"8eb03b82-cc02-46d9-b9b6-873718202e32","name":"Customization Options","type":"n8n-nodes-base.stickyNote","position":[1820,560],"parameters":{"color":7,"width":400,"height":440,"content":"## 🎨 CUSTOMIZATION OPTIONS\n\n**Language Support**:\n- Change `recognition.lang = 'en-US'` in the HTML\n- Options: 'pt-BR', 'es-ES', 'fr-FR', etc.\n\n**Voice Options**:\n- alloy: Neutral and balanced\n- echo: Warm and conversational\n- fable: Expressive and dynamic\n- onyx: Deep and authoritative\n- nova: Friendly and upbeat\n- shimmer: Soft and gentle\n\n**Visual Themes**:\n- Modify CSS colors for different moods\n- Adjust animation speeds\n- Change orb size and effects"},"typeVersion":1},{"id":"c7d2aac4-5cb2-405c-8a4f-0f1020d76eec","name":"GPT-4o-mini Model","type":"@n8n/n8n-nodes-langchain.lmChatOpenAi","disabled":true,"position":[900,920],"parameters":{"model":{"__rl":true,"mode":"list","value":"gpt-4o-mini","cachedResultName":"gpt-4o-mini"},"options":{}},"typeVersion":1.2}],"pinData":{},"connections":{"GPT-4o-mini Model":{"ai_languageModel":[[{"node":"Process User Query","type":"ai_languageModel","index":0}]]},"Process User Query":{"main":[[{"node":"Generate Voice Response","type":"main","index":0}]]},"Voice Assistant UI":{"main":[[{"node":"Send HTML Interface","type":"main","index":0}]]},"Conversation Memory":{"ai_memory":[[{"node":"Process User Query","type":"ai_memory","index":0}]]},"Generate Voice Response":{"main":[[{"node":"Send Audio Response","type":"main","index":0}]]},"Voice Interface Endpoint":{"main":[[{"node":"Voice Assistant UI","type":"main","index":0}]]},"Audio Processing Endpoint":{"main":[[{"node":"Process User Query","type":"main","index":0}]]}}}