Simon Willison utilizó GPT-5.5 para crear un componente web para incrustar código de GitHub

Simon Willison creó un componente web para incrustar código de GitHub usando GPT-5.5

El desarrollador Simon Willison, autor del blog simonwillison.net, publicó un experimento el 7 de julio de 2026 en la sección «Tool» — un componente web github-code que construyó usando el modelo GPT-5.5 en solo un prompt de diálogo, sin escritura de código manual.

Qué hace el componente

El componente `<github-code>` incrustra un fragmento de código directamente en una página HTML a través de un enlace de GitHub. Solo especifica el atributo href con un enlace a un archivo específico y rango de líneas — y el componente insertará automáticamente el fragmento de texto necesario.

• El prompt comenzó con las palabras: «let's build a Web Component for embedding code from GitHub»
• El modelo que construyó el componente es GPT-5.5
• Ejemplo de prueba — el repositorio simonw/sqlite-ast, archivo parser.py, líneas 9 a 18
• La herramienta terminada fue publicada por Willison en acceso abierto en su sitio web en la sección «Tool»
• El material está etiquetado con github, web-components y gpt

Cómo funciona técnicamente el componente

Willison describió la lógica directamente en el prompt: el componente toma una URL como `github.com/.../blob/.../parser.py#L9-L18`, la convierte en una dirección en raw.githubusercontent.com, descarga el archivo a través de fetch() y muestra solo el rango de líneas especificado — con números de línea, pero sin resaltado de sintaxis.

«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», — del prompt de Simon Willison publicado en un gist de GitHub abierto.

La parte final del prompt contenía un requisito directo de mostrar el resultado: «Show me a preview web browser so I can see your work». El modelo debía no solo proporcionar el código, sino demostrar inmediatamente una vista previa funcional en el navegador.

Willison incrustra el componente terminado directamente en el texto de su publicación de blog sobre este experimento — en esa misma página, puedes ver cómo `<github-code>` sustituye las líneas 9 a 18 del archivo parser.py del repositorio simonw/sqlite-ast en tiempo real, con números de línea a la izquierda.

Qué significa

El ejemplo muestra cómo puede obtener un componente web terminado y funcional con un prompt de diálogo completo — de la idea a la vista previa del navegador, sin una etapa separada de refinamiento de código manual. El autor probó inmediatamente el resultado en su propio sitio web incrustando el componente en la misma publicación donde habla de él.

Preguntas frecuentes

¿Qué hace el componente web github-code?

Convierte un enlace a un archivo en GitHub con un rango de línea como #L9-L18 en un bloque de código listo con números de línea, incruistado directamente en una página HTML — sin resaltado de sintaxis.

¿Qué modelo de IA creó este componente?

El componente fue construido usando el modelo GPT-5.5 a partir de un prompt de diálogo, que Simon Willison publicó en un gist de GitHub abierto.