Since the release of OpenAI's ChatGPT in November 2022, many other companies have launched their own Large Language Models (LLM). Everyone is competing every day to improve and excel. You can view their leaderboard here.
Instead of focusing on text generation, where the top LLMs are all very capable, let’s explore other features that are currently unavailable in OpenAI's ChatGPT.
One of the notable companies in the AI landscape is Anthropic, which made waves with the release of Claude in March 2023. Anthropic, the Amazon-backed challenger to OpenAI expanded their offerings by launching Artifacts within their AI Assistant, enhancing its capabilities even further. This addition promises to bring new dimensions to user interaction and productivity.
Let’s take a moment to ask the AI Assistant itself: what can we do with Artifacts?
Based on Claude's response, we can explore different interactive features using Claude's Artifacts. Let's start by trying some coding. Then we can try the SVG creation.
First, we ask Claude to create a 'Contact Us' form in HTML. As shown in the screenshot below, the form is rendered and interactive in a separate area from the main conversation, called 'Preview.'
This is amazing! With ChatGPT, we only get the code, but it doesn't render the form for us. Claude, on the other hand, not only renders the form but also provides a 'Code view' that we can use in our application.
What is a form without validation? Let's ask the LLM to add validation and another field at the same time. As you can see in the screenshot below, the form has been updated, and the preview is interactive, allowing us to test the validation. Additionally, Claude suggests a list of actions to further improve the form.
If we switch to the code view of the Artifacts, as expected, the code for validation is generated. We can also highlight parts of the code to improve or explain them. Let's try the Explain action on the regex for the phone field.
Highlight and Improve or Explain the code
If we switch to the code view of the Artifacts, as expected, the code for validation is generated. We can also highlight parts of the code to improve or explain them. Let's try the Explain action on the regex for the phone field.
Highlight and Improve or Explain the code
After we highlight the code and click 'Explain,' the conversation area will take over and provides a detailed explanation of the code. This feature is also very useful for learning a programming language that we are not familiar with.
Code explained in details
Finally, let's ask Claude to add the API calling part to the code. It is already quite complete, effectively managing both the loading state and API error handling, which will enhance its functionality and user experience
Lastly, let add the API call
As promised, let's proceed with the SVG creation. The output is similar to the code we've seen, providing us with both a preview of the SVG and the corresponding SVG code. The conversation continues by explaining what is in the SVG and suggesting the next action.
Claude Artifacts - SVG of a cat
Claude Artifacts - SVG of a cat with added hat
Recently, OpenAI's ChatGPT announced something similar called Canvas, a new interface for working with ChatGPT on writing and coding projects that go beyond simple chat. However, this feature is still in beta as of today and rolling out globally to ChatGPT Plus and Teams user
With major tech giants like Microsoft, Google, and Amazon competing in the AI space, we can expect rapid advancements that make AI more powerful, safer, and cost-effective, ultimately enabling us to build better solutions.