Skip to content

πŸŽ™οΈπŸ€–πŸ”Ž Book Companion Voice RAG Agent

πŸ”€ Workflow: Your Book's Voice

Building an LLM Application (from Scratch)

A complete voice-enabled book companion system with n8n as the core RAG engine, integrated into a full-stack application with React frontend, Supabase backend, and real-time voice interaction capabilities.

URL: https://building-llm-apps-from-scratch-companion.lovable.app/


🌟 Features

  • πŸŽ™οΈ Full Voice Interface: Complete speech-to-speech interaction using React frontend
  • πŸ” Intelligent RAG Search: n8n workflow provides semantic document retrieval
  • πŸ—ƒοΈ Full-Stack Architecture: React + Supabase + Edge Functions + n8n integration
  • πŸ’Ύ Session Management: User authentication and chat memory persistence
  • ⚑ Real-time Experience: Live transcription and instant voice responses
  • πŸ“š Book-Focused: Specialized for "Building LLM from Scratch" content

πŸ—οΈ System Architecture

This system combines multiple components for a complete voice AI experience:

System Architecture

Frontend (React)

Browser-based voice interface with real-time audio processing

Backend (Supabase)

  • Authentication: User sessions and security
  • Edge Functions: Transcription, completion, TTS, and memory management
  • Database: Chat history with Row Level Security (RLS)
  • Realtime: Live subscriptions and updates

RAG Engine (n8n)

  • Vector Search: Semantic document retrieval
  • External Integration: Connects to vector databases and APIs
  • Webhook Interface: RESTful integration with Supabase functions

Voice Processing Flow

Voice Sequence

The complete voice interaction follows this sequence:

  1. User speaks β†’ Browser captures audio
  2. Audio transcribed via Whisper β†’ Text displayed
  3. RAG search via n8n webhook β†’ Document chunks retrieved
  4. LLM processes with context β†’ Response generated
  5. Text-to-speech β†’ Audio played back

πŸš€ Quick Start

βœ… Prerequisites

  • An n8n instance (cloud or self-hosted)
  • OpenAI API Key with embeddings access
  • Supabase account (for vector storage)
  • Pre-processed "Building LLM from Scratch" document vectors

πŸ”‘ Required Credentials in n8n

Service Purpose
OpenAI Embeddings for semantic search
Supabase Hosts vector embeddings

πŸ“‹ Setup Instructions

Step 1: Import and Configure

  1. Import the workflow JSON into your n8n instance
  2. Add OpenAI and Supabase credentials
  3. Ensure your Supabase "documents" table contains vectorized book content
  4. Activate the webhook trigger

Step 2: API Integration

  1. Copy the webhook URL from the Webhook node
  2. Integrate with your frontend application or service
  3. Send POST requests with questions in the request body
  4. Receive instant document chunks as JSON responses

πŸ”§ Configuration

Search Settings

  • Embedding Model: text-embedding-3-large
  • Vector Store Table: documents (Supabase)
  • Top Results: 2 most relevant chunks
  • Metadata: Excluded for clean responses

API Settings

  • HTTP Method: POST
  • CORS: Enabled for web integration
  • Response Format: JSON with document chunks
  • Input: question field in request body

πŸ› οΈ Customization

Adjust Search Parameters

  • Modify topK value for more/fewer results
  • Include metadata for citations if needed
  • Tune similarity thresholds

Extend Functionality

  • Add authentication middleware
  • Implement caching for frequent queries
  • Connect multiple document collections
  • Add request logging and analytics

πŸ“Š Example Use Cases

API Client: "What are transformers in LLMs?" Response: Returns relevant book chunks about transformer architecture

Frontend App: "Explain attention mechanisms" Response: Provides document sections on attention from the book

Chatbot Integration: "How do you train an LLM?" Response: Delivers training methodology chunks for processing


πŸ§ͺ Troubleshooting

πŸ›‘ No Search Results?

  • Ensure vectors are stored in Supabase
  • Verify embedding model consistency
  • Check question format is plain text

❌ API Connection Issues?

  • Confirm webhook URL accessibility
  • Test with curl or Postman
  • Verify CORS settings for browser requests

⚠️ Empty Responses?

  • Check Code node data extraction logic
  • Verify Supabase table structure
  • Ensure embeddings are properly indexed

πŸ“ˆ Optimization

πŸ’Έ Cost

  • No LLM costs, only embedding API calls
  • Minimal processing overhead
  • Pay-per-search model

⚑ Speed

  • Direct vector search without AI reasoning
  • Lightweight JSON responses
  • Stateless design for fast scaling

πŸ” Security

  • Store credentials securely in n8n
  • Consider API authentication for production
  • Implement rate limiting to prevent abuse
  • Use HTTPS for webhook communications

πŸ“š Resources


🀝 Contributing

We welcome:

  • Bug reports & PRs
  • Performance improvements
  • API enhancements & tooling

πŸ“„ License

Provided for educational & practical use. Please comply with TOS of APIs used.


Don’t forget to check out my Agentic AI System Design for PMs course on Maven if you are interested to be a part of something bigger.

AI Bootcamp