Launched this week
N8N Chat UI
Beautiful, no-code, on-brand AI chat widgets for n8n
590 followers
Beautiful, no-code, on-brand AI chat widgets for n8n
590 followers
N8N Chat UI is a no-code builder for branded AI chat widgets, built for n8n users, agencies, SaaS teams, and businesses. Design a mobile-friendly chat experience with live preview, then connect it to any n8n workflow and embed it anywhere. Unlike default n8n chat, it adds deep customization, streaming, voice and file uploads, flexible layouts, and a JavaScript API for advanced integrations.
Payment Required
Launch Team / Built With
AWS Activate CreditsCredits that fuel your startup’s next milestone
Promoted
Let's keep the conversations going, when staff aren't around, who's there to help your customer?
@ross_jenkins That's the one I hear most from small businesses. Most questions come in the evening and at weekends, exactly when nobody's there to answer.
Two setups we like for out-of-hours:
Answer what it can, hand off what it can't. The bot answers common questions from your own content. When it gets stuck, it takes the visitor's email and passes the conversation to your inbox, so someone picks it up first thing. We have a recipe for this: https://n8nchatui.com/recipes/ai-faq-chatbot-email-handoff
Change the greeting by time of day. During opening hours it can offer "chat to the team". After hours it can say "we're closed, but I can help or take a message". The JavaScript API docs have an example.
Curious what others do: do you let a bot handle everything out of hours, or only collect details for a person to follow up?
— Dani
Evening update from the team 🌙
Thank you all, this has been an amazing day. Over 70 comments and lots of great questions. Here's what you've told us so far:
🔁 Live takeover was the most-asked feature: people want a person to be able to step into the chat. We've sketched out how to build it, and it's now near the top of our list.
🔐 Shared computers and signed-in users: a sharp question about clearing chats when someone signs out. There's a way to handle it today, and a simpler built-in option is on our list.
🕘 Out of hours: most of you agree on letting the bot answer what it can and collect details for anything else, so nothing gets lost overnight.
If you're just arriving: build a widget on our homepage without signing up and tell us what's missing. The launch offer ($59 lifetime license instead of $149, plus 2,500 Managed credits) runs until 25 November.
One question for tonight: what's the first workflow you'd put behind a chat window? 👇
— Dani & Ross
Congrats Dani and Ross! 🎉 Quick disclosure: I work with Dani at Millside Creative. I hadn't used N8N Chat UI before, so I tried it on a client site.
I connected Claude through the MCP server and asked it to match the widget to the client's branding. It set the colours, welcome message and starter prompts in one go, so I had something on-brand to look at straight away instead of a blank builder. Great time saver!
Good luck today!
@joanne_davies4 Thanks Jo, really glad it saved you time! 🙌 That's the use case we had in mind: let Claude do the first pass on the branding so you're tweaking something close, not starting from blank.
If anyone else wants to try it, the MCP setup is in the docs at n8nchatui.com. Happy to answer questions here.
Does the chat keep the conversation if the visitor refreshes the page or comes back later?
@ayberkbozkus Yes, by default. The widget saves the conversation in the visitor's browser, so it's still there after a refresh, on other pages of your site, or when they come back days later on the same device. It stays until they click the reset button in the chat.
The widget also sends the same session ID with every message, so if your n8n workflow uses a memory node keyed on that ID, your bot remembers the context too, not just the chat window.
A few options depending on what you need:
Start fresh every time: turn on "clear chat on reload" in the widget settings and each page load starts a new conversation.
Separate conversations on different pages: set a session key in the widget's metadata, for example one chat for product pages and another for support. Docs here: https://n8nchatui.com/docs/configuration/session-management
Across devices: history is stored per browser, so a visitor who switches from phone to laptop starts a new chat. If you need history across devices, you'd save it in your n8n workflow against a logged-in user's ID.
— Dani
Ross, good launch. What does the analytics look like... does it primarily focus on track conversations through to lead conversions, or widget usage and message counts?
@iamanantgupta Thanks! At the moment the built-in analytics focus on usage, not conversions. For each Managed widget, over any date range, you get:
total messages and unique conversations
average messages per conversation and your busiest times
failed requests, with error details so you can fix workflow problems
the browsers and devices people use, plus a map of where your visitors are
Conversions aren't built in, mostly because "converted" means something different for every business: a booked call, a captured email, a sale. Two ways people track it today:
In n8n: when the workflow captures a lead or books a call, it also sends the record to your CRM, a sheet or an analytics tool, tagged with the session ID. That gives you conversation-to-conversion tracking you define yourself.
On your site: the widget has JavaScript callbacks (widget opened, message sent, response received and more) that you can link to GA4, a Meta pixel or anything else. Docs: https://n8nchatui.com/docs/configuration/event-callbacks
Conversion tracking in the dashboard is a fair request, and we're noting it.
— Dani
Read in your pinned maker comment about the file uploads. Are file types & upload sizes configurable per widget?
@roopreddy Yes, everything is set per widget. In the widget editor you can:
Turn uploads on or off.
Choose the accepted file types. Tick any of these:
documents: PDF, TXT, RTF, MD, DOC, DOCX, XML, JSON
spreadsheets: CSV, XLS, XLSX
images: JPG, JPEG, PNG, GIF, BMP, WEBP, SVG
Set the maximum file size in MB.
Set the maximum number of files per message.
New widgets start with JPG, PNG and PDF, up to 5 files of 10 MB each. You can change all of that.
So a support widget can accept screenshots only, while a quoting widget on another page takes PDFs and spreadsheets. Files arrive in your n8n workflow along with the message, ready to use.
One practical note: your n8n server also limits how big an incoming request can be, so if you raise the size a lot, check that n8n will accept it.
— Dani
Can we restrict upload file types and sizes before files reach our n8n workflow?
@michelle_bankas Yes. In each widget's settings you choose which file types are accepted (PDF, DOCX, CSV, XLSX, PNG, JPG and more), a maximum file size and how many files can go with one message. The widget checks every file when the visitor picks it. If it's the wrong type or too large, the visitor sees a message straight away and the file is never sent, so normal uploads that break your rules never reach your workflow.
One tip if this is about security, not just keeping things tidy: those checks run in the visitor's browser and go by the file extension. For a hard guarantee, add a quick check on the file's type and size at the start of your n8n workflow too. It's a standard extra safety step with any upload form, and it takes one IF node.
— Dani
@dani_martin1 Thanks Dani, that answers it! Good to know the widget checks are separate from the checks in the workflow. The IF node tip is helpful.