Vibe coding a reading companion
02 July 2025
I’m reading The Golden Road by William Dalrymple at the moment. It's great - every page is full of references to people, places, events and concepts that are new to me.
But whilst Dalrymple’s descriptions are unusually good, sometimes I just wanna see the thing he's describing, or go down a Wikipedia rabbithole.
It's fiddly though, constantly switching from book to phone to type in references. It breaks the flow and enjoyability of reading physical books, so I don't do it much.
It got me thinking - what if you could take a photo of a page of a book on your phone and have it show you pictures and Wikipedia links for all of the concepts mentioned on the page?
I casually mentioned this idea at work and one of my colleagues, Ben Rowell, came back the next day with a fully working proof of concept.
It fair blew my mind that Ben could produce something so quickly, and made me reflect on how many of our digital ways-of-working are optimised for 2012, not 2025.
Anyway, the next day I flipped to the back of the book and noticed the comprehensive index.
Another idea formed; instead of having to take photos of every page in the book, what if you could just take photos of the index pages and have the app reverse engineer the list of relevant links for each page instead?
This gave me an opportunity to try something I’ve been meaning to for a while - vibe coding!
Good vibes #
Vibe coding is where you tell an AI agent what you want to build, and then it writes all the code for you.
If you want to tweak something, you ask the agent to do it. In theory, you can vibe code yourself a whole app without writing a single line of code.
Here's how I prompted Claude to make me a reading companion app:
Claude immediately got to work, playing back my scrappy brief in great detail, covering off the user experience and technical implementation, and giving example outputs.
And damnit, it really did seem to get what I was trying to do. I'll avoid the word 'understand', because it's not clear that LLMs understand things the same way humans do. But regardless, could it complete the task I gave it? - Yep.
After checking my brief it got to work, producing what appeared to be a fully working and well-designed app that did exactly what I'd described.
On further inspection however, I noticed that it was using dummy data and that it hadn't actually implemented the OCR function needed to extract the text from the image.
I'd been vibe coding in Claude's 'Artifacts' interface. Artifacts are little web apps that you can co-create and then publish directly from Claude - no need for self hosting.
However, as I had discovered, Artefacts are currently limited to using Claude's text API, they can't do things like analyse images. This is why it had used dummy data.
You can play with the published artifact here.
Undeterred, I asked Claude how I could turn the artifact it had written into a fully fledged app with working OCR that I could run locally with my own Claude API key.
It generated all the required files, plus a set of instructions for getting them running on my machine. Pretty soon I had a fully-functional book companion app running locally.
With a bit of follow-up prompting I was able to get Claude to implement other features, like:
- alphabetical link ordering
- previous and next page links
- persistent book data using local storage
- uploading multiple photos at once
Those last two it didn't quite nail first time, but it was able to diagnose the issues and update the code to fix them.
Reflections #
It was a thoroughly uncanny experience, watching Claude turn my one paragraph description into a detailed plan, hundreds of lines of code and a fully functional (and annoyingly well designed) web app.
I epecially enjoyed the bit where it wrote a prompt to send to itself, to get it to accurately extract the text from the images. It's not quite 'AI rewriting it's own code', but a foreshadowing of that perhaps?
I was also impessed at how it handled index entries like 'Aristotal, 269-70', correctly adding the reference to pages 269 and 270.
This wasn't even mentioned in the prompt it wrote to accompany the images, the base model apparently already knew this convention.
The thing it produced was written as a single page React app, using Tailwind as a CSS framework.
This makes sense; LLMs know the most about things that are well represented in their training data, so they're going to reach for the big, popular languages, frameworks and programming techniques.
However, there are some things that are not popular, but are good. Things like accessibility. I do worry that these (sadly) more niche, but very important concerns, are going to be frozen out of the vibe coding way of doing things, unless we find ways to bring them back in.
It's not impossible to do this - you can create instruction files for vibe coding that specifiy the languages and frameworks you want to use. But will the models know enough about accessibility to do a decent job?
I also wonder if vibe coding will create a big gravitational pull towards the most popular current frameworks, languages and coding techniques, and choke off the development or growth of new ones?
There are versions of this 'snake-eating-its-own-tail' problem everywhere that AI is having an impact.
I really hope some people are working on it.