An LLM-native learn-to-code prototype
After a fascinating experience working with Claude Code, I’m ready to share a prototype app for learning to code in an LLM-native way. I documented the beginning of this project, in which I used OpenAI’s custom GPTs, and the start of work on the prototype. This work is the result of hitting some of their natural limits without needing to resort to custom actions, along with my desire to have an all-in-one experience instead of a copy/paste workflow.
You can check it out here.
This is a proof-of-concept web app based on my musings about what it means to learn to code in 2025: an age when novices can accomplish quite a lot without knowing anything about programming. I firmly believe that learning programming still has value. When a novice hits walls with more complex projects, they’ll only be able to advance if they can reason about code written by an LLM, even if just at a high level. And if they can’t read or modify any code by hand, they’ll be more likely to remain stuck. I’ll write more about these thoughts later.
The basics
The app runs entirely in your browser, and your goal is to create digital artworks. You write JavaScript code on the left that draws to the canvas on the right. In the center is a simple interface to prompt an LLM to modify the code, and a snapshot of your learning journey. It’s semi-self-guided, but it’s most powerful in the hands of an experienced instructor who has mapped out a learning experience. If you’re a novice coder, you won’t have much in the way of built-in support, but I think it’ll still be accessible and fun.
There are guardrails in place to keep you focused. While you can write anything you want by hand, the LLM should only generate code appropriate to your current level of knowledge. You start with the basics of drawing—rectangles, circles, basic colors—and then graduate to more advanced concepts at your own pace.
It’s a Model T. You can make anything you want, as long as it’s a P5.js sketch. You can use any LLM you want, as long as it’s ChatGPT 4o via your personal API key. You can follow any learning path, as long as it adheres to the system of prerequisites I’ve built.
How to use it
Once you’ve set up your OpenAI API key (the app provides some basic instructions), try prompting it to create something simple. For example, “Make a line of rainbow squares.” You’ll notice that more complex prompts, like “Draw a rainbow,” may result in a failure to generate code: commands to draw curves are a more advanced topic. Rather than prompting at a conceptual level, you may find more success by referring directly to the basic instructions you’re currently learning.
As you go, note the changes to your code. When the LLM doesn’t do quite what you want, see if you can spot a way to make your own modifications to achieve your goal. Tinker with things: modify numbers, change the order of the lines, add or remove bits of code. As you grow in confidence, try adding more code by hand.
Keep an eye on the learning goals. As you include particular commands in your code, they’ll highlight. When you feel like you’ve mastered a particular bit of code, you can click it to keep track. When you feel comfortable with simple drawing concepts and you’re ready to learn more, click the Continue Learning button. The app will give you options for new topics based on what you know. Select the one you want and try some new things!
Have fun!
I hope you enjoy playing with the prototype; I’ve had fun building it. While it’s decidedly an early work in progress, I think it’s solid enough to release. I have a lot of roadmap ahead of me, as well as some important decisions that might change the fundamental nature of the project. Now is the time to get some first impressions!
Feel free to email me (hello at thisdomain) with any thoughts.