From the course: Build with AI: Beyond Pair Programming with AI

Artifacts (Claude)

From the course: Build with AI: Beyond Pair Programming with AI

Start my 1-month free trial

Artifacts (Claude)

“

- [Instructor] When I say AI chat app, chances are, the first thing you think of is OpenAI's ChatGPT, but it's not the only option. Claude is another very good option. In fact, many developers swear by Claude as a better option for generating code. In addition to that, Claude has a really interesting feature that ChatGPT does not have, as of this recording. Let me show you what I'm talking about. In Claude, I'm asking it to spin up a simple React webpage using TypeScript that has a location input field. When I submit a location, the system should go look up a weather service, get the current weather, display a card with the location name, current temperature, and wind speed, along with an icon indicating the current weather. Let's see what Claude does with these instructions. Did you notice that? First, it generated all the code necessary for this webpage and its components to work, then it spun up the code in a separate tab. This is React running inside Claude, based on the code Claude wrote. And this code is interactive and works. So if I go in here and say Vancouver, Canada, and hit Search. It'll spin up a card for me. Now, the information in the card is wrong. It's not 22 degrees outside right now, it's probably like eight or something like that. And it's not sunny, it's raining heavily. But that's because the system is not looking up an actual API. And it says so in the instructions here. Note that this is currently using mock data to make it functional. You'll need to sign up for a weather service, then replace the mock data, and then handle the API response, and you can then continue working with the system to write out that code. And, by the way, I have never seen this instruction before. I just did this, but I know how this system works, because I've used it before. So I anticipated the system telling me this information, because when you ask for an API, this is normally what it says. And this shows you two things, both that the system is relatively predictable in how it solves problems, but more importantly that it's able to actually run your code and test your code. And once you have something that works sufficiently for your needs, you can then either download the file or you can copy the code as is and port it over into your project. This feature here, Claude Artifacts, is revolutionary, because it allows you to do things like build out entire components in a safe testing environment before you bring them into your real code. So now that you've seen it, go check it out, go have conversations with your code, and see what happens in Artifacts on Claude.

Contents