Christmas webdev adventures

Created at , last modified at in «Computers»

One of the side projects on my TODO list has, for a long time, been a personalized inflation calculator. That is, instead of using the official consumer goods basked, I wanted the users to specify their own "reweighing" and get a "personalized" inflation rate.

Now, you can find the result at infla.cz. But, honestly, this is not really what I want to write about.

I do webdev very rarely, so I figured I would just throw some of the new AI tools at it and see how far I can get. This is a list of tools I tried with some thoughts about them.

Tools I tried

In short, the development flow was along the lines of:

  1. Use bolt.new to setup a Nuxt project.
  2. Mess with it until I got the general structure right, such as pages existing, components looking somewhat correct and rendering in the correct places.
  3. Then I exported the project into a git repository for more directed processing.
  4. Using the aider.chat tool and Copilot to continue refining the codebase with somewhat more controlled edits.

bolt.new

This was the star of the show. The idea here is that we give an LLM access to a Linux container containing a project and allow it to manipulate files and execute commands inside of it. It was able to setup the entire Nuxt project, make reasonably looking components and in general, it saved what was probably 1-2 days I would have to otherwise spend on learning the stack.

One of the problem that this tool has is it's extreme zealotry. It _will_ refactor everything, even without being asked to. Unfortunately it does not seem to perform dead code removal very well, so this leaves a lot of questionable things in the codebase.

Eventually, as the project complexity grows (I would say that in the current state, my project is about at that border), it seems to lose its ability to perform edits that result in a functional codebase. The feedback it has from what actually renders on the screen is very limited, so the automatic fixup mechanism does not perform very well. You can tell it that something no longer gets rendered and it will sometimes figure it out. It does require more and more handholding as the project grows beyond the initial sketch.

In practice, this was very useful for getting the initial structure right, especially as I was not familiar with the Nuxt framework. At this point, it seems limited to being a tool for setting up a new project quickly, rather than a long term ongoing development tool.

Do note that there is a self-hosted version of this tool called bolt.diy. This seems to be basically equivalent, except that it allows you to specify your own API tokens for the backing LLM service.

aider.chat

This tool has the benefit of working reasonably well with an existing codebase. It has a nice terminal interface and is relatively unobtrusive. Picking the correct model to use is critical. Altough the website does list GPT-4o on the first place, I found it severely lacking, often unable to even produce syntactically valid code.

Both deepseek-chat and claude-3.5-sonnet perform leagues better. I think Claude is marginally better, but it is also about 10x more expensive. I recommend using them via openrouter.ai as it makes billing and API key management much easier.

claude.ai

I am ambivalent about Claude. I find the model to be pretty good at the chatting part. It is even pretty good at generating code, for example script for fetching the raw data was written by providing an example URL to Claude and letting it do the rest. The code quality is mediocre, but good enough for a one-off script.

However, I really do not like the lack of interactivity of the code editor. You cannot manually perform edits in the code, and have to instead painfully direct the model to making even simple edits for you, or copy the code out and in again. In my opinion this breaks the flow quite a bit.

DALL-E

The icons on the website were generated using this. I found that DALL-E 3 worked slightly better than DALL-E 2. Getting stylistically consistent icons is difficult. The biggest issue I see is that the pictures are just bitmaps, which makes them unnecessarily large and hard to edit. Claude has attempted to generate SVGs for me at times, but the results were mostly hilarious (though syntactically valid).

For some reason, I also found that using DALL-E through ChatGPT worked far better, even if I copied the prompt from ChatGPT into the DALL-E API verbatim. I suspect that the internal preprocessing is not performed on the prompt that ChatGPT shows, so it gets results that are more in line with the description.

Honestly, if I was for real, I would use something like smashicons or other of the myriad of services that exist for visually consistent icon style in a vector format.

Tools I did not try

Those may be worth trying next time, if there is a next time and the landscape hasn't completely changed.

Cursor

I was simply not planning to get another entire IDE. I may try this if I am ever in the mood for trying yet another VSCode derivative.

lovable.dev

I hear this is supposed to be similar to bolt.new, but I have not tried it.

avante.nvim

A reasonably-looking neovim plugin. I was mostly turned off by the setup looking relatively complex.

magenta.nvim

This one works by using the tool-use functionality of some modern LLM APIs. Could be interesting if it works well.