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

Simon Willison created a web component for embedding GitHub code using GPT-5.5

Developer Simon Willison, author of the blog simonwillison.net, published an experiment on July 7, 2026 in the "Tool" section — a github-code web component that he built using the GPT-5.5 model in just one dialogue prompt, without manual code writing.

What the component does

The `<github-code>` component embeds a code snippet directly into an HTML page via a GitHub link. Just specify the href attribute with a link to a specific file and line range — and the component will automatically insert the needed text fragment.

• The prompt started with the words: "let's build a Web Component for embedding code from GitHub"
• The model that built the component is GPT-5.5
• Test example — the repository simonw/sqlite-ast, file parser.py, lines 9 to 18
• The finished tool was published by Willison in open access on his website in the "Tool" section
• The material is tagged with github, web-components and gpt

How the component works technically

Willison described the logic directly in the prompt: the component takes a URL like `github.com/.../blob/.../parser.py#L9-L18`, converts it to an address on raw.githubusercontent.com, downloads the file via fetch() and displays only the specified line range — 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 an open GitHub gist.

The final part of the prompt contained a direct requirement to show the result: «Show me a preview web browser so I can see your work». The model was supposed to not only provide the code, but immediately demonstrate a working preview in the browser.

Willison embedded the finished component directly into the text of his blog post about this experiment — on that same page, you can see how `<github-code>` substitutes lines 9 through 18 from the parser.py file of the simonw/sqlite-ast repository live, with line numbers on the left.

What it means

The example shows how you can get a finished, working web component with one comprehensive dialogue prompt — from idea to browser preview, without a separate stage of manual code refinement. The author immediately tested the result on his own website by embedding the component in the same post where he talks about it.

Frequently asked questions

What does the github-code web component do?

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

What AI model created this component?

The component was built using the GPT-5.5 model from one dialogue prompt, which Simon Willison published in an open GitHub gist.