HomeVideos

Claude Artifacts Tutorial - Build Apps, Documents, and Dashboards

Now Playing

Claude Artifacts Tutorial - Build Apps, Documents, and Dashboards

Transcript

237 segments

0:00

Most people that use Claude aren't using

0:02

one of the most powerful parts of

0:03

Claude, which is called Claude

0:05

artifacts. So, in this video I want to

0:07

show you what artifacts are, what you

0:09

can do with them, and I want to show you

0:11

multiple different examples how to build

0:13

one from scratch. Now, you could access

0:16

this on the Claude website and on the

0:18

Claude app. You'll see an option called

0:20

artifacts over here, and you'll see any

0:21

that you created in the past. But, what

0:24

artifacts let you do is they let you

0:26

build things and create things without

0:29

actually writing any type of code. You

0:31

don't have to be technical at all to

0:33

create these type of things. So, with

0:35

artifacts, you could create entire apps

0:38

that live on the web. You could create

0:39

entire websites. They also create

0:42

documents that are easily editable and

0:44

shareable. They create games, they

0:46

create tools of all kind. I'm going to

0:48

show you an example of this one. You

0:49

could use it for creative projects, you

0:51

could create quizzes and surveys, and

0:53

pretty much anything else that you could

0:55

build on the web you could use artifacts

0:57

to build them, and you could just start

0:58

from scratch with this option. Now, the

1:00

other way you could build it is you

1:02

could just go to a new chat, and you

1:04

could ask it to build something for you,

1:06

and usually will choose artifact on its

1:09

own and create an artifact. Once I show

1:12

you some examples of what artifacts

1:14

actually turn out to be, I think it'll

1:16

be a lot more clear what these are

1:18

capable of. So, I'll show you a few

1:20

different examples. I'll show you a

1:21

personal example here, and then we'll

1:23

look at some work examples. So, for the

1:26

very first one, let's build a vacation

1:28

planner. And my prompt is going to say,

1:30

"Create a family vacation planner

1:32

artifact for a 5-day trip to Orlando.

1:35

Include a daily itinerary, budget

1:37

estimate, packing checklist, restaurant

1:39

ideas, and notes." Now, Claude already

1:42

has access to the web and is going to be

1:44

able to create this on its own without

1:47

you having to know anything technical.

1:49

Now, if you don't say the word artifact,

1:51

it will usually still create an

1:53

artifact, but just to be sure, I like to

1:55

do this so you don't get a chat response

1:57

here, and I'll go ahead and send this

1:59

out. Now, in a couple of minutes, you

2:01

have an entirely different kind of

2:03

output from Claude. So, you didn't get

2:04

an answer in chat like you typically do.

2:07

It actually opened up a separate window

2:09

here, and it gave me everything that I

2:11

had asked for. So, right here, I have my

2:14

5 days planned out here. I have a cost

2:17

estimate here. I have a packing list. I

2:20

have where to eat. All that is laid out

2:22

with some additional notes, and I could

2:24

go ahead and expand this and view this

2:26

full screen. And this is fully

2:28

shareable, and I'll show you exactly how

2:29

to share these with our next example.

2:33

But, the best part of this is actually

2:36

the ability to edit these, and it will

2:38

just edit this version of it. So, the

2:40

first one you get might not be

2:42

everything you wanted. Maybe you forgot

2:44

to include something in your prompt. So,

2:46

I'm going to do a quick follow-up down

2:47

here, and I'm going to ask it to create

2:49

a version that's more family-friendly

2:51

with activities for young kids here. And

2:54

as you could see, it revised this same

2:56

one here inside of the same chat. If I

2:58

want to go back to the previous one,

2:59

it's still up here, but now I got a

3:01

brand new one, and this one looks a lot

3:04

more kid-friendly here. It even changed

3:05

some of the colors here, but it still

3:07

has all the core things that we needed

3:10

from our initial prompt. Okay, let's

3:12

jump in and create the next one. This

3:13

one I want to show you how to create a

3:15

business dashboard here. And again,

3:17

we're going to do it in chat. I almost

3:19

never go to the artifacts tab to create

3:21

them because you could just start with a

3:23

basic prompt and just ask it to create

3:25

that as an artifact to start. And I also

3:28

wanted to share this free resource with

3:30

you. This is the complete guide to

3:32

Claude AI. Now, I know we're only

3:34

covering Claude artifacts in this video,

3:36

but this guide is a comprehensive guide,

3:38

so you could get the most out of Claude.

3:40

So, it walks you through getting started

3:42

with Claude, but it covers some of the

3:43

best parts of Claude. It has an entire

3:46

section dedicated to projects. Projects

3:48

will really organize your Claude

3:50

account, and help you get a lot more out

3:52

of it. This section on artifacts

3:54

actually is a perfect fit for this video

3:56

because it's going to give you

3:57

real-world use cases here with exact

4:00

prompts that you could copy and paste to

4:02

create lots of different things with

4:03

artifacts. And it goes beyond just the

4:05

basics, too. So, he has an entire

4:07

section dedicated to advanced

4:09

implementation. So, it's a full AI guide

4:11

for Claude. It's completely free. I'll

4:14

put a link in the description so you

4:15

could access it. Okay, for this next

4:17

one, let's go ahead and create a

4:18

business dashboard. I'm going to show

4:20

you a couple of different things with

4:21

this one. First, we're just going to

4:22

create it with a prompt. So, I'm going

4:24

to ask it to create a business dashboard

4:26

that tracks revenue, expenses, leads,

4:28

customers, and profits. Now, you could

4:31

do this with a prompt, and it'll just

4:32

give you a template, or you could

4:34

actually upload something like a CSV

4:36

file that has all those numbers, and it

4:38

will turn it into the dashboard. So, I'm

4:40

going to show you both. Let me quickly

4:41

create this one first, and this created

4:43

this artifact for us. And as you notice

4:45

here, I didn't mention the word

4:46

artifact, and it's still new to create

4:48

it in this artifact format. If it

4:51

answers you in chat, all you have to say

4:53

is turn this response into an artifact,

4:56

and it'll give it to you in this kind of

4:57

view. Now, this is good, but it's made

5:00

up all these numbers. They're just

5:01

placeholders. I'll have to do some

5:03

revisions here for it to actually give

5:06

you the numbers that are the right

5:07

numbers for this business. So, the other

5:09

thing you could do is you could actually

5:11

upload, let's say, an Excel sheet or a

5:14

CSV. I actually have this Excel sheet as

5:16

a demo here. So, this has every month it

5:18

has revenue, expenses, leads, and

5:20

customers. So, I don't have to do this

5:22

as a follow-up. I already created this.

5:24

This is typically how a lot of

5:25

businesses keep track of things. But if

5:28

you want to share this with other

5:29

people, a lot of times those

5:30

spreadsheets could be messy. They're not

5:31

really well organized. But I could

5:34

upload that file here. Now, I could just

5:36

say turn this into a dashboard. Now,

5:39

this created this new dashboard for us.

5:40

Now, this has all the right numbers, and

5:42

I could use these filters here if I want

5:44

to see the things by month, or if I want

5:47

to just see the full year here, and it's

5:50

really useful. Now, the thing I didn't

5:52

show you yet is these are shareable.

5:54

That's the really useful parts about

5:56

them, because now I want to share this

5:57

with my team instead of that

5:59

spreadsheet. So, all I have to do is go

6:01

up here, and I just need to publish this

6:04

artifact. What it does is it publishes

6:06

it to a web, and if you have a Teams

6:09

plan inside of Claude, you could also

6:11

share it just with your team. This keeps

6:13

it private. This keeps it public here

6:15

only if someone has that link. So, if I

6:17

click this right here, it generates this

6:19

link. I just have to copy this link, and

6:21

if I don't want to keep this public, I

6:23

could always come back to this chat and

6:25

unpublish it here. But, let me paste

6:27

this URL here, and this is what that

6:29

artifact looks like with that web link.

6:32

And it looks great on mobile, too. So,

6:34

if you look at it on your phone, it's

6:36

nicely mobile optimized. And you could

6:38

also create interactive tools, as well.

6:40

So, create a debt payoff calculator

6:43

where I enter balances, interest rate,

6:46

and monthly payments. And this is a good

6:48

example, actually. This time it created

6:50

this inside of chat, and it's completely

6:52

usable here inside of chat, and

6:54

everything is fully editable. But, all I

6:56

have to do now is say, "Turn this into

6:59

an artifact," because this is not easily

7:01

shareable. It's useful for you, but if

7:03

you wanted to share this with other

7:05

people, you can share it as a chat, but

7:07

the artifacts are far easier because you

7:09

get that link that anyone could go to.

7:12

Now, I got this artifact. Everything is

7:14

fully interactive here, and you'll

7:16

update it, and again, I could just go

7:17

ahead and publish this and share it with

7:19

whoever I want. And remember, these are

7:22

just chats. So, anytime you could come

7:24

back to this chat, you could use this,

7:27

you could build on it here, and if you

7:30

want to, you could pin this chat, so it

7:31

just always shows up on top, so it

7:33

doesn't get lost in your recent chats,

7:35

and you could always make any changes to

7:38

it that you want. Now, with that free

7:39

resource I mentioned, you get a of

7:41

different examples for artifacts

7:43

including prompts to build them. So, I

7:45

definitely recommend you grab that. And

7:47

when you combine artifacts with cloth

7:50

skills, things get really interesting

7:52

because with skills, you could tell how

7:55

artifacts should look. So, a dashboard

7:57

always looks consistent. A website, a

7:59

presentation always looks consistent

8:02

with cloth skills. I made a video all

8:04

about cloth skills that I recommend you

8:05

watch next. Thanks for watching this

8:07

one.

Interactive Summary

The video introduces Claude Artifacts as a powerful, code-free feature of Claude AI, enabling users to create web apps, websites, documents, games, and tools. Artifacts can be generated from prompts or by uploading files, are fully editable, and are easily shareable via web links. The speaker demonstrates creating a vacation planner and a business dashboard, highlighting the ability to revise artifacts and use data from files like CSVs. A free comprehensive guide to Claude AI, including artifact use cases, is also mentioned, along with the benefit of combining artifacts with Claude skills for consistent visual styling.

Suggested questions

8 ready-made prompts