🎥 YouTube Transcript Viewer

A modern SvelteKit application showcasing Svelte 5 runes and MCP (Model Context Protocol) integration.

🌟 Features

• Svelte 5 Runes: Demonstrates the new reactive paradigm

  • $state - for reactive state management
  • $derived - for computed values
  • Modern component architecture

• MCP Integration: Uses Model Context Protocol servers

  • youtube-transcript MCP server for fetching video transcripts
  • svelte MCP server for documentation

• Modern UI: Beautiful, responsive design with Tailwind CSS

  • Gradient backgrounds
  • Smooth animations
  • Mobile-friendly

🚀 Tech Stack

• SvelteKit - Full-stack web framework
• Svelte 5 - Latest version with runes
• TypeScript - Type safety
• Tailwind CSS - Utility-first styling
• MCP Servers - Model Context Protocol integration

📦 Installation

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

🎓 Svelte 5 Runes Demo

This project demonstrates key Svelte 5 runes:

$state - Reactive State

let videoUrl = $state('');
let transcript = $state<string[]>([]);
let loading = $state(false);

$derived - Computed Values

let videoId = $derived(() => {
  // Extract video ID from URL
  const url = new URL(videoUrl);
  return url.searchParams.get('v');
});

🔧 MCP Integration

This project is designed to work with MCP servers:

• youtube-transcript: Extracts transcripts from YouTube videos
• svelte: Provides Svelte 5 documentation

Note on Production Usage

The current implementation includes mock data for demonstration. To use real YouTube transcripts:

1. Ensure the youtube-transcript MCP server is running
2. Implement MCP client in the API endpoint
3. Call the get_transcript tool with video ID and language

📁 Project Structure

yt-transcript-viewer/
├── src/
│   ├── routes/
│   │   ├── +layout.svelte       # Layout with CSS imports
│   │   ├── +page.svelte          # Main page with Svelte 5 runes
│   │   └── api/
│   │       └── transcript/
│   │           └── +server.ts    # API endpoint
│   └── app.css                   # Tailwind directives
├── tailwind.config.js
├── postcss.config.js
└── package.json

🎨 Features Showcase

1. Reactive State Management: Input handling with $state
2. Derived State: Automatic video ID extraction
3. Async Operations: Loading states and error handling
4. Modern UI: Gradient design with Tailwind
5. Form Handling: Submit with validation
6. Conditional Rendering: Show/hide transcript and errors

🔍 How It Works

1. User enters a YouTube URL
2. $derived automatically extracts the video ID
3. Click "Get Transcript" button
4. API endpoint processes the request
5. Transcript is displayed with smooth animations

📚 Learning Resources

• Svelte 5 Documentation
• SvelteKit Documentation
• Model Context Protocol

🛠️ Development

This project was created using:

• npx sv create - SvelteKit project scaffolding
• MCP servers for enhanced development experience
• Tailwind CSS for rapid UI development

📄 License

MIT

Built with ❤️ using Svelte 5, SvelteKit, and MCP