How To Use New Claude 3.5 (Claude 3.5 Artifacts) Complete Guide With Tips and Tricks

So anthropic have released Claude 3.5 along with something really cool called Artifacts. In this online tutorial, I'll show you exactly how to get started with this amazing feature, because it is something that is absolutely incredible. So, without wasting any more time, let's get into the new Claude 3.5 tutorial and how exactly it works. One of the first things you're going to need to make sure you do is to activate the Artifacts tab. So when you ask Claw to generate content like code snippets, text documents or website designs, Claude will create an artifact that appears in a dedicated window alongside your conversations. If you already have this setting enabled, then you're completely fine. But most of you won't have this setting enabled, so be sure to go ahead and make sure that this setting is enabled. So some of the features of this tutorial will actually go ahead. So now once that's there and you're on the main menu, you can then go ahead and start a new chat. And what we're going to do is we're going to use the features of Claude 3.5 and. And the new Artifacts feature to generate something amazing. The first bit, what I'm going to show you guys is Claude's ability to take advantage of its vision. Right here, I'm just going to paste in a very, very basic image. This is a very basic image of a simple neural network. And I'm going to ask Claude to recreate this as an animation so that I can understand how it works. So you can see right here, can you recreate this as an animation so that I can understand how it works? And then I'm going to click Enter. All I need to do now is simply wait, because. Because Claude now will go ahead and do the coding. And then whilst it's doing the coding, essentially what will happen is at the end, it should pop up with something like this. You can see right here that this is somewhat of an animation that does look okay. You can see we have the input layer, the hidden layer, and then of course, the output layer. What you can do and what's really cool about React or whatever output that sometimes Claude might put it in, you can actually immediately edit this. So, for example, I can say, can you add some lines to make this more visually appealing? I could say, can you add some lines between the layers to show how it works? And then I'll click enter. What Claude 3.5 will do now is it will actually modify the React component to include the lines between the layers, which will help illustrate the Connections between the nodes in the different layers. You can see Claude is currently getting to work. And then instantly we can see that we do have a change right here. Now this of course doesn't look as great. Sometimes you can see that sometimes things do mess up. But the beauty of this is that you're able to switch between your versions. You can see we have version right here, and then of course we have the second version right here. We can always ask Claude whether or not we want to iterate on this design to ensure that things do look a little bit better. Something that Claude also excels at is the ability to recreate simple user interfaces from a simple image. So here I've pasted the ChatGPT user interface in, just a very basic example. And, and then I'm going to say, can you recreate this using React? And then I'm going to see if Claude is able to do this. So I'm going to just wait for Claude to be able to do this. And you can see it says Chat GPT like interface. It's going ahead and it's going to recreate this. Now the beauty of this is that it doesn't take that long. And you can see right here instantly we managed to get a Chat GPT like interface immediately. You can click in the box, you can type in it. Of course it's not going to work because this is not an actual live demo, but. But this does show the very, very advanced capabilities of Claude. Sonnet 3.5. Truly amazing stuff. Another amazing feature of CLAUDE is that you can literally ask Claude to create you games that are unique by nature. So you could literally say, can you create a little game that I could play? And that's interactive? So now we can see. Certainly. I'll create a simple interactive game used using React. Let's make a memory card game where you need to match pair of cards. This game will be interactive and demonstrate several REACT concepts. So you can see right here it's going ahead and it's immediately created this game within a couple of seconds. This is the memory card game. You can see I can go ahead here and I can see that this is a fox. I click again and that this is a bear. These now disappear and then I'm going to head and try to find the bear and the bear. And of course you can see that is the pair found. So this is a pretty simple game that is really, really cool that just kind of tests your memory. Things like these are really, really cool because what this allows you to do is this allows you to customize things and work well with ideas. If you want to expand your custom education, you can see also that I can shuffle and restart this game and it actually does work very effectively. So once again, CLAUDE is showing us that being able to immediately code things like this is, is something that is really, really effective. Another thing that CLAUDE can do is that it can actually visualize data. So I'm going to type in, hey Claude, can you visualize this data for me? And then what I'm going to do now is I'm going to just simply wait and see what Claude is able to do in this React dashboard. So I'm going to go ahead and just give it a couple of seconds and whilst Claude is coding away, I can then even think about how in the future I could add this to certain presentations, what I would even want in other scenarios. So you can see right here, this is the dashboard that is made based on the data. And you can see that for this one I would have to do a few different things in order to actually make this usable. But this is of course the first preliminary areas where Claude shows some remarkable efficiency. So if I want to visualize this data, I'm firstly going to ask Claude, can you transcribe this data into JSON? So I'm just going to put that in and then Claude is going to do that into JSON. Then once that is done in a couple of seconds, which shouldn't take that long, Claude is just going to be coding away in this area right here on the right hand side. This does take a little bit longer because it's an Excel file of the amount of coffee cups consumed. I'll then ask Claude to combine the data from the chart into a single interactive plotly JS chart that allows me to actually hover over each data point and learn more about each data point, which is really cool because this actually converts your data into something more interactive. Another amazing feature of CLAUDE is that you can actually get long pieces of information like this, then ask it to summarize the information and make a simple presentation that you can flick through using React. So I simply give Claude this command and then I'm going to wait for this right here. We can see that Claude has actually managed to do this so I can flick through the AI's impact on deployment, rapid AI advancement, psychological impact, unemployment studies, free time usage, historical insights, post scarcity, challenges, preparing for post AGI, and of course AI as a solution. So this is a very basic demo on what you can do with claude. Of course this isn't the most remarkable thing, but it is an example on how you can distill information very, very quickly. Claude 3.5, something that is really also amazing about this is that it can craft really long pieces of text and, and you're able to see what it's crafting while it's doing that. So let's take advantage of this by putting in the same piece of text and then we can ask it to craft a story about someone who's experiencing the year 2030 after automation has been implemented. So now all I need to do is I just need to wait. You can see that it's generating the text on the right hand side. You can see that it's able to generate a lot of these information. You can see that it's able to generate a decent amount of information quite noticeably more than it used to be. I think this is noticeably because of this new feature, the artifacts, where it's able to just get a lot of this text, paste it all out, and then we can see right here that it's able to have a smaller summary. So this is a feature of CLAUDE where you can see that it's actually able to output a lot of text, which I don't remember it doing in the past. So if this is a new feature, this is definitely something that you want to take advantage of because it allows you to look at summaries and of course allows you to get huge pieces of text to that are really coherent and are really good at writing in terms of their comprehension. Now, if CLAUDE does actually hit your limit, because the majority of you might have not signed up for CLAUDE just yet, what you do want to do is of course you do want to switch to the other models. You can see right here if you click this button on the left hand side, depending on if you're in a chat or not, you can click this and you can see we've got Claude 3.5 Sonnet, Claude 3 Opus and Claude 3 Haiku. And on all of these, if you want, you can click this button right here. And, and you can see that this is of course the artifacts feature. So this is a feature that is of course really good and it's something that we do like to use. But you do have to remember that if you do go ahead and switch to Claude 3 opus, you still do get the artifacts feature, but it isn't going to be the most intelligent model. The most intelligent model is Claude 3.5 sonnet followed by opus. And of course, if you just want something that's extremely fast. You could just use Claude 3 Haiku, because that's what exactly the model is for. So Claude is also actually able to create simple animations using SVGs. So what you can do is you can say, claude, can you visualize a neural network with svg, a basic one? And then what we can do here is we can see that Claude 3.5 Sonnet is going to use that creating an SVG. So it's going to use the data that I've said, which is in your network, and then it's going to do a basic neural network visualization that we can see right here. This is something that is really cool if you want to visualize some very basic things in svg. Of course, this has multiple different applications, but prior systems weren't this good at visualizing using svg, which is why this is a highlighted feature in this tutorial. What you could also do here, as you've seen, is that I've managed to animate this neural network using the REACT component. I simply just asked Claude, can you animate this using React? And you can see that it's showing the input layer, then it's showing the hidden layer, and then it's showing the output layer. So if you create something with svg, a very simple diagram, you can then animate this using the REACT component, and you're going to get a very nice, easy information that you can use for whatever project you need it for.