Coding a Booklet AI feature
This morning, I added a new feature to Booklet. I used OpenAI to suggest new posts to write, to make it easier for members to post. It looks like this:
Inspired by a podcast I was listening to on the way to my office, I decided to record the process of building the feature and publish it as a video.
You can watch the full video below, where I go from idea to launching the feature to all Booklet communities in two and a half hours. I hope it’s helpful to see how I work, the tools I use, and the process of building an AI-powered feature from scratch.
I start with an idea, implement multiple-draft post support, write an OpenAI prompt to suggest new posts, test the AI in production, tweak the prompt based on its performance, implement a skeleton loader to display the suggestions, connect the suggestions to the editor, then deploy it to all Booklet communities.
Recording a coding video is a bit of a crazy experiment, but I hope some people find it useful. If you have questions or feedback, email me.
Notes from the recording
- Booklet is an async community app as an alternative to chat
- Coded using Ruby on Rails and Hotwire
- Used Apple Note as a Working Memory file.
- Edited code with Cursor
- Used Arc as the main web browser, but I use Responsively to view the app in multiple screen sizes
- Styled the app using Tailwind with help from Tailwind UI, Heroicons, and some Tailwind Stimulus Components
- Monitored OpenAI calls with Helicone
- Recorded the video with Loom (and will hide its recording button on future recordings!)
- Listened to this recording from a Four Tet concert I attended while working
2024-05-30