Vibe coding - does it make sense? A short practical test, will AI create a simple page?

.
"Vibe coding" is a term used to describe programming based entirely on code generated by artificial intelligence. The programmer then just briefly describes his requirements in natural language and the LLM (language model) translates this into code. Proponents of this method praise it because it allows results to be obtained quickly and you can create even without understanding the code you are working on, while opponents point out that no major functional programme is likely to be created this way. In this topic, however, I will not repeat and analyse the arguments of the different sides of the conflict, but try this approach in practice, based on a simple but practical task.

I've set myself the goal of creating a new browser Electrode database of IoT devices , all on a 'vibe coding' style basis of course, ie:
- without writing code
- no code editing
- yes, without even looking at the code
- and even without giving the AI any error codes (beginners don't like this).
I wanted the developed site to be able to conveniently display, filter, browse and search data taken from an existing list of devices in JSON format.

I used free ChatGPT from OpenAI , planning to fit in a daily query limit for the more powerful model. ChatGPT has the ability to use what is known as Kanwa, an interactive editor where the AI can generate and modify code in real time to create simple pages. The user sees the finished result and can preview the generated code, but does not have to manually change anything in it.

To start, I developed a prompt, which is a query to the AI written in natural language. In the prompt, I included a link to a simple 'database' in JSON (over 750 entries), a sample of the data format and a brief description of what should be on the page:

Quote:

.
use this link
https://openbekeniot.github.io/webapp/devices.json
Preview:
{
"version": 0.1,
"devices": [
{
"vendor": "Generic",
"bDetailed": "1",
"name": "WiFi DIY Switch",
"model": "ZN268131",
"chip": "BK7231T",
"board": "WB2S",
"keywords": [
"switch",
"relay",
"AP8506"
],
"pins": {
"6": "Rel;1",
"7": "WifiLED_n;1",
"10": "Btn;1",
"26": "TglChanOnTgl;1"
},
"image": "https://obrazki.elektroda.pl/5120493600_1650616045.jpg",
"wiki": "https://www.elektroda.com/rtvforum/topic3895572.html#20033093"
},
{
"vendor": "Zemismart",
"bDetailed": "0",
"name": "Matter LED Light Bulb RGBCW E27 Dimmable 7W",
"model": "ZML2-7W",
"chip": "BL2028N",
"board": "UAM026",
"flags": "1024",
"keywords": [
"lamp",
"UHOME",
"UASCENT",
"BP2516F",
"SL421A ",
"SYWB07",
"RGBCCT V1.3"
],
"pins": {
"6": "PWM;5",
"7": "PWM;4",
"8": "PWM;1",
"24": "PWM;2",
"26": "PWM;3"
},
"command": "",
"image": "https://obrazki.elektroda.pl/9164503800_1741641409.jpg",
"wiki": "https://www.elektroda.com/rtvforum/topic4111089.html"
},
and provide a nice looking, flexible, fully featured gui html browser/searcher/filter/stats page for the linked database, use html and js, maybe bootstrap, with page limits, multichoice, show counts for each type, filter by chip, module, etc

First result - and it's already pretty good, the browser works, but there are shortcomings:
.
I started to score the model one by one what I wanted it to improve. After each step I verified the result. Here is a summary (my subsequent messages to the AI):
- number of occurrences in the module/circuit lists

Quote:

.
next to each filter like chip or board or vendor, show how many occurencies there are in total, and sort entries by that

.
- filter cleaning buttons

Quote:

.
under each list, add a "Clear filter" button that clears this particular filter. Also separately add a single "Clear all filters" button.

.
- pagination fix (because when there were 50 pages, there were 50 buttons with page numbers)

Quote:

cool but those page numbers at the bottom of the page are strange if there are many pages, maybe you should just show numbers for first and last page, and also for current , previous and next pages, of course without repeats, and sorted?

- greater selection of quantities per page

Quote:

.
also allow me to select 50 or 100 or 250 or 500 or 1000 per page...

.
- finally, top of the keywords

Quote:

.
also, under search keywords, give me like, idk, 10 clickable top keywords with their number (occurencies) in ( ) , and when clicked, set keyword field to given keyword

.
At this stage a problem arose - the code stopped compiling. Fortunately there is an option in Kanwa to automatically have the model fix it....

I can't believe it, he seriously did it! He fixed the error.

So I continued - on in one hut:

Quote:

.
To each entry, add Copy button that copies raw original device JSON entry to clipboard

.
Here, however, something strange happened. I had to go as far as looking into the code - Kanwa allows you to preview the changes:
.
I went back and corrected the query:

Quote:

.
To each entry, add Copy button that copies raw original device JSON entry to clipboard, do not remove existing features

.
I was greeted with an error:
.
However, this time again the AI was able to fix it:
.
It even generated an explanation of what was wrong:

Quote:

.
The syntax error was caused by a duplicate and malformed <button> tag inside the device rendering block. It's now fixed - each device entry includes a single working "Copy JSON" button. Let me know if you'd like the copy action to show a tooltip or toast instead of an alert.

.
The finished effect can be seen here:
https://openbekeniot.github.io/webapp/devicesList_test1.html
I think it came out pretty well.

In summary , the results in my opinion are very good, especially for the tool used - I deliberately chose the most popular and available model. I did not want to present paid models, as even a small fee could already sift out some users. I also did not want to use tools that require installation (IDE add-ons or entire AI-based environments). Perhaps I will devote a separate topic to them - for example, we will then test GitHub Copilot.
In this topic I focused on the simplest option, but nevertheless got satisfactory results. Towards the end of the site's development, problems with the scalability of such an approach started to emerge - AI would at times remove sections of code, but a properly worded prompt was able to solve most problems. Also, Kanwa itself automatically offered the option to fix the error.
Does this mean that AI will also generate us large projects, such as our own Elektroda-style forum engine?
Of course not. This method only works for smaller projects and very quickly you can run into an impassable wall without any programming knowledge. Nevertheless, I think that even a simple website like the one shown today would have been a good job for a beginner freelancer a few years ago, but today no one is likely to make much money from it.
Such simple pages can be generated by oneself with a minimum of knowledge, and with increasing knowledge the possibilities grow much faster than they used to....
For this reason I personally foresee (not to write "see") in the future a great decrease in demand for programmers (especially juniors) combined with a huge amount of low quality code flooding the Internet.
This was just my opinion though, what do you guys think? Have you already suggested anything useful for yourselves in Kanwa, and if so, what?

PS: This presentation assumed that all code is in the AI context window. You could improve this way and prompt individual modules separately, e.g. one backend file with the database separately (give the database structure), frontend fragments separately, etc. Then the solution scales much better... .