{"_id":"n8n-embedded-chat-interface","_rev":"6-6382d59ed1191eba2fcb35b5281fe591","name":"n8n-embedded-chat-interface","dist-tags":{"latest":"0.4.0"},"versions":{"0.1.0":{"name":"n8n-embedded-chat-interface","version":"0.1.0","keywords":["n8n","chat","interface","web-component","vue","typescript"],"author":{"name":"symbiosika"},"license":"Apache-2.0","_id":"n8n-embedded-chat-interface@0.1.0","maintainers":[{"name":"wertania","email":"bjoern.enders@googlemail.com"}],"homepage":"https://github.com/symbiosika/n8n-embedded-chat-interface#readme","bugs":{"url":"https://github.com/symbiosika/n8n-embedded-chat-interface/issues"},"dist":{"shasum":"1d94a9dd0d59327100c22eeac967958fff9dfe55","tarball":"https://registry.npmjs.org/n8n-embedded-chat-interface/-/n8n-embedded-chat-interface-0.1.0.tgz","fileCount":8,"integrity":"sha512-i4nIYoHvcUP/s3EEDDcf1OJXcoS6OvVUZdfxZ/neivPjiMm+wHem+asuiFevGQQVzBCp/ujxlcoBQDW9Lm9dOg==","signatures":[{"sig":"MEYCIQD3RbZaKv5pnRthXdHND6pstKpFYZVcCkz4oMMWvq14SAIhAJExTKnZc8YWrM5YaEM0SqWqYNrijc4cxwZ0eaDnJMC6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":310542},"main":"output/index.js","type":"module","gitHead":"39f964b588269e92f5dd9e925c2ef2e92fe682ee","private":false,"scripts":{"dev":"run-p tailwind:watch vite:dev","build":"run-p type-check \"build-only {@}\" --","format":"prettier --write src/","preview":"vite preview","vite:dev":"vite","build-only":"vite build","type-check":"vue-tsc --build","tailwind:watch":"npx tailwindcss -i ./src/styles/input.css -o ./src/styles/output.css --watch"},"_npmUser":{"name":"wertania","email":"bjoern.enders@googlemail.com"},"repository":{"url":"git+https://github.com/symbiosika/n8n-embedded-chat-interface.git","type":"git"},"_npmVersion":"10.9.2","description":"<div align=\"center\">","directories":{},"_nodeVersion":"22.13.1","dependencies":{"vue":"^3.5.13","clsx":"^2.1.1","marked":"^15.0.8","reka-ui":"^2.2.1","vue-i18n":"^12.0.0-alpha.2","dompurify":"^3.2.5","@vueuse/core":"^10.11.1","@11labs/client":"^0.1.4","tailwind-merge":"^3.0.2","lucide-vue-next":"^0.484.0","@tanstack/vue-table":"^8.21.2","tailwindcss-animate":"^1.0.7","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.1","vue-tsc":"^2.2.8","prettier":"3.5.3","typescript":"~5.8.0","@types/node":"^22.13.14","tailwindcss":"^3.4.17","npm-run-all2":"^7.0.2","@iconify/json":"^2.2.319","@vue/tsconfig":"^0.7.0","sass-embedded":"^1.87.0","unplugin-icons":"^22.1.0","@tsconfig/node22":"^22.0.0","@vitejs/plugin-vue":"^5.2.1","unplugin-auto-import":"^19.0.0","@rollup/plugin-replace":"^6.0.2","unplugin-vue-components":"^28.0.0","vite-plugin-vue-devtools":"^7.7.6","prettier-plugin-tailwindcss":"^0.6.9","prettier-plugin-organize-attributes":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/n8n-embedded-chat-interface_0.1.0_1748182966372_0.9275711211418642","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"n8n-embedded-chat-interface","version":"0.2.0","keywords":["n8n","chat","interface","web-component","vue","typescript"],"author":{"name":"symbiosika"},"license":"Apache-2.0","_id":"n8n-embedded-chat-interface@0.2.0","maintainers":[{"name":"wertania","email":"bjoern.enders@googlemail.com"}],"homepage":"https://github.com/symbiosika/n8n-embedded-chat-interface#readme","bugs":{"url":"https://github.com/symbiosika/n8n-embedded-chat-interface/issues"},"dist":{"shasum":"c750f02547d20b55fddacdd7e3f12b1b9bc2fbdc","tarball":"https://registry.npmjs.org/n8n-embedded-chat-interface/-/n8n-embedded-chat-interface-0.2.0.tgz","fileCount":6,"integrity":"sha512-sPyohixNeVfTDkMqTm8O/42053zodtCtWScrc2fAVP1NQebPssmE61TTL6oNHKyXdlWD5QvutBhNql5UpnxZEw==","signatures":[{"sig":"MEUCIQDG290eUBKvPr6vzmi4t6tT5U4LVAQFIEETVIt4JiXD8wIgHSwYEwiLxu7d9PKFfCIg5lOHA1ma+KlCmG+Dlf47ypA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":309448},"main":"output/index.js","type":"module","gitHead":"b59f123b5151343131e1580868c6dc321c19550d","private":false,"scripts":{"dev":"run-p tailwind:watch vite:dev","build":"run-p type-check \"build-only {@}\" --","format":"prettier --write src/","preview":"vite preview","vite:dev":"vite","build-only":"vite build","type-check":"vue-tsc --build","tailwind:watch":"npx tailwindcss -i ./src/styles/input.css -o ./src/styles/output.css --watch"},"_npmUser":{"name":"wertania","email":"bjoern.enders@googlemail.com"},"repository":{"url":"git+https://github.com/symbiosika/n8n-embedded-chat-interface.git","type":"git"},"_npmVersion":"10.9.2","description":"<div align=\"center\">","directories":{},"_nodeVersion":"22.13.1","dependencies":{"vue":"^3.5.13","clsx":"^2.1.1","marked":"^15.0.8","reka-ui":"^2.2.1","vue-i18n":"^12.0.0-alpha.2","dompurify":"^3.2.5","@vueuse/core":"^10.11.1","@11labs/client":"^0.1.4","tailwind-merge":"^3.0.2","lucide-vue-next":"^0.484.0","@tanstack/vue-table":"^8.21.2","tailwindcss-animate":"^1.0.7","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.1","vue-tsc":"^2.2.8","prettier":"3.5.3","typescript":"~5.8.0","@types/node":"^22.13.14","tailwindcss":"^3.4.17","npm-run-all2":"^7.0.2","@iconify/json":"^2.2.319","@vue/tsconfig":"^0.7.0","sass-embedded":"^1.87.0","unplugin-icons":"^22.1.0","@tsconfig/node22":"^22.0.0","@vitejs/plugin-vue":"^5.2.1","unplugin-auto-import":"^19.0.0","@rollup/plugin-replace":"^6.0.2","unplugin-vue-components":"^28.0.0","vite-plugin-vue-devtools":"^7.7.6","prettier-plugin-tailwindcss":"^0.6.9","prettier-plugin-organize-attributes":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/n8n-embedded-chat-interface_0.2.0_1748183477419_0.8410882188886275","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"n8n-embedded-chat-interface","version":"0.2.1","keywords":["n8n","chat","interface","web-component","vue","typescript"],"author":{"name":"symbiosika"},"license":"Apache-2.0","_id":"n8n-embedded-chat-interface@0.2.1","maintainers":[{"name":"wertania","email":"bjoern.enders@googlemail.com"}],"homepage":"https://github.com/symbiosika/n8n-embedded-chat-interface#readme","bugs":{"url":"https://github.com/symbiosika/n8n-embedded-chat-interface/issues"},"dist":{"shasum":"18c7226ea4688958ffc4066986f3b4c681cedf2e","tarball":"https://registry.npmjs.org/n8n-embedded-chat-interface/-/n8n-embedded-chat-interface-0.2.1.tgz","fileCount":5,"integrity":"sha512-Cc8CIbl/uMIoJo6bxTh+bwT3ZhEoi0Dq51g83vXjwivEU8H5TSO3V82+FrtOTsoBDHfbRqPFq4whlYrsIn0HPQ==","signatures":[{"sig":"MEYCIQC0vGh/SMuSlExzLsD+KzgZSHmN0f56rf3kU8RXJMwk9AIhAIUo25UtufcFTt2F01QzdakwuCks1dAIktXFjxjy8zDi","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":305162},"main":"output/index.js","type":"module","gitHead":"0622098bbcf5ba6a4e3388e92c22d2c8717dc0d2","private":false,"scripts":{"dev":"run-p tailwind:watch vite:dev","build":"run-p type-check \"build-only {@}\" --","format":"prettier --write src/","preview":"vite preview","vite:dev":"vite","build-only":"vite build","type-check":"vue-tsc --build","tailwind:watch":"npx tailwindcss -i ./src/styles/input.css -o ./src/styles/output.css --watch"},"_npmUser":{"name":"wertania","email":"bjoern.enders@googlemail.com"},"repository":{"url":"git+https://github.com/symbiosika/n8n-embedded-chat-interface.git","type":"git"},"_npmVersion":"10.9.2","description":"<div align=\"center\">","directories":{},"_nodeVersion":"22.13.1","dependencies":{"vue":"^3.5.13","clsx":"^2.1.1","marked":"^15.0.8","reka-ui":"^2.2.1","vue-i18n":"^12.0.0-alpha.2","dompurify":"^3.2.5","@vueuse/core":"^10.11.1","@11labs/client":"^0.1.4","tailwind-merge":"^3.0.2","lucide-vue-next":"^0.484.0","@tanstack/vue-table":"^8.21.2","tailwindcss-animate":"^1.0.7","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.1","vue-tsc":"^2.2.8","prettier":"3.5.3","typescript":"~5.8.0","@types/node":"^22.13.14","tailwindcss":"^3.4.17","npm-run-all2":"^7.0.2","@iconify/json":"^2.2.319","@vue/tsconfig":"^0.7.0","sass-embedded":"^1.87.0","unplugin-icons":"^22.1.0","@tsconfig/node22":"^22.0.0","@vitejs/plugin-vue":"^5.2.1","unplugin-auto-import":"^19.0.0","@rollup/plugin-replace":"^6.0.2","unplugin-vue-components":"^28.0.0","vite-plugin-vue-devtools":"^7.7.6","prettier-plugin-tailwindcss":"^0.6.9","prettier-plugin-organize-attributes":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/n8n-embedded-chat-interface_0.2.1_1748183661737_0.975576695025917","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"n8n-embedded-chat-interface","version":"0.2.2","keywords":["n8n","chat","interface","web-component","vue","typescript"],"author":{"name":"symbiosika"},"license":"Apache-2.0","_id":"n8n-embedded-chat-interface@0.2.2","maintainers":[{"name":"wertania","email":"bjoern.enders@googlemail.com"}],"homepage":"https://github.com/symbiosika/n8n-embedded-chat-interface#readme","bugs":{"url":"https://github.com/symbiosika/n8n-embedded-chat-interface/issues"},"dist":{"shasum":"404186ea81aba89989c29a078ee35266a05978f9","tarball":"https://registry.npmjs.org/n8n-embedded-chat-interface/-/n8n-embedded-chat-interface-0.2.2.tgz","fileCount":7,"integrity":"sha512-2peB8FAAp4NIerP5vW9AuTXpzg75hIgAlAYTwtpzXAWTs9FKFYCEb6yw4wrPeM+J8uuvKohDY05jfF0W/4oF6g==","signatures":[{"sig":"MEQCIAhadNYEvHHA9ouneFajQWJ0xrWmOhHVpCGBG3jveF3lAiAdf8xTR4k8LqOTL5OapUaODtXefWZLxvxmJqfW1CyuLQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":592936},"main":"output/index.js","type":"module","gitHead":"c5ca7526b3007fc99f6087099d7808c0c8318872","private":false,"scripts":{"dev":"run-p tailwind:watch vite:dev","build":"run-p type-check \"build-only {@}\" --","format":"prettier --write src/","preview":"vite preview","vite:dev":"vite","build-only":"vite build","type-check":"vue-tsc --build","tailwind:watch":"npx tailwindcss -i ./src/styles/input.css -o ./src/styles/output.css --watch"},"_npmUser":{"name":"wertania","email":"bjoern.enders@googlemail.com"},"repository":{"url":"git+https://github.com/symbiosika/n8n-embedded-chat-interface.git","type":"git"},"_npmVersion":"11.4.2","description":"<div align=\"center\">","directories":{},"_nodeVersion":"22.13.1","dependencies":{"vue":"^3.5.13","clsx":"^2.1.1","marked":"^15.0.8","reka-ui":"^2.2.1","vue-i18n":"^12.0.0-alpha.2","dompurify":"^3.2.5","@vueuse/core":"^10.11.1","@11labs/client":"^0.1.4","tailwind-merge":"^3.0.2","lucide-vue-next":"^0.484.0","@tanstack/vue-table":"^8.21.2","tailwindcss-animate":"^1.0.7","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.1","vue-tsc":"^2.2.8","prettier":"3.5.3","typescript":"~5.8.0","@types/node":"^22.13.14","tailwindcss":"^3.4.17","npm-run-all2":"^7.0.2","@iconify/json":"^2.2.319","@vue/tsconfig":"^0.7.0","sass-embedded":"^1.87.0","unplugin-icons":"^22.1.0","@tsconfig/node22":"^22.0.0","@vitejs/plugin-vue":"^5.2.1","unplugin-auto-import":"^19.0.0","@rollup/plugin-replace":"^6.0.2","unplugin-vue-components":"^28.0.0","vite-plugin-vue-devtools":"^7.7.6","prettier-plugin-tailwindcss":"^0.6.9","prettier-plugin-organize-attributes":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/n8n-embedded-chat-interface_0.2.2_1753004473529_0.32328463397881113","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"n8n-embedded-chat-interface","version":"0.3.0","keywords":["n8n","chat","interface","web-component","vue","typescript"],"author":{"name":"symbiosika"},"license":"Apache-2.0","_id":"n8n-embedded-chat-interface@0.3.0","maintainers":[{"name":"wertania","email":"bjoern.enders@googlemail.com"}],"homepage":"https://github.com/symbiosika/n8n-embedded-chat-interface#readme","bugs":{"url":"https://github.com/symbiosika/n8n-embedded-chat-interface/issues"},"dist":{"shasum":"d57217330001d4aabcb43690288d99bd5df79b7f","tarball":"https://registry.npmjs.org/n8n-embedded-chat-interface/-/n8n-embedded-chat-interface-0.3.0.tgz","fileCount":7,"integrity":"sha512-BfqH6QvyH8YMxh8ZxqaUQT4a6Ify6S3G8w7S7fvli4PumTE5kUwm2gTJ93nHlu7kDTgnXULyyQTlMYnNaVoKsw==","signatures":[{"sig":"MEYCIQCMoCe7Lp9OzYa9pK8OH5HjWxC43sF+tqoOmANBIU2W6wIhAPY6xpW37zLVVb/dd/h9u2d2x6cnzyCUy/oh8Ad+SMKM","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":600927},"main":"output/index.js","type":"module","gitHead":"0afa891677703c642a907922c18a54390fbcd074","private":false,"scripts":{"dev":"run-p tailwind:watch vite:dev","demo":"vite build && npx http-server . -p 8000","build":"run-p type-check \"build-only {@}\" --","format":"prettier --write src/","preview":"vite preview","vite:dev":"vite","build-only":"vite build","type-check":"vue-tsc --build","tailwind:watch":"npx tailwindcss -i ./src/styles/input.css -o ./src/styles/output.css --watch"},"_npmUser":{"name":"wertania","email":"bjoern.enders@googlemail.com"},"repository":{"url":"git+https://github.com/symbiosika/n8n-embedded-chat-interface.git","type":"git"},"_npmVersion":"11.4.2","description":"<div align=\"center\">","directories":{},"_nodeVersion":"22.13.1","dependencies":{"vue":"^3.5.13","clsx":"^2.1.1","marked":"^15.0.8","reka-ui":"^2.2.1","vue-i18n":"^12.0.0-alpha.2","dompurify":"^3.2.5","@vueuse/core":"^10.11.1","@11labs/client":"^0.1.4","tailwind-merge":"^3.0.2","lucide-vue-next":"^0.484.0","@tanstack/vue-table":"^8.21.2","tailwindcss-animate":"^1.0.7","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.1","vue-tsc":"^2.2.8","prettier":"3.5.3","typescript":"~5.8.0","@types/node":"^22.13.14","tailwindcss":"^3.4.17","npm-run-all2":"^7.0.2","@iconify/json":"^2.2.319","@vue/tsconfig":"^0.7.0","sass-embedded":"^1.87.0","unplugin-icons":"^22.1.0","@tsconfig/node22":"^22.0.0","@vitejs/plugin-vue":"^5.2.1","unplugin-auto-import":"^19.0.0","@rollup/plugin-replace":"^6.0.2","unplugin-vue-components":"^28.0.0","vite-plugin-vue-devtools":"^7.7.6","prettier-plugin-tailwindcss":"^0.6.9","prettier-plugin-organize-attributes":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/n8n-embedded-chat-interface_0.3.0_1753008673314_0.1800668816132167","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"n8n-embedded-chat-interface","version":"0.4.0","private":false,"type":"module","main":"output/index.js","repository":{"type":"git","url":"git+https://github.com/symbiosika/n8n-embedded-chat-interface.git"},"keywords":["n8n","chat","interface","web-component","vue","typescript"],"author":{"name":"symbiosika"},"license":"Apache-2.0","scripts":{"dev":"run-p tailwind:watch vite:dev","vite:dev":"vite","tailwind:watch":"npx tailwindcss -i ./src/styles/input.css -o ./src/styles/output.css --watch","build":"run-p type-check \"build-only {@}\" --","preview":"vite preview","build-only":"vite build","type-check":"vue-tsc --build","format":"prettier --write src/","demo":"vite build && npx http-server . -p 8000"},"dependencies":{"@11labs/client":"^0.1.4","@tanstack/vue-table":"^8.21.2","@vueuse/core":"^10.11.1","class-variance-authority":"^0.7.1","clsx":"^2.1.1","dompurify":"^3.2.5","lucide-vue-next":"^0.484.0","marked":"^15.0.8","reka-ui":"^2.2.1","tailwind-merge":"^3.0.2","tailwindcss-animate":"^1.0.7","vue":"^3.5.13","vue-i18n":"^12.0.0-alpha.2"},"devDependencies":{"@iconify/json":"^2.2.319","@rollup/plugin-replace":"^6.0.2","@tsconfig/node22":"^22.0.0","@types/node":"^22.13.14","@vitejs/plugin-vue":"^5.2.1","@vue/tsconfig":"^0.7.0","npm-run-all2":"^7.0.2","prettier":"3.5.3","prettier-plugin-organize-attributes":"^1.0.0","prettier-plugin-tailwindcss":"^0.6.9","sass-embedded":"^1.87.0","tailwindcss":"^3.4.17","typescript":"~5.8.0","unplugin-auto-import":"^19.0.0","unplugin-icons":"^22.1.0","unplugin-vue-components":"^28.0.0","vite":"^6.2.1","vite-plugin-vue-devtools":"^7.7.6","vue-tsc":"^2.2.8"},"_id":"n8n-embedded-chat-interface@0.4.0","gitHead":"2f49cd04cef8c645c201ffa9bf528d16c6b95c34","description":"<div align=\"center\">","bugs":{"url":"https://github.com/symbiosika/n8n-embedded-chat-interface/issues"},"homepage":"https://github.com/symbiosika/n8n-embedded-chat-interface#readme","_nodeVersion":"22.13.1","_npmVersion":"11.4.2","dist":{"integrity":"sha512-4oeU/XMm5sNTwLb7+6/VJhGaexmYs/3U/B7VB6ITQA64X6EFCnqxBNHRhvZR7ht2RDtT/+qGGx4JqqOAHNbE1g==","shasum":"11bc80ccefffc5544d07d4340a1de20cb29cff61","tarball":"https://registry.npmjs.org/n8n-embedded-chat-interface/-/n8n-embedded-chat-interface-0.4.0.tgz","fileCount":7,"unpackedSize":601679,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCFqiKILt9T+cRGfqp/etEQDsMKJD0/SKWvkD+GeL99YQIgWc8ZcsIce/7RZuzkaoXLQRe6sLDWNPZ9M7LWBY4xzPs="}]},"_npmUser":{"name":"wertania","email":"bjoern.enders@googlemail.com"},"directories":{},"maintainers":[{"name":"wertania","email":"bjoern.enders@googlemail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/n8n-embedded-chat-interface_0.4.0_1753350005515_0.5609023377322633"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-25T14:22:46.371Z","modified":"2025-07-24T09:40:05.902Z","0.1.0":"2025-05-25T14:22:46.554Z","0.2.0":"2025-05-25T14:31:17.635Z","0.2.1":"2025-05-25T14:34:21.956Z","0.2.2":"2025-07-20T09:41:13.726Z","0.3.0":"2025-07-20T10:51:13.493Z","0.4.0":"2025-07-24T09:40:05.710Z"},"bugs":{"url":"https://github.com/symbiosika/n8n-embedded-chat-interface/issues"},"author":{"name":"symbiosika"},"license":"Apache-2.0","homepage":"https://github.com/symbiosika/n8n-embedded-chat-interface#readme","keywords":["n8n","chat","interface","web-component","vue","typescript"],"repository":{"type":"git","url":"git+https://github.com/symbiosika/n8n-embedded-chat-interface.git"},"description":"<div align=\"center\">","maintainers":[{"name":"wertania","email":"bjoern.enders@googlemail.com"}],"readme":"# 🤖 N8N Embedded Chat Interface\n\n<div align=\"center\">\n\n![N8N Chat Interface](https://img.shields.io/badge/n8n-Chat%20Interface-FF6D5A?style=for-the-badge&logo=n8n)\n![Vue.js](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D)\n![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)\n![Web Components](https://img.shields.io/badge/Web%20Components-29ABE2?style=for-the-badge&logo=webcomponents.org&logoColor=white)\n\n**Extend your website with a chat interface for your n8n AI workflow!**\n\n[🚀 Demo](#demo) • [📖 Documentation](#installation) • [🤝 Contributing](#contributing) • [💬 Community](#community)\n\n</div>\n\n---\n\n## 🎯 What is this?\n\nThe **N8N Embedded Chat Interface** is a modern, embeddable native web component that enables you to integrate n8n workflows as interactive chatbots on any website. With just a few lines of HTML code, you can transform your n8n automations into user-friendly conversational interfaces.\n\n![widget](./docs/animation_preview.gif)\n\n### ✨ Key Features\n\n- 🔌 **Plug & Play**: Easy integration with a single `<script>` tag + 1 line of HTML code\n- 🌍 **Multilingual**: Internationalization (i18n) support (German, English)\n- 📦 **Ready to host on your own domain**: You can host the bundle on your domain with zero other dependencies\n\n## 🚀 Usage\n\nSetup your website with the following code:\n\n```html\n<!-- Add these lines to your website -->\n<script src=\"https://cdn.jsdelivr.net/npm/n8n-embedded-chat-interface@latest/output/index.js\"></script>\n\n<n8n-embedded-chat-interface label=\"My AI Assistant\" hostname=\"https://your-n8n-webhook.com/webhook/:id-of-your-webhook-node\" open-on-start=\"false\"> </n8n-embedded-chat-interface>\n```\n\n## 🔧 N8N Workflow Setup\n\n### 1. Configure Webhook Node\n\nCreate a new workflow in n8n with a **Webhook** Trigger Node:\n\n```json\n{\n\t\"httpMethod\": \"POST\",\n\t\"responseMode\": \"responseNode\"\n}\n```\n\nThe body will look like this:\n\n```json\n{\n\t\"chatInput\": \"Hello, how are you?\",\n\t\"sessionId\": \"xxx\" // second message will have a sessionId\n}\n```\n\n### 2. Implement Chat Logic\n\nAdd your chat logic (e.g., OpenAI, local AI, or custom logic).\n\n![n8n.png](./docs/n8n.png)\n\n### 3. Response Format\n\nYour workflow must return the following JSON format:\n\n```json\n{\n\t\"output\": \"Chatbot response\",\n\t\"sessionId\": \"session-id\"\n}\n```\n\n**That's it!** 🎉 Your website now has an intelligent chatbot.\n\n## Local Build and development\n\n```bash\ngit clone https://github.com/symbiosika/n8n-embedded-chat-interface\ncd n8n-embedded-chat-interface\nnpm install\nnpm run build\nnpm run dev\n```\n\nTo run a demo please create a copy of \"demo\\index.html.sample\" to \"demo\\index.html\" and run:\n\n```bash\nnpm run demo\n```\n\nThen open the Browser on:\nhttp://localhost:8000/demo/\n\n## 🛠️ Configuration\n\n### Basic Configuration\n\n```html\n<n8n-embedded-chat-interface label=\"Your Bot Name\" description=\"Bot description\" hostname=\"https://your-n8n-webhook-url.com\" mode=\"n8n\" open-on-start=\"false\"> </n8n-embedded-chat-interface>\n```\n\n### Available Attributes\n\n| Attribute       | Type   | Default   | Description                              |\n| --------------- | ------ | --------- | ---------------------------------------- |\n| `label`         | String | `\"\"`      | Chat window title                        |\n| `description`   | String | `\"\"`      | Chatbot description (currently not used) |\n| `hostname`      | String | `\"\"`      | **Required**: URL to your n8n webhook    |\n| `mode`          | String | `\"n8n\"`   | Chat mode (currently only n8n)           |\n| `open-on-start` | String | `\"false\"` | Open chat on page load                   |\n\n### 🎨 Custom Color Schemes\n\nYou can customize the appearance of the chat interface by specifying custom colors. The component supports up to 10 different color properties:\n\n```html\n<n8n-embedded-chat-interface \n  label=\"Custom Themed Chat\" \n  hostname=\"https://your-n8n-webhook.com\"\n  primary-color=\"#2563eb\"\n  secondary-color=\"#64748b\"\n  background-color=\"#f8fafc\"\n  text-color=\"#1e293b\"\n  accent-color=\"#3b82f6\"\n  surface-color=\"#ffffff\"\n  border-color=\"#e2e8f0\"\n  success-color=\"#16a34a\"\n  warning-color=\"#f59e0b\"\n  error-color=\"#dc2626\"\n  open-on-start=\"false\">\n</n8n-embedded-chat-interface>\n```\n\n#### Color Properties\n\n| Property           | Description                           | Example Values                     |\n| ------------------ | ------------------------------------- | ---------------------------------- |\n| `primary-color`    | Primary brand color (buttons, header) | `#2563eb`, `rgb(37,99,235)`, `blue` |\n| `secondary-color`  | Secondary accent color               | `#64748b`, `gray`, `hsl(215,25%,27%)` |\n| `background-color` | Main background color                | `#f8fafc`, `white`, `#111827`      |\n| `text-color`       | Primary text color                   | `#1e293b`, `black`, `#f9fafb`      |\n| `accent-color`     | Highlight and accent elements        | `#3b82f6`, `rgb(59,130,246)`       |\n| `surface-color`    | Cards and surface backgrounds        | `#ffffff`, `#1f2937`               |\n| `border-color`     | Border and divider color             | `#e2e8f0`, `#374151`               |\n| `success-color`    | Success messages and indicators      | `#16a34a`, `green`                 |\n| `warning-color`    | Warning messages and indicators      | `#f59e0b`, `orange`                |\n| `error-color`      | Error messages and indicators        | `#dc2626`, `red`                   |\n\n#### Supported Color Formats\n\n- **Hex colors**: `#ff0000`, `#f00`, `#ff0000ff`\n- **RGB/RGBA**: `rgb(255,0,0)`, `rgba(255,0,0,0.5)`\n- **HSL/HSLA**: `hsl(0,100%,50%)`, `hsla(0,100%,50%,0.5)`\n- **Named colors**: `red`, `blue`, `transparent`, etc.\n\n#### Security & Validation\n\nAll color values are automatically validated to prevent CSS injection attacks. Invalid color values will be ignored and logged as warnings in the browser console.\n\n#### Example Themes\n\n**Corporate Blue Theme:**\n```html\n<n8n-embedded-chat-interface \n  primary-color=\"#2563eb\" \n  secondary-color=\"#64748b\" \n  background-color=\"#f8fafc\" \n  text-color=\"#1e293b\"\n  hostname=\"your-webhook-url\">\n</n8n-embedded-chat-interface>\n```\n\n**Dark Theme:**\n```html\n<n8n-embedded-chat-interface \n  primary-color=\"#3b82f6\" \n  background-color=\"#111827\" \n  text-color=\"#f9fafb\" \n  surface-color=\"#1f2937\"\n  hostname=\"your-webhook-url\">\n</n8n-embedded-chat-interface>\n```\n\n## 🗺️ Roadmap\n\n### 🎯 Planned Features\n\n- [ ] **Voice Chat**: Speech input and output\n\n## 🤝 Contributing\n\nWe welcome every contribution! 🎉\n\n<div align=\"center\">\n\n**Like the project? Give us a ⭐ on GitHub!**\n\n[⭐ Star on GitHub](https://github.com/symbiosika/n8n-embedded-chat-interface) • [🐛 Report Bug](https://github.com/symbiosika/n8n-embedded-chat-interface/issues) • [💡 Request Feature](https://github.com/symbiosika/n8n-embedded-chat-interface/issues)\n\n</div>\n","readmeFilename":"README.md"}