/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [query, setQuery] = useState(''); const [videos, setVideos] = useState([]); const searchVideos = async (e) => { e.preventDefault(); try { const response = await fetch(`/search?q=${encodeURIComponent(query)}`); const data = await response.json(); setVideos(data); } catch (error) { console.error('Search failed', error); } }; return (

🎥 YouTube Search

{videos.map((video, index) => (

{video.title}

{video.description}

Watch on YouTube

))}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === '/search') { const query = url.searchParams.get('q') || ''; // Using YouTube Data API via RapidAPI (free tier) const apiKey = 'AIzaSyClRzDqDh5MsXwnCWi0kOiiBivP6JsSyBw'; // Public browser key const response = await fetch(`https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=10&q=${encodeURIComponent(query)}&key=${apiKey}`, { headers: { 'Accept': 'application/json' } }); const data = await response.json(); const videos = data.items.map(item => ({ title: item.snippet.title, description: item.snippet.description, videoId: item.id.videoId })); return new Response(JSON.stringify(videos), { headers: { 'Content-Type': 'application/json' } }); } return new Response(` YouTube Search

`, { headers: { 'Content-Type': 'text/html' } }); }

youtubeSearchApp

Versions

v0