How is this LEGAL: I Cloned a $24M App with AI (Rocket.new + n8n)

Key Concepts

• No-Code Development: Building applications without writing traditional code.
• AI Nutrition App: An application that analyzes food and provides nutritional information.
• Frontend: The user interface of an application.
• Backend: The server-side logic and data management of an application.
• AI Agent: A program that uses artificial intelligence to perform tasks.
• Chat Model: A type of AI model designed for conversational interactions.
• Webhook: A mechanism for one application to send real-time data to another application.
• Token Consumption: A metric used by some platforms to measure usage and cost.
• Figma Integration: The ability to import designs from Figma into a development platform.
• Prompt Engineering: Crafting effective instructions for AI models.
• JSON: A lightweight data-interchange format.
• Integrations: Connecting an application with other services (e.g., Superbase, Stripe, Google Analytics).
• Custom Domain: Using a personalized web address for an application.
• Netlify: A platform for deploying and hosting web applications.

Building an AI Nutrition Analyzer App with No-Code Tools

This video demonstrates how to build a powerful AI nutrition analysis web application, similar to the $2 million/month app Calai, using entirely no-code tools. The process involves using Rocket.new for the frontend and connecting it to an Naden AI agent powered by Anthropic's Claude chat model for the backend analysis. The resulting application can analyze any meal from a single photo, providing a detailed breakdown of nutrition, calories, and offering smart recommendations.

1. Application Demo and Overview

The video begins with a demonstration of the completed application. A user uploads a photo of a meal (grilled chicken, broccoli, etc.). The frontend displays a "AI analyze and process" message while the backend Naden AI agent processes the image. The results are then displayed on the frontend, showing:

• The uploaded meal photo.
• Accurate identification of food items (e.g., grilled chicken breast, mixed wild rice, steamed broccoli, cherry tomatoes, grilled zucchini).
• Nutritional breakdown: Calories, Protein, Carbs, Fat, and macronutrient details.
• A meal summary and an improvement tip (e.g., "add a source of healthy fats like avocado, nuts, or olive oil").

The presenter highlights the ability to add more features by typing and that Rocket.new can handle integrations with services like Superbase (for user authentication) and Stripe (for payments), and can be deployed to custom domains or Netlify.

2. Frontend Development with Rocket.new

Rocket.new is introduced as a no-code platform for building full-stack web and mobile apps. It supports integrations with various frameworks like Flutter, HTML, Next.js, and React.js, as well as popular third-party applications.

• Account Setup and Token System: Users can sign up for a free account. Rocket.new operates on a token system, with the free "Starter" plan offering 1 million tokens. Paid plans offer more tokens (e.g., 5 million for the "Personal" plan, 10.5 million for the "Rocket" plan).
• Project Creation: Users can start a new project by:
  • Using a prompt to describe the desired app.
  • Importing Figma designs.
  • Utilizing pre-built templates (e.g., mobile app, landing page, website).
• Initial Prompt for Nutrition App: The presenter uses a specific prompt to initiate the frontend build for the "Nutrap AI nutrition analyzer app":
  • Project Name: "Nutrilizer app"
  • Goal: Build a lightweight web app (not just a landing page) where users can upload or capture a meal photo and instantly get a food nutrition breakdown, including calories.
  • Key Requirement: A webhook integration to send the uploaded image file to a Naden webhook endpoint for processing by the AI agent.
• Token Consumption and Screens: The number of screens generated by Rocket.new directly impacts token consumption. For this app, two screens were selected: "Main analysis dashboard" and "Analysis history."
• Technology Stack: Rocket.new automatically selects the appropriate technologies, in this case, Web and React.js, for building the frontend.

3. Backend Setup with Naden AI Agent

Naden is presented as another no-code platform for building AI agents. It also offers a free account.

• Webhook Trigger: The first step in Naden is to set up a trigger. A webhook call is used.
  • The HTTP method is set to POST.
  • A test URL is created with a path (e.g., /test).
  • The generated webhook URL is copied.
• AI Agent Configuration:
  • An AI agent is added.
  • Anthropic's Claude chat model is selected as the chat model. (Other options like OpenAI are available).
  • The presenter imports a pre-built "Food analyzer" blueprint from the Naden community to save time.
• AI Agent Prompt: The imported blueprint contains a prompt for the AI agent: "Your food analysis assistant. Analyze the photo and identify each visible food item for the given name of the food, the estimated portion." This prompt guides the AI to analyze the image received from the frontend.
• Structured Output Parser: A structured output parser is used. This is configured with an example JSON output. This tells the AI agent what format the output should be in when sending data back to the frontend. The example JSON defines fields like food_items, calories, protein, carbs, and fat.

4. Connecting Frontend and Backend (Iterative Process)

The process of connecting Rocket.new and Naden involves an iterative approach, especially when troubleshooting.

• Initial Connection Attempt: The prompt for Rocket.new included a webhook integration to send the image file to the Naden webhook URL.
• Troubleshooting - Image Not Sending: During the first test, the image was not being sent to the Naden AI agent. The presenter identified this by observing that the Naden workflow was not being triggered.
• Refining the Rocket.new Prompt: The presenter went back to Rocket.new and updated the prompt to explicitly instruct it to send the image as a file to the webhook URL, including retry logic.
• Troubleshooting - Data Not Displaying: After the image was successfully sent, the analysis results were not appearing correctly on the frontend. The dummy data from before was still visible.
• Refining the Rocket.new Prompt (JSON Response): The presenter copied the JSON response generated by the Naden AI agent and provided it back to Rocket.new, instructing it to use this JSON to display the results on the frontend. This step ensures Rocket.new knows how to interpret and present the data received from Naden.
• Successful Integration: After these adjustments, the application successfully analyzed the meal photo, and the detailed nutritional information was displayed on the frontend, including an overview, food items, and charts.

5. Launching and Integrating the Application

• Deployment: The completed application can be launched on Netlify by clicking the "Launch" button. This makes the web app accessible to the world.
• Custom Domain: For a custom domain, users need to upgrade their plan.
• Accessing Code: Rocket.new provides access to the generated code (e.g., React.js code), allowing for further customization if needed, though the focus remains on no-code development.
• Integrations: Rocket.new offers a wide range of integrations to enhance the application's functionality:
  • Superbase: For user authentication (login with email/password). This involves connecting a Superbase account and authorizing Rocket.new to manage authentication.
  • Resend: For sending and receiving emails.
  • Stripe: For processing payments, enabling the app to be monetized. This requires connecting Stripe API keys (secret and publishable).
  • Google Analytics: To track web traffic and understand user behavior.
  • AdSense, Perplexity, Anthropic, Twilio: Other integrations for advertising, AI models, and messaging.

6. Conclusion and Key Takeaways

The video successfully demonstrates how to build a sophisticated AI-powered nutrition analysis app using Rocket.new for the frontend and Naden for the backend AI agent, powered by Anthropic's Claude model. The process highlights the power of no-code platforms to create complex applications without coding.

Key takeaways include:

• No-Code Feasibility: Building advanced AI applications is achievable without writing code.
• Iterative Development: Troubleshooting and refining prompts are crucial steps in the no-code development process.
• Platform Synergy: Combining platforms like Rocket.new and Naden allows for comprehensive application development.
• Extensibility: Integrations with services like Superbase and Stripe enable monetization and advanced features.
• Community Resources: Utilizing community blueprints and guides can accelerate development.

The presenter encourages viewers to explore the platforms, join the community, and subscribe for more content on no-code development and AI.