YtVerb

An intelligent YouTube video conversation platform powered by AI

Demo • Features • Installation • API Reference

---

🎯 Overview

YtVerb revolutionizes how you interact with YouTube content by enabling intelligent conversations with any YouTube video. Using advanced RAG (Retrieval-Augmented Generation) architecture, the platform extracts, processes, and indexes video transcripts, allowing users to ask questions and get contextual answers about video content without watching the entire video.

✨ Features

🤖 Real-time AI Chat

• Instantly chat with any YouTube video using advanced AI
• Get immediate responses, summaries, and insights from video content
• Context-aware conversations that understand video themes and concepts

🧠 Smart Analysis

• AI understands context, themes, and key concepts from video content
• Deep learning capabilities for comprehensive content understanding
• Advanced query processing with contextual awareness

📱 Multi-Format Support

• Works with tutorials, podcasts, documentaries, and any YouTube content
• Support for educational videos, reviews, and entertainment content
• Flexible content processing pipeline

⚡ Time-saving Learning

• Skip through long videos by asking specific questions
• Get instant answers without watching entire content
• Efficient knowledge extraction and summarization

🛠️ Technical Architecture

Frontend Stack

• Framework: Next.js 15.5.0 with App Router
• Language: TypeScript 5.x
• Styling: Tailwind CSS 4.x with custom design system
• State Management: React Hooks with real-time updates
• UI Components: Custom components with Radix UI primitives
• Animations: Motion library for smooth interactions
• Build Tool: Turbopack for fast development and builds

Backend Stack

• Runtime: Node.js with Express.js 5.x
• Language: TypeScript
• AI Framework: LangChain for RAG pipeline orchestration
• LLM: Google Gemini 1.5 Flash for conversation generation
• Embeddings: Google Generative AI Embeddings (gemini-embedding-001)
• Document Processing: YouTube transcript extraction and chunking

Database & Vector Store

• Primary Database: Supabase (PostgreSQL)
• Vector Store: Supabase Vector Store with pgvector extension
• Tables:
  • conversations - Chat session management
  • documents - Video document metadata
  • embedded_documents - Vector embeddings storage
  • conversation_messages - Chat history
  • conversations_document - Conversation-document relationships

RAG Pipeline Implementation

1. Document Ingestion

// YouTube video processing pipeline
const loader = YoutubeLoader.createFromUrl(url, {
  addVideoInfo: true
});
const docs = await loader.load();

2. Text Chunking & Embeddings

const textSplitter = new RecursiveCharacterTextSplitter({
  chunkSize: 1000,
  chunkOverlap: 200
});

const embeddings = new GoogleGenerativeAIEmbeddings({
  modelName: "gemini-embedding-001",
  taskType: TaskType.RETRIEVAL_DOCUMENT,
  apiKey: process.env.GOOGLE_API_KEY
});

3. Vector Storage

const vectorStore = new SupabaseVectorStore(embeddings, {
  client: supabase,
  tableName: "embedded_documents",
  queryName: "match_documents"
});

4. Retrieval & Generation

const retriever = vectorStore.asRetriever();
const chatModel = new ChatGoogleGenerativeAI({
  model: "gemini-1.5-flash",
  temperature: 0.7,
  streamUsage: true
});

🎨 Screenshots

Hero Section

Modern landing page with animated elements and call-to-action

Features Overview

Comprehensive feature showcase with bento grid layout

Chat Interface

Side-by-side video player and AI chat interface

🚀 Installation

Prerequisites

• Node.js 18+ and npm/yarn
• Supabase account with pgvector extension
• Google AI API key
• Git

1. Clone Repository

git clone https://github.com/yourusername/ytverb.git
cd ytverb

2. Backend Setup

cd backend
npm install

# Create .env file
cp .env.example .env

Configure your .env file:

DATABASE_URL=your_postgresql_url
SUPABASE_URL=your_supabase_url
SUPABASE_KEY=your_supabase_anon_key
GOOGLE_API_KEY=your_google_ai_api_key

3. Frontend Setup

cd ../frontend
npm install

# Create .env.local file
cp .env.example .env.local

Configure your .env.local file:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Database Setup

Run the following SQL in your Supabase SQL editor:

-- Enable pgvector extension
CREATE EXTENSION IF NOT EXISTS vector;

-- Create tables
CREATE TABLE conversations (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

CREATE TABLE documents (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

CREATE TABLE embedded_documents (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  content TEXT,
  metadata JSONB,
  embedding VECTOR(768),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

CREATE TABLE conversation_messages (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  conversation_id UUID REFERENCES conversations(id),
  role TEXT CHECK (role IN ('user', 'assistant')),
  content TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

CREATE TABLE conversations_document (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  conversation_id UUID REFERENCES conversations(id),
  document_id UUID REFERENCES documents(id),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create vector similarity function
CREATE OR REPLACE FUNCTION match_documents(
  filter JSONB DEFAULT '{}',
  match_count INT DEFAULT 5,
  query_embedding VECTOR(768) DEFAULT NULL
)
RETURNS TABLE(
  id UUID,
  content TEXT,
  metadata JSONB,
  similarity FLOAT
)
LANGUAGE plpgsql
AS $$
BEGIN
  RETURN QUERY
  SELECT
    embedded_documents.id,
    embedded_documents.content,
    embedded_documents.metadata,
    1 - (embedded_documents.embedding <=> query_embedding) AS similarity
  FROM embedded_documents
  WHERE (filter = '{}' OR embedded_documents.metadata @> filter)
  ORDER BY embedded_documents.embedding <=> query_embedding
  LIMIT match_count;
END;
$$;

5. Run Development Servers

# Terminal 1 - Backend
cd backend
npm run dev

# Terminal 2 - Frontend
cd frontend
npm run dev

Visit http://localhost:3000 to see the application!

📊 API Reference

Store Document

POST /store-document

Processes and stores a YouTube video for conversation.

// Request
{
  "url": "https://youtube.com/watch?v=VIDEO_ID",
  "document_id": "uuid-string"
}

// Response
{
  "ok": true
}

Query Document

POST /query-document

Queries the stored video content using natural language.

// Request
{
  "query": "What is the main topic of this video?",
  "document_ids": ["uuid-string"],
  "conversation_id": "uuid-string"
}

// Response (Streaming)
{
  "content": "The main topic discussed in this video is..."
}

🏗️ Project Structure

ytverb/
├── frontend/                 # Next.js frontend application
│   ├── app/                 # App router pages and layouts
│   ├── components/          # Reusable UI components
│   ├── lib/                 # Utility functions and helpers
│   └── public/              # Static assets
├── backend/                 # Express.js backend API
│   ├── src/
│   │   ├── routes/          # API route handlers
│   │   ├── services/        # Business logic services
│   │   └── helpers/         # Utility functions
│   └── index.ts             # Server entry point
└── README.md

🔧 Environment Variables

Backend (.env)

• DATABASE_URL - PostgreSQL connection string
• SUPABASE_URL - Supabase project URL
• SUPABASE_KEY - Supabase anon/service key
• GOOGLE_API_KEY - Google AI API key

Frontend (.env.local)

• NEXT_PUBLIC_SUPABASE_URL - Supabase project URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY - Supabase anonymous key

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• LangChain for the RAG framework
• Supabase for the vector database
• Google AI for the language models
• Next.js for the frontend framework

---

Made with ❤️ by AbsFuty7

⭐ Star this repo if you find it helpful!