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

O desenvolvedor Simon Willison, autor do blog simonwillison.net, publicou em 7 de julho de 2026, na seção "Tool", um experimento: o componente web github-code, que ele criou com o GPT-5.5 usando apenas um prompt conversacional, sem escrever código manualmente.

O que o componente faz

O componente `<github-code>` incorpora um trecho de código em uma página HTML a partir de um link do GitHub. Basta indicar no atributo href o link de um arquivo específico e um intervalo de linhas, e o componente preenche sozinho o trecho de texto correspondente.

• O prompt começava com as palavras: "let's build a Web Component for embedding code from GitHub"
• O modelo que criou o componente é o GPT-5.5
• O exemplo de teste é o repositório simonw/sqlite-ast, arquivo parser.py, linhas 9 a 18
• Willison publicou a ferramenta pronta em acesso aberto no seu site, na seção "Tool"
• O post está marcado com as tags github, web-components e gpt

Como o componente funciona

Willison descreveu a lógica no próprio prompt: o componente recebe um link no formato `github.com/.../blob/.../parser.py#L9-L18`, converte-o para um endereço de raw.githubusercontent.com, baixa o arquivo com fetch() e mostra apenas o intervalo de linhas indicado, com números de linha, mas sem realce 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 aberto no GitHub.

A parte final do prompt trazia um pedido direto para mostrar o resultado: "Show me a preview web browser so I can see your work". O modelo não deveria apenas gerar código, e sim demonstrar logo uma prévia funcional no navegador.

Willison incorporou o componente pronto no texto do post do blog sobre o experimento. Na mesma página dá para ver o `<github-code>` preenchendo ao vivo as linhas 9 a 18 do arquivo parser.py do repositório simonw/sqlite-ast, com os números de linha à esquerda.

O que isso significa

O exemplo mostra como um único prompt conversacional detalhado pode render um componente web pronto e funcional, da ideia à prévia no navegador, sem uma etapa separada de ajuste manual do código. O autor testou o resultado imediatamente no próprio site, incorporando o componente no mesmo post em que fala sobre ele.

Perguntas frequentes

O que faz o componente web github-code?

Ele transforma o link de um arquivo do GitHub com um intervalo de linhas no formato #L9-L18 em um bloco de código com números de linha, incorporado diretamente na página HTML, sem realce de sintaxe.

Qual modelo de IA criou este componente?

O componente foi criado com o GPT-5.5 a partir de um único prompt conversacional, que Simon Willison publicou em um gist aberto no GitHub.