ChatUI：为 n8n AI Agent 打造的开箱即用聊天界面

ChatUI is a refined chat interface built for Elia Assistant, fully compatible with n8n AI Agent workflows. Key highlights: zero backend architecture (no backend code needed), modern tech stack (React19 + Vite + Tailwind CSS v4), and seamless n8n integration—balancing customizability and ease of use for AI app developers.

Developers face a dilemma when building AI apps: spend time on a custom chat interface or use limited off-the-shelf solutions. ChatUI offers an elegant balance—designed for Elia Assistant and n8n workflows, it enables zero-backend deployment (just frontend static files on n8n).

• React19: Uses latest features (concurrent rendering, auto-batch optimization) for smooth high-frequency message handling.
• Vite: Faster cold start and instant HMR than Webpack, boosting UI debugging efficiency.
• Tailwind CSS v4: Atomic CSS simplifies style adjustments via class combinations, avoiding CSS-component file switching.

1. n8n Integration: Compatible with n8n AI Agent nodes, supports existing workflows, matches official @n8n/chat config, and includes tool calls/context management/streaming responses.
2. Zero Backend: Communicates directly with n8n Webhook nodes—benefits: easy deployment (static files only), centralized logic in n8n, expandable via n8n nodes.
3. UI/UX: Streaming typing effect, Markdown rendering (code blocks/lists), code highlighting, responsive design, theme customization.

Quick Start:

1. Clone project and install dependencies.
2. Configure n8n Webhook endpoint.
3. Build and deploy static files (no backend code). Configuration: Webhook endpoint, authentication methods, interface (title/welcome message/theme), message behavior (typing speed/history length).

• Enterprise Knowledge Assistant: Connect to Confluence/Notion via n8n for employee queries.
• Customer Support: Embed in websites, link to n8n workflows (FAQ/order queries) for 24/7 service.
• Personal AI: Developers prototype AI apps without complex infrastructure.

ChatUI is an alternative (not replacement):

• Modern Stack: React19 + Tailwind CSS v4 (vs official stack).
• Customization: Open-source code allows deep brand/function tweaks.
• Learning: Source code is a reference for chat interface implementation.

ChatUI shows modern frontend + low-code potential—decoupling UI from business logic (UX via frontend, logic via n8n). It benefits:

• n8n users: Out-of-the-box interface.
• Devs: Learn modern React practices.
• Teams: Lower AI app prototype门槛. Its value grows with AI app popularity.