Hello. I’m Kazu, a backend engineer.

Recently, the use of AI to improve development efficiency has been increasing. In this article, I’d like to share how to utilize the Artifacts feature of Claude 3.5 Sonnet in development.

What is Claude 3.5 Sonnet?

The Claude 3 series is a generative AI model developed by Anthropic, and Claude 3.5 Sonnet was released on June 21, 2024. This model offers twice the processing speed of previous versions and has improved natural language processing, reasoning, and decision-making abilities. It also supports multimodal capabilities, allowing it to understand visual information from images and videos, and can generate code.

What is the Artifacts Feature?

Artifacts provide structured outputs tailored for different users, such as:

• For programmers: Organized code blocks or React components
• For business users: Detailed reports or presentation materials
• For designers: Complex diagrams and charts
• For web developers: High-quality HTML code for web pages

Whether Artifacts are used in responses depends on the length and complexity of the user's question, and Claude determines this automatically. Additionally, multiple code files in the same language may be grouped into a single Artifact, separated by comments.

How to Use It

Claude 3.5 Sonnet can be accessed on its official site. However, the Artifacts feature is turned off by default, so users need to enable it in the settings by switching Enable Artifacts to ON.

This time, we will use this feature to create a simple SNS site with React.

Due to the characteristics of LLMs, please note that the generated screen layout may differ from what is shown in this article.

First, we will give the instruction: "Create a simple SNS site using React."

In this way, the website was completed in just a few seconds. However, user authentication and the comment feature have not been added yet. Next, we will give the instruction: "Please add the login feature and comment feature."

The specified functionality has been added.

However, since the edit and delete functions are missing, it is still incomplete.

Next, we will give the instruction: "Please add the edit and delete functions for posts."

In this way, by giving just three simple instructions, a basic SNS site has been completed.

At this stage, the server-side implementation has not been done yet, so in an actual application, it would need to be implemented. However, the implementation can also be generated. The following image is an example of part of that implementation.

Translation:

In this way, explanations are provided along with the steps for implementation.

However, the generated code is not always perfect. Before using it, be sure to check for errors, grammar issues, security concerns, and licensing matters.

Summary

As shown, AI can assist in drafting initial ideas in the early stages of software development, making it easier to explain concepts and helping with problem-solving during development.

On the other hand, there are cases where the generated code contains mistakes and does not work when executed, requiring thorough checks and corrections. This highlights the need for personal knowledge as well.

AI-generated code has the potential to significantly accelerate the development process, but human judgment and expertise remain the most crucial factors. By keeping these considerations in mind, it is possible to maximize the benefits of AI while ensuring safe and reliable software development.

This article was originally published in Japanese on Sqripts and has been translated with minor edits for clarity.