Simon Willison usou GPT-5.5 para criar um componente web para incorporar código do GitHub

Simon Willison criou um componente web para incorporar código do GitHub usando GPT-5.5

O desenvolvedor Simon Willison, autor do blog simonwillison.net, publicou um experimento em 7 de julho de 2026 na seção «Tool» — um componente web github-code que construiu usando o modelo GPT-5.5 em apenas um prompt de diálogo, sem escrever código manualmente.

O que o componente faz

O componente `<github-code>` incorpora um fragmento de código diretamente em uma página HTML através de um link do GitHub. Basta especificar o atributo href com um link para um arquivo específico e intervalo de linhas — e o componente inserirá automaticamente o fragmento de texto necessário.

• O prompt começou com as palavras: «let's build a Web Component for embedding code from GitHub»
• O modelo que construiu o componente é GPT-5.5
• Exemplo de teste — o repositório simonw/sqlite-ast, arquivo parser.py, linhas 9 a 18
• A ferramenta finalizada foi publicada por Willison em acesso aberto em seu site na seção «Tool»
• O material é marcado com github, web-components e gpt

Como o componente funciona tecnicamente

Willison descreveu a lógica diretamente no prompt: o componente pega uma URL como `github.com/.../blob/.../parser.py#L9-L18`, a converte para um endereço em raw.githubusercontent.com, baixa o arquivo via fetch() e exibe apenas o intervalo de linhas especificado — com números de linha, mas sem destaque de sintaxe.

«It takes URLs like that, converts them to raw.githubusercontent.com,

then uses fetch() to fetch them and displays the specified range of lines — with line numbers, no syntax highlighting though», — do prompt de Simon Willison publicado em um gist do GitHub aberto.

A parte final do prompt continha um requisito direto de mostrar o resultado: «Show me a preview web browser so I can see your work». O modelo deveria não apenas fornecer o código, mas demonstrar imediatamente uma prévia funcional no navegador.

Willison incorporou o componente finalizado diretamente no texto de seu post de blog sobre este experimento — na mesma página, você pode ver como `<github-code>` substitui as linhas 9 a 18 do arquivo parser.py do repositório simonw/sqlite-ast em tempo real, com números de linha à esquerda.

O que isso significa

O exemplo mostra como você pode obter um componente web finalizado e funcional com um prompt de diálogo abrangente — da ideia a prévia do navegador, sem um estágio separado de refinamento de código manual. O autor testou imediatamente o resultado em seu próprio site, incorporando o componente no mesmo post onde fala sobre ele.

Perguntas frequentes

O que o componente web github-code faz?

Transforma um link para um arquivo no GitHub com um intervalo de linhas como #L9-L18 em um bloco de código pronto com números de linha, incorporado diretamente em uma página HTML — sem destaque de sintaxe.

Qual modelo de IA criou este componente?

O componente foi construído usando o modelo GPT-5.5 a partir de um prompt de diálogo, que Simon Willison publicou em um gist do GitHub aberto.