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
Framer AI AgentsDesign and publish professional sites with AI
Promoted
@lakshya_singh Thanks! Hopefully you get to play around with our no-code designer, it's very easy to use, but can match brand colours like no tomorrow!
Congrats to the Team on the launch 🎉
We're currently sitting at 4th place but would love to taste the gold, can you help us make that happen?
Looking to get some feedback on our tool, so go check it out here: https://n8nchatui.com
@ross_jenkins Thanks, Ross! 🙌 What a day so far. Thank you to everyone who's tried it, asked questions and shared ideas. Some of these comments have gone straight onto our list.
If you haven't had a look yet, try the widget designer on the homepage. You can build one without signing up, so tell us what you think. Honest feedback is the best support you can give us today.
— Dani
looks cool!
@louislecat Thanks! 😊 If you get a chance, try it from the homepage. You can design a widget without signing up. If anything's missing, let us know!
starting a chat with sendMessage() when someone idles on the checkout page is a smart one, most widgets just sit in the corner waiting
on the managed widgets, if someone copies the embed snippet onto their own site does the domain restriction block it completely??? or do a few messages still eat credits befor it kicks in???
@thamibenjelloun Thanks! Yes, that's one of our favourite uses for it. A widget that waits in the corner gets ignored. A well-timed "Need a hand with anything before you check out?" gets replies.
On your question: it's blocked completely. Messages don't get through before the block applies.
When a page loads a Managed widget, our server checks which site is asking before it sends the widget code. If that site isn't on your allowed-domains list, the widget doesn't load: no chat bubble, nothing to type into. Credits only get used when a message actually goes through, so a copied snippet on someone else's site costs you nothing.
A few things worth knowing:
Add every version of your address, for example both https://example.com and https://www.example.com. The match is exact, so if you leave one out, the widget won't load on that version of your site.
If the allowed-domains list is empty, the widget runs anywhere. Set your domains before you go live.
Messages started with sendMessage() go through the same route as typed ones, so on a Managed widget each one uses a credit. If you use it on the checkout page, add a rate limit or only send once per visitor.
If you'd rather not think about credits at all, that's what the Standalone widget is for. It's covered by the lifetime license ($59 during launch), and messages go straight to your own n8n webhook, so there are no credits involved. The trade-off is that the webhook is visible in your page code, and the domain lock, rate limits and analytics are Managed features. The launch license also comes with 2,500 Managed credits that never expire, so you can use both.
Thanks for checking it out!
— Dani
@ross_jenkins Love how easy it looks to customize the chat widget without writing code. Can we preview changes live before publishing?
@ross_jenkins @rohit62661 Yes. The editor shows the real widget on the same page as the settings, and every change appears straight away, so you can try colours, sizes and layouts and even chat with it before anything goes live. Nothing on your site changes until you save.
What happens when you save depends on the widget type:
Managed widgets: click "Save & Apply" and your live site updates straight away. The embed code stays the same, so you don't have to paste anything again.
Standalone widgets: your settings live inside the embed code, so after saving you copy the updated snippet back into your site.
You can also try the designer on our homepage without signing up: https://n8nchatui.com
— Dani
Does the widget keep the conversation history if a visitor reloads the page or comes back the next day? Also wondering how streaming behaves when the n8n workflow takes a while to respond.
@yuv23639661 History: yes. The conversation is saved in the visitor's browser, so it survives a reload and is still there when they come back the next day on the same device. It stays until they click reset. The widget also keeps the same session ID, so if your workflow uses an n8n memory node keyed on it, the bot remembers the context too. If you'd rather start fresh on every visit, there's a "clear chat on reload" setting.
Streaming: the widget detects it automatically, so you only switch it on in n8n: set the Chat Trigger or Webhook to "Streaming" and enable streaming on your AI Agent node. Here's what the visitor sees:
Right after sending, a typing indicator appears and stays while your workflow works (calling tools, looking things up and so on).
As soon as n8n starts sending text, it appears word by word.
Without streaming, the typing indicator stays until the whole reply is ready, then it appears in one go.
For slow workflows, the main tip is to make sure something reaches the visitor in under a minute or so. Very long silences can hit network timeouts, and visitors give up long before that anyway. For heavy jobs, a pattern that works well is to reply straight away with "Give me a moment, I'm checking that for you" and send the full answer by email, or let them ask again when it's ready.
Docs: https://n8nchatui.com/docs/configuration/chat-streaming
— Dani
Passing the current page and user metadata into the workflow is a useful detail. It gives the workflow some context before the visitor types the first message.
@oleksii_sekundant Thanks, that's one of the features people tend to find most useful. It means the bot already has context with the very first message, so it doesn't have to start with "what are you looking at?"
You can pass anything you like: a user ID, plan, cart value, the page they're on. It gets sent to your n8n workflow with every message. The widget also adds a few things by default: the visitor's local time and timezone, browser info, and any URL query parameters (handy for UTM tags). If the metadata needs to change after the page loads, for example when the cart updates, you can change it before each message is sent.
Docs if anyone wants to try it: https://n8nchatui.com/docs/configuration/metadata
— Dani