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

Simon Willison a créé un composant web pour incorporer le code GitHub en utilisant GPT-5.5

Le développeur Simon Willison, auteur du blog simonwillison.net, a publié une expérience le 7 juillet 2026 dans la section « Tool » — un composant web github-code qu'il a construit en utilisant le modèle GPT-5.5 en un seul prompt de dialogue, sans écriture manuelle de code.

Ce que fait le composant

Le composant `<github-code>` incorpore un fragment de code directement dans une page HTML via un lien GitHub. Il suffit de spécifier l'attribut href avec un lien vers un fichier spécifique et une plage de lignes — et le composant insérera automatiquement le fragment de texte nécessaire.

• Le prompt a commencé par les mots : «let's build a Web Component for embedding code from GitHub»
• Le modèle qui a construit le composant est GPT-5.5
• Exemple de test — le référentiel simonw/sqlite-ast, fichier parser.py, lignes 9 à 18
• L'outil fini a été publié par Willison en accès ouvert sur son site dans la section « Tool »
• Le matériel est étiqueté avec github, web-components et gpt

Comment le composant fonctionne techniquement

Willison a décrit la logique directement dans le prompt : le composant prend une URL comme `github.com/.../blob/.../parser.py#L9-L18`, la convertit en une adresse sur raw.githubusercontent.com, télécharge le fichier via fetch() et affiche uniquement la plage de lignes spécifiée — avec les numéros de ligne, mais sans mise en évidence de la syntaxe.

«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», — du prompt de Simon Willison publié dans un gist GitHub ouvert.

La partie finale du prompt contenait une exigence directe de montrer le résultat : «Show me a preview web browser so I can see your work». Le modèle était censé non seulement fournir le code, mais démontrer immédiatement un aperçu fonctionnel dans le navigateur.

Willison a incorporé le composant fini directement dans le texte de son article de blog sur cette expérience — sur cette même page, vous pouvez voir comment `<github-code>` substitue les lignes 9 à 18 du fichier parser.py du référentiel simonw/sqlite-ast en direct, avec les numéros de ligne à gauche.

Ce que cela signifie

L'exemple montre comment vous pouvez obtenir un composant web fini et fonctionnel avec un prompt de dialogue complet — de l'idée à l'aperçu du navigateur, sans étape distincte d'affinage du code manuel. L'auteur a immédiatement testé le résultat sur son propre site en incorporant le composant dans le même article où il en parle.

Questions fréquemment posées

Que fait le composant web github-code ?

Il transforme un lien vers un fichier dans GitHub avec une plage de lignes comme #L9-L18 en un bloc de code prêt avec les numéros de ligne, incorporé directement dans une page HTML — sans mise en évidence de la syntaxe.

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

Le composant a été construit en utilisant le modèle GPT-5.5 à partir d'un prompt de dialogue, que Simon Willison a publié dans un gist GitHub ouvert.