Anderson Adelino This workflow corresponds to n8n.io template #6399 — we link there as the canonical source.
This workflow follows the Agent → OpenAI Chat recipe pattern — see all workflows that pair these two integrations.
The workflow JSON
Copy or download the full n8n JSON below. Paste it into a new n8n workflow, add your credentials, activate. Full import guide →
{
"nodes": [
{
"id": "251e4d25-f04b-4861-b4fb-c9aa63654d2e",
"name": "Voice Interface Endpoint",
"type": "n8n-nodes-base.webhook",
"position": [
880,
180
],
"parameters": {
"path": "voice-assistant",
"options": {},
"responseMode": "responseNode"
},
"typeVersion": 2
},
{
"id": "299de4f0-2bdd-46da-bfdb-35128a6240e0",
"name": "Voice Assistant UI",
"type": "n8n-nodes-base.html",
"position": [
1100,
180
],
"parameters": {
"html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>AI Voice Assistant</title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <style>\n body {\n background-color: #000;\n color: white;\n font-family: 'Segoe UI', sans-serif;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n overflow: hidden;\n }\n\n .orb-container {\n position: relative;\n }\n\n .orb {\n width: 200px;\n height: 200px;\n background: radial-gradient(circle at 30% 30%, #00ffff, #004d4d);\n border-radius: 50%;\n box-shadow: 0 0 40px #00ffff88;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2; /* Ensures clickability */\n }\n\n .ring {\n position: absolute;\n top: -20px;\n left: -20px;\n width: 240px;\n height: 240px;\n border-radius: 50%;\n box-shadow: 0 0 30px #00ffff55;\n animation: pulse 2s infinite;\n z-index: 1;\n pointer-events: none; /* Prevents click interference */\n }\n \n .orb.listening {\n background: radial-gradient(circle at 30% 30%, #00ffcc, #005c5c);\n box-shadow: 0 0 50px #00ffff;\n }\n\n .orb.playing {\n background: radial-gradient(circle at 30% 30%, #ff00ff, #520052);\n box-shadow: 0 0 50px #ff00ff99;\n }\n\n .ring.listening {\n animation: vibrate 0.4s infinite;\n }\n\n .ring.playing {\n animation: glow 1s ease-in-out infinite alternate;\n }\n\n @keyframes pulse {\n 0%, 100% { transform: scale(1); opacity: 0.6; }\n 50% { transform: scale(1.2); opacity: 1; }\n }\n\n @keyframes vibrate {\n 0% { transform: scale(1.05); }\n 50% { transform: scale(1.15); }\n 100% { transform: scale(1.05); }\n }\n\n @keyframes glow {\n 0% { box-shadow: 0 0 40px #ff00ff88; }\n 100% { box-shadow: 0 0 60px #ff00ffcc; }\n }\n\n .status-text {\n margin-top: 20px;\n font-size: 18px;\n color: #aaa;\n font-weight: 300;\n font-style: italic;\n }\n </style>\n</head>\n<body>\n <div class=\"orb-container\">\n <div id=\"ring\" class=\"ring\"></div>\n <div id=\"orb\" class=\"orb\" title=\"Click to speak with AI\"></div>\n </div>\n <div id=\"status\" class=\"status-text\">Click to speak</div>\n\n <audio id=\"beep\" src=\"https://www.soundjay.com/button/sounds/button-3.mp3\" preload=\"auto\"></audio>\n\n <script>\n const orb = document.getElementById('orb');\n const ring = document.getElementById('ring');\n const statusText = document.getElementById('status');\n const beep = document.getElementById('beep');\n\n let recognition;\n let lastTranscript = \"\";\n let silenceTimeout;\n\n // Initialize speech recognition\n function startRecognition() {\n if (!('webkitSpeechRecognition' in window)) {\n alert('This browser does not support speech recognition.');\n return;\n }\n\n beep.play();\n recognition = new webkitSpeechRecognition();\n recognition.lang = 'en-US'; // Change to your preferred language\n recognition.interimResults = true;\n recognition.continuous = true;\n lastTranscript = \"\";\n\n recognition.onstart = () => {\n orb.classList.add('listening');\n ring.classList.add('listening');\n statusText.textContent = \"Listening...\";\n };\n\n recognition.onresult = (event) => {\n for (let i = event.resultIndex; i < event.results.length; ++i) {\n if (event.results[i].isFinal) {\n lastTranscript += event.results[i][0].transcript;\n }\n }\n\n // Reset silence timeout\n clearTimeout(silenceTimeout);\n silenceTimeout = setTimeout(stopRecognition, 1000);\n };\n\n recognition.onerror = (event) => {\n console.error('Error:', event.error);\n orb.classList.remove('listening');\n ring.classList.remove('listening');\n statusText.textContent = \"Error: \" + event.error;\n };\n\n recognition.onend = () => {\n orb.classList.remove('listening');\n ring.classList.remove('listening');\n };\n\n recognition.start();\n }\n\n // Stop recognition and send to webhook\n async function stopRecognition() {\n if (recognition) {\n recognition.stop();\n orb.classList.remove('listening');\n ring.classList.remove('listening');\n statusText.textContent = \"Processing...\";\n\n if (lastTranscript.trim() !== '') {\n try {\n // IMPORTANT: Replace YOUR_WEBHOOK_URL_HERE with the actual webhook URL from the 'Audio Processing Endpoint' node\n const response = await fetch(\"YOUR_WEBHOOK_URL_HERE\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ question: lastTranscript.trim() })\n });\n\n if (!response.ok) throw new Error(\"Server response error\");\n\n const blob = await response.blob();\n const audioURL = URL.createObjectURL(blob);\n const audio = new Audio(audioURL);\n\n audio.onplay = () => {\n orb.classList.add('playing');\n ring.classList.add('playing');\n statusText.textContent = \"Responding...\";\n };\n\n audio.onended = () => {\n orb.classList.remove('playing');\n ring.classList.remove('playing');\n statusText.textContent = \"Click to speak\";\n };\n\n audio.play();\n\n } catch (err) {\n console.error(\"Error sending or processing response:\", err);\n statusText.textContent = \"Error communicating with AI\";\n }\n }\n }\n }\n\n // Click handler for the orb\n orb.addEventListener('click', () => {\n if (recognition && recognition.running) {\n stopRecognition();\n } else {\n startRecognition();\n }\n });\n </script>\n</body>\n</html>\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
],
"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": "## \u2699\ufe0f 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": "## \ud83c\udfa8 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
}
],
"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
}
]
]
}
}
}
Pro
For the full experience including quality scoring and batch install features for each workflow upgrade to Pro
About this workflow
This 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.
Source: https://n8n.io/workflows/6399/ — original creator credit. Request a take-down →
Related workflows
Workflows that share integrations, category, or trigger type with this one. All free to copy and import.
My workflow 15. Uses httpRequest, memoryBufferWindow, agent, lmChatOpenAi. Webhook trigger; 74 nodes.
HTTP Request, Memory Buffer Window, Agent +5
All-in-One Telegram/Baserow AI Assistant 🤖🧠 Voice/Photo/Save Notes/Long Term Mem. Uses stickyNote, lmChatOpenAi, telegram, agent. Webhook trigger; 48 nodes.
OpenAI Chat, Telegram, Agent +5
This n8n workflow transforms your Telegram bot into a powerful personal assistant that handles voice, photo, and text messages. The assistant uses AI to interpret messages, save important details as l
OpenAI Chat, Telegram, Agent +5
All-in-One Telegram/Baserow AI Assistant 🤖🧠 Voice/Photo/Save Notes/Long Term Mem. Uses lmChatOpenAi, telegram, agent, openAi. Webhook trigger; 48 nodes.
OpenAI Chat, Telegram, Agent +5
This workflow transforms WhatsApp into a powerful personal AI using n8n + Green-API. Send text or voice messages — the assistant understands intent and handles daily tasks automatically. 💰 Expense & i
Tool Calculator, Google Sheets Tool, OpenAI Chat +10