Clone any popular SaaS using Horizons and n8n (No-Code)

Here's a detailed summary of the YouTube video transcript:

Key Concepts

• SAS Product Cloning: Replicating an existing Software as a Service product.
• No-Code Development: Building applications without writing traditional code.
• Hostinger Horizons: A no-code website builder and hosting platform.
• NAN (No-Code AI Network): A platform for creating and deploying AI agents.
• AI Coaching Agent: An AI designed to provide guidance and support, in this case, for career coaching.
• Front-end Development: Creating the user interface and user experience of a website.
• Back-end Automation: Setting up the logic and processes that power the application behind the scenes.
• Webhooks: A mechanism for one application to send real-time data to another application.
• Large Language Models (LLMs): AI models capable of understanding and generating human-like text (e.g., GPT-4.1 Mini, Claude Sonnet 4, Gemini 2.5 Flash, Perplexity).
• Model Selection: The AI agent's ability to choose the most appropriate LLM for a given task.
• Prompt Engineering: Crafting effective instructions for AI models.
• Deployment: Making a website live and accessible on the internet.
• Domain Connection: Linking a custom domain name to a hosted website.
• Name Servers: DNS records that direct traffic to a specific server.

Building a No-Code SAS Clone: Coach AI

This video demonstrates how to clone a real SAS product, Coachhello.ai, from front-end design to back-end automation using Hostinger Horizons and NAN, resulting in a functional AI-powered career coaching service called Coach AI. The process is designed to be accessible even for those new to AI development.

1. Demo and Project Overview

The video begins with a demonstration of the target product, Coachhello.ai, which offers AI coaching services to companies. The cloned product, "Coach AI," will feature an AI-powered career coaching interface. Users can interact with an AI coach through a chat interface, powered by a NAN AI agent in the back end. This agent can access and intelligently select from multiple LLMs, including:

• Claude Sonnet 4: Highlighted as the most powerful for coding tasks.
• Gemini 2.5 Flash
• GPT-4.1 Mini
• Perplexity

The demo showcases the agent automatically choosing the appropriate LLM based on the user's query. For instance, a coding-related question triggers Claude Sonnet 4, while a general career question might use GPT-4.1 Mini. The ultimate goal is to not only build this functionality but also to deploy it as a live website.

2. Front-end Development with Hostinger Horizons

2.1. Hostinger Horizons Platform and Sign-up

• Platform: Hostinger Horizons is presented as a user-friendly, affordable no-code website builder with native hosting.
• Pricing and Discount: A Black Friday sale is ongoing, and an additional 10% discount is available using the coupon code "AI workshop". The starter yearly plan is highlighted as a cost-effective option.
• Sign-up Process: Users are guided through selecting a plan, entering billing information, and applying the coupon. The process includes a free business web hosting and domain name offer with yearly plans.

2.2. Prompt Engineering for Front-end Creation

• Inspiration: The front-end design is inspired by Coachhello.ai's look and feel.
• Prompt Generation: Users are advised to use tools like ChatGPT to generate initial prompts for Hostinger Horizons. The presenter shares a pre-crafted prompt for Coach AI.
• Prompt Structure: The prompt includes:
  • Core Request: "Create a modern, elegant career coaching web app with a clean and warm UI inspired by Coach Hello AI."
  • Key Features: Specifying elements like a full-screen landing page, hero section with bold text, and styling details.
  • "How it Works" Section: Describing user input (career goal, skill, industry) and its transmission via webhook to the back end.
  • Webhook Integration: Explicitly mentioning the webhook URL from the NAN backend for communication.
• Refinement with Screenshots: The platform allows for uploading screenshots to guide the AI in adding specific design elements, such as a header. The presenter demonstrates this by taking a screenshot of Coachhello.ai's header and instructing Horizons to add it.

2.3. Webhook Setup in NAN

• NAN Platform: NAN (No-Code AI Network) is introduced as a no-code platform for creating AI agents. A free account is available.
• Canvas and Webhook Trigger: Users start with a canvas and add a webhook trigger to enable communication between the Hostinger Horizons front-end and the NAN AI agent.
• Webhook Configuration:
  • The HTTP method is changed from GET to POST.
  • A path (e.g., "chat") is defined.
  • The generated webhook URL is copied.
• Integration: This copied webhook URL is then pasted into the Hostinger Horizons prompt, establishing the connection.

2.4. Front-end Preview and Testing

• Preview: Hostinger Horizons provides an "Open preview in new tab" option to view the website.
• Initial Test: A simple "Hello" message is sent through the chat interface to verify that the webhook is receiving information from the front-end and sending it to the NAN backend. The presenter confirms successful data reception in the NAN webhook logs.

3. Back-end Automation with NAN AI Agent

3.1. Importing and Configuring the AI Agent

• Pre-built Agent: The presenter imports a pre-built NAN AI agent blueprint from their community resources.
• Webhook Node Replacement: The existing webhook node in the imported agent is replaced with the newly configured one.
• Response Mechanism: The "Respond immediately" node is changed to "Respond to webhook" to ensure the AI's response is sent back to the front-end.

3.2. AI Agent Logic and LLM Integration

• Prompt Input: The user's message from the webhook is fed into the AI agent's prompt.
• Memory: A session ID (or a similar identifier like IP address) is mapped to the memory component of the agent to enable conversational context and recall past interactions.
• LLM Selection Logic:
  • Basic LLM Chain: An initial LLM chain classifies the incoming user message into one of four categories: general question, conversation involving code, reasoning about search, or step-by-step logical thinking/coding/search.
  • Model Selector Node: This NAN node is configured to select the appropriate LLM based on the classified request type. The prompt specifies that if the request type equals "coding," "reasoning," "general," or "search," a specific LLM will be used.
  • System Message: A system message limits the AI's response to 500 characters.
  • Model Access: The agent is configured to access multiple LLMs (Claude Sonnet 4, Gemini 2.5 Flash, GPT-4.1 Mini, Perplexity).

3.3. Response Handling and Front-end Display

• JSON Payload: The presenter copies the JSON payload structure from the NAN agent's output.
• Front-end Instruction: A prompt is given to Hostinger Horizons to display the response from the NAN AI agent, including the JSON payload. This ensures the front-end correctly interprets and presents the AI's output.

3.4. Testing the Integrated System

• End-to-End Test: The presenter sends a message ("Hello, how are you?") through the Coach AI front-end.
• Verification: The message is successfully processed by the NAN agent, classified as "general," and a response ("Hello, I'm doing great.") is received and displayed on the front-end. This confirms the full integration of the front-end and back-end AI agent.

4. Deployment and Domain Connection

4.1. Publishing to a Temporary Domain

• Publish Button: Hostinger Horizons has a "Publish" button that deploys the website to a temporary Hostinger Horizons domain.

4.2. Connecting a Custom Domain

• Domain Options: Users can either purchase a new domain through Hostinger or connect an existing domain.
• Connecting Existing Domain:
  • The presenter demonstrates connecting an existing domain (aiworkshop.online).
  • Hostinger provides instructions via email on how to update the domain's name servers.
  • Name Server Update: The user logs into their domain registrar (e.g., Namecheap, GoDaddy), navigates to the domain management section, and replaces the existing name servers with the ones provided by Hostinger.
• DNS Propagation: It's noted that DNS changes can take up to 24 hours to propagate globally.
• Hostinger Dashboard: The Hostinger dashboard also shows the domain connection status.

4.3. Website Updates

• Live Updates: Any changes made to the website in Hostinger Horizons can be re-published, and these updates will automatically reflect on the live domain.

5. Additional Features and Integrations

• Adding Pages: Users can easily add new pages (e.g., "Contact") by typing instructions into Hostinger Horizons.
• AI Assistant (Cody): Hostinger Horizons includes an AI assistant named Cody that can help users troubleshoot issues or run queries.
• Integrations:
  • Supabase: For user sign-ups, logins, and data storage.
  • Online Store: For e-commerce functionality.
  • Analytics: To track website performance.
  • Stripe: For payment processing.
• Sharing: Options to share requests for further integrations.

6. Conclusion and Next Steps

The video concludes by emphasizing the ease of building and deploying a functional SAS product with zero code. The presenter highlights their own AI agency website, built entirely on Hostinger Horizons, as an example of the platform's capabilities. They encourage viewers to explore their community for further learning on VIP coding, NAN for beginners, and launching AI agencies. The presenter invites questions and suggestions for future content.

Key Takeaways:

• It is possible to clone a SAS product and build a functional AI-powered service with no-code tools like Hostinger Horizons and NAN.
• Hostinger Horizons offers a user-friendly interface for front-end design and integrated hosting, with cost-saving options and discounts.
• NAN enables the creation of sophisticated AI agents capable of multi-model LLM selection and conversational memory.
• Webhooks are crucial for seamless communication between the front-end and back-end AI agent.
• The deployment process, including custom domain connection, is straightforward.
• The platform supports various integrations for expanding functionality, such as e-commerce and payment processing.