Simon Willison с помощью GPT-5.5 создал веб-компонент для встраивания кода GitHub

Разработчик Саймон Уиллисон, автор блога simonwillison.net, 7 июля 2026 года опубликовал в рубрике «Tool» эксперимент — веб-компонент github-code, который он построил с помощью модели GPT-5.5 всего одним диалоговым промптом, без ручного написания кода.

Что делает компонент

Компонент `<github-code>` встраивает фрагмент кода прямо в HTML-страницу по ссылке на GitHub. Достаточно указать атрибут href со ссылкой на конкретный файл и диапазон строк — и компонент сам подставит нужный фрагмент текста.

• Промпт начинался словами: «let's build a Web Component for embedding code from GitHub»
• Модель, которая построила компонент, — GPT-5.5
• Тестовый пример — репозиторий simonw/sqlite-ast, файл parser.py, строки с 9-й по 18-ю
• Готовый инструмент Уиллисон выложил в открытом доступе на своём сайте в рубрике «Tool»
• Материал помечен тегами github, web-components и gpt

Как компонент устроен технически

Уиллисон описал логику работы прямо в промпте: компонент берёт ссылку вида `github.com/.../blob/.../parser.py#L9-L18`, конвертирует её в адрес на raw.githubusercontent.com, скачивает файл через fetch() и показывает только указанный диапазон строк — с номерами строк, но без подсветки синтаксиса.

«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», — из промпта Саймона Уиллисона, опубликованного в открытом гисте на GitHub.

Финальная часть промпта содержала прямое требование показать результат работы: «Show me a preview web browser so I can see your work». Модель должна была не просто выдать код, а сразу продемонстрировать рабочий предпросмотр в браузере.

Уиллисон встроил готовый компонент прямо в текст своего блог-поста об этом эксперименте — там же, на странице, можно увидеть, как `<github-code>` вживую подставляет строки с 9-й по 18-ю из файла parser.py репозитория simonw/sqlite-ast, с номерами строк слева.

Что это значит

Пример показывает, как одним развёрнутым диалоговым промптом можно получить готовый, рабочий веб-компонент — от идеи до предпросмотра в браузере, без отдельного этапа ручной доводки кода. Автор сразу же проверил результат на собственном сайте, встроив компонент в тот же пост, где он о нём рассказывает.

Частые вопросы

Что делает веб-компонент github-code?

Он превращает ссылку на файл в GitHub с диапазоном строк вида #L9-L18 в готовый блок кода с номерами строк, встроенный прямо в HTML-страницу, — без подсветки синтаксиса.

Какая модель ИИ создала этот компонент?

Компонент был построен с помощью модели GPT-5.5 по одному диалоговому промпту, который Саймон Уиллисон опубликовал в открытом гисте на GitHub.