Watch Me Build + Ship a COMPLEX Web App (Lovable + n8n)

Key Concepts

• Vibe Coding: Using AI-powered tools like Lovable to rapidly build applications with minimal traditional coding.
• Full-Stack Web App: A complete application encompassing both front-end (user interface) and back-end (server-side logic, database) components.
• Insights LM: A clone of Google's Notebook LM, built using vibe coding techniques.
• Tech Stack: Lovable (front-end), Superbase (authentication, data storage, file storage), N8N (backend workflows).
• RAG (Retrieval-Augmented Generation): An AI technique that combines a pre-trained language model with an information retrieval system to generate more accurate and contextually relevant responses.
• Vector Store: A database that stores data as vector embeddings, enabling efficient similarity searches for RAG.
• Superbase Edge Functions: Serverless functions that run close to the database, enabling efficient data processing and API endpoints.
• AI Agent: A software entity that uses AI to perform tasks, often involving natural language processing and decision-making.
• LLM (Large Language Model): A deep learning model trained on a massive amount of text data, capable of generating human-quality text.
• Sustainable Use License: A licensing model that allows free use of software for internal business purposes but requires a commercial license for SaaS applications.

1. Project Overview: Insights LM - A Notebook LM Clone

• The video documents the creation of Insights LM, a full-stack web application mirroring Google's Notebook LM, built in three days using vibe coding.
• The application includes features like file uploads, AI-powered chat grounded in uploaded documents (RAG), inline citations, and podcast generation.
• The tech stack comprises Lovable for the front-end, Superbase for authentication and data/file storage, and N8N for backend workflows.
• Two GitHub repositories were created: one for public LLMs and another for private, local LLM usage.

2. Demo and Architecture Recap

• Demo: The app features a login screen, a dashboard for creating notebooks, and a notebook layout for uploading sources and engaging in AI-powered chat.
  • Users can upload documents (e.g., PDFs), which are processed by N8N workflows to index content in a vector store.
  • The AI agent queries the vector store to generate grounded responses with citation links that point to specific sections in the documents.
  • A podcast generation feature creates scripts for two hosts to discuss the uploaded sources.
• Architecture:
  • The front-end (Lovable/React) interacts with Superbase for authentication and data access control (policies).
  • Uploaded files are stored in Superbase storage.
  • Superbase edge functions trigger N8N workflows for document processing (chunking, description generation).
  • N8N workflows handle complex features and interact with the database and storage.

3. Building the Front-End with Lovable

• Starter Prompt: A detailed prompt is used to initiate the project, specifying core features, the tech stack (Superbase for authentication and data storage, N8N for backend services), and a first step (login/logout screens, empty dashboard).
  • Example Prompt: "I need a notebook LM clone with these core features... Start by creating a blank project and then implement a login and logout screen and an empty loggedin dashboard. And also do not allow users to register from within the app."
• Superbase Integration: The app is connected to a Superbase project for authentication and data persistence.
• Iterative Development: The front-end is built incrementally, using screenshots of Notebook LM as visual references.
• Front-End First Approach: Lovable recommends building the front-end with mock data before connecting to the backend to avoid database schema issues during code reversion.
• UI Refinement: The "edit" feature in Lovable is used to directly modify and delete elements on the page, streamlining the UI design process.
• Add Sources Screen: A pop-up for adding sources is created based on a screenshot from Notebook LM.

4. Implementing the Back-End with Superbase and N8N

• Database Schema: A database structure is planned, including tables for notebooks, sources, chat messages, and user profiles.
  • The schema includes relationships between tables (e.g., notebooks have sources, sources have chat messages).
  • Row Level Security (RLS) is implemented to ensure users can only access their own data.
• Private Storage Bucket: The sources storage bucket in Superbase is configured to be private.
• Connecting Front-End to Back-End: Front-end elements are connected to the backend tables, enabling data persistence.
• Create Notebook Functionality: The "create notebook" button is linked to the database, creating a new notebook entry upon clicking.
• Editable Notebook Titles: Users are enabled to edit notebook titles, with changes saved to the database.
• Delete Notebook Functionality: A delete button is implemented, removing notebooks from the database and associated files from storage.
• Add Sources Functionality: Users can upload files as sources, which are saved to Superbase storage.
• Rename Source Functionality: Users can rename sources, with changes saved to the database.

5. N8N Webhooks for Document Processing

• Generate Notebook Details Workflow: An N8N workflow is created to generate notebook titles and descriptions based on the content of uploaded sources.
  • The workflow is triggered by a Superbase edge function when a new source is uploaded.
  • The workflow downloads the file from Superbase storage, extracts the text, and uses an LLM to generate a title and description.
  • The generated title and description are then saved to the notebook in the Superbase database.
• Authentication: Header-based authentication is implemented for the N8N webhook.
• Environmental Variables: The webhook URL and authentication credentials are stored as environmental variables in Superbase secrets.
• Edge Function: A Superbase edge function is created to handle the external API call to N8N, including error handling and timeouts.
• File Type Handling: A switch node is used to handle different file types (e.g., PDF, MP3, text), with specific processing steps for each type.
• Superbase Integration: The workflow uses Superbase nodes to download files, update database rows, and upload files to storage.
• LLM Integration: The workflow uses an LLM (e.g., OpenAI) to generate titles, descriptions, and summaries.

6. Implementing AI-Powered Chat with RAG

• Chat Workflow: An N8N workflow is created to handle the AI-powered chat functionality.
  • The workflow is triggered by a Superbase edge function when a user sends a message.
  • The workflow uses an AI agent to generate a response based on the user's query and the content of the uploaded sources.
  • The workflow saves the chat history to a Postgres database using the N8N chat history table.
• Postgres Chat Memory: The N8N chat history table is used to store the chat history, enabling the AI agent to maintain context.
• Dropping Lovable Chat Messages Table: The chat messages table created by Lovable is dropped, and the N8N chat history table is used as the single source of truth for chat history.
• Session ID: The session ID in the N8N chat history table is updated to match the notebook ID.
• Edge Function for Sending Chat Messages: A Superbase edge function is created to send chat messages to the N8N webhook.
• UI Updates: The UI is updated to display the chat messages, with different styles for user and AI messages.
• Markdown Rendering: The UI is updated to render markdown in the chat messages, enabling formatting like bold and new lines.

7. Implementing RAG (Retrieval-Augmented Generation)

• Vector Extension: The vector extension is enabled in the Superbase database.
• Documents Table: A documents table is created to store the vector embeddings of the document chunks.
• Upsert to Vector Store Workflow: An N8N workflow is created to chunk the uploaded documents and upsert them to the vector store.
  • The workflow is triggered by a Superbase edge function when a new source is uploaded.
  • The workflow downloads the file from Superbase storage, extracts the text, and chunks it into smaller pieces.
  • The workflow uses an embedding model (e.g., OpenAI's text embedding 3 small) to generate vector embeddings for the chunks.
  • The workflow upserts the chunks and their embeddings to the documents table in the Superbase database.
• Metadata Filtering: Metadata is added to the vector embeddings, including the notebook ID, enabling filtering of the vector store by notebook.
• Process Document Callback: A Superbase edge function is created to update the processing status of the source in the sources table.
• AI Agent Integration: The AI agent is updated to use the Superbase vector store as a tool for retrieving relevant documents.
• System Prompt: The system prompt is updated to instruct the AI agent to cite its sources using a specific markdown format.
• Structured Output Parser: A structured output parser is used to format the AI agent's output, including the text and citations.
• UI Updates for Citations: The UI is updated to display the citations as clickable buttons that open the source document and highlight the relevant lines.

8. Enhancements and Additional Features

• UI Improvements: The UI is enhanced with a loading icon, a clear chat button, and a logo.
• Cascade Deletion: A cascade deletion is implemented to remove associated data when a notebook is deleted.
• File Format Support: Support for additional file formats (e.g., text, MP3) is added.
• Example Questions: Example questions are dynamically generated based on the content of the uploaded sources and displayed in the UI.
• Error Handling: Error handling is added to the AI agent to gracefully handle overloaded errors.
• Notes Section: A notes section is added to the UI, enabling users to create and save notes.
• Audio Overview Section: An audio overview section is added to the UI, enabling users to generate a podcast-style audio overview of the uploaded sources.
• Podcast Generation Workflow: An N8N workflow is created to generate the audio overview using the Gemini 2.5 flash API.
  • The workflow extracts the text from the uploaded sources, uses an LLM to generate a podcast script, and then uses the Gemini API to generate the audio.
  • The workflow converts the audio to MP3 format and uploads it to a bucket in Superbase storage.
  • The workflow generates a signed URL for the audio file and saves it to the notebook in the Superbase database.
• Real-Time Updates: Real-time updates are enabled on the notebook table, enabling the UI to automatically display the generated audio overview.

9. Deployment and Commercial Use

• GitHub Repositories: Two GitHub repositories are created: one for the public, cloud-based version of Insights LM and another for the private, local-only version.
• Public Repository: The public repository is designed to be deployed to a server and uses cloud-based AI services like OpenAI or Gemini.
• Private Repository: The private repository works completely offline and uses local AI packages like Cole Medan's local AI package, Olama, and KIT TTS.
• Commercial Use: The video discusses the commercial use of Insights LM, noting that N8N uses a sustainable use license that allows free use for internal business purposes but requires a commercial license for SaaS applications.

10. Synthesis/Conclusion

The video demonstrates the power of vibe coding and the rapid development of a complex, full-stack web application using AI-powered tools. Insights LM, a clone of Google's Notebook LM, was built in just three days using Lovable, Superbase, and N8N. The application includes a wide range of features, including file uploads, AI-powered chat with RAG, inline citations, podcast generation, and a notes section. The video also discusses the deployment and commercial use of Insights LM, highlighting the potential for both cloud-based and local-only deployments. The project showcases the potential of AI to democratize software development and enable individuals and small teams to build sophisticated applications with minimal traditional coding.