Beautiful chat interfaces for your n8n AI agents.
Flowify transforms your n8n webhook endpoints into stunning, production-ready chat experiences. Inspired by ChatGPT, Claude, and Grok – no coding required.
- Modern Chat UI – ChatGPT-quality interfaces with streaming responses, markdown support, and syntax highlighting
- Brand Presets – One-click themes inspired by Grok, Claude, and ChatGPT
- Full Customization – Colors, fonts, avatars, welcome messages, and quick-start prompts
- Shareable Links – Get a beautiful URL for each chat instance
- Multi-Tenant – Manage unlimited chat interfaces from one dashboard
- Real-Time – Streaming responses, typing indicators, and conversation history
- Session Management – Persistent conversations with session tracking
- Analytics – Basic usage metrics and conversation insights
The fastest way to get started:
- Go to flowifychat.lovable.app
- Sign up with your email
- Paste your n8n webhook URL
- Customize the look and feel
- Share your chat link!
Note: Cloud hosting is free but provided on a "best effort" basis. For production use cases, we recommend self-hosting.
Self-hosting gives you full control over your data, custom domains, and infrastructure.
- Node.js 18+ or Bun
- A Supabase account (free tier works great)
- A hosting platform (Vercel, Netlify, Cloudflare Pages, etc.)
git clone https://github.com/magnusfroste/flowifychat.git
cd flowifychat# Using npm
npm install
# Using bun (faster)
bun install-
Create a new project at supabase.com
-
Go to Settings → API and copy your:
- Project URL
- Anon/Public key
-
Run the database migrations. In the Supabase SQL Editor, execute the migrations found in
/supabase/migrations/in order. -
Enable Row Level Security (RLS) on all tables – the migrations should handle this automatically.
Create a .env file in the project root:
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=your-anon-key# Development mode
npm run dev
# Build for production
npm run buildnpm install -g vercel
vercelAdd your environment variables in the Vercel dashboard.
npm run build
# Deploy the 'dist' folder to NetlifyWe're working on an official Docker image. Contributions welcome!
flowifychat/
├── src/
│ ├── components/ # React components
│ ├── pages/ # Route pages
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utilities and helpers
│ ├── theme/ # Theme provider and styles
│ └── integrations/ # Supabase client
├── supabase/
│ ├── functions/ # Edge functions
│ └── migrations/ # Database migrations
└── public/ # Static assets
Flowify includes ready-to-use presets:
| Preset | Style |
|---|---|
| Grok | Dark mode, turquoise accents, X/Twitter aesthetic |
| Claude | Warm paper tones, terracotta accents, elegant typography |
| ChatGPT | Clean white, pill-shaped bubbles, OpenAI style |
| Minimal | Light and understated |
| Professional | Business-ready dark theme |
Every chat instance supports:
- Primary/accent colors
- Background colors and gradients
- Custom fonts
- Avatar images
- Welcome messages
- Quick-start prompt buttons
- Bubble shapes and styles
Flowify works with any n8n workflow that exposes a webhook:
- In n8n, create a workflow with a Webhook trigger
- Configure your AI logic (OpenAI, Anthropic, local LLM, etc.)
- Return a response in this format:
{
"output": "Your AI response here"
}- Copy the webhook URL and paste it into Flowify
Flowify automatically handles:
- Plain text responses
- Markdown formatting
- Code blocks with syntax highlighting
- Streaming responses (when n8n supports it)
- Row Level Security (RLS) – All database tables are protected
- Input Validation – Messages are sanitized before processing
- Rate Limiting – Built-in protection against abuse
- Session Isolation – Each user session is isolated
For production deployments, we recommend:
- Using HTTPS (automatic with most hosting providers)
- Setting up proper authentication for sensitive workflows
- Reviewing and customizing RLS policies for your use case
Contributions are welcome! Here's how to help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
# Clone your fork
git clone https://github.com/YOUR_USERNAME/flowifychat.git
# Install dependencies
bun install
# Start development server
bun run devThis project is open source under the MIT License.
- Issues: GitHub Issues
- Discussions: GitHub Discussions
Let it Flowify 🌊