Floorboard

A screenshot of an interactive web app showing 4 lightbulbs with sliders that can be manipulated independently

All educational content is now interactive 🤯

—

by

Keanan Koppenhaver
in

I was listening to an episode of the Overengineered podcast recently when I heard the host mention the “lightbulb analogy” and attribute it to CGP Gray. As someone who was pretty familiar with CGP Gray but not immediately familiar with what the host was talking about, I got curious. I found the reference in a 10 year old YouTube video for a podcast, but it was audio only, unlike most of CGP Gray’s content. And while I realized that he hadn’t created a visual for this theory, I also realized that with Claude Artifacts, I could create my own.

Not only that, any instructor, content creator or even just an average user can now create interactive visualizations of any concept that they can explain to a LLM. This is a massive unlock for learning of all types and in this article, we’ll take a look at how I (or rather Claude) created an interactive demo for CGP Gray’s lightbulb analogy for work/life balance in just a few minutes.

Setting up Claude to generate working code

Anthropic recently announced a new feature they call “Artifacts”, which, similar to OpenAI’s Code Interpreter, allows their Claude LLM to actually write and execute code based on a user’s instruction. In our case, it’s going to create our interactive visualization and give us an environment to run it in. However, before you can take advantage of this functionality, you need to enable Artifacts inside Claude. You can do this by clicking on your name in the bottom left hand corner, clicking on Feature Preview, and making sure Artifacts is enabled.

A screenshot of the screen in Claude to enable Artifacts

Make sure you do this before you start the chat where you want your Artifacts to be created, otherwise you’ll get an error message that tells you Claude isn’t able to execute code.

Giving Claude the necessary context

Even though the particular podcast episode where this analogy was described had been out for 10 years (and should have been present in Claude’s existing knowledge base), when I asked Claude to describe it to me, it didn’t know what I was talking about.

A screenshot of a partial conversation with Claude: KK: What is the light bulb analogy put forth by CGP Gray? Claude: I do not have any specific information about a light bulb analogy put forth by CGP Grey. CGP Grey is a popular educational content creator, but I don't have reliable data about him proposing a particular analogy involving light bulbs. Without being able to verify this, I cannot confidently describe or explain such an analogy. If you have more details about where or when CGP Grey discussed this analogy, I'd be happy to try to provide more context, but I would need to caution that my response may not be fully accurate. For the most up-to-date and accurate information, I'd recommend checking CGP Grey's official content or reaching out to him directly.

Luckily, because the Claude models have a fairly large context window, I was able to download the transcript from the YouTube video and paste the entire thing in as context. I then asked the same question in the following way:

Use the following transcript from a video to inform your answer to the following question: what is the lightbulb analogy by CGP Grey?

<pasted in transcript>

With all this additional context, Claude was more than happy to provide me with an answer.

A Claude response that reads: Thank you for providing that transcript. Based on the conversation in the transcript, I can now provide more details about CGP Grey's light bulb analogy for work-life balance: CGP Grey proposes an analogy where a person has 100 watts of energy to distribute among four light bulbs representing different areas of life: Family Friends Health Work The key points of the analogy are: You have to make decisions about how to distribute your limited energy across these areas. Turning up one light bulb means turning down others. Trying to have all bulbs at 25% may lead to mediocre results in all areas. To excel in one area, you likely need to reduce energy in others. It's difficult or impossible to have all areas at maximum brightness simultaneously. Grey argues this analogy illustrates the tradeoffs inherent in work-life balance, and that..."

Now that it had all the necessary background information for what we were asking, it was time to start generating the visualization.

Generating the visualization

Now that you have Artifacts enabled, you can ask Claude to generate some output for you. Here’s the original prompt I used:

Can you create an interactive HTML visualization of this concept? Please include the 4 lightbulbs, but make how much they are highlighted adjustable by the user, ensuring that the sum of the 4 lights is never more than 100%. Display the current illumination percentage beneath each lightbulb, but allow them to be manipulated independently. On the right of the 4 lightbulbs, generate an avatar that shows what a person with the current configuration of lightbulbs in their life might look like.

That prompt has a fair bit of detail, but it’s far from perfect.

As an aside, if you’re looking to generate the sort of product description that would be very useful in this sort of exercise, you should check out Claire Vo’s ChatPRD, which does exactly that.

You can see that the first version needed a lot of scrolling to actually see the visualization that we asked for.

A very broken version of the visualization, with the lightbulb and the rest of the content going off-screen.

Iterating on the output

This is obviously not ideal in terms of a usable visualization. And while I could have spent some more time on the prompt before I submitted it the first time, the great thing about using Artifacts is that it is iterative. I can just provide plain text feedback and I can get an updated version of my mini web app based on what I asked for. In particular, Claude seemed to struggle with trying to get all of the lightbulbs in a single row that could be viewed without scrolling. However, on version 11, I got something that I was pretty happy with.

What’s most impressive to me as a developer is that I had to write exactly 0 lines of code to create this, could give feedback in plain English and, despite the difficulties, could work through it and get a working visualization for an abstract concept that started out as a few sentences of audio on a podcast.

Sharing your Artifact with the world

Being able to create things like this is great, but where it becomes even more useful is the ability to share. As of the time of this article, users on either the Free or Pro plans can publish their Artifacts, which will give you a link you can use to share the finished version of your Artifact with anyone. Artifacts are also remix-able, which means anyone you share your Artifact with can bring it back into Claude and ask for updates and modifications to create their own version.

What will you make interactive?

It’s my opinion that Claude and other LLMs that adopt a similar model will be a huge unlock for any sort of educational content. Essentially any metaphor, analogy or illustrative device can now be turned into something more concrete, either by the instructor or by a student trying to understand it.

Rather than relying on a single static diagram in a textbook, learners now have access to an infinite customizable toolkit that can answer any question and provide insights on any topic from any perspective.

And I, for one, am excited to see how that completely transforms education going forward.