Simon Willison used GPT-5.5 to build a web component for embedding GitHub code

Developer Simon Willison, author of the blog simonwillison.net, published an experiment on July 7, 2026 in his "Tool" section: a github-code web component that he built with GPT-5.5 using just one conversational prompt, without writing any code by hand.

What the component does

The `<github-code>` component embeds a code snippet into an HTML page from a GitHub link. You only need to set the href attribute to a link to a specific file and a line range, and the component fills in the right piece of text on its own.

• The prompt began with the words: "let's build a Web Component for embedding code from GitHub"
• The model that built the component is GPT-5.5
• The test example is the simonw/sqlite-ast repository, file parser.py, lines 9 through 18
• Willison published the finished tool openly on his site in the "Tool" section
• The post is tagged github, web-components and gpt

How the component works

Willison described the logic in the prompt itself: the component takes a link of the form `github.com/.../blob/.../parser.py#L9-L18`, converts it to a raw.githubusercontent.com address, downloads the file with fetch() and shows only the specified range of lines, with line numbers but without syntax highlighting.

"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", from Simon Willison's prompt, published in a public gist on GitHub.

The final part of the prompt contained a direct request to show the result: "Show me a preview web browser so I can see your work". The model was supposed to do more than output code: it had to demonstrate a working preview in the browser right away.

Willison embedded the finished component in the text of his blog post about the experiment. On that page you can see `<github-code>` fill in lines 9 through 18 of parser.py from the simonw/sqlite-ast repository live, with line numbers on the left.

What this means

The example shows how a single, detailed conversational prompt can produce a finished, working web component, from idea to browser preview, without a separate stage of manually polishing the code. The author immediately tested the result on his own site by embedding the component in the same post where he describes it.

Frequently asked questions

What does the github-code web component do?

It turns a link to a GitHub file with a line range such as #L9-L18 into a ready-made code block with line numbers, embedded directly in an HTML page, without syntax highlighting.

Which AI model created this component?

The component was built with GPT-5.5 from a single conversational prompt that Simon Willison published in a public gist on GitHub.