I Rebuilt a $24M AI App in 24 Minutes with No Code (STEP BY STEP)

Key Concepts

• No-Code App Development: Building applications without writing traditional code, using visual interfaces and pre-built components.
• AI-Powered Nutrition Analysis: Using artificial intelligence to analyze images of food and provide nutritional information.
• Hostinger Horizons: A VIP (Visual Interface Programming) coding platform used for front-end development.
• N8N: A no-code platform used for building AI agents and automating workflows.
• Webhooks: A way for applications to communicate with each other in real-time.
• AI Agents: Software entities that use AI models to perform specific tasks.
• Chat Models: AI models that can generate human-like text.
• Output Parsers: Components that structure the output of AI models into a specific format.
• JSON (JavaScript Object Notation): A lightweight data-interchange format.
• VPS (Virtual Private Server): A virtualized server that provides dedicated resources.
• Vibe Coding: Visual Interface Based coding.

Building an AI Nutrition Analyzer App with No-Code Tools

Introduction

The video demonstrates how to build an AI-powered nutrition analyzer app using no-code platforms, inspired by the app Cal AI. The app allows users to upload a photo of a meal and receive a detailed nutritional analysis, including calories, protein, carbs, fat, and a meal summary. The tutorial uses Hostinger Horizons for the front-end and N8N for the back-end AI processing.

Front-End Development with Hostinger Horizons

1. Project Setup:
   • Create a new project in Hostinger Horizons.
   • Use a prompt to define the app's purpose: a simple landing page for a nutrition analyzer where users can upload an image for analysis.
   • Example Prompt: "Project name: NutriSnap AI. Create a simple landing page for a nutrition analyzer. Goal: A person will be able to upload an image, and the AI will analyze that image."
2. Initial UI Design:
   • Hostinger Horizons generates an initial UI based on the prompt, including a photo upload button and a basic layout.
3. Fixing UI Issues:
   • Address any issues with the initial UI using prompts. For example, if the "choose photo" button isn't working, use the prompt: "When I click on the choose photo button, nothing happens."
4. Image Submission:
   • Implement the functionality to send the uploaded image to a webhook in N8N.
   • Prompt: "When a user uploads or captures a photo, send the image as a file to the following webhook [webhook URL]."
   • The image is sent as a file to the specified N8N webhook.

Back-End Development with N8N

1. Webhook Setup:
   • Create a new workflow in N8N.
   • Add a "Webhook" trigger to receive data from the front-end.
   • Change the HTTP method from "GET" to "POST."
   • Set a path for the webhook (e.g., "test").
   • Set "Respond" to "Immediately" initially, then later change it to "Using respond to webhook node".
2. AI Agent Integration:
   • Add an "AI Agent" node to process the image.
   • Define the AI agent's prompt to analyze the photo, identify food items, and provide nutritional information.
   • Example Prompt: "You are a food analysis assistant. Analyze the photo, identify each visible food, and for each item, provide the following: name of the food, estimated portion size in grams, calories, protein, carbs, fat, and a short meal summary."
   • Enable "Automatically pass through binary images" in the AI agent options.
3. Chat Model Configuration:
   • Add a chat model (e.g., Anthropic Claude) to the AI agent.
   • Provide API credentials for the chosen chat model.
4. Output Parser:
   • Add a "Structured Output Parser" to format the AI agent's output into a specific JSON structure.
   • Example Output Parser:

     {
       "meal_summary": "string",
       "detected_items": [
         {
           "name": "string",
           "portion_size_grams": "number",
           "calories": "number",
           "protein_grams": "number",
           "carbs_grams": "number",
           "fat_grams": "number"
         }
       ]
     }
     

   • Use "Autofix format" to automatically correct any formatting issues in the AI output.
5. Response to Webhook:
   • Add a "Respond to Webhook" node to send the AI agent's output back to the front-end.
   • Set the webhook trigger to respond using the "Respond to Webhook" node.
   • Configure the "Respond to Webhook" node to include all incoming items.

Connecting Front-End and Back-End

1. JSON Response Handling:
   • In Hostinger Horizons, provide a prompt that includes the JSON response structure that the webhook is sending back from N8N.
   • This allows the front-end to parse and display the nutritional information.
   • Prompt: "This is the JSON response that the webhook is sending back from N8N to the same webhook that I provided. It should be able to grab this response and display it."
   • Paste the JSON response from the "Respond to Webhook" node in N8N.

Testing and Refinement

1. Testing the App:
   • Upload different food images and analyze the results.
   • Verify the accuracy of the nutritional information.
2. Prompt Engineering:
   • Adjust the AI agent's prompt to improve accuracy and add additional details, such as tips or recommendations.
3. UI/UX Improvements:
   • Use Hostinger Horizons' chat box to request UI/UX changes, such as modifying the appearance of the analysis results or adding loading indicators.

Deployment and Hosting

1. Publishing with Hostinger Horizons:
   • Publish the app using Hostinger Horizons' native URL.
   • Connect a custom domain for improved discoverability.
2. Hosting N8N on a VPS:
   • Host the N8N workflow on a Hostinger VPS for increased privacy and control.
   • Select a VPS plan and choose N8N as the application during setup.
   • Use the coupon code "AIWORKSHOP" for an additional 10% discount.
   • Access the N8N workflow through the Hostinger VPS dashboard.

Additional Features and Integrations

• Hostinger Horizons Integrations: Superbase, Stripe.
• Ask Cody: Hostinger Horizons' AI assistant for troubleshooting and support.

Conclusion

The video provides a step-by-step guide to building an AI-powered nutrition analyzer app using no-code tools. By combining Hostinger Horizons for the front-end and N8N for the back-end AI processing, users can create a functional and informative app without writing any code. The tutorial emphasizes the importance of prompt engineering, testing, and continuous improvement to achieve accurate and user-friendly results. The option to host N8N on a VPS provides increased privacy and control over the AI processing.