As the title suggests, this is a story of how talking to an AI helped me come up with a unique product idea with AI — one that might be different from what people usually create. What you’ll get here is my insight on AI integration into websites that actually can be developed into real tech products. I have 2 versions of websites that I’ll show here: one that’s code is open to the public and one that I might plan to develop further. So pardon if I don’t share the code for the latter 😆
Warning: since this is a story, expect this article to be long.
During preparation for BWAI I was confused on what kind of material I wanted to present. I wanted to do something different, as I didn’t want to talk about something like how to integrate Gemini into your web. I wanted to talk about use cases instead, but couldn’t come up with an idea. Then I discussed with Gemini what I should talk about, and Gemini advised me to use AI to improve user experience.
Then it struck me that generally when people incorporate AI into their code (disclaimer: not everyone’s like this. But even back then when I was asked to create something with AI, I did this too) there can be a tendency to make it too… grandish.
Often, projects are built around showcasing AI itself — instead of using AI to solve a real, everyday problem. Think of license plate recognition or live sign language translators. Impressive? Definitely.
But let’s think of it as if we try to make it as a real business, where what matters the most is sustainability. The budget and the infrastructure can be very challenging. And in the society that is still trying to get used to adopting technology into their daily life, they can be skeptical even more to invest heavily.
Disclaimer: I don’t want to demotivate people to freely explore what they can do with AI. But I’m also aware that some people or communities, they inadvertently “set the bar” that tech products with AI should be cool and look futuristic. And I’m afraid that this is what actually demotivates people to explore AI for a product that’s simpler but actually closer to what the market actually needs.
But anyway, back with my convo with Gemini again. So this was what crossed my mind: what if we try to combine AI with form, like a form assistant? And now maybe some of you wonder: why form?
As a web developer, I realized form is one of the most common kinds of UI that tends to have UX issues. Let’s be honest — filling out forms is boring. Especially when they’re long, unclear, or asking for too much. At some point, we might even blanking out and autopilot filling it. AI these days will definitely beat us in filling these forms if they have our knowledge 😂.
Then I brainstormed with my friend about what kind of form that might require an assistant to fill it. What crossed my mind at first was the tax reporting form, but my friend pointed out that this wasn’t very relatable for students if I wanted to present this in a university. Then we came up with a CV consultant web idea.
I created my very first CV in a career class, preparing to apply for an internship. Since we have never written a CV before, we were shown an example of how a CV looks like. Does this experience sound familiar? When we don’t know what to write on your CV or we don’t consider ourselves good with words, we resort to imitating the stereotype of a successful person's CV. Or now there are lots of CV creator websites which can help us with this.
People think that this is just the issue of fresh graduates, but even now my CV summary still sounds... dry. The reason? It’s not that I don’t know who I am — I just don’t know how to say it right. And I don’t want it to sound sugarcoated too — think this is obvious by how I write this article. So I play it safe even though my description sounds really dry.
But let’s think about it from a hiring perspective. If we want to hire someone for a particular position and there are lots of applicants, we can’t hire everyone right? As someone who will work with this new person, we prefer someone who isn’t just capable in doing their job but also is nice to collaborate with. And from the whole company perspective, we want this new person to bring value to the business. And this can be difficult right if everyone’s CV sounds the same?
So it’s expected for HR to look for the one (people can complain that the one that is chosen not because they’re capable but because they have a connection inside the company but since this is not always the case and a completely different matter, let’s rule this out first). So much like dating huh? And just like in dating — it’s difficult.
There’s an influencer’s tweet that I found even mentioning about a lot of rubbish-like CVs submitted into a company and how difficult it is to find the one. His words can be triggering but I think there’s a silver lining in it.
So, my idea is to create a CV creator website, with a ‘consultant’ inside it that’s powered by Gemini. Hopefully, this ‘consultant’ can help users make their CV more personalized. Because rather than just beautify the content of the CV that the user gives, users can actually consult on how to deliver their message through their CV. The complete open source repo can be found in this repository.
Very first thing I did, I integrated Gemini in my code. I generated the key in Google Cloud API Credentials. I rarely generate key in Google Cloud, and when I did this I had to admit Google is really practical in generating API keys that can easily be used for any API; doesn’t have to be specific only for Gemini use.
Here I didn’t just train Gemini to be a CV consultant, but also to return the answer in HTML format so that I can display it nicely later.
Next I developed the chat. I have never developed a chat product before, so I just developed this based on my interpretation of what's needed in a chat. These are the 3 parts that I initially developed for my chat.
Explanations:
The onSend was initially just a console log. I completed this later in the development
Since the chat with AI is normally just a 1o1 question - answer, I used this format in as a structure for chatHistory
Typically typedQuestion isn’t necessarily to be stored as a state right? When I trigger the onSend, I can just get the value of the target event. But I stored it as a state because I planned to do some magic 🔮
Next on I developed the CV creator part. I keep it super simple with only a single card form component that’s used to fill the Summary of the CV, as this is the one that I will simulate later. There are 2 parts of this component.
Explanations:
Clicking on the inner part is of course to fill in the summary of the CV. Need to be careful not to click the outer part.
The outer part? Let me show it. Let’s say after I write something in the inner part, I click the outer part
Pretty cool right? 😆Fellow coders may say that this is not rocket science. Doesn’t matter, I loved building it. But this is the reason why I stored the typedQuestion as a state.
Finally I added the processing in the onSend. You can check it on the code later. Here is the full flow of the open sourced website. Or you can check it on your own here.
During the development, I realized there is a lot of potential for this website. For example the stored chat history can be exposed to the HR, though for the implementation I know there can be a privacy T&C or something that the users need to agree with. My idea is that maybe by exposing the chat, the HR can get more insights from the candidate aside from their CV.
To end my story, let me show you a slightly more polished version I’ve built. Hope you got some ideas (or at least a smile) from reading this. My approach isn’t the way — just a way. And maybe it’ll spark ✨ something better in you..
Top comments (0)