DEV Community

Shashank Chakraborty
Shashank Chakraborty

Posted on

Tube-Code: Instantly Extract...

Tube-Code: Instantly Extract Code from YouTube Videos with AI

Learning to code from YouTube tutorials is incredibly popular, but it comes with a hidden tax: the constant need to pause the video, switch tabs, and manually transcribe code snippets. This "Context Switching Tax" breaks your focus, slows down your learning, and frankly, is a frustrating waste of time. What if you could get runnable code directly from a video's transcript, without lifting a finger (or pressing the pause button)?

Enter Tube-Code.

Tube-Code is a local-first browser extension that leverages AI to extract runnable code snippets directly from YouTube video transcripts. It's designed to eliminate friction, keep you in your learning flow, and give you the code you need, right when you need it.

The Problem: The "Context Switching Tax"

Developers are highly visual learners, and video tutorials have become an indispensable resource. However, this learning method introduces a significant bottleneck:

  • Lost Focus: Every time you pause a video to type code, you disrupt your concentration.
  • Time Waste: Studies (or anecdotal evidence, in this case!) suggest developers spend a significant portion of their learning time simply transcribing code. Manually retyping code is prone to errors and incredibly inefficient.
  • Broken Flow: The constant back-and-forth between video and IDE shatters the immersive learning experience.

This constant context switching leads to frustration and slows down the overall learning process, making it harder to internalize new concepts.

The Solution: Seamless Code Extraction with Tube-Code

Tube-Code tackles this problem head-on by providing an intelligent, automated way to extract code. Imagine a native-feeling button on your YouTube video player that, with a single click, places the relevant code snippet directly into your clipboard. That's Tube-Code.

It achieves this by running a lightweight Python server on your local machine, designed to:

  1. Intercept the Video ID: The Chrome extension detects the current YouTube video and sends its ID to your local server.
  2. Fetch Raw Transcript: Using yt-dlp, the server fetches the raw transcript for the video. Crucially, this happens from your local machine, bypassing cloud IP blocks and bot detection that often hinder direct API access.
  3. Process with AI: The raw text is then fed into Google's Gemini 1.5 Flash model. This powerful AI identifies potential code snippets, cleans them up by removing conversational filler, speaker tags, and other non-code text, and formats them for immediate use.
  4. Return Runnable Code: The clean, formatted code is then sent back to your browser extension, ready to be copied to your clipboard with a single click.

Tube-Code Architecture Breakdown

Tube-Code employs a client-server architecture, keeping processing local for speed, privacy, and reliability.

  • Client (The Eyes & Hands): A Chrome Extension (Manifest V3) written in JavaScript. It injects a native-feeling button directly into the YouTube UI, handles user interaction, and communicates with the local server.
  • Server (The Brain): A FastAPI application (Python) running on your local machine. This is the core logic engine, handling requests from the extension, coordinating transcript retrieval, and processing with AI.
  • Extraction (The Scraper): yt-dlp. This robust, open-source command-line program is an essential component for reliably fetching YouTube video transcripts, even in scenarios where direct API calls might be blocked.
  • Intelligence (The Editor): Google Gemini 1.5 Flash. This powerful large language model is responsible for the heavy lifting of Natural Language Processing (NLP), distinguishing code from conversational text, and ensuring the extracted snippets are clean and runnable.

The beauty of this local-first approach is enhanced privacy (your video history isn't sent to a third-party server) and resilience against platform changes, as yt-dlp is constantly maintained to bypass detection.

Getting Started: Install Tube-Code Today

Ready to supercharge your YouTube learning? Follow these simple steps to get Tube-Code up and running on your machine.

Prerequisites

Before you begin, ensure you have the following installed:

  • Python 3.10+: Download and install from python.org.
  • Google Gemini API Key (Free Tier Available): You can obtain a free API key from the Google AI Studio.

1. Setup the Backend (The Brain)

This part involves cloning the repository, installing dependencies, and starting the local FastAPI server.

# Clone the repository to your local machine
git clone https://github.com/YOUR_USERNAME/tube-code.git # Replace YOUR_USERNAME with the actual repo path
cd tube-code/backend

# Create a Python virtual environment (highly recommended)
python -m venv venv
source venv/bin/activate # On Windows, use `venv\Scripts\activate`

# Install necessary Python dependencies
pip install -r requirements.txt

# Configure your Google Gemini API Key
# Create a .env file in the `backend` directory
# and add your API key as shown below:
echo "GEMINI_API_KEY=AIzaSy..." > .env
# Make sure to replace "AIzaSy..." with your actual Gemini API Key!

# Start the FastAPI server
# The --reload flag will automatically restart the server on code changes
uvicorn main:app --reload
Enter fullscreen mode Exit fullscreen mode

Leave this terminal window open; the server needs to be running for the extension to work.

2. Install the Extension (The Eyes)

Now, let's get the browser extension installed in Chrome.

  1. Open Chrome and navigate to chrome://extensions. You can type this directly into your address bar.
  2. Enable Developer Mode: In the top-right corner, toggle the "Developer mode" switch to ON.
  3. Load the Extension: Click the "Load unpacked" button (usually on the top-left).
  4. Select Extension Directory: Navigate to the directory where you cloned Tube-Code earlier. Select the extension subdirectory (e.g., tube-code/extension).

That's it! You should now see the Tube-Code extension listed.

How to Use Tube-Code

  1. Navigate to any YouTube video that contains code tutorials.
  2. A new "Get Code" button should appear near the video player (exact placement might vary based on YouTube UI updates).
  3. Click the "Get Code" button.
  4. Tube-Code will process the transcript. Once complete, the extracted code will be copied directly to your clipboard.
  5. Paste into your IDE and continue learning without interruption!

Conclusion

Tube-Code is more than just a tool; it's a productivity enhancer designed to make learning from YouTube tutorials a smoother, more focused experience. By leveraging the power of local processing and advanced AI, we can reclaim valuable learning time and reduce the friction of manual transcription.

Give Tube-Code a try and say goodbye to the "Context Switching Tax"!

Feel free to contribute to the project, report issues, or suggest new features on the GitHub repository. Happy coding!

🔗 https://github.com/Shashank0701-byte/tube-code-backend?tab=readme-ov-file

Top comments (0)