N8n Saas Builder

• Validated n8n JSON: The clean workflow from the validator
• Design preferences (optional): Color scheme, style, branding
• Webhook URL: Your production n8n webhook URL (or I'll use a placeholder)

Output Format

• Complete Next.js project with all files
• Tailwind CSS styling - Modern, responsive design
• API integration - Connected to your n8n webhook
• Deployment instructions - Ready for Vercel
• README - How to customize and run locally

What Gets Generated

my-saas-app/
├── src/
│   ├── app/
│   │   ├── page.tsx          ← Main landing page with form
│   │   ├── layout.tsx        ← App layout and metadata
│   │   └── globals.css       ← Tailwind imports
│   └── components/
│       ├── InputForm.tsx     ← Dynamic form based on webhook inputs
│       ├── ResultCard.tsx    ← Display webhook response
│       └── LoadingSpinner.tsx
├── public/
├── package.json
├── tailwind.config.js
├── next.config.js
└── README.md

Example Usage

"Build a SaaS frontend for my validated n8n workflow"

"Create a website that connects to my n8n webhook - I want it dark mode with purple accents"

"Turn this workflow into a product my clients can use without seeing n8n"

"/build-saas clean_workflow.json"

Design Options

Style Presets:

• modern - Clean, minimal, lots of whitespace (default)
• glassmorphism - Frosted glass effects, dark mode
• corporate - Professional, trustworthy, blue tones
• playful - Rounded corners, gradients, friendly

Color Schemes:

• Default: Dark mode with purple accents
• Custom: Tell me your brand colors

Best Practices

1. Validate first - Always run n8n-workflow-validator before building UI
2. Test locally - Run npm run dev to test before deploying
3. Set your webhook URL - Replace the placeholder with your real URL
4. Add authentication - For paid products, add Clerk or similar
5. Customize branding - Update colors/logo to match your brand

Limitations

• Requires a validated workflow with a webhook trigger
• Complex multi-step workflows may need manual UI adjustments
• Authentication (Clerk) setup requires additional configuration
• File uploads require extra handling (base64 encoding)

Tech Stack

• Framework: Next.js 14 (App Router)
• Styling: Tailwind CSS
• Icons: Lucide React
• Deployment: Vercel-ready
• Optional Auth: Clerk