Ex-engenheiro do YouTube recria o YouTube em 45 minutos

Autoria: ByteByteGo · Assistir no YouTube

Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.

Idioma original: inglês

Vídeo original: Ex-YouTube Engineer Rebuilds YouTube in 45 Mins · Canal: ByteByteGo · 43:25 · Assistir no YouTube

Tópicos: Agentes de IA, Dados, bancos de dados e embeddings, Engenharia de software com IA, Geração de conteúdo com IA

Resumo

Mike, ex-engenheiro do YouTube, demonstra como criar uma versão simplificada do site usando agentes de IA e sem escrever código manualmente. O projeto começa com as páginas inicial e de reprodução e evolui para incluir banco de dados, vídeos gerados por IA, busca por similaridade, recomendações, autenticação e modo escuro. Por fim, ele publica a aplicação e usa um agente para corrigir um problema de implantação. O resultado é um clone funcional, com vídeos de gatos e várias limitações em relação ao YouTube real.

Pontos-chave

Agentes podem implementar interfaces a partir de descrições ou imagens de referência, mas é útil revisar e corrigir o resultado.
O projeto usa Next.js e começa com uma página inicial e uma página de reprodução construídas em etapas.
Supabase e Drizzle são usados para armazenar os dados da aplicação e permitir que sejam editados em um painel administrativo.
Cloudflare fornece hospedagem de imagens e vídeos, evitando que o projeto precise implementar processamento e streaming de vídeo.
A geração de conteúdo combina um LLM para criar metadados, um modelo de imagem para miniaturas e um modelo de vídeo para gerar clipes.
Embeddings de texto e imagem permitem buscar e recomendar vídeos por similaridade, usando pgvector e similaridade de cosseno.
O agente também ajuda a implementar autenticação, inscrições em canais e modo escuro.
Na publicação, o agente configura o repositório, auxilia no deploy e corrige um problema de compatibilidade detectado nos logs.

Capítulos

Início	Capítulo	Resumo
00:00	Apresentação e escopo do projeto	Mike apresenta sua experiência no YouTube e explica que vai criar uma versão simplificada do site com agentes de IA.
02:03	Componentes do YouTube e ferramentas	A demonstração delimita o trabalho às páginas inicial e de reprodução e identifica os principais elementos de cada uma.
04:37	Estrutura inicial e página inicial	O projeto começa em Next.js, e uma imagem de referência ajuda o agente a implementar uma página inicial inspirada no YouTube.
10:57	Criação da página de reprodução	A página de reprodução é implementada com player, metadados, comentários e vídeos relacionados.
13:08	Banco de dados e painel administrativo	O projeto conecta Supabase e Drizzle, migra os dados estáticos e cria um painel para consultar e editar o conteúdo.
18:53	Hospedagem e geração de vídeos	Cloudflare é integrado para hospedar mídia, enquanto modelos de IA geram metadados, miniaturas e vídeos de gatos.
25:10	Embeddings, recomendações e busca	A aplicação usa embeddings de texto e imagem para encontrar vídeos relacionados e implementar busca por similaridade.
33:53	Autenticação e modo escuro	O agente adiciona autenticação, inscrições em canais e uma opção de tema escuro à aplicação.
37:04	Publicação e correção do deploy	O código é enviado ao GitHub e publicado na Vercel, onde um erro de compatibilidade é diagnosticado e corrigido com ajuda do agente.
42:54	Resultado e encerramento	Mike apresenta a versão publicada do site e encerra a demonstração.

Citações

Vou ensinar você a fazer o mesmo em menos de 45 minutos, sem escrever uma única linha de código. — 00:00

Ainda estamos nos aproximando rapidamente desse objetivo, mas provavelmente ainda estamos a um ou dois anos de distância. — 02:03

Como vamos implementar a busca e os vídeos recomendados? Trapaceando. — 26:11

Levamos meses para garantir que o YouTube ficasse bom no modo escuro, e agora isso levou literalmente cinco minutos. — 37:04

Espero que você tenha aprendido algo novo e útil. — 43:25

Conceitos e entidades

Mike (pessoa): Ex-engenheiro do YouTube que conduz a demonstração de criação do clone.
YouTube (empresa): Plataforma de vídeos usada como referência para a aplicação reconstruída.
Cursor (ferramenta): Editor com recursos de agentes usado para implementar e ajustar partes da aplicação.
Codex (ferramenta): Ferramenta de OpenAI usada para gerar uma imagem de referência da página inicial.
Next.js (ferramenta): Framework escolhido para construir a aplicação web.
Supabase (ferramenta): Serviço usado para hospedar o banco de dados e inspecionar as tabelas da aplicação.
Drizzle (ferramenta): ORM usado para conectar a aplicação ao banco de dados.
Cloudflare (empresa): Serviço usado para hospedar imagens e vídeos e fornecer reprodução de vídeo.
FAL.AI (ferramenta): Agregador de modelos usado para acessar serviços de geração de texto, imagem e vídeo.
OpenRouter (ferramenta): Serviço usado por meio do FAL.AI para acessar modelos de linguagem.
GPT Image 2.5 (modelo): Modelo de geração de imagens usado para criar miniaturas e referências visuais.
H3 Max (modelo): Modelo de geração de vídeo usado para criar clipes curtos de gatos.
PostgreSQL (ferramenta): Banco de dados escolhido para armazenar os dados da aplicação.
pgvector (ferramenta): Extensão do PostgreSQL usada para armazenar e consultar embeddings.
embedding (conceito): Representação numérica de texto ou imagem usada para comparar conteúdos por similaridade.
similaridade de cosseno (conceito): Medida baseada no ângulo entre vetores usada para estimar a similaridade entre embeddings.
Better Auth (ferramenta): Biblioteca usada para adicionar autenticação à aplicação.
GitHub (empresa): Serviço onde o código é armazenado antes de ser conectado à plataforma de deploy.
Vercel (empresa): Plataforma usada para publicar a aplicação construída com Next.js.

Tradução completa (pt-BR)

00:00 Hoje temos um convidado especial, Mike, ex-engenheiro do YouTube. Ele vai mostrar como reconstruir o YouTube com IA do zero em 45 minutos. Levei mais de três anos para desenvolver o YouTube.com moderno como engenheiro de software sênior na Alphabet. Vou ensinar você a fazer o mesmo em menos de 45 minutos, sem escrever uma única linha de código. Meu nome é Mike, e vamos começar a construir. Deixe-me me apresentar direito. Durante oito anos, trabalhei na Alphabet com o YouTube e outros produtos web. Depois, fui para a Waymo, onde, durante quatro anos, tenho

00:30 ajudado a lançá-la em San Francisco e além. Depois, fundei minha própria empresa, lancei Pony Diffusion e agora estou à frente da Fictional. Hoje, vou ser seu guia. Que habilidades técnicas você precisa ter para acompanhar? Se você conhece uma IDE, consegue trabalhar no terminal e tem alguma experiência com desenvolvimento web, isso vai ajudar a entender o que está acontecendo nos bastidores. Mas você não precisa ser engenheiro de software. Não precisa saber programar. Na verdade, vamos usar nossa IDE bem pouco e

01:01 apenas para configurar algumas coisas. Então acompanhe mesmo que não tenha nenhuma dessas habilidades — você vai se divertir bastante. Vamos usar alguns serviços de terceiros no nosso desenvolvimento, e alguns deles são pagos. Essa é, obviamente, a próxima pergunta importante. Se você não tem uma assinatura de uma ferramenta de desenvolvimento com agents, como Cursor ou Codex, provavelmente é uma boa ideia assinar uma. Também vamos usar o Cloudflare para hospedar imagens e vídeos, e ele tem uma assinatura mensal, mas, na minha opinião, vale muito a pena pelo tempo que vai nos economizar. E vamos usar o FI para gerar imagens e vídeos, porque vamos criar muitos dados fictícios para o nosso site, e ele vai ficar com uma aparência ótima.

01:31 E é basicamente isso. Todo o resto é de graça. Então vamos descobrir o que podemos pedir razoavelmente aos agents hoje. O sonho, obviamente, é mandar que façam tudo: criar o produto, preenchê-lo com dados, fazer o deploy, divulgá-lo, conseguir usuários de verdade e talvez até veicular anúncios nele. Mas, embora estejamos avançando rapidamente nessa direção, provavelmente ainda estamos a um ou dois anos de chegar lá. Então, neste exercício, vamos assumir uma combinação interessante e um pouco estranha de gerente de produto e líder técnico, orientando nossos agents a construir coisas específicas. Vamos nos concentrar na página inicial, que é a fachada do youtube.com, e na página de exibição, que contém o elemento mais importante: o player de vídeo. Então vamos olhar para as páginas e tentar identificar

02:03 mais ou menos quais componentes aparecem. Se olharmos para a página inicial, ela também tem a barra superior, que contém um campo de busca e seu avatar, caso você faça login; a barra lateral, com links para outros serviços importantes do YouTube; e várias fileiras de vídeos ou Shorts que levam à página de exibição. E, se olharmos para a página de exibição, alguns elementos continuam iguais. A barra superior permanece. A barra lateral desapareceu. Isso porque queríamos maximizar o espaço dedicado ao vídeo, mas ela ainda pode ser exibida. Temos o player de vídeo, a parte mais importante da página de exibição. Temos os metadados, a descrição do vídeo, o título e o aspecto social, com comentários de outros usuários. E, como componente fundamental e muito importante, a barra lateral à direita, que contém vídeos recomendados, vídeos relacionados e vídeos com reprodução automática. Portanto, trata-se de um conjunto bem limitado de blocos de construção, apoiados por muita tecnologia

02:34 por trás deles. Mas podemos dividir as páginas em partes menores e implementar cada uma delas. Para isso, você pode usar Codex, Cursor, praticamente qualquer editor que trabalhe com agents ou até mesmo uma CLI agentic. Eu gosto do Cursor. Estou mais acostumado a usar algo que parece uma IDE e que permite envolver agents. Mas fique à vontade para usar o que quiser.

03:04 Uma coisa interessante sobre o YouTube.com original é que, quando o estávamos desenvolvendo, alguns anos atrás, nos concentramos em usar o que era considerado tecnologia de ponta. Estávamos acompanhando de perto os web components e, especificamente, um framework chamado Polymer, que nos permitia usar web components no site. Mas os tempos mudaram. O Polymer não existe mais. Os web components não resistiram ao teste do tempo. Então vamos usar um conjunto de ferramentas um pouco diferente. Para este projeto, recomendo usar o

03:35 JS, que é um framework muito sólido. Ele vai nos ajudar a evitar muitas dores de cabeça e, de modo geral, é um framework baseado em TypeScript e React muito consolidado e popular hoje em dia. Então vamos trabalhar. Agora vamos para o Cursor e começar a implementar a estrutura básica usando o Next.js. Antes de começar a construir algo legal, você pode ver que acabei de abrir uma pasta totalmente nova. Não há

04:07 arquivos à direita. Este é um projeto totalmente novo, e vou abrir um novo chat nele. O Cursor permite usar vários modelos. Ele oferece suporte a modos de planejamento e agentic, que são úteis em muitos casos, mas agora vamos usar o padrão. Ele é perfeitamente adequado para o que vamos tentar fazer. Por padrão, ele usará o modelo Grok. Há algumas opções. Você pode escolher o Opus ou o Gemini. E o prompt que você viu antes não era uma piada.

04:37 Vamos usar exatamente o prompt que escrevi no slide. Então vamos mandar ver e ver o que o agent consegue fazer. Levamos alguns minutos esperando, e precisei aprovar alguns comandos que o agent queria executar para nós, porque não tinha certeza se eram seguros. Mas nosso agent gerou vários arquivos. Ele informou que todas as operações foram concluídas e temos uma aplicação Next.js rodando no

05:08 navegador, dentro do Cursor. Neste momento, isso não impressiona muito, mas é a base inicial do nosso projeto. Agora podemos começar a construir algo que se pareça com o youtube.com. Queremos capturar a interface da aplicação que estamos criando — no nosso caso, obviamente, a página inicial do youtube.com. Há vários modelos de texto para imagem que podem nos ajudar nisso. O GPT Image 2.5, um modelo moderno, é muito bom para criar interfaces de usuário. Então esse é o

05:39 modelo que vou usar e que recomendo. Mas há muitos outros modelos. O Nano Banana, do Google, disponível pelo Gemini, é outra ótima opção, e até modelos open source, como o Qwen Image, seriam razoavelmente bons para essa tarefa. Quando tivermos a imagem da interface que queremos construir, vamos convertê-la em código, e há várias estratégias que podemos usar. Uma maneira muito popular de fazer isso é usar o Figma. O Figma é um serviço bastante usado em empresas reais e permite a colaboração entre designers e engenheiros. Por isso, é uma estratégia muito popular para muitos produtos de verdade. Uma alternativa ao Figma seria o Penpot, uma versão local do Figma. Ele permite conectar seus próprios LLMs. É outra ótima ferramenta e, se você não quiser ficar preso ao Figma, pode usá-la no lugar dele. A terceira opção é fornecer a imagem diretamente ao agent, sem usar nenhum tipo

06:12 de serviço de aplicativo externo. Isso nem sempre funciona, mas, no nosso caso, funcionaria muito bem. E essa é, na verdade, a estratégia que vou usar: pegar a imagem gerada diretamente pelo GPT Image, dentro do Codex, e fornecê-la ao agent. Ou você pode improvisar e, em muitos casos, simplesmente dizer ao agent o que implementar. No caso de serviços como o YouTube, que são muito conhecidos e sobre os quais todos os LLMs têm bastante informação, isso

06:43 modelo que eu pessoalmente vou usar e o modelo que recomendo. Mas há muitos outros modelos. O Nano Banana, do Google, disponível pelo Gemini, é outro ótimo modelo, e até modelos open source como o Qwen Image seriam razoavelmente bons para implementar essa tarefa. Agora que temos a imagem da interface que queremos criar, precisamos convertê-la em código, e há várias estratégias diferentes que podemos usar. Uma maneira muito popular de fazer isso é usando o Figma. O Figma é um serviço que você vai

07:14 ver sendo amplamente usado em empresas de verdade, onde permite a colaboração entre designers e engenheiros. Por isso, é uma estratégia muito popular para muitos produtos reais. Uma alternativa ao Figma seria o Pande, que é uma versão local do Figma. Ele permite que você se conecte aos seus próprios LLMs. É outra ótima ferramenta e, se você não quiser ficar preso ao Figma, pode usá-la como alternativa. A terceira opção é dar a imagem diretamente ao agent, sem usar nenhum tipo

07:45 de serviço de aplicativo externo. Isso não funciona em todos os casos, mas, no nosso caso, funcionaria muito bem. E essa é, na verdade, a estratégia que vou usar: pegar a imagem gerada diretamente pelo GPT Image dentro do Codex e entregá-la ao agent. Ou você pode simplesmente improvisar e, em muitos casos, basta dizer ao agent o que implementar. No caso de serviços como o YouTube, que são realmente muito conhecidos e que todos os LLMs grandes conhecem muito bem, isso seria

08:15 funcionam muito bem. Se você estiver criando algo próprio, em alguns casos, para uma interface complexa, uma descrição em texto talvez não seja necessariamente a melhor opção, e uma imagem seria mais útil. Agora, mudei para o Codex, da OpenAI, e é aqui que vou dar o comando para gerar algo que se pareça com a página inicial do YouTube.com. O prompt que estou usando é, mais uma vez, extremamente simples. Em parte porque

08:46 hoje em dia os prompts podem ser bem simples, mas também porque todo LLM de grande porte conhece muito bem o YouTube.com de verdade. Apenas um minuto depois de dar o comando, temos uma versão do YouTube. E, se olharmos para ela, está bem razoável. Parece mesmo o YouTube de verdade. Tem vários ícones relacionados a gatos. No geral, segue as cores e a estrutura do YouTube. Estou bem satisfeito com isso. E agora podemos levar isso para o nosso

09:18 Cursor. De novo, de volta ao Cursor. Vou arrastar a imagem gerada para dentro do Cursor e pedir que implemente esta versão do Cat Tube. Isso vai levar alguns minutos. O agent terá bastante trabalho a fazer, mas voltaremos provavelmente em uns 5 minutos para ver o progresso que ele conseguiu fazer nesse intervalo.

09:55 Certo, esperamos alguns minutos e, no geral, conseguimos o que queríamos. É uma versão do nosso Cat Tube. Há alguns erros aqui e ali, mas temos todas as miniaturas em 3D. Também temos a seleção de categorias na parte de cima funcionando. Obviamente, dá para clicar em qualquer coisa, mas até agora só pedimos que ele fizesse a página inicial. Então, o que podemos fazer agora é pedir que corrija alguns erros que estamos vendo na página. Mas uma coisa interessante que eu queria

10:26 confirmar é que, se eu alternar entre diferentes resoluções de tela, vou ver que ele não só implementou a página inicial, como também a fez em diferentes layouts, incluindo o layout para dispositivos móveis. Então, vamos corrigir o erro que estou vendo agora, pedindo mais uma vez ao agent, e ver o que ele consegue fazer. Com apenas um comando, conseguimos corrigir nossa aplicação. Agora está muito melhor. E, durante o processo de criação, nosso agent fez várias coisas importantes. Ele

10:57 implementou a estrutura geral. Criou uma lógica para tornar funcionais as categorias na parte de cima. Também pegou nossa imagem original, que contém miniaturas para os avatares e os vídeos, e recortou partes dela para inseri-las em nossa versão mais ou menos funcional da página inicial. Agora que temos esta página, vamos passar para a página de exibição do vídeo. Voltando ao produto, já temos uma

11:29 sessão. Então, vamos simplesmente continuar a sessão pedindo ao ChatGPT que implemente a página de exibição do vídeo agora. Certo, vamos conferir a imagem que foi gerada para nós. Parece bem razoável. O layout aqui é um pouco estranho em alguns pontos, mas nada que não possamos corrigir. Então, vamos levar isso para o Cursor e implementar a página de exibição do vídeo. Vamos basicamente repetir o que fizemos com a página inicial. Vou arrastar para o Cursor a imagem que acabamos de gerar e pedir que implemente

12:01 esta página. Isso, mais uma vez, pode levar alguns minutos, mas, como o agent já conseguiu implementar uma parte significativa do nosso layout e há muitos componentes que podem ser reutilizados, desta vez o processo será significativamente mais rápido. Agora, como podem ver, alguns minutos depois, conseguimos implementar uma página de exibição do vídeo funcional. A barra lateral é exatamente como no YouTube de verdade: fica oculta por padrão. Temos um

12:34 player de vídeo. Embora ele não faça nada agora, nem mesmo o tempo avança, o restante da página também parece bem razoável. Todos os elementos estão aqui. Podemos clicar pelas páginas e ver que até aparecem miniaturas um tanto falsas. Mas este é um ótimo começo. Obviamente, não é o YouTube de verdade, mas estamos chegando lá. Temos a página inicial e a página de exibição do vídeo. Então, vamos continuar e desenvolver isso.

13:08 Agora, teremos que fazer um desvio e pensar em como tornar nossa aplicação dinâmica. Neste momento, na maior parte, temos apenas um site estático. Sim, dá para navegar por algumas páginas de vídeo. Ele tem conteúdo que se parece com o conteúdo real, mas tudo isso é falso. Para torná-lo um pouco mais realista e dinâmico, precisamos conectá-lo a um banco de dados. Há muitas opções de bancos de dados disponíveis, mas sou um grande defensor de usar o Postgres para praticamente

13:39 tudo. É um ótimo banco de dados. Não vamos entrar em muitos detalhes sobre por que você deveria usar o Postgres, mas eu, pessoalmente, gosto muito dele. Então, vou usá-lo. E, para facilitar ainda mais a nossa vida, em vez de instalá-lo localmente ou trabalhar com Docker, vamos usar um serviço chamado Supabase. É gratuito para experimentar. Você pode hospedar um banco de dados lá. É muito fácil e conveniente, e oferece muitas ferramentas. E, para conectar ao banco de dados que vamos hospedar no Supabase, vamos usar o

14:11 Drizzle. Você não precisa usar um ORM. Na verdade, pode usar algo de nível mais baixo, como o Slonik, ou até escrever tudo à mão, o que eu não recomendaria. Gosto de usar ORMs nos casos em que são úteis. Então, vamos começar a configurar nosso projeto. A primeira coisa que precisamos fazer é criar o banco de dados, cadastrar-nos no Supabase e conectá-lo ao nosso projeto. Então, criei um novo

14:42 banco de dados no Supabase. Agora, queremos conectar esse banco de dados à nossa aplicação e configurá-la para usar essa conexão para armazenar os dados. Se eu acessar minha conta do Supabase e clicar em “Conectar”, ele vai me mostrar uma lista de diferentes maneiras de conectar este banco de dados. Estamos usando um ORM. Então, vou clicar nele, selecionar o Drizzle, e ele vai me fornecer uma URL do banco de dados, mas também vai me dar um prompt completo

15:12 para que eu possa simplesmente instruir meu agent de programação a usar essa configuração específica. Agora colei no meu agent o prompt exato fornecido pela interface do Supabase e vou pedir que ele o implemente. Perfeito. Agora criamos os bancos de dados necessários. Conectamos ao banco de dados. Tudo funciona. Agora podemos migrar os dados que temos na aplicação para usar esse banco de dados

15:45 e também criar uma interface de administração que nos permita editar os dados. Essa tarefa me parece bem grande. Há muitas partes envolvidas. Então, em vez de simplesmente usar a estratégia de agent, vou mudar para o modo de planejamento e deixar o agent primeiro tentar descobrir quais etapas são necessárias para concluir essa tarefa bastante complexa. Como podem ver, o agent está nos fazendo algumas perguntas. A primeira pergunta é se

16:16 deveríamos usar algum tipo de autenticação no projeto real. Obviamente, vamos ter algo assim. Mas vamos trabalhar na autenticação um pouco mais adiante neste projeto. Perfeito. O agent criou um plano para nós. Agora vamos revisar esse plano rapidamente. Como podem ver, ele criou o schema para nós. Analisou todas as partes críticas deste banco de dados. Na verdade, passou por uma quantidade considerável de raciocínio e

16:46 basicamente está nos apresentando um plano bem razoável que parece cobrir tudo o que eu queria. Então, vou prosseguir e deixar o agent construir isso, porque tudo aqui faz sentido para mim. Tudo o que pedi está contemplado. Vamos criar objetos reais no banco de dados. Vamos preenchê-los com os dados que atualmente estão incluídos de forma estática no site. E vamos criar uma interface para navegar por esses dados, editá-los e adicionar mais, se quisermos.

17:20 O agent terminou de processar os dados, e temos duas coisas para conferir. Primeiro, temos o mesmo site. Ele está funcionando. Podemos continuar navegando por ele, e parece que todos os dados ainda estão lá. Obviamente, não houve uma grande mudança em relação ao que tínhamos antes. Mas, se agora acessarmos a nova URL especial que foi criada pelo agent, veremos um dashboard. E, se examinarmos os dados que esse dashboard representa, veremos todos os nossos vídeos.

17:52 Podemos editar esses vídeos. Podemos até criar um vídeo novo. Vamos voltar aos comentários. E todos os comentários continuam aqui. Então, todos os dados que antes eram estáticos agora são dinâmicos e estão disponíveis para edição. Mas vamos confirmar se esses dados realmente existem no nosso banco de dados. E voltar ao Supabase para conferir o que há dentro do nosso banco de dados.

18:23 E, de fato, podemos ver que, se acessarmos o editor de tabelas no Supabase e abrirmos, por exemplo, a tabela de comentários, todos os dados estão aqui. Vamos aos vídeos. Todos os dados estão disponíveis aqui. E o agent até criou algumas outras tabelas. Todos os objetos relacionados aos vídeos estão representados aqui. As categorias estão representadas aqui. Todos os canais também estão aqui. Então, basicamente, transferimos

18:53 todos os dados que antes estavam alocados estaticamente para um banco de dados. Isso não nos ajuda imediatamente, mas é um passo importante para fazer algo muito mais legal. Agora, como vivemos na era dos LLMs e da IA generativa, podemos usar muitas ferramentas disponíveis para criar conteúdo para o nosso site e conseguir vídeos de gatos realmente legais e incríveis. Mas, antes de chegarmos a isso, vamos conectar o Cloudflare. É um serviço de terceiros e, infelizmente, é um daqueles serviços pelos quais você precisa pagar. Mas ele resolve dois problemas muito importantes com os quais temos que lidar no nosso projeto. O primeiro deles são as imagens hospedadas. Tecnicamente, isso não é obrigatório. Você pode fazer isso por conta própria. Mas contar com um serviço de terceiros que tenha uma rede de distribuição de conteúdo muito boa para servir suas imagens, ofereça redimensionamento de imagens e consiga servi-las de forma muito rápida e eficiente é muito legal. É um serviço muito popular. A maioria das grandes empresas usa o serviço para hospedar imagens.

19:25 Mas, para nós, um problema muito maior é a hospedagem e a transmissão de vídeos. O YouTube de verdade é uma enorme máquina no backend que sabe processar vídeos, reencodá-los, dividi-los, extrair metadados e, em geral, entregá-los de forma eficiente em muitas plataformas diferentes. Com certeza poderíamos criar isso, mas seria um projeto significativamente maior do que o que estamos desenvolvendo agora. Então, vamos depender do Cloudflare para

19:56 servir os vídeos para nós e do player do Cloudflare para reproduzi-los, porque isso vai simplificar bastante a nossa aplicação e nos ajudar a chegar mais rápido à linha de chegada. Vamos conectá-los à nossa aplicação nas próximas etapas, mas, na verdade, não precisamos fazer muita coisa. Já configurei o Cloudflare. Já importei as permissões e os tokens necessários para o meu projeto. Então, vamos apenas pedir aos agents que usem o Cloudflare enquanto ele é preenchido com dados. E esse é o próximo processo interessante. Vamos

20:28 gerar esses dados. Vamos criar vídeos de gatos em tempo real. Como vamos criar esses vídeos de gatos? Precisamos de três coisas diferentes. Vou mostrar algo de que eu particularmente gosto e que considero muito útil. Precisamos de três componentes. Um LLM que nos ajude a gerar o nome do vídeo, a ideia geral dele e talvez alguns metadados. Basicamente, ele vai alucinar uma possível variação de um vídeo de gato que poderia existir. Depois, vamos

20:59 usar um modelo de imagem para gerar a miniatura, que será baseada na descrição do vídeo produzida pelo LLM. E então vamos usar essa miniatura para gerar um vídeo. Tecnicamente, podemos fazer isso sem a miniatura, mas gosto dessa abordagem porque ela nos dá a miniatura de que vamos precisar de qualquer forma e nos dá muito mais controle sobre o que vamos ver. Para fazer isso, vou usar o FAL.AI, que é um ótimo agregador de vários modelos de texto e vídeo.

21:30 E, dentro do FAL, vamos usar o Open Router. Isso é um pouco complicado, porque o Open Router é, na verdade, um projeto independente. Você pode usar o Open Router por conta própria. Mas o motivo de eu usá-lo pelo FAL é que assim posso usar uma única chave de API e ter acesso a tudo. Então, vamos usar o Open Router e o modelo GPT image 2.5 para gerar miniaturas. E, para a geração de vídeo, vamos

22:01 usar o H3, especificamente a variação H3 Max, desenvolvida pela FAI. Ele tem uma versão turbo que nos permite gerar vídeos de até 15 segundos muito rápido e por um preço bem baixo, porque a geração de vídeo ainda é cara. Mas, desse jeito, podemos criar vídeos de gatos realmente incríveis por um preço bem baixo. Vamos passar à implementação do nosso pipeline de criação de vídeos. Precisamos apagar os dados existentes que temos agora no banco de dados. Gerar usuários fictícios,

22:32 canais, comentários e também vídeos. Para os vídeos, dá um pouco mais de trabalho, porque precisamos tanto dos metadados — o título do vídeo, a descrição da miniatura e a descrição do vídeo que usaremos para gerar as miniaturas e os vídeos — quanto das imagens, as miniaturas. Depois, devemos gerar o vídeo propriamente dito usando o modelo H3, enviá-los para o Cloudflare e garantir que esses vídeos e essas imagens sejam usados no site. Com certeza, este é um caso em que seria ótimo

23:03 usar o modo de planejamento, porque vão acontecer muitas coisas. Gostaria de revisá-las antes que o agent comece a construir qualquer coisa. Talvez você tenha notado que ainda estou usando a mesma sessão de chat e, neste caso específico, isso faz sentido. A maior parte do trabalho que estamos fazendo é um único projeto contínuo: estamos construindo nosso CatTube. Embora isso não seja essencial, muito do contexto do que aconteceu antes será útil para o agent entender aonde estamos indo. Ainda temos bastante contexto disponível, e não há motivo real para não

23:33 continuar usando o mesmo chat daqui para a frente. Certo, vamos ver qual é o plano agora. Gosto muito deste diagrama, porque ele realmente representa o processo inteiro de criação do vídeo sobre o qual falei. Obviamente, não é nenhuma surpresa, mas é bom ver isso visualizado. Confirmamos que queremos ter 12 vídeos. É exatamente a quantidade de vídeos que temos agora. Mas, como a geração de imagens e, especialmente, de vídeos pode ser bem cara, faz sentido começar com apenas algumas imagens. Vejo que os modelos escolhidos pelo agent

24:05 são muito razoáveis. Não tenho nenhuma preocupação aqui. Ele levou em conta a hospedagem no Cloudflare. Está tudo ótimo. O schema será atualizado porque precisamos fazer os vídeos serem reproduzidos. Faz todo o sentido. Ele vai criar um script, o que também faz sentido. O script vai preencher os dados. Sim. Perfeito. Tudo isso faz sentido. Então, podemos começar a construir.

24:38 Estamos de volta, e as miniaturas mudaram. Se abrirmos uma delas e olharmos o que foi gerado, veremos vídeos totalmente gerados por IA, e tudo o que vocês estão vendo na tela agora é outro vídeo gerado por IA, o que é bem legal. Por enquanto, eles têm apenas 5 segundos, mas podemos trabalhar nisso e melhorar a resolução. Mas, para este teste, está muito bom. Acho que está com uma aparência muito,

25:10 muito razoável. E, neste momento, está começando a parecer um site de verdade. Ainda estamos usando dados fictícios e não estamos permitindo que os usuários enviem nada, mas, se fizermos o deploy agora, teremos uma versão totalmente funcional do nosso CatTube. Mas há algumas coisas realmente interessantes que o YouTube faz e que ainda não temos. Quero me concentrar em duas delas. A primeira é a busca, e a outra são os vídeos relacionados.

25:40 bem razoável. E, a esta altura, está começando a parecer um site de verdade. Embora ainda estejamos usando dados simulados e não estejamos permitindo que os usuários enviem nada, se fizermos o deploy agora, teremos uma versão totalmente funcional do nosso clone. Mas há algumas coisas muito interessantes que o YouTube faz e que ainda estão completamente faltando. Quero me concentrar em duas delas. A primeira é a busca, e a outra são os vídeos relacionados.

26:11 Então, como vamos implementar a busca e os vídeos recomendados? Bem, trapaceando. Em um serviço real como o YouTube, há equipes enormes cuidando desses dois problemas. E, em muitos casos, tanto a busca quanto os vídeos relacionados ou recomendados são uma questão de vida ou morte para muitos serviços, porque conseguir recomendar exatamente os vídeos que você quer assistir é provavelmente uma das coisas mais importantes que um serviço como o YouTube pode fazer. Não temos capacidade para implementar isso em grande escala. Então,

26:41 vamos fazer algo pequeno e precisamos pensar a respeito. O que estamos realmente fazendo? Quando você pesquisa um vídeo, tenta encontrar algo parecido com o texto da sua consulta. E, se pensarmos nisso em alto nível, o que seria um vídeo? Podemos pensar no vídeo como o título dele. Talvez possamos considerar a miniatura do vídeo ou o roteiro completo, talvez as legendas, talvez o próprio vídeo. Então, há muitos componentes bem diferentes

27:12 do vídeo que podemos usar. Uma maneira bem simples de fazer a busca seria, por exemplo, usar apenas o título. Se você digitasse “gatos” na caixa de busca, encontraríamos todos os títulos que contêm a palavra “gato”. Mas isso seria uma simplificação significativa, porque, se você digitasse “gato”, nunca encontraríamos um vídeo que tivesse “tigre” ou “parque” no título. Então, queremos algo mais inteligente. E, de novo, o que estamos usando para descobrir o que são os vídeos?

27:42 A maneira como vou lidar com isso neste projeto é pensar em dois tipos de conteúdo. Vou pensar no texto e na miniatura do próprio vídeo. A miniatura obviamente não é o vídeo inteiro, mas representa muito bem do que ele trata. Agora, precisamos falar um pouco de teoria, porque isso é necessário para entender como calcular a similaridade. Vamos falar de algo chamado embedding. Um embedding,

28:15 se você observar como ele é representado no computador, é apenas uma longa lista de números. E esses números têm um significado muito específico. Mas é um significado que nós, humanos, não conseguimos entender muito bem. Então, você pode pensar em um embedding como uma longa lista de números. Cada título terá um embedding. Cada vídeo terá um embedding. A questão é: como criar esses números, como usá-los e por que precisamos deles

28:45 em primeiro lugar? Bem, se pensarmos apenas no texto, os embeddings são criados de modo que palavras parecidas e que fazem sentido para nós, humanos, fiquem próximas umas das outras. Já termos muito diferentes ficam a certa distância. Vamos usar tanto texto quanto imagens. É aí que podemos usar modelos chamados multimodais

29:16 que criam embeddings para texto e imagens no mesmo espaço de embeddings. Isso significa que a imagem de um leão fica próxima de um texto que diz “gato”, e a imagem de um gato fica próxima da palavra “tigre”. Isso é extremamente útil e nos permite dizer que estas coisas estão próximas, enquanto aquelas não estão e ficam distantes. Tecnicamente, para lidar com

29:46 essa similaridade, usamos algo chamado similaridade de cosseno, porque essa longa lista de números é, na verdade, um vetor. Então, calcular o ângulo entre esses vetores nos permite entender se eles estão próximos ou não. Se criarmos embeddings para nossos textos e para nossas miniaturas, poderemos entender quais coisas são parecidas entre si e ordenar por essa similaridade. Assim, se você tiver um vídeo de um gato, poderemos encontrar todos os

30:17 outros vídeos muito parecidos com aquele vídeo específico, com base apenas na similaridade entre as miniaturas. É uma simplificação, com certeza, mas vai funcionar muito bem. Agora temos dois problemas para resolver. Precisamos descobrir onde e como armazenar esses embeddings e, obviamente, como calculá-los. Quanto ao armazenamento, por bastante tempo, não se recomendava armazená-los em bancos de dados comuns, porque, embora seja possível fazer isso, encontrar similaridades com eficiência exige cálculos matemáticos nada triviais, e os bancos de dados tradicionais não conseguiam fazer isso. As pessoas usavam bancos de dados especializados externos, como Pinecone ou Weaviate. Para nossa sorte, em 2026, o Postgres alcançou os demais e tem uma extensão especial chamada pgvector, que funciona muito bem. Então, podemos armazenar nossos embeddings no banco de dados que já usamos. Não precisamos adicionar nenhum outro componente e voltamos a usar basicamente o

30:48 fazer uma busca eficiente por similaridade exige matemática não trivial, e os bancos de dados tradicionais não conseguiam fazer isso. As pessoas usavam bancos de dados especializados externos, como Pinecone ou Weaviate. Para nossa sorte, em 2026 o Postgres alcançou esse patamar e tem uma extensão especial chamada pgvector, que funciona muito bem. Assim, podemos armazenar nossos embeddings no banco de dados habitual. Não precisamos introduzir nenhum outro componente e voltamos basicamente a usar

31:18 Postgres para tudo. Pedi ao nosso agent que gerasse mais alguns vídeos, só para ficar mais evidente quando há vídeos relacionados entre si. Abri um vídeo de um gato super-herói e, como podem ver, o mais relevante é outro super-herói. Se eu abrir um vídeo de esportes, os dois primeiros vídeos são parecidos tanto em termos de conteúdo quanto

31:48 de estilo visual. É um vídeo em preto e branco, no estilo noir. Se eu abrir algo mais sofisticado, o desfile de moda, temos outro vídeo de anime. Este é interessante porque o K tem uma lupa, e o vídeo mais relevante é outro vídeo com uma lupa. Mas agora eu gostaria de implementar a busca, porque até aqui temos apenas vídeos relacionados. Com a busca,

32:19 já não se trata da similaridade entre um vídeo e outro — ou, no nosso caso, entre uma miniatura e outra —, mas entre o texto e a miniatura. A complexidade vem do fato de que já não estamos pré-carregando esses dados no backend. Na verdade, precisamos pegar a consulta do usuário, convertê-la rapidamente em um embedding e, então, fazer a busca. Essa é a próxima tarefa que vamos resolver. Agora, vamos pedir ao nosso agent para implementar a busca, pegando a consulta fornecida pelo usuário e convertendo-a em um embedding

32:51 CLIP; em seguida, encontrar os vídeos mais parecidos com esse embedding CLIP. Certo, nosso agent levou alguns minutos para implementar tudo. Vamos ver como funciona. Vou tentar pesquisar “noir”. Perfeito. Parece que encontramos várias imagens em preto e branco. Gostei muito desta. É, eu diria que isso parece bem noir.

33:23 E “super-herói”? Certo. De novo, para mim, isso parece bem coisa de super-herói. E esportes? Mais uma vez, parece que a busca está totalmente implementada agora. Então, temos vídeos relacionados, a busca está funcionando, os vídeos estão sendo reproduzidos, temos miniaturas e dados de teste.

33:53 Já parece uma aproximação bem razoável do YouTube. Ainda faltam algumas partes. Então, o que eu gostaria de fazer agora é dar uma aprimorada geral em tudo. Nossa interface de administração está aberta para todo mundo. Criamos uma conta de usuário falsa para nós. Não dá para se inscrever em nada. Então, acho que vamos fazer duas coisas agora. Primeiro, vamos dar uma polida em tudo. Segundo, vamos introduzir uma autenticação bem simples. Vamos usar um serviço chamado Better Auth, mas

34:26 ele também é um conjunto de bibliotecas. Você pode usar o serviço ou apenas as bibliotecas, de forma totalmente independente. E, no nosso caso, só precisamos das próprias bibliotecas. Então, vamos pedir ao nosso agent para arrumar algumas coisas e configurar a autenticação. Estamos usando um prompt extremamente simples. Vamos apenas pedir ao nosso LLM e ao nosso agent para implementarem exatamente o que mencionei, e há bastante trabalho aqui. Então, talvez seja razoável passar pelo modo de planejamento.

34:56 Mas vou usar o modo agentic porque, bem, há bastante trabalho. Parece bem direto e não há nenhuma ressalva estranha. Bem, parece que conseguimos implementar a autenticação com sucesso. Algumas coisas mudaram na página. Agora vejo que preciso fazer login. E, se eu tentar acessar a interface de administração manualmente, ela vai me mostrar um…

35:28 formulário de notificações. Então, vamos usar uma conta que nosso agent criou especificamente para testar as coisas e confirmar que conseguimos entrar. E, de fato, conseguimos entrar. Podemos acessar nosso painel. Vamos ao site. Vamos clicar em alguns vídeos. Teste o botão de inscrição. Agora está funcionando. Vamos às nossas inscrições. E, de fato, agora temos vídeos de alguns canais nos quais nos inscrevemos anteriormente

35:59 Então, o site está ficando cada vez mais parecido com um site comum. Mas falta uma coisa, e isso é algo que realmente me incomoda. Se você usa o YouTube normalmente, vai notar que ele tem modo claro e modo escuro. E nós só temos o modo claro. Isso é definitivamente uma grande falha. Então, vamos dar mais um polimento e adicionar o modo escuro, porque quero que nosso site fique muito legal.

36:33 Parece que, com apenas um prompt pedindo ao nosso agent para adicionar o modo escuro, conseguimos implementá-lo por completo. Vamos alternar entre os modos algumas vezes. Para mim, parece muito bom. Não precisei corrigir nada. A página de exibição está ótima. Tudo aqui faz sentido. Acho que até esse pequeno detalhe legal aqui também está mudando de cor. Isso é bem legal. Então, eu gostaria muito que nós

37:04 tivéssemos isso naquela época, porque levamos meses para garantir que o YouTube ficasse bom no modo escuro, e agora literalmente levei 5 minutos. Então, está tudo ótimo, e acho que agora estamos prontos para mostrar ao mundo o que construímos, porque, bem, ainda faltam muitas coisas. Não temos envio de vídeos. Todos os nossos vídeos ainda são gerados por IA. Acho que esta é uma aproximação bastante razoável de como seria a versão um do YouTube. Então, quero colocá-la online. E, para fazer isso, temos novamente muitas opções diferentes.

37:35 Mas, como estamos construindo com base no NexJS, temos uma maneira bem simples de hospedar isso usando Verscell. A Versel é a empresa por trás do Nex.js. Então, faz todo o sentido que ela ofereça maneiras bem simples de fazer deploy de um projeto NexJS. Mas falta uma coisa: a maneira típica de fazer deploy de uma aplicação Versal NetJ é usando o GitHub. E nós não criamos um projeto. Não usamos o GitHub aqui. Era literalmente uma pasta local no nosso computador. Então, vamos colocar nosso

38:07 código no GitHub e depois conectá-lo à Versel. Então, fui ao GitHub e criei um repo para nós. Mas aqui está o problema: nunca inicializei essa pasta a partir desse repo. E, na verdade, não sou tão bom com Git a ponto de entender o que fazer aqui. Então, por que não pedimos ao nosso agent para fazer tudo por nós? Porque, bem, agents não servem apenas para programar. Eles servem para fazer praticamente tudo.

38:45 Pedi ao meu agent para colocar o código no GitHub e, deixa eu dizer, isso levou um tempo, porque tenho uma configuração complexa nesta máquina. Várias contas do GitHub, várias versões do Cursor conectadas a diferentes repos. Então, ele precisou investigar várias coisas para conseguir conectar esta versão específica do meu projeto à conta do GitHub que eu queria usar. E tenho certeza de que, se eu tentasse descobrir isso, ficaria lendo a documentação por algumas horas, mas ele levou cerca de 5 a 7

39:18 minutos. E agora posso acessar o GitHub e verificar se os arquivos estão lá. Sim, todos os arquivos estão no nosso GitHub. Estamos prontos para começar a conectar este projeto à Verscell. Então, vou mudar para a Verscell agora. Ela já reconheceu meu repo do GitHub porque conectei minha conta anteriormente, entrando pelo GitHub. Então, vou importá-lo.

39:50 E, para configurar completamente nossa aplicação, precisei fazer apenas duas coisas. Acessei a predefinição da aplicação e selecionei a aplicação NexJS; depois, fui às variáveis de ambiente e importei o arquivo que já estava no meu projeto, porque ele não faz parte do que é enviado ao GitHub. Ele contém suas informações secretas. Então, você não quer tê-lo no seu repo do Git, mas ainda precisa dele para fazer o deploy completo do site. Assim, ele sabe aonde se conectar, qual banco de dados usar e todas as coisas que basicamente adicionamos durante o processo de desenvolvimento

40:20 Então, agora vou prosseguir e fazer o deploy desta aplicação. Parece que encontramos um problema depois do deploy. Vejo que a prévia do meu serviço não está mostrando o site que eu esperava. Vejo que a taxa de erros está em 100%. Então, há algo muito, muito errado. Vamos aos logs da Versal e fazer um pouco de depuração. Vejo que, na verdade, nenhuma das páginas que tentei acessar funcionou. E, se eu abrir o log, vou ver que ele reclama de não encontrar um módulo Onyx runtime para o note. Bem, usamos o Onyx runtime para gerar embeddings do CLIP. E isso não é bom, porque presumimos que esse módulo estaria disponível. Mas a forma como a Versal funciona e faz o deploy não é totalmente compatível com a configuração inicial que fizemos. Bem, vamos pedir a um agent para corrigir isso para nós. Então,

40:50 vamos copiar esse erro, voltar ao agent e pedir que ele corrija isso. Mais uma vez, meu prompt foi extremamente simples. Literalmente copiei e colei os erros que encontrei e acrescentei só um pouco de contexto. Disse ao meu agent que este é um deploy na Versell e pedi que ele criasse um pull request no GitHub, porque eu gostaria de revisar as

41:22 alterações antes de fazer o deploy e levou alguns minutos, mas agora temos uma solução. Então, vamos ao GitHub e conferir o que foi gerado. Perfeito. Vejo que já temos um pull request criado pelo nosso agent. Vamos conferir. Ele passou por várias verificações. E podemos ver o que a Versal acha da nossa alteração visualizando o build.

41:52 E olhem só. Parece que, desta vez, o site carregou. Então, vamos voltar ao GitHub. Vamos fazer merge deste PR. Depois, vamos voltar à Versal e ver como estão as coisas. Do outro lado. Bem, olhem só. Nosso deploy

42:23 foi concluído com sucesso depois que fizemos o deploy da correção. Vamos abrir o site. Vamos ver o que temos. E parabéns. Esta é a nossa versão bem pequena, mas muito bonitinha e superamigável para gatos, do YouTube. Vamos clicar em algum vídeo. Gosto deste. Incrível. Se você tiver interesse em uma conversa mais aprofundada

42:54 sobre a história da engenharia do YouTube, sobre como construir algo assim hoje, tiver alguma pergunta para mim ou simplesmente quiser ouvir histórias dos tempos do YouTube, pode me encontrar no Bite Bitego. Eu e outros construtores de verdade compartilhamos nossa experiência no setor. Meu nome é Mike. Foi um prazer estar com vocês hoje, e espero que tenham aprendido algo novo e útil. Até mais.

43:25 conversa sobre a história da engenharia do YouTube, sobre como construir algo assim hoje, se tiver alguma pergunta para mim ou simplesmente quiser ouvir histórias dos tempos do YouTube, você pode me encontrar no ByteByteGo. Quando eu e outros construtores de verdade compartilhamos nossa experiência no setor, meu nome é Mike. Foi um prazer estar com vocês hoje, e espero que tenham aprendido algo novo e útil. Até mais.

Transcrição original

[00:00] Today we have a special guest, Mike, a former YouTube engineer. He will show you how to rebuild YouTube with AI from scratch in 45 minutes. It took me over three years to build modern YouTube.com as a staff software engineer at Alphabet. I’m going to teach you how to do the same under 45 minutes without writing a single line of code. My name is Mike and let’s get to building. Let me introduce myself properly. For 8 years, I worked at Alphabet on YouTube and other web properties. I then moved to way more where for four years I’ve

[00:30] been helping to launch it in San Francisco and beyond. I then started my own company released pony diffusion and now running fictional. I will be a guide for today. What kind of technical skills do you need to follow along? If you are familiar with an IDE, can work in a terminal and have some amount of web development skills that would help you understand what’s going on under the hoop. But you don’t need to be a software engineer. You don’t need to know how to code. As a matter of fact, we will be using our ID very lightly and

[01:01] only to set up a few things. So follow along even if you have none of the skills and you’re going to have a lot of fun. We will be using a small set of third-party services in our development and some of them do require payment. So this is obviously the next important question. If you don’t have a subscription for an agentic development tool like cursor or codex, it’s probably a good idea to get one. We’ll also be using Cloudflare to host images and videos, and it has a monthly

[01:31] subscription, but I personally think it’s totally worth it because of how much time it’s going to save us. And we will be using FI for image and video generation because we’ll be creating a lot of mock data for our website and it’s going to be looking really good. And that’s pretty much it. Everything else is free. So let’s figure out what can we reasonably ask from agents today. Obviously the dream is to tell them to do everything. Build the product, populate it with data, deploy it,

[02:03] promote it, get some real users, maybe even run some ads on it. But we are while rapidly approaching it, still probably a year or two away. So we will be this interesting and slightly weird combination of a product manager and technical lead instructing our agents to build specific things. And for this exercise we’ll be focusing on the homepage which is the face of youtube.com and the watch page which contains the most important surface which is the video player. So let’s look at the pages and try to figure out

[02:34] roughly what components we see. If we look at the homepage, it also has the top bar which contains a input box for the search, your avatar if you sign in, the sidebar which has endpoints to important other services of YouTube and multiple shelves of either videos or shorts that actually lead to the watch page. And if we want to check the watch page, some of the elements remain the same. Top bar is there. Sidebar has disappeared. And we can because we

[03:04] wanted to maximize the amount of surface dedicated to the video, but it can still be shown. We have the video player, the most important part of the watch page. We have the metadata, the description of the video, its title, the social aspect with comments from other users. And in a critical and very important component, the sidebar on the right, which contains the recommended videos and the related videos and autoplay videos. So pretty much a very limited set of building blocks that have a lot of technology

[03:35] backing them up. But we can split the pages into small pieces and implement these pieces one by one. And for that you could use codex, you can use cursor pretty much any editor which can use agents or even just a gentic CLI is sufficient. I like cursor. I’m more used to using something that looks like IDE and has an ability to involve patients with it. But you’re free to do whatever you want.

[04:07] Now, something interesting about the original YouTube.com is that at a time we were building it a few years ago, we focused on using what was considered state-of-the-art. We were looking actively at web components and specifically a framework called polymer which allowed us to use web components within the website. Now the times have changed. Polymer is no longer around. Web components didn’t survive the test of time. So we’re going to be using slightly different set of tools. And my recommendation for this project is to

[04:37] use JS which is a very solid framework. It’s going to help us avoid a lot of headache and generally just really well established TypeScript react based frameworks that very popular nowadays. So let’s get to work. We are going to move to cursor now and start implementing our very basic scaffolding using the netj before I get to building something cool. You can see that I just open a completely new folder. There are no

[05:08] files on the right. This is a completely new project and I will open up a new chat in this project. Cursor allows you to use multiple models. It supports planning and agentic modes that are useful in many cases, but right now we’re just going to go with default. It’s perfectly fine for whatever we’re going to try to achieve right now. It will default to the Gro model. You have a few options. You can go with Opus. You can go with Gemini. And the prompt that you saw before actually not a chalk.

[05:39] We’re going to be using that prompt exactly like I typed it in the slide. So let’s fire away and let’s see what the agent can cook for us. It took us a few minutes of waiting and I had to proof a few commands that the agent wanted to run for us and wasn’t sure if that’s safe to do. But we have a number of files generated by our agent. Our agent has reported that all of the operations has been completed and we have an exjest application running in

[06:12] the browser inside of curs. That’s not very impressive at this point, but it’s our starting foundation. And now we can get to building something that resembles youtube.com. What we want to do is we want to capture the interface of the application that we’re building. In our case, obviously the front page of youtube.com. And there are a number of text to image models that can help us to do this. The modern GPT image 2.5 is very very good at building UI interfaces. So this is the

[06:43] model that I personally going to be using and the model that I recommend. But there are many other models. Nana Banana by Google available through Gemini is another great model and even open- source models like Quen image would be reasonably good at implementing this task. Now when we have the image of the interface that we want to build, we actually want to convert the interface into code and we have a number of different strategies that we can use. A very popular way of doing this is using Figma. Figma is a service that you will

[07:14] see being widely used in real businesses in real companies allows collaboration between designers and engineers. So it’s a very popular strategy for a lot of real products. An alternative to Figma would be pande which is a local version of Figma. It allows you to connect to your own LLMs. It’s another great tool and if you don’t want to be stuck with Figma, you can use it alternatively. The third option is giving the image directly to the agent bypassing any kind

[07:45] of external application services. It doesn’t work in all cases but in our case would work beautifully. And this is actually the strategy that I’m going to be working with by taking the image generated directly by the GPT image inside of Codex and giving it to the agent. Or you can just wing it and in many cases you can just tell agent what to implement. In case of services like YouTube which are really wellnown and all of the large language models are well aware of what YouTube is that would

[08:15] work really well. If you’re building something of your own, some a complex UI in some cases text description may not necessarily be the best and image would be more beneficial. I have now switched to Codex by OpenAI and this is where I’m going to give it the command to generate something that resembles a homepage of YouTube.com. The prompt that I’m using is once again extremely simple. Partially because

[08:46] prompts nowadays can be pretty simple, but also because every large language model is well aware of what real youtube.com is. Just one minute after I issued the command, we have a version of YouTube. And if we look at it, it’s pretty reasonable. It does look like real YouTube. It has a number of icons that are all about cats. It generally follows the colors and the structure of YouTube. I’m pretty happy with this. And this is something we can now move to our

[09:18] cursor. Again, back to cursor. I’m going to drag the generated image inside of the cursor and ask cursor to implement this version of cat tube. It will take us a few minutes. The agent will have to perform quite a lot of work, but we will be back in probably about 5 minutes and see the progress that the agent was able to do at the time.

[09:55] All right, so we had to wait a few minutes and we generally got what we wanted. It’s a version of our cat 2. There are a few mistakes here and there, but we’ve got all of the thumbnails 3D. We’ve got even functional selection of categories on top. Obviously, you can click on anything, but we only asked it to do the homepage so far. So, what we can do now is we can ask it to fix a few mistakes that are seeing on the page. But one interesting thing that I wanted

[10:26] to confirm is if I go through different resolutions on the screen, I’ll actually see that not only it implemented the homepage, it did implement it in different layouts including mobile layout. So let’s fix the mistake that I see right now by asking agent one more time and see what it will be able to do. With just one command, we’re able to actually fix our application. It looks much better now. And in the process of building it, our agent actually did a lot of important things. They

[10:57] implemented the general structure. They created some logic to make the top categories functional. They also took our original image that contains thumbnails for avatars and the videos and it cut the part of our original thumbnail so it can insert them in our more or less functional version of the homepage. So now that we have this page, we’re going to be moving to the watch page. Returning to products, we already have a

[11:29] session. So we’re just going to continue the session asking chat GPT to implement the watch page now. All right, let’s check the image that was generated for us. Feels very reasonable. The layout here is a little bit weird in some places, but nothing that we can’t really fix. So let’s move this to cursor and implement the watch page. text. We’re going to pretty much replicate what we did with the homepage. I’m going to drag the image that we just generated into cursor and just ask to implement

[12:01] this page. This once again may take a few minutes, but because the agent was already able to implement a significant part of our layout and there are a lot of pizzas that can be reused, this time it’s going to be significantly faster process. Now, as you can see, a few minutes later, we actually got a functioning watch page implemented. The sidebar is exactly like it’s on real YouTube, hidden by default. We have a

[12:34] video player. Uh, while this doesn’t do anything right now, even the time progresses, but the rest of the page seems also very reasonable. All of the elements are here. We can actually click through the pages and see how we even have somewhat fake thumbnails show up. But this is a very good start. Obviously, this is not real YouTube, but we’re getting there. We got the homepage, got the watch page. So, let’s continue and develop this further.

[13:08] Now, we’ll have to make a detour and actually think about how to make our application dynamic. Right now we just have for the most part a static website. Yes, you can go through a few of the video pages. It has content that resembles real one, but this is all fake. And in order for us to make it somewhat more realistic and dynamic, we need to connect it to database. There are numerous options of databases available to us, but I’m a big proponent of just using posgress for pretty much

[13:39] everything. It’s a great database. We’re not going to go into much detail on why you should use posgress, but I personally love it. So, I’m going to use it. And in order to make our life even simpler, instead of installing it locally or you know working with Docker, we are going to be using a service called Superbase. It is free to try. You can host a database there. It’s very easy, convenient, and provides us with a lot of tools. And in order to connect to the database that we’ll be hosting on Superbase, we will going to be using

[14:11] Drizzle. You don’t need to use an RM. You can actually just use something lower level as Sloanic or even write everything by hand, which I wouldn’t recommend. I like using RMS in places where it’s useful. So, we’re just going to start setting our project. And the first thing that we need to do, we’re going to create the database and register on Superbase and connect it to our project. So I went ahead and I’ve created a new

[14:42] database within Superbase. And what we want to do now is to connect this database to our application and instruct it to use this connection to store the data. If I go to my superbase uh account and if I click on the connect it will provide me with a list of different ways to connect this database. We are using ORM. So I’m going to click on it select dri and it will give me an database URL but it also gives me a whole prompt

[15:12] so I can just instruct my coding agent to use this particular setup. Now I’ve pasted the exact prompt that was given to me by the superbase interface into my agent and I’ll ask it to implement it. Perfect. So now we have created the necessary databases. We have connected to the database. Everything works. Now we can actually migrate the data that we have an application to use this database

[15:45] and also create an admin interface which will allow us to edit the data. This task seems to be pretty large to me. There going to be a lot of moving pieces. So instead of just using an agent strategy, I’m going to switch into the planning mode and I will let the agent first try to figure out what steps are necessary to actually get this pretty complex task done. As you can see, the agent is asking us some questions. First question is if we

[16:16] should be using some kind of authentification in the real project. Obviously, we’re going to be having something. But we’re going to be working on a notification a little bit later in this project. Perfect. So, the agent has created the plan for us. We’re going now to quickly review this plan. And as you can see, it created the schema for us. It went through all of the critical parts of this database. It actually went through quite a significant amount of reasoning and

[16:46] basically presenting us with a very reasonable plan that seems to be covering everything that I wanted. So, I’ll go and move forward with letting the agent build this because everything here makes sense to me. Everything that I requested is being covered. We are going to be creating real database objects. We’re going to be populating them with the data that we currently have statically included in the website. And we’re going to be building an interface to go and browse through this data and edit and add more if we desire to.

[17:20] The agent has finished processing the data and we have two things to check. First of all, we have the same website. It’s operational. We can continue clicking through it and seems like all the data is still there. Obviously, not a big change from what we had before. But if we now navigate to the special new URL that was created by the agent, we can see that we have a dashboard. And if we go through the data that dashboard represents, we see all of our videos.

[17:52] We can go and edit these videos. We can even create a new video. Let’s go back to comments. And all the comments are still here. So all of the data that was static before is now dynamic and available for us to be edited. But let’s double check that this data actually exists in our database. And switch back to superbase and check what is inside of our database.

[18:23] And indeed we can see that if we navigate to our table editor inside of superbase and open our comments table for example all of the data is here. Let’s go to the videos. All of the data is available here. And the agent even created a few other tables. All the video related objects are represented here. Categories are represented here. All of the channels are also here. So, we basically moved

[18:53] all of the data that was statically allocated before into a database. It doesn’t help us immediately, but this is an important step to doing something actually much cooler. Now, because we live in the era of large language models and generative AI, we can use a lot of tools available to us to bootstrap the content that we have on our website and get some really cool and amazing videos of cat. But before we get to that, we’re going to connect Cloudflare. It’s a third party service and

[19:25] unfortunately this is one of the services where you kind of have to pay for it. But it solves two very important problems that we have to deal in our project. First of one being hosted images. This is technically not required. You can do it yourself. But having a third party with a very good content delivery network serving your images, supporting image resizing, being able to just serve them very fast and efficient is really cool. It’s a very popular service. Majority of large companies are using it for image

[19:56] hosting. But for us, a much bigger problem is video hosting and video streaming. The real YouTube is a giant machine on the back end that knows how to process videos, how to re-encode them, split them, extract metadata, and generally be able to deliver them in a way that’s efficient across many different platforms. This is something we definitely can build, but it’s going to be a project significantly larger than what we’re building right now. So, we’re going to rely on Cloudflare to

[20:28] serve videos for us in the CloudFlare player to play this videos because this is going to significantly simplify our application and help us to get to the finish line faster. We are going to connect them to our application in the next steps, but we actually don’t need to do much. I’ve already configured Cloudflare. I already imported the necessary permissions and tokens into my project. So we’re just going to be asking agents to use Cloudflare as it will populate it with data. And this is the next interesting process. We’re

[20:59] going to be generating this data. We’re going to be creating cat videos in real time. How we’re going to be creating these cat videos. We need three different things. I’ll just going to walk you through something that I personally like and found very useful. We need three components. a large language model that would help us to generate the name of the video, the general idea of it, maybe some metadata. Basically, it will elucinate a possible variation of a cat video that exist. Then we’re going to be

[21:30] using an image model to generate the thumbnail and this thumbnail will be based on the LLM produced description of the video. And then we will be using this thumbnail to generate a video. Now, technically, we can do it without the thumbnail, but I like the thumbnail approach because it gives us the thumbnail that we’ll need anyway, and it gives us a lot more control over what we’re going to be seeing. In order to do this, I will be using FAL.AI, which is a great aggregator of many different

[22:01] models, both text and video. And uh inside of FAL, we’re going to be using Open Router. This is a little bit convoluted because Open Router actually is an independent project. You can use open rotor on your own. But the reason why I’m using it through f I can just use one API key and have access everywhere. So we’re going to be using open rotor and we’re going to be using GPT image 2.5 model to generate thumbnails. And for video generation, we

[22:32] will be using H3, specifically H3 Max variation which has been developed by FAI. And it has a turbo version which allows us to generate videos up to 15 seconds really fast and very cheap because video generation is still expensive. But this way we can get really amazing cat videos for really cheap. Let’s move on to implementing our video creation pipeline. We need to wipe the existing data that we have right now in the database. Generate mock users,

[23:03] channels, comments, and also generate videos. And for videos, it’s a little bit more work because we both need metadata, the title of the video, the description of the thumbnail, and the description of the video that we will use to generate the thumbnails and the videos. Then we need to generate the images, the thumbnails. And then we should generate the actual video using the H3 model, upload them to Cloudflare and make sure that this videos and these images are now used on the website. This is definitely a case where going

[23:33] through the plan mode would be great because a lot of action is going to happen. I would like to review them before the agent gets to building anything. you may have noticed is that I’m using still the same chat session and in this particular case it makes sense majority of work that we’re doing is just one continuous project we’re building our cat tube while it’s not critical a lot of the context of what happened before will be useful to the agent to understand where we’re going we have still plenty of context available and there is no real reason to not

[24:05] continue using the same chart moving forward all right let’s view what the plan is currently. I really like this diagram because it actually reflects what I was talking about the whole process of creation of the video. Obviously, unsurprisingly, but it’s good to see it visualized. We’ve confirmed that we want to have 12 videos. It’s exactly the amount of videos we have right now. But as the image and video, especially video generation, can be pretty expensive. It makes sense to start with just a few images. I see that the models that agent

[24:38] picked up are very reasonable. I have no concerns here. It picked up on the Cloudflare hosting. That’s all great. The schema will be updated because we need to make the videos play. Makes total sense. It will create a script that also makes a sense. The script will populate the data. Yep. Perfect. Everything here makes sense. So, we can get to building.

[25:10] We are back and the thumbnails has changed. If we go into one of them and see what we had generated, we get a completely AI generated videos and everything that you now see on the screen is another AI generated video which pretty cool. They are limited to 5 seconds so far, but we can work on that and we can improve the resolution. But for now, for this test run, that’s pretty good. I think that looks very,

[25:40] very reasonable. And it’s starting to look like a real website at this point in time. While we’re still using mock data and we’re not letting users upload anything, if we deploy this right now, this will be a fully functional version of our catu. But there are a few really interesting things that YouTube does that we are currently completely missing. And I want to focus on two of the things. First of all is search and the other thing would be related videos.

[26:11] So how we going to implement search and recommended videos? Well by cheating. You see in a real service like YouTube there are massive teams handling both of these problems. and both search and related or recommended videos in many cases are life or death for many services because being able to recommend exactly the videos that you want to watch is probably one of the most important things that a service like YouTube can do. We do not have capacity to implement it at a full scale. So,

[26:41] we’re going to do something small and we have to think about it. What are we actually doing? When you search for a video, you try to find something that is similar to your text query. And then something if we just think about this on a high level is a video. But what is a video? We can think about video as the title of the video. Maybe we can look at video as a thumbnail or the longer script of the video, maybe the subtitles, maybe the video itself. So there are a lot of very different

[27:12] components to the video that we can use. And a very simple way of searching would be for example just using the title. If you typed cats in the search box, we will find all of the titles with the cat inside of them. But that will be a significant simplification because what if you typed cat then we will never find the video which has tiger in it or the park. So we want to have something smarter. And then again, what are we using to figure out what are the video?

[27:42] The way I’m going to handle this in this project is I will think about two pieces of content. I will think about text and I will think about the thumbnail of the video itself. Thumbnail is obviously not the whole video, but it gives us a very very good representation of what that video is all about. Now we have to talk a little bit about theory because this is required to understand how to calculate similarity. We will talk about something which is called an embedding. And embedding by

[28:15] itself if you look at it being represented on your computer is just a long list of numbers. And these numbers have very specific meaning. But this is a meaning that we as humans can’t really figure out. So you can just think about an embedding as a long list of numbers. Every title will have an embedding. Every video will have an embedding. The question becomes, well, how do you create these numbers and how do you use the numbers and why do we even need them

[28:45] in the first place? Well, you see if we just think about just test itself, the way the embeddings are created is if you take words that similar and make sense to us as humans to be close to each other, they will be very close to each other. While the terms that are very different will have some amount of distance. We will be using both text and images. And this is where we can use models which are called multimodel

[29:16] models. And they create embeddings for text and for images in the same embedding space means that the image of a lion is next to a text which says cat and the image of a cat is close to the word tiger. So this is extremely useful and this allows us to say these things are together while these things are not together and far apart. On a technical level in order to handle

[29:46] this similarity we use something called cosine similarity because this long list of numbers are actually vectors. So figuring out the angle between these vectors allows us to understand if they’re close or if they’re not close. So if we create embeddings for our texts, if we create embeddings for our thumbnails, we will be able to understand where things are similar to each other and we can sort by that similarity. So if you have a video of a cat, we’ll be able to find all of the

[30:17] other videos that are very similar to that particular video based on similarity of the thumbnails alone. Simplification for sure, but it’s going to work really well. Now we have two problems to solve. We need to figure out where and how to store this embeddings and obviously how to calculate them. So when it comes to storage for a significant amount of time, storing them in regular normal databases was discouraged because while you can definitely do this being able to

[30:48] efficiently look up similarity requires non-trivial math and traditional databases couldn’t do it. People used external special databases like Pine or VAVA. Lucky for us in 2026 posgress caught up and has a special extension called PG vector which works absolutely amazing. So we can store our embeddings in our regular database. We don’t need to introduce any other component and we’re back to basically just use

[31:18] Postgress for everything. I asked our agent to generate a few more videos just so it’s more noticeable when we have videos that are related to each other. I’ve opened a superhero cat video and as you can see the most relevant one is another superhero. If I will go to a sport video, the two top videos are both similar in terms of content and in terms

[31:48] of visual style. So, it’s a uh black and white noir like video. If I go into something more fancy, the fashion show. We’ve got another anime video. Well, this one is interesting because K here has a magnifying glass and the most relevant video is another magnifying glass video. But what I would like to do now is to implement search because this is only related videos. And with search,

[32:19] this is no longer about similarity between video and a video or in our case thumbnail and thumbnail, but between text and the thumbnail. And the complexity that comes here are from the fact that we are no longer prefilling this data on the back end. We actually need to take the user query, we need to process it into embedding very quickly and then we can do our lookup. So that’s the next task we’re going to be handling. Now let’s ask our agent to now implement the search by taking the query that the user provided, converting it to

[32:51] clip embedding, and then finding the most similar videos to that clip embedding. All right, so it took our agent a few minutes to implement everything and let’s see how it works. I’m going to try searching for noir. Perfect. Seems like, you know, we got a bunch of black and white images. Really like this one. Yeah, I would say this looks very noir.

[33:23] What about superhero? All right. Once again, this looks pretty superhero to me. What about sports? Once again, seems like the search is now is fully implemented. So, we’ve got related videos, we’ve got search working, we’ve got videos being played, we’ve got thumbnails, we have mob data.

[33:53] It seems already like a pretty reasonable approximation of YouTube. We are still missing a few pieces. So, what I would like to do now is we have our admin interface which is just kind of opened to everybody. We have faked our own user account. You can’t really subscribe to anything. So, I think we’re going to be doing two things next. First of all, we’re just going to polish everything a little bit. And second of all, we’re going to introduce a very simple authentification. We’re going to be using a service called better o, but

[34:26] it’s also a set of libraries. So, you can use the service, you can use just the libraries, completely independent. And what we’re going to be doing, we just need the libraries themselves. So let’s ask our agent now to clean up a few things and get the authentication running. We are using extremely simple prompt. We are just going to ask our LLM our agent to implement exactly what I mentioned and there is a lot of work here. So maybe going through the plan mode is

[34:56] reasonable. But I’m just going to use the gentic mode because well there a lot of work. It seems pretty straightforward and there are no weird caveats here. Well, looks like we were able to implement the outification successfully. A few things changed on the page. So, I now see that I need to sign in. And if I try navigating to the admin interface manually, it will present me with a uh

[35:28] notification form. So, let’s use an account that our agent created for us specifically to test things and confirm that we can sign in. And indeed, we can sign in. We can access our dashboard. Let’s go to the website. Let’s click through a few videos. Try the subscribe button. It’s now working. Let’s go to our subscriptions. And indeed, we now have videos from a few channels we’ve previously subscribed

[35:59] to. So, this is becoming more and more like a regular website. But there is one thing that is missing, and this is something that’s really makes me annoyed. If you use regular YouTube, you will notice that it actually has the light mode and the dark mode. And we only have the light mode. That’s definitely a big oversight. So, let’s just do a little bit more of a polish and add the dark mode because I just want our website to look really cool.

[36:33] It looks like with just one prompt asking our agent to add the dark mode, we were able to fully implement it. Let’s toggle it a few times. Looks very reasonable to me. I didn’t have to fix anything. The watch page looks great. Everything here makes sense. I think even this cool little tidbit here is also changing colors. That’s pretty cool. So, I really wish we

[37:04] had it back in the day because it took us months to actually make sure that YouTube looks good in dark mode and literally took me 5 minutes now. So this is all great and I think we are now ready to show the world what we’ve been building because well a lot of pieces are still missing. We don’t have video upload. All of our videos are still AI generated. I think this is pretty much a reasonable approximation of version one of what YouTube would look like. So I want to put it online. And in order to do this we have again many different

[37:35] options. But because we’re building on top of NexJS, we have a very simple way of hosting this by using Verscell. Versel is a company behind Nex.js. So it makes total sense that they provide very simple ways to deploy a NexJS project. But we’re missing one thing is that the typical way of deploying a Versal NetJ application is by using GitHub. And we never created a project. We never used GitHub here. It was literally a local folder on our computer. So let’s put our

[38:07] code into GitHub and then connect it to Versel. So I moved to GitHub and I’ve created a repository for us. But here’s the problem. I have never initialize this folder from this repository. And actually I’m not that good of a Git user to understand what to do here. So why don’t we ask our agent to do everything for us? Because well the agents are not just for coding. They are for doing pretty much everything.

[38:45] I asked my agent to put the code inside of the GitHub and let me tell you it took it a while because I have a complex setup on this machine. Multiple GitHub accounts, multiple versions of cursor talking to different repositories. So, it had to actually go and figure out a lot of things just to be able to connect this particular version of my project into that GitHub account that I wanted to use. And I’m pretty sure that if it was me trying to figure it out, I would have been reading documentation for a few hours, but took it about 5 to 7

[39:18] minutes. And now I can go to GitHub and check that files are actually there. Yep, all the files are in our GitHub. We are ready to actually start connecting this project to Verscell. So I’m going to switch to Verscell right now. And it already recognized my GitHub repository because I connected my account previously by logging through GitHub. So I’m going to just go and imported it.

[39:50] And in order to fully set up our application, I had to do only two things. I went to the application preset and selected NexJS application there and I went into the environment variables and I imported the file that I already had in my project because it’s not part of what’s being committed to GitHub. It contains your secret information. So you don’t want to have it in your Git repository, but you still need it to fully deploy the website. So it knows where to connect, what database to use, and all of the things that we’ve basically added through the development

[40:20] process. So now I’ll move ahead and deploy this application. So looks like after deploying we encountered a problem. I can see that the preview of my service is not showing the website that I expect to see. I can see that the error rate is 100%. So something is terribly terribly wrong. Let’s go into the logs on Versal and do a little bit of debugging. So I can see that actually none of the pages that I

[40:50] tried to access worked. And if I go into the log I will see that it’s complaining about not finding a module Onyx runtime for the note. Well, we use Onyx runtime actually to generate clip embeddings. And this is not good because we made an assumption that this module will be available. But the way Versal works and the way it deploys is not fully compatible with the initial setup that we did. Well, we’re just going to ask an agent to go and fix this for us. So,

[41:22] let’s take a copy of this error, move to the agent, and ask it to fix this. Once again, my prompt was extremely simple. I literally copy pasted the errors that I’ve encountered and I add just a little bit of context. I told my agent that this is a versell deployment and I asked it to create a GitHub PR because I would like to review what the

[41:52] changes uh before actually deploying them and it took it a few minutes but now we have a solution. So let’s go to GitHub and check what was actually generated. Perfect. So I see we already got a pull request that our agent created. Let’s go and check it. And it went through a number of checks. And we can see what Versal is thinking about our change by previewing the build.

[42:23] And look at it. Seems like actually the website loaded this time. So let’s return to GitHub. Let’s merge this PR. Then let’s go back to versal and see how things are looking. Opposite side. Well, look at this. Our deployment has

[42:54] succeeded now that we’ve deployed the fix. And let’s go open it up. Let’s see what we’ve got. And congratulations. This is our very small but pretty cute and very cat friendly version of YouTube. Let’s just go and click on a video of some kind. I like this one. Amazing. If you’re interested in a more in-depth

[43:25] conversation about the engineering history of YouTube, how to build something like this today, have some questions for me, or just want to listen to war stories from YouTube days, you can find me at Bite Bitego. When me and other real builders are sharing our industry experience, my name is Mike. It was a pleasure to be with you today and I hope you learned something new and useful. Take care.