Claude Artifacts: What it can do and limitations

So Claude 3.5 Sonnet was released last week and it's probably one of the most impressive models that I have come across, especially when it comes to coding. Now, the most talked about features is this new feature called Artifacts, which is a new way to use claude. This lets you essentially run the code that Cloud is generating within the cloud interface, which is pretty amazing. You can actually see the output that it generates. So in this video we're going to look at some of the examples that I have come across on Twitter or X. We will try to replicate some of those. We'll also look at some of the limitations of the system. It's not a perfect system. And I'll also show you a couple of tips and tricks that I have come across which can really help you create better outputs from claude. And we'll also look at another option which I haven't seen being discussed a lot. It's another platform that lets you do very similar thing when it comes to especially HTML codes. So let's look at a few examples. The first one is how to create a Blackjack with Cloud 3.5 Sonnet. It can implement game logic and game area and card design, as well as the betting system. So here's the initial prompt. In some cases, in my experience, you have to iterate on the prompt or basically provide more details instructions. So based on that prompt and I guess a couple of iterations, the system is able to create the game. And the great thing is you can actually play with the game right here in the interface, which is pretty amazing. Here's another example that I really found fascinating. So this person is using Claude 3.5 Sonnet's coding abilities to actually create a simulation of the gravity of solar system with planets in a single file. So not only it's able to generate code, but it's actually able to run that code. And I think it's using a physics engine to actually ensure that the behavior that you see here actually follows the orbital physics. Now, this took about, I think, 16 iterations, but he has provided his original prompt. And here's the prompt. So make a 3js app of a space simulation with gravity of a solar system with planets and a single web file. Add a light source to the sun and realistic random materials of each planet. Add orbit traces of all the bodies and use Canon js. So this is the initial output from the system. Following his tutorial, I also asks it to add the ability to add a random planet. So if you click on this, this will basically start adding a random planet. So you can see that just using a single prompt in a single chart, you can get a pretty interesting outputs from the artifacts. Okay, so in this demo, Petro asked Cloudsonic to come up with a new and original game design. Right. And here is the game that it came up with. So it's called Color Cascade, and basically you need to capture these different objects using the same color, which is a pretty interesting idea. Now, it probably is not a completely original idea from Sonnet, but I think it's still pretty interesting. So let's talk about the originality. So, for example, Hamish shared this. I keep asking Claude to do unreasonably difficult things, and it just keep doing them on the first try. So it's creating this simulation, which looks pretty amazing, but then somebody added a community note which says that the AI output is a pleasurism of art made by this person. And if you actually look at some of the simulations that are shared by that specific person mentioned, it looks very similar to what Claude was generating. Now, if you understand how the transformer architecture works or how these neural network works, I think it's not a surprise because they cannot really come up with their original thoughts. It looks at patterns that are present in the training data and make inferences based on those patterns that it finds in the training data. So it's going to be definitely using its training data. So most probably it has seen something like this in the training data, and that's why it's able to replicate, thinking that it's a completely novel design. Having said that, I think one of the fields that is going to be highly impacted by this AI revolution is going to be education. So here Ali shared an example. She asked Claude 3.5 Sonnet to create an interactive educational tool to teach her daughter how we're using AI to communicate with animals. And I think she provided some screenshots and it's able to use those basically as building blocks to create this amazing interactive app for her that you can actually interact with, which is pretty awesome. So when it comes to education, I actually really like this example from Ethan. So he asked Cloud 3.5 Create an interactive model of how LLM works. Right now, there is one trick that he has shared the that you can simply ask it to make it better, and in the next iteration it will do a better job. So I want you to test this and we're going to use his prompt. So create an interactive model of how LLM works and let's see what it comes up with. All right, so here's the output LLM Interactive model. This is a simplified model of to demonstrate the basic concept of how LLM works. So let's say hi, how are you? Right? And it's click Start and then it's a simply say hi, how are you? So it's basically just repeating that nothing really crazy going on here. Next, again I'm going to just ask it make it better. Now, this is not a really good prompting strategy because there are limited number of tokens that you have whenever you are using Cloud 3.5. I think they give you about 45 prompts every five hours. So you really need to be careful and make sure that you get most out of each prompt. And I'm going to show you a couple of tricks of how to do that. But just by asking it to make it better, it came up with this and let's see if it actually changed anything. So I'm going to use the same prompt right now. You can set the temperature. So let's click on start. Right, And I think it's simply coming with a probability of what the next word could look like right now these are randomly generated because it's not really a transformer in there, but it basically shows you how it internally works. This is pretty cool. And you can see that it's simply adding the higher probability word that it's randomly generating and appending it at the end of the generated text. So pretty nice. So I said make it better one more time and now not only added the next word probability, but it actually also added a section for token embeddings and multi layer processing. So you can set the temperature. Now you can also set the number of layers as well. So this is another very interesting demo. So Ammar used Claude 3.5 sonnet with artifacts to play sounds. So what he did was he took his 11 Labs API key, gave it to Claude 3.5 Sonnet and it's able to play sound. So let me show you an example. Now it's really impressive because everything is happening within the CLAUDE interface. So it's not only able to make the API calls, but can also play the sound that it generates. So basically you can create your apps within Cloud 3.5 sonnet with artifacts, run them there, debug them there, and then whenever you are happy with it, you can just copy the code, run it on your local machine, or put them on a web server. So pretty impressive stuff. Let's look at a couple of tricks. So not only you can just ask the model to make it better and that will give you Better results potentially. But you can also play with the prompts as well. So here Jeremy shared this prompt which is basically if you ask Sonnet 3.5 to give you an answer regarding a specific concept, right? Just add something like this before you answer, make a list of wrong assumption people sometimes make about the concepts included in the question and it could potentially give you better answers because it's very similar to let's say chain of thought prompting that it has to do internally. In this case the actual prompt was what is the smallest integer whose queries between 15 and 30? Now in most of the cases these LLMs will consider just the positive integers and it will think the answer is 4, but the actual answer should be minus 4 if you also assume negative integers. So a neat trick that you can try with some of your prompts and see if you can get better out. Now Claude 3.5 sonnet is very impressive. However, keep in mind mind it still is an LLM so it will make mistakes. For example, I asked it how many times the letter R is present in the word strawberry and it says to determine how many times the letter R appears in the word strawberry, let's count. Right? So it basically spelled it out and then it says you can see the letter R appears twice in the word strawberry. So the answer is two times. And when I said can you tell me the exact locations? So it basically says that it occurs at position three. So basically we are counting it here. It correctly identified that it also identified at position 8, but it ignored it at position 9. Alright, then I said which letter is present at position nine? So it was able to identify that it is R. And when I kind of asked it again that you have now this new information. So then it says that the letter R appears three times in the word strawberry, right? So it can still make mistakes, but it's intelligent enough that it can correct itself, which is pretty awesome. So from these demos you probably have seen that Claude 3.5 sound is a pretty impressive model, especially when it comes to the artifact. But there is a major limitation. When it comes to the max output tokens, it can only generate up to 4,000 tokens. So the code that you see here, it can go up to only 4,000 tokens, which kind of limits its functionality when it comes to building powerful real world applications. So keep that thing in mind. Now one way around it is that you can ask it to first build a complete architecture or different functionalities that is going to implement, then ask it to implement those, let's say as a separate functions. So each of those feature can be up to 4,000 tokens and then later on you can combine them together by just providing the input outputs or the prior definitions. Right. So something to keep in mind when you are building with the Artifacts feature, but it's still a very impressive feature that it's able to run the code in here. So Artifact is a pretty amazing feature. And Anthropics is not the only LLM provider that has this feature. Deepseek also has a very similar feature, although it's just limited to HTML code. But you can use their platform to generate HTML code and then you can run it in a very similar fashion to Artifacts. So I'll put a link to their platform, you can sign up and start experimenting with the Artifact like feature. So for example, here I asked it to create a Snake game in HTML. You can run that code in here. So it not only generates the code, but it lets you run the HTML code. And if you run this, you can also play around with the code. Well, I'm pretty bad at this, but the problem is it's only limited to, yeah, pretty bad. It's. It's limited right now to only HTML, but the cloud Artifacts gives you the ability to run a whole bunch of other things. So really excited about what the rest of the year is going to look like and I hope OpenAI as well as Google are going to be able to release something very similar. Thanks for watching and as always, see you in the next one.