Generative AI like ChatGPT has ushered in a new era of software development, one where anyone can develop a useful, modern application with little to no coding skills. In this article, I’ll show you how I used AI to develop a tool I now rely on every single day.
The Problem I Was Trying to Solve
Since the inception of ChatGPT and other AI language models, certain words have become strongly associated with AI-generated content (one of many reasons why you shouldn’t use ChatGPT for writing). Examples include “delve,” “tapestry,” and “testament.” As a writer, I’ve always believed in using the right word for the right context. When a word fits and expresses exactly what I want to convey, I feel like I should be able to use it.
Unfortunately, many of my clients don’t see it the same way. They’re increasingly wary of content that might sound AI-generated. Since I’m not an AI (at least I don’t think so), I don’t remember all the words and phrases commonly overused by AI language models, so it can be difficult for me to avoid them.
The final version of my tool.
That’s why I decided to create a tool that would analyze provided text against a word list and highlight potential “AI-sounding” words and phrases. A tool like this can be developed using the three key web technologies: HTML (structures the content of a web page), CSS (used to style the content on a web page), and JavaScript (turns a static web page into a “web app” that does what we want it to do).
A project like my “AI Vocab Checker” is a perfect candidate for AI-assisted software development because the best AI models have been trained on massive amounts of HTML, CSS, and JavaScript code and documentation, so they can output code, provide guidance on best practices, suggest efficient implementations, and even help troubleshoot issues that might arise during development.
All top 3 best large language models (LLMs) in the LMSYS Chatbot Arena Leaderboard (GPT-4o, Claude 3.5 Sonnet, and Gemini Advanced) can handle web development tasks with impressive proficiency. However, I ultimately chose Claude 3.5 Sonnet for this project.
Claude 3.5 Sonnet was my AI coding assistant of choice largely thanks to its “Projects” feature, which allowed me to create a workspace dedicated solely to the development of my app. Of course, it also helps that Sonnet outperforms its competition in coding tasks included in the HumanEval benchmark.
Building My Web App With Claude
I started by creating a new project in Claude for the AI Vocab Checker by selecting the Projects tab in the left pane (you can reveal it by hovering your mouse cursor over the Claude logo in the top-left corner in an active chat) and then clicking the Create Project button.
Once that was done, I needed to describe the problem to Claude. Here’s the prompt I came up with:
I want to create a web app that analyzes text for words and phrases commonly overused by AI language models like ChatGPT. The app should highlight these words in the input text: delve, dive in, in the era of, robust, ensure, significant, crucial, effectively, additionally, [redacted for brevity].
Here are the key features I need:
– A text area for users to input their content
– An editable list with words to detect
– A button to trigger the analysis
– A display area to show the analyzed text with highlighted words
– A list of the detected AI-associated words
Please create the app using HTML, CSS, and JavaScript. Include any libraries or frameworks you need to make it great. Output all code in a single file.
Generally, you want to provide a high-level description of what you want to accomplish and then follow it with as many details as possible. Anything you don’t describe in detail will be left for interpretation by the AI, which may or may not align with your vision.
It took Claude a short while to output the code, which I then pasted into an index.html file using Visual Studio Code. I was then able to simply open the index.html file in a web browser, and this was the initial version of the AI Vocab Checker app Claude came up with:
As you can see, Claude was able to create a functional app with just a single prompt, and the app actually does what it’s supposed to do! However, there are a few issues that are quite obvious upon closer inspection:
- The first two text boxes are slightly larger than the bottom text box.
- The name of the app is wrong (I forgot to specify it).
- The app isn’t taking advantage of available horizontal space on desktop devices.
- All words are highlighted in the same color (making the result difficult to analyze).
- There are no usage statistics for the detected words.
- Claude didn’t use any libraries or frameworks despite being encouraged to do so.
So, I followed up with this prompt:
Great start! Let’s make a few improvements:
– Change the app name to ‘AI Vocab Checker’.
– Please change the layout of the app so that the list of words to detect is in a left column and the text to analyze is in a right column.
– Implement responsive design for mobile devices.
– Highlight each unique word or phrase in a different color.
– Add usage statistics for each detected word/phrase.
– Use suitable frameworks or libraries to make the app better.
And here’s the result:
That’s significantly better, and it took just one extra prompt. Claude implemented the Bootstrap framework to achieve a modern, responsive design and the mark.js library for better highlighting. Impressed with how their inclusion improved the app, I asked Claude what other frameworks or libraries we could use, and the AI suggested Vue.js, Chart.js, Tippy.js, Natural, FileSaver.js, and a few others.
Out of the suggested frameworks and libraries, Chart.js seemed the most useful because it can be used to create visual representations of word usage statistics, such as bar charts or pie charts. I asked Claude to implement it, and I also instructed it to replace the text to analyze with the result to improve the user experience. After a few minor tweaks and design adjustments, here’s what I came up with:
As far as my personal needs go, this version of my AI Vocab Checker can satisfy them perfectly well, and it took me just 15 minutes to develop it using my very limited web dev skills that I’ve acquired over the years on various free programming websites.
Cover image and screenshot by David Morelo.
Subscribe to our newsletter!
Our latest tutorials delivered straight to your inbox
David Morelo is a professional content writer in the technology niche, covering everything from consumer products to emerging technologies and their cross-industry application. His interest in technology started at an early age and has only grown stronger over the years.
