Configuration

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• services/settingsService.ts
• vite.config.ts
• package.json
• api/index.py
• constants.ts
• components/Header.tsx
• services/geminiService.ts
• index.html

Configuration for the youtube_notes application is managed across different layers, including environment variables for sensitive keys and backend settings, build-time configuration for the frontend application, user-managed settings stored in the browser, and hard-coded application constants for limits and default values. This separation allows for flexibility in development, deployment, and user customization.

The primary configurable component is the Google Gemini API key, which is required for all AI-powered features. The application provides a user interface for setting this key, which is then stored locally. The backend transcript service also relies on environment variables for settings like rate limiting, CORS origins, and optional proxy usage.

Environment Configuration

Environment variables are used to configure both the frontend and backend services, particularly for sensitive data and deployment-specific settings.

Frontend Environment

The Vite-based frontend uses a .env.local file to manage the Google Gemini API key.

Variable	Description	Example Value
VITE_GEMINI_API_KEY	The API key for Google Gemini services.	your_api_key_here

Sources: README.md:41-44

This variable is loaded during development and build processes. The application is designed to function in a limited capacity if the key is not provided, returning raw text instead of AI-cleaned summaries.
Sources: services/geminiService.ts:31-35

Backend Environment

The Python FastAPI backend is configured using OS-level environment variables. These control security, rate limiting, and proxy settings.

Variable	Description	Default Value
RATE_LIMIT_REQUESTS	Number of allowed requests to /api/transcript per window.	15
RATE_LIMIT_WINDOW	The time window in seconds for rate limiting.	60
ALLOWED_ORIGINS	Comma-separated list of allowed origins for CORS.	http://localhost:3000,http://localhost:5173
WEBSHARE_USER	Username for the optional Webshare proxy.	None
WEBSHARE_PASS	Password for the optional Webshare proxy.	None

Sources: api/index.py:10-14, api/index.py:53-54

The backend will use a direct connection to YouTube's transcript API if proxy credentials are not provided.
Sources: api/index.py:63-65

API Key Management

The Gemini API key is a critical user-provided configuration. It is managed through a settings modal in the UI and stored in the browser's localStorage.

Settings UI

The Header component contains a settings button that opens a modal for API key input. The user can enter their key, test its validity, and save it.

The following diagram illustrates the user flow for setting and validating the API key.

Storage and Retrieval

The settingsService.ts handles the logic for persisting and retrieving the API key from localStorage.

• setApiKey(key: string): Saves the provided key to localStorage under the key gemini_api_key.
• getApiKey(): string | null: Retrieves the key from localStorage.
• validateApiKey(apiKey: string): Makes a test call to the Gemini API to verify the key is functional.

This sequence diagram shows how the key is retrieved and used to make an AI call.

Build and Development

Project configuration for building, developing, and testing is defined in package.json, vite.config.ts, and vitest.config.ts.

Scripts

The package.json file defines scripts for common development tasks.

Script	Description
dev	Runs the backend and frontend development servers concurrently.
dev:backend	Starts the Python backend with uvicorn and auto-reload.
dev:frontend	Starts the Vite development server for the React frontend.
build	Builds the frontend application for production using Vite.
test	Runs frontend tests using Vitest.

Sources: package.json:6-15

Vite Configuration

The vite.config.ts file configures the frontend build process. It primarily uses the @vitejs/plugin-react to enable React support.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    // ... default vite build options
  },
});

Sources: vite.config.ts

Test Configuration

The vitest.config.ts file sets up the testing environment. It configures jsdom as the environment for simulating a browser, enabling tests on React components.

// vitest.config.ts
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    setupFiles: ['./tests/setup.ts'],
    globals: true,
  },
  // ...
});

Sources: vitest.config.ts

Application Constants

The application uses a dedicated file, constants.ts, to store shared, non-sensitive configuration values and limits.

AI Service Limits

These constants prevent overly long or short inputs from being sent to the Gemini API, managing cost and performance.

Constant	Value	Description
MAX_INPUT_LENGTH	100000	Max characters for cleanTranscriptText input.
TRANSCRIPT_SLICE	30000	Safety limit for transcript text sent for content generation.
MIN_TRANSCRIPT_LENGTH	500	Minimum transcript length required to trigger content generation.

Sources: constants.ts:11-15

Demo Video

A default video ID is configured for the "Load Demo" feature.

// constants.ts
export const DEMO_VIDEO_ID = "XezR_Y56MsY";

Sources: constants.ts:5

Styling Configuration

The application uses Tailwind CSS for styling. The configuration is defined directly within a <script> tag in index.html for simplicity. This allows for theme customization, such as colors, without a separate tailwind.config.js file.

The configuration extends the default theme with custom colors for a consistent "YouTube dark" aesthetic.

// index.html
tailwind.config = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        yt: {
          black: '#0f0f0f',
          gray: '#272727',
          red: '#ff0000',
          text: '#f1f1f1',
          subtext: '#aaaaaa',
          hover: '#3f3f3f'
        },
        background: '#09090b',
        surface: '#18181b',
        primary: '#3b82f6'
      }
    }
  }
}

Sources: index.html:8-27