Simon Willison creó con GPT-5.5 un componente web para insertar código de GitHub

El desarrollador Simon Willison, autor del blog simonwillison.net, publicó el 7 de julio de 2026 en su sección «Tool» un experimento: el componente web github-code, que construyó con GPT-5.5 usando un único prompt conversacional, sin escribir código a mano.

Qué hace el componente

El componente `<github-code>` inserta un fragmento de código en una página HTML a partir de un enlace de GitHub. Basta con indicar en el atributo href un enlace a un archivo concreto y un rango de líneas, y el componente rellena por sí solo el fragmento de texto correspondiente.

• El prompt empezaba con las palabras: «let's build a Web Component for embedding code from GitHub»
• El modelo que construyó el componente es GPT-5.5
• El ejemplo de prueba es el repositorio simonw/sqlite-ast, archivo parser.py, líneas 9 a 18
• Willison publicó la herramienta terminada en abierto en su sitio, en la sección «Tool»
• La entrada lleva las etiquetas github, web-components y gpt

Cómo funciona el componente

Willison describió la lógica en el propio prompt: el componente toma un enlace del tipo `github.com/.../blob/.../parser.py#L9-L18`, lo convierte a una dirección de raw.githubusercontent.com, descarga el archivo con fetch() y muestra solo el rango de líneas indicado, 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 abierto en GitHub.

La parte final del prompt incluía una petición directa de mostrar el resultado: «Show me a preview web browser so I can see your work». El modelo no debía limitarse a generar código, sino demostrar de inmediato una vista previa funcional en el navegador.

Willison incrustó el componente terminado en el texto de su entrada de blog sobre el experimento. En esa misma página se ve cómo `<github-code>` rellena en vivo las líneas 9 a 18 del archivo parser.py del repositorio simonw/sqlite-ast, con los números de línea a la izquierda.

Qué significa

El ejemplo muestra cómo un solo prompt conversacional detallado puede producir un componente web terminado y funcional, de la idea a la vista previa en el navegador, sin una fase aparte de retoque manual del código. El autor comprobó enseguida el resultado en su propio sitio, incrustando el componente en la misma entrada donde lo cuenta.

Preguntas frecuentes

¿Qué hace el componente web github-code?

Convierte el enlace a un archivo de GitHub con un rango de líneas del tipo #L9-L18 en un bloque de código con números de línea, insertado directamente en la página HTML, sin resaltado de sintaxis.

¿Qué modelo de IA creó este componente?

El componente se construyó con GPT-5.5 a partir de un único prompt conversacional que Simon Willison publicó en un gist abierto en GitHub.