100% AI Coding Weekend Product
How I built a Chrome Extension 100% coded by AI over a weekend
So I did it again. Another hobby product idea over the December holidays. Yet another attempt at bending AI to my wishes. I had two goals. Learn new ways AI can be used to generate code and experiences. Make myself more productive with AI.
Here are the key results. Around 2,400 lines of JavaScript code, using latest Chrome Extension capabilities, latest Anthropic Claude model integrated, Local Browser Storage, Webpack bundling, with three major features to capture memos, auto-organize in project tags, and chat with memos related to a project tag. 100% AI generated code using the awesome Cursor + Sonnet 3.5v2. Idea to usable extension over a weekend. And yes, it is a bit “meta” using an LLM to generate code for an extension which uses the same LLM for its features. Awesome but true!
Here is what I am covering in the rest of this post.
The Big Challenge - What problem I am trying to solve
Capturing The Web - Demonstrates the core feature of Web Memo, capturing memos.
Fixing Bugs With AI - How I fix bugs using Cursor.
Code Generation and Testing Workflow - How I iterate between prompting the AI and testing the output.
Context Switching With Project Tags - Discussed the second core feature of Web Memo, to help context switch between various projects using tags.
Chatting With Memos - How to have fast, focused, cost effective chat with your memos and project tags.
The BIG Challenge
So here is the full download. I built a fully functional Chrome Extension called… wait for it… Web Memo. Super creative right! The idea is simple… I do a lot of “snacking” on the web, watch part of a podcast here, speed read a blog there. I also multi-task a lot, research new shoes to buy for walking to work in Seattle rains, plan for upcoming birthday party for my soon-to-be 6 year old, learn new magic tricks to entertain kids at her party, sharpen my AI chops, and so on. Now the challenge is content snacking + a number of mini projects means I sometimes forget where I last read that nice blog. There is also doing too much research rabbit hole. How do I make the right decision, quickly and sanely? Then there is, I like to revisit reading this later. Then… I don’t have time to go through 1.5 hours of this podcast, what are the key takeaways which matter to me the most.
Listen along AI moderated discussion on this post
Can one humble Chrome Extension solve all this? Drumroll… I think I have cracked the code. No pun intended! Capture memos as I browse the web. Each memo can be part of a website, a product description, a blog, or an entire podcast transcript. Categorize memos automatically into project tags like Shopping, Technology, Entertainment. Then chat with my projects to get the insights I need. Store all my memos locally. So no hosting and super fast responses. Use the LLM of my choice. And looks like we can tick all the boxes.
You can download and install WebMemo extension from GitHub. You will need your own Anthropic API key to get started. The GitHub README includes simple setup and start instructions.
Capturing The Web
Here is an example of me browsing an interesting blog post I found on my LinkedIn feed today. It is a 22 minutes read. I scanned it and found it has some interesting insights I want to use as part of my work. I opened the Web Memo extension as a side panel. Clicked Capture button, hovered my mouse over the blog content, clicked it. The LLM processed the content, neatly summarizing it and automatically classifying it into a project tag, with timestamp and origin. I am ready to context switch to my next task, happy that I have saved this memo. I know what you are thinking, I could have called this product Bookmarks 2.0, but wait, there is more.
Sidebar: Readers will notice that my cool new extension has redundant notifications one in grey and another in blue. Easy solve with my AI workflow, will walk through how to fix this later.
Clicking on the memo at anytime brings up a narrative which summarizes the entire blog. Web Memo automatically compressed 8,370 words into 168 words only! I can always click on the source icon anytime to return to the origin. If I do not like the automatically assigned project tag, I can change it in the memo details by selecting another from the convenient dropdown.
Fixing Bugs With AI
Before I share other features, let me switch contexts and show you how I can fix the notification issue we spotted earlier. All it takes is for me to define a prompt explaining the issue and orienting the AI. Cursor takes care of the fix for me. As you notice it diffs the changes while also explaining what it changed in a chat (composer panel). I am not yet an expert at every feature of Cursor so don’t know why it has a chat and a composer.
The feature that I really like since I last used it is the Checkpoint / Restore. Notice the small grey text on top of my prompt. If I don’t like the changes Cursor has made I can either reject them or if I after accepting the changes I want to restore prior state, I can do so by clicking the checkpoint. Easy. In my other workflows where I use different AI code generation tools, I do this checkpoint/restore myself using a git workflow. Obviously less cognitive load for me if the tool handles it for me.
Code Generation and Testing Workflow
While I am familiar with JavaScript coding, I have been resisting the temptation to review each generated change. Instead once Cursor generates the code. I test it by using the extension, checking any errors in console. If it works and there are no errors, I move on. There have been a couple of instances where I grew ambitious in asking Cursor to make 7-8 changes all in one prompt. That did not work so well. So now I make one or two change requests at a time, test it, then iterate. I am hitting the restore button far fewer times.
I am also in parallel using the extension for “real” projects as an end user, so my testing covers end to end feature integrations. I am able to catch any regressions in other parts of the extension due to changes somewhere else.
Why am I building and testing this way? After all, I love coding. I have been doing it for more than a decade and have written books on coding. So why am I “checking out” from at least peer-reviewing the AI generated code? Well, I am preparing for a future when AI will generate apps, experiences, even entire systems on the fly. After first-hand use of the Cursor + Claude workflow on multiple projects now, that future does not seem too far.
Think about it for a moment. What would it take for the end users of Web Memo to extend it to their liking and generate new features on their own once they have the base product? Plugins and extensions have been around for a while. All it takes is for users to prompt their needs, or even better, for the AI to predict new features based on how user is using the product. Then it is the same code generate, test workflow, right? Only this time it is the end user of the product + AI. I am excited about this future for product builders as this promises to exponentially scale the 11 years old Tim O’Reilly lecture on creating more value than you capture.
Context Switching With Project Tags
Let us look at the second key feature of Web Memo. Think of tags as mini-projects. Web Memo comes with a set of pre-loaded tags which users can retain or delete. Users can also create their own custom tags. As memos are captured, the AI uses the tag name and description to match the best tag with the memo content. It gets surprisingly good at doing this as I found out with some creative prompting in the Web Memo code.
Tags are important both for the human and the chat feature which I will cover next to do the same thing - switch contexts. Think about your day. How many mini-projects do you have? How many times do you switch contexts between those projects? This is what tags feature solves for. Each memo relates to a tag, mini-project, or context.
Users can click on tags with associated memos to easily filter the memos list.
Deleting tags sets the associated memos to Untagged, which users can then go in memo detail view to re-tag. Simple.
Isn’t this a nice way to plan your day, while you casually or seriously browse, do your research, read your favorite blog, listen to that podcast?
Chatting With Memos
Now that my memos are classified as project tags, I am ready to chat with them.
As I click on chat view, I have two options. I can start chat with memos by clicking an associated tag. I can also continue a previously saved chat.
Here I am chatting with the saved memo which captured transcript of the Tim O’Reilly video shared earlier in this post. While capturing the memo the AI converted 19,929 words to 173 words narrative. Then during the chat it pulls the response from those 173 words almost instantly without using any Retrieval Augmented Generation (RAG), vector databases, or even traversing own world knowledge. The response is surprisingly sufficient and cost efficient. If I am not happy with the details, I can always toggle “Chat with Original Source” option to refer all of the transcript data also captured as part of the memo.
This project is so much fun. Hope you like the extension. Please like, share, and subscribe for more fun projects in future. Happy New Year 2025!