Package Your n8n Workflows Into Full Web Apps (Step-By-Step)

Key Concepts

• Client-branded apps
• Multi-instance vs. multi-tenant architecture
• Low-code/no-code development
• Dynamic front-end
• Backend services
• Webhooks
• API key security
• Authentication
• Database management
• Workflow automation
• LLM integration
• Image generation
• Content publishing

Application Overview

The video demonstrates how to build a client-branded, multi-step article generation application without writing code, using a combination of low-code/no-code tools:

• UXPilot.ai: For designing the user interface (UI)
• Lovable: For creating the dynamic front-end application
• Superbase: For handling user authentication, database management, and secure storage of sensitive information (e.g., API keys)
• N8N: For backend automation, including article outline generation, article creation, image generation, and publishing to WordPress

Architectural Decision: Multi-Instance vs. Multi-Tenant

The video emphasizes the importance of choosing between a multi-instance (separate app per client) and a multi-tenant (shared app for all clients) architecture.

• Multi-Instance:
  • Pros: Easier data isolation, simpler customization per client, direct integration of N8N scenarios with client accounts.
  • Cons: Higher subscription costs, more complex user onboarding (requires spinning up new applications).
• Multi-Tenant:
  • Pros: Cheaper to scale, suitable for SaaS model with integrated payments and user accounts.
  • Cons: Harder to customize per client, single point of failure, requires careful data separation logic to prevent clients from accessing each other's data. Webhooks must be generic and not tied to individual clients.

The example app is built with a multi-instance approach in mind, but the underlying logic can be adapted for a multi-tenant setup with some modifications to make the N8N scenarios generic.

Payment Integration

The video suggests handling payment outside the core application during the onboarding process, either manually or via an automation platform that updates the user table in Superbase. Direct Stripe integration with Lovable is possible but not recommended for production without a developer review.

UI Design with UXPilot.ai

UXPilot.ai is used to create the front-end designs for the application. The process involves:

1. Creating a wireframe layout using natural language prompts.
2. Generating high-fidelity (hi-fi) designs with full color and detail.
3. Iterating on the designs and updating elements as needed.

Front-End Development with Lovable

Lovable is used to build the user interface (front-end) of the application. The initial prompt provided to Lovable includes:

• Instructions for generating the UI for each step of the article generation process (generate outline, generate article, edit and publish article).
• Specifications for the forms and fields required for each step.
• Instructions to use Superbase for authentication, including login and logout screens.
• Attached images of the UI designs generated by UXPilot.ai as a visual reference.

The video demonstrates how to connect Lovable to Superbase to handle user authentication and data storage.

Backend Automation with N8N

N8N is used to automate the backend processes of the application, including:

• Creating an article outline: A webhook receives the article title and instructions, sends them to Perplexity (a language model with real-time web access) to generate a summary of facts and information, and then uses Anthropic Claude to create an article outline based on the summary.
• Generating an article: A webhook receives the article title, outline, tone of voice, keywords, and citations, and uses Anthropic Claude to write an article based on the provided information. The prompt includes instructions for the introduction, key takeaways, and sources section.
• Generating an image: A webhook receives the article title and uses file.ai to generate an image based on the title.
• Publishing to WordPress: A webhook receives the article title, featured image, and article content, and publishes the article to WordPress.

The video emphasizes the importance of testing each N8N scenario separately before integrating it with Lovable.

Integrating Lovable with N8N via Webhooks

The video demonstrates how to integrate Lovable with N8N by calling webhooks from Lovable. The process involves:

1. Creating a webhook in N8N for each backend process.
2. Providing Lovable with the webhook URL and the expected JSON body parameters.
3. Instructing Lovable to store the webhook URL in Superbase secrets for security.
4. Instructing Lovable to populate the response from the webhook in the appropriate UI elements.

The video also demonstrates how to handle API key security by storing API keys in Superbase secrets and passing them to N8N via authorization headers.

Security Considerations

The video highlights the importance of security when building client-branded apps, including:

• Storing API keys and other sensitive information in Superbase secrets.
• Using authorization headers to authenticate webhook calls.
• Implementing proper data separation logic in multi-tenant applications to prevent clients from accessing each other's data.

Deployment and User Management

The video demonstrates how to deploy the application to a Lovable subdomain and how to add new user accounts for clients via Superbase. It also mentions the option of connecting a custom domain to the application.

Enhancements and Future Development

The video concludes by suggesting several ways to extend and improve the application, including:

• Adding more features to the article generation process, such as social sharing.
• Creating other N8N scenarios to automate additional tasks.
• Improving the UI and user experience.

Notable Quotes

• "Before you start building, you need to make one important design decision and that is are you going to go the multi-instance route... or are you going to go multi-tenant..."
• "...it is very important that you start thinking like a product manager or even better like a solutions architect before you start building."
• "I'm seeing a lot of people online add API keys directly to this chat interface and to me it just seems very very dangerous."

Technical Terms

• Vibe coding: Low-code/no-code development.
• Multi-instance architecture: An architecture where each client has their own separate instance of the application.
• Multi-tenant architecture: An architecture where all clients share the same instance of the application.
• Webhooks: Automated HTTP requests triggered by events in one system to update another system.
• API keys: Codes used to identify and authenticate applications or users accessing an API.
• LLM (Large Language Model): A deep learning model that can generate human-quality text.
• Edge functions: Serverless functions that run on the edge of a network, closer to the user.

Synthesis/Conclusion

The video provides a detailed walkthrough of building a client-branded article generation application using a combination of low-code/no-code tools. It emphasizes the importance of architectural decisions, security considerations, and proper integration between different platforms. The video also highlights the potential of using these tools to create custom and user-friendly applications for clients without writing code.