Simon Willison a créé avec GPT-5.5 un composant web pour intégrer du code GitHub

Le développeur Simon Willison, auteur du blog simonwillison.net, a publié le 7 juillet 2026 dans sa rubrique « Tool » une expérience : le composant web github-code, qu'il a construit avec GPT-5.5 à partir d'un seul prompt conversationnel, sans écrire de code à la main.

Ce que fait le composant

Le composant `<github-code>` intègre un extrait de code dans une page HTML à partir d'un lien GitHub. Il suffit d'indiquer dans l'attribut href le lien vers un fichier précis et une plage de lignes, et le composant insère seul l'extrait de texte voulu.

• Le prompt commençait par ces mots : « let's build a Web Component for embedding code from GitHub »
• Le modèle qui a construit le composant est GPT-5.5
• L'exemple de test est le dépôt simonw/sqlite-ast, fichier parser.py, lignes 9 à 18
• Willison a mis l'outil terminé en accès libre sur son site, dans la rubrique « Tool »
• Le billet porte les tags github, web-components et gpt

Comment le composant fonctionne

Willison a décrit la logique dans le prompt lui-même : le composant prend un lien de la forme `github.com/.../blob/.../parser.py#L9-L18`, le convertit en adresse raw.githubusercontent.com, télécharge le fichier avec fetch() et n'affiche que la plage de lignes indiquée, avec les numéros de ligne mais sans coloration syntaxique.

«

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 », extrait du prompt de Simon Willison, publié dans un gist public sur GitHub.

La fin du prompt contenait une demande explicite de montrer le résultat : « Show me a preview web browser so I can see your work ». Le modèle ne devait pas se contenter de produire du code, il devait aussitôt présenter un aperçu fonctionnel dans le navigateur.

Willison a intégré le composant terminé dans le texte de son billet de blog consacré à l'expérience. Sur cette même page, on voit `<github-code>` insérer en direct les lignes 9 à 18 du fichier parser.py du dépôt simonw/sqlite-ast, avec les numéros de ligne à gauche.

Ce que cela signifie

L'exemple montre qu'un seul prompt conversationnel détaillé peut produire un composant web abouti et fonctionnel, de l'idée à l'aperçu dans le navigateur, sans étape distincte de retouche manuelle du code. L'auteur a aussitôt testé le résultat sur son propre site, en intégrant le composant dans le billet même où il en parle.

Questions fréquentes

Que fait le composant web github-code ?

Il transforme le lien d'un fichier GitHub avec une plage de lignes de type #L9-L18 en bloc de code avec numéros de ligne, intégré directement dans la page HTML, sans coloration syntaxique.

Quel modèle d'IA a créé ce composant ?

Le composant a été construit avec GPT-5.5 à partir d'un seul prompt conversationnel que Simon Willison a publié dans un gist public sur GitHub.