Известный разработчик Саймон Уиллисон (автор Datasette и sqlite-utils) опубликовал в блоге экспериментальный Web Component (пользовательский HTML-элемент) для встраивания фрагментов исходного кода с GitHub прямо в веб-страницу. Компонент он не писал руками: попросил модель GPT-5.5 одним промптом, «давай сделаем веб-компонент для встраивания кода с GitHub», и там же добавил, что компонент должен принимать обычные GitHub-ссылки на файл с диапазоном строк вида https://github.com/simonw/sqlite-ast/blob/437c7591.../parser.py#L9-L18, а затем отдельно попросил показать предпросмотр в браузере, чтобы сразу увидеть результат.
По описанию Уиллисона, логика компонента простая: такая ссылка на GitHub конвертируется в ссылку на raw.githubusercontent.com (то есть на сырое содержимое файла в конкретном коммите), содержимое подгружается через fetch(), а на странице отображается только указанный диапазон строк, с номерами строк, но пока без подсветки синтаксиса. В самом посте автор приводит живой пример работы компонента, встроенный на страницу.
Публикация вышла в подборке недавних заметок Уиллисона о его же инструментах: релиз sqlite-utils 4.0 с миграциями схемы базы данных (7 июля 2026) и sqlite-utils 4.0rc2, который, по его словам, был почти полностью написан моделью Claude Fable, и обошёлся примерно в $149.25 (5 июля 2026).
Ключевые факты
- Саймон Уиллисон сделал экспериментальный Web Component для встраивания фрагментов кода прямо с GitHub.
- Компонент написан не вручную, а одним промптом для GPT-5.5: автор описал задачу и попросил показать предпросмотр в браузере.
- Логика: ссылка на GitHub-файл с диапазоном строк (#L9-L18) конвертируется в ссылку на raw.githubusercontent.com, содержимое подгружается через fetch(), отображаются только нужные строки с номерами.
- Подсветки синтаксиса в компоненте пока нет.
- Заметка вышла рядом с другими постами автора о его инструментах: релиз sqlite-utils 4.0 (миграции схемы БД) и sqlite-utils 4.0rc2, почти полностью написанный моделью Claude Fable примерно за $149.25.
Ред.: Веб-компонент, написанный одной фразой, плюс релиз, написанный моделью за $149.25. Раздел «что я сделал руками» в этой заметке подозрительно пуст.
Почему это важно
Это наглядный пример быстрого прототипирования: рабочий веб-компонент собран не строчка за строчкой, а одним разговорным промптом модели GPT-5.5, включая просьбу сразу показать результат в браузере. Автор, известный разработчик и блогер, много пишущий о практическом применении LLM в повседневной разработке, так что подобные заметки задают ориентир, что уже реально сделать «в одно касание».
Ред.: «В одно касание» звучит красиво ровно до того момента, пока касание не приходится делать второй раз, потому что первый выдал прототип без подсветки и без обработки ошибок.
Кому это важно
Разработчикам и техническим авторам, которым нужно встраивать фрагменты кода с GitHub в свои страницы и блоги; тем, кто интересуется практикой быстрого создания небольших UI-компонентов с помощью LLM вместо ручного кодирования.
Ред.: Тем, кто хочет встраивать код в блог, и тем, кто коллекционирует поводы больше не писать виджеты руками. Аудитории заметно пересекаются.
Как это применить
Компонент принимает обычную ссылку на файл на GitHub с диапазоном строк, сам конвертирует её в ссылку на raw.githubusercontent.com, подгружает содержимое через fetch() и рисует указанные строки с номерами. Похожий приём, одна разговорная просьба модели плюс требование сразу показать предпросмотр, можно использовать для быстрого создания собственных небольших вспомогательных виджетов для блога или документации.
Ред.: Рецепт честно короткий: попросить модель словами и попросить сразу показать результат. Всё, что сложнее одного файла с диапазоном строк, придётся досочинять самому, и вот эту часть в промпт почему-то не вынесли.
Можно ли доверять
Это личная экспериментальная заметка самого автора идеи и кода, Саймона Уиллисона, а не анонс готового продукта с гарантиями. В тексте прямо сказано, что компонент «экспериментальный» и подсветки синтаксиса в нём пока нет.
Ред.: Автор сам называет компонент экспериментальным и сам признаёт, что подсветки нет. Редкий случай, когда дисклеймер честнее пресс-релиза, потому что пресс-релиза тут просто нет.
Риски и подводные камни
Компонент без подсветки синтаксиса и, судя по описанию, без обработки ошибок, это черновой прототип, а не готовый к продакшену виджет. Ссылки жёстко привязаны к конкретному коммиту в URL, поэтому при использовании ссылок на ветку вместо коммита показанный код может со временем разойтись с актуальным файлом. Код, сгенерированный моделью по одному промпту, как и любой ИИ-сгенерированный код, стоит перепроверять перед использованием в реальных проектах.
Ред.: Черновик без обработки ошибок, ссылки прибиты к коммиту, а код сгенерирован по одной фразе. Три отдельные причины перечитать результат перед тем, как ставить его на живую страницу, и все три автор любезно перечислил за нас.
«Давай сделаем веб-компонент для встраивания кода с GitHub»— промпт Саймона Уиллисона, отправленный GPT-5.5
Источник: Simon Willison