An honest review of AI coding tools by someone who doesn't really know what they are doing
My personal journey building a Chrome extension from scratch using AI coding tools
Introduction: Why I Finally Decided to Build an App
For years, I’d wanted to build my own app—not mainly to have one specific app, but because I knew it would deepen my understanding of technology and make me better at my job. As someone who has worked as a product manager in tech and co-founded a startup, I believed that the value of practical experience in building an app end to end myself would be very strong, but I had never taken the leap. I’d tried coding classes multiple times, but they felt too theoretical, and I’d lose interest.
In August 2024 I felt the time was finally right to build an app from scratch. My Twitter timeline was full of rave reviews of AI coding tools, like Cursor or Replit agents. These tools promised to lower the barrier to entry, making it possible to build something end to end without needing deep technical expertise. Plus, I wanted to find out what the hype was about.
My project? A Chrome extension to help me use Twitter. I wanted two main functionalities: using AI to shorten my replies to fit within the 280 character limit, and using AI to explain complicated language. As a frequent X/Twitter user, I often find interesting tweets from industry leaders, but some reference niche topics I don’t fully understand. My app would explain complex tweets in simple terms, making Twitter a more valuable learning tool for me.
TL;DR: The Most Interesting Things I Learned
For anyone who wants to jump straight to the punchline, these are my four major insights:
Prototypes and demos are easy, production is hard. I had a working prototype on my local machine within a weekend. To get to a shippable version took weeks of (part time) work.
Writing code is only a small part of what developers do. A huge part of the work involved researching—reading API docs, reviewing logs, or searching coding forums for solutions.
Understanding system architecture is critical. AI tools don’t guide you through how the frontend, backend, and database work together, but understanding these is essential for building a real app. Further, as a complete beginner you often lack the vocabulary to ask AI effectively for help with architecture.
Integrations are the hardest part. Adding features like Google login or implementing backend functionality presented far more challenges than writing code.
AI coding tools produce a lot of code, but it’s often buggy. Fixing those bugs requires understanding the code, which is extremely difficult to do if you are a complete beginner.
Last but not least, check out my Chrome extension here!
The Building Phase
The magic of getting started
I decided to use Cursor after seeing praise for it on Twitter. Cursor is an AI-powered IDE where you can describe changes in plain language, and it generates the code for you. Cursor proposes changes inline, allowing you to accept or reject them.
Below are screenshots from Cursor. You can see that Cursor shows a list of all files in the repository on the left, the code of the selected file is in the middle and the chat interface to interact with the AI in natural language is on the right.
After the user requests a code change in nautral language, Cursor’s AI proposes code changes to the selected file in green (code to be added) and red (code to be removed) background color. The user can then accept, reject or modify the proposed code change. Importantly, the AI often makes mistakes so users need to read the proposed change request and understand it. This proved to be a very convenient interface.
In the beginning, using Cursor felt like magic. I’d type, “Add a button to shorten tweets,” and it would write the code for me in seconds. Initially, I quickly accepted every proposed code change without thinking, eager to make fast progress. Within a weekend, I had a working version of my Chrome extension. This was fun!
Early Challenges with Cursor
Despite the fast start, I soon learned of several limitations of AI tools, like Cursor, that made further progress more difficult.
1. Cursor Made Unwanted Changes
For example, when I asked Cursor to add a second button to shorten tweets, it not only created the new button but also changed the shape and color of the existing button—something I didn’t want. These random modifications forced me to review every suggestion carefully. As a result I could not move as fast as I initially thought I could.
2. AI-Generated Code Is Buggy
As the app got more and more complicated, the code generated by AI didn’t always work. Blindly trusting the AI led to many bugs being introduced. I realized that understanding the code was critical for writing a good app when coding with AI. The problem is, of course, that I am not very proficient in reading and writing code.
The picture above shows one of the bugs I encountered: I wanted my AI to read not only the text of a tweet, but also the embedded images. I asked Cursor to modify our API calls to Anthropic’s Claude to consider images. Cursor built a function that sends the URL image of an image to Claude. Turns out, that is not how Claude works! Claude doesn’t follow URLs of images, you have to send the images directly! But the code looked correct at first glance. It even passed the first couple of tests that I did because the AI hallucinated and guessed what would likely be on the images (without having access to it in reality). I didn’t realize what was going on until one of my friends (Thank you, Michael!) pointed out that my AI was hallucinating and likely doesn’t read the pictures!
The whole point of using AI was that I supposably didn’t have to be able to read code. That turned out not to be true. I realized that I could move much faster if I just knew a little bit more about how to code because then I could just make some of the smaller code changes myself without having to use AI. You are constantly concerned that you are missing something important.
Publishing my Chrome Extension
So far I had only built a local version of my Chrome extension that I could use on my computer. This was fun but I really wanted to share my Chrome extension and make it available for others to use. The next step for me would be to publish it on the Chrome Store.
Usage Limits and Secure Integration
Publishing the App involved addressing security flaws, managing authentication, and preparing the app for public use. My extension uses Anthropic and I pay for every request. One security concern I wanted to address was how to store my API key securely. Thus far I had just stored my Anthropic API key in plain text in my code. But if I published my Chrome extension, everyone would have access to my code and could potentially steal my API key. Furthermore, a user could have used my Chrome Extension excessively and create a big bill for me while doing so. I wanted to add some basic user login flow to track usage and be able to limit the usage of each user.
From here on out progress slowed to a crawl as I worked through these additional steps. Adding features like Google login and a sign-up system to track users pushed me far outside my comfort zone. New challenges popped up constantly and it took me weeks to resolve them. (Note that I have a demanding full time job and I couldn’t spend time on this every day.)
Publishing and Architecture Challenges
How to build a backend for dummies
To enforce a maximum number of tweets explained per user, I initially used a frontend counter. However, this was insecure—users could manipulate the counter. I had to move the counter to the backend. But how do I build a backend? Where to even start?
One recommendation I got (Thank you, Ann!) was to use Supabase for the backend. This would also handle my authentication and should be very easy to use. Great. But how do I get a server up and running for my app’s backend?
Luckily (or so I thought!) I had just seen on Twitter a long thread about Replit Agents. These allow users to spin up and manage AWS servers just with natural language. I thought this sounded perfect, so I went ahead and bought a Replit subscription to spin up an AWS server for my backend. I described my chrome extension and provided all my code to Replit’s AI. The Replit agent went dutifully ahead and created a AWS server. Only later did I realize this was completely unnecessary because Supabase already hosted the backend for me. 🤦
This illustrated a major limitation of AI tools—they don’t explain how systems should fit together. Without a clear understanding of system architecture, I made avoidable mistakes.
My biggest challenges
Progress with Supabase proved also to be slow. The two main challenges I encountered were the Sign in with Google function and getting Edge Functions up and running.
Sign in with Google: This was super buggy and finicky to configure. Not only was there a lot of code to write, but the tricky part was configuring settings. Between my Supabase Dashboard, the Google Developer console, and my Chrome Extension manifest — all of them need to be perfectly synced. I believe some of the code on either Supabase's or Google’s side was buggy.
💡 Insight: I had to spend a lot of time researching online how to solve the login related bugs. In doing so I learned that one of the biggest time sucks for developers is being stuck somewhere. Progress in coding is very lumpy. At times you make huge gains quickly, then an annoying bug trips you up and you can spend hours trying to understand and find a fix for it.
Server side Functions: Implementing the backend within an edge function to prevent tampering was a good idea. This added complexity but ensured reliability because now my API key would be securely stored on the server and users can’t read it in the source code. However, getting the edge function work was difficult. I had not worked with edge functions before and the learning curve was steep. Overall, it massively increased the scope of my project. Suddenly I had to consider things like bundling. Not something I had done before.
Despite these large challenges I still wanted to proceed and implement these before announcing my Chrome Extension. I thought I would learn a lot from building a sign up flow and a backend. And I really did! But this was not fun!
Sample error message that is illustrative of the countless ones I encountered.
Publishing: the last hurdle
Publishing on the Chrome Store wasn’t straightforward. I had to create a Google Developer profile. I had to configure it, and fill out a lot of paperwork. Furthermore, every time you publish a new version to the Chrome store, the extensions needs to be reviewed. This can take many days, further slowing down the software development process. Finally and ideally, you should get a website too (I ended up building a simple one with Webflow here) and email address for it so that users can ask questions.
Final Thoughts: The Hype vs. Reality of AI Coding Tools
AI coding tools like Cursor, GitHub Copilot, and Replit make coding fast and more accessible, especially for beginners. They excel at helping you prototype quickly and learn by doing. However, their ease of use can be deceving.
To use these tools effectively, you still need a basic understanding of coding, so that you can review and debug the code the AI produced. Building an app also requires skills beyond coding, such as understanding system architecture and managing integrations. These are areas where AI tools don’t provide much guidance, and they create the biggest hurdles for beginners. Overall, I believe right now AI tools are most suitable for people who already know how to code and who want to speed up their development process. If you’re curious about AI coding tools, I’d recommend trying them, but be prepared to invest time in learning and troubleshooting along the way. The tools can get you started, but the rest is up to you.
From a personal perspective, I’m very happy with what I built. Creating a working Chrome extension was incredibly rewarding because I believe I understand much better how apps in general work and how developers work.
If you want to check out my Chrome extension, it’s free to download here.
Picture that shows the chrome extension I built. It opens in a sidepanel and at the click of a button explains complicated tweets like this one about why radiators don’t work in outer space.
Appendix
AI Tools I Tried
• Cursor: An AI-powered IDE that helps generate and modify code using natural language. Lives up to the hype but is not perfect. Be sure to review all proposed code changes before accepting them!
• GitHub Copilot: A coding assistant integrated into popular code editors, suggesting and completing lines of code. Helpful but feels outdated.
• Replit: An online IDE with AI capabilities for coding, debugging, and deploying projects. Has a lot of potential but failed critical thinking by spinning up a server for me when no one was needed. I would test this more in the future.
• Readable: AI-generated documentation that simplifies complex technical concepts. Somewhat helpful.
• ChatGPT: The o-1 preview model works reasonably well for reviewing code changes if you manually copy and paste the code from all important files into the context window. (o-1 preview can’t read files.) I did notice, hower, that the AI was also often wrong, misunderstood the problem, was relying on outdated information. One thing that helped was to copy and paste documentation from the tools I was using, e.g. Supabase, into the context window, as well as adding some of the information I found online about bugs I encountered.
Great post Fabian! Thank you for sharing this. As you demonstrated, even though AI can do coding wonders in the classroom, it still has room to improve in the "real world."