AI assisted coding with Claude 3.5 Sonnet

Since May 2024 Claude from Anthropic is available in Europe. I’m not sure how well known this is, in any case I want to invite you to give Claude a spin, specifically as the latest model is said to be superior in some tasks (such as coding) compared to GPT-4 according to some articles I found; and (by the time of writing) documented in the chatbot arena leader board.

I won’t go into a comparison between the models, this blog post is intended to give you an overview of how Claude works and demonstrate some of the cool features.

Simple chat

After registering to Claude, you will be welcomed by a typical chatbot screen, where you can start a new chat by just typing in your text. As I’m on vacation around Venice, I would like to learn something about a tiny island near Venice names Isola San Giorgio In Alga.

Little surprising, the system will respond and we can chat forth and back.

This works as expected. Two things to notice:

• I found the model is responding very quickly
• The knowledge cutoff is April 2024

Coding

According to some articles, the model is very capable in coding. I only tried a few use cases of creating something from scratch and I have to say that the results are very impressive to me.

I’m a user of large language models since they became popular with ChatGPT and I use them almost on a daily basis to help me fixing problems, learning about new concepts, etc. After the initial hype I learned for myself when to use an LLM is helping me and making me more productive and when I’m better off just coding for myself and reading the original documentation. I guess meanwhile every engineer had very frustrating experiences with coding using an LLM and I assume it will not be any different with Claude.

The way Claude has integrated coding is interesting and could be an indication on how programmers will code in the future. Let’s take a look at how to create a simple web application from scratch:

please help me creating a React based quiz game. The home page shows tiles of quizzes. When clicking on a quiz, the first question is displayed. The answer has to be selected from a list.

The system will start generating code right away, but the best thing is that we can play around with the result right away.

Test the result right away, this is a really useful feature.

Interacting with the model

I think the code i rather simple, but that’s actually a good thing as I want to have a simple way to start a new project, prototype something and evolve it. Still, for the sake of this blog, let’s try to add some features by just interacting via chat.

• I don’t like the background color, please make it colorful
• When the quiz has finished, show me a page with the final score and a possibility to get back to the overview screen
• Add more examples (total of 10) , make the tiles smaller so that there are 3-4 per row

That’s pretty cool! I have found myself not even reading the textual output, but just fine tune the result by adding more and more detailed instructions.

Publishing

Let’s assume my little application is ready to be consumed by my customers. A feature I really like is publishing the generated artifacts right away.

After following the instructions you will get a link that you can share with your friends or colleagues. Here is mine, for the quiz:

https://claude.site/artifacts/67cf5d36-a276-49b7-86d2-30672e03b2af

Conclusion

I’m new to Claude, but I like the interactive coding experience. I also tried to generate some code for the p5.js engine and it worked out of the box. Subjectively, Claude 3.5 Sonnet is generating the most complete and out of the box working code for me so far.

For readers who are not that much into coding: the model generates a good skeleton for an application, not a complete and ready to use applications for your business. Providing the quiz application as a complete service with a proper and scalable architecture, proper user authentication, storage, observability and other features would still require a lot of effort.