Claude Artifacts Tutorial - Build Apps, Documents, and Dashboards
237 segments
Most people that use Claude aren't using
one of the most powerful parts of
Claude, which is called Claude
artifacts. So, in this video I want to
show you what artifacts are, what you
can do with them, and I want to show you
multiple different examples how to build
one from scratch. Now, you could access
this on the Claude website and on the
Claude app. You'll see an option called
artifacts over here, and you'll see any
that you created in the past. But, what
artifacts let you do is they let you
build things and create things without
actually writing any type of code. You
don't have to be technical at all to
create these type of things. So, with
artifacts, you could create entire apps
that live on the web. You could create
entire websites. They also create
documents that are easily editable and
shareable. They create games, they
create tools of all kind. I'm going to
show you an example of this one. You
could use it for creative projects, you
could create quizzes and surveys, and
pretty much anything else that you could
build on the web you could use artifacts
to build them, and you could just start
from scratch with this option. Now, the
other way you could build it is you
could just go to a new chat, and you
could ask it to build something for you,
and usually will choose artifact on its
own and create an artifact. Once I show
you some examples of what artifacts
actually turn out to be, I think it'll
be a lot more clear what these are
capable of. So, I'll show you a few
different examples. I'll show you a
personal example here, and then we'll
look at some work examples. So, for the
very first one, let's build a vacation
planner. And my prompt is going to say,
"Create a family vacation planner
artifact for a 5-day trip to Orlando.
Include a daily itinerary, budget
estimate, packing checklist, restaurant
ideas, and notes." Now, Claude already
has access to the web and is going to be
able to create this on its own without
you having to know anything technical.
Now, if you don't say the word artifact,
it will usually still create an
artifact, but just to be sure, I like to
do this so you don't get a chat response
here, and I'll go ahead and send this
out. Now, in a couple of minutes, you
have an entirely different kind of
output from Claude. So, you didn't get
an answer in chat like you typically do.
It actually opened up a separate window
here, and it gave me everything that I
had asked for. So, right here, I have my
5 days planned out here. I have a cost
estimate here. I have a packing list. I
have where to eat. All that is laid out
with some additional notes, and I could
go ahead and expand this and view this
full screen. And this is fully
shareable, and I'll show you exactly how
to share these with our next example.
But, the best part of this is actually
the ability to edit these, and it will
just edit this version of it. So, the
first one you get might not be
everything you wanted. Maybe you forgot
to include something in your prompt. So,
I'm going to do a quick follow-up down
here, and I'm going to ask it to create
a version that's more family-friendly
with activities for young kids here. And
as you could see, it revised this same
one here inside of the same chat. If I
want to go back to the previous one,
it's still up here, but now I got a
brand new one, and this one looks a lot
more kid-friendly here. It even changed
some of the colors here, but it still
has all the core things that we needed
from our initial prompt. Okay, let's
jump in and create the next one. This
one I want to show you how to create a
business dashboard here. And again,
we're going to do it in chat. I almost
never go to the artifacts tab to create
them because you could just start with a
basic prompt and just ask it to create
that as an artifact to start. And I also
wanted to share this free resource with
you. This is the complete guide to
Claude AI. Now, I know we're only
covering Claude artifacts in this video,
but this guide is a comprehensive guide,
so you could get the most out of Claude.
So, it walks you through getting started
with Claude, but it covers some of the
best parts of Claude. It has an entire
section dedicated to projects. Projects
will really organize your Claude
account, and help you get a lot more out
of it. This section on artifacts
actually is a perfect fit for this video
because it's going to give you
real-world use cases here with exact
prompts that you could copy and paste to
create lots of different things with
artifacts. And it goes beyond just the
basics, too. So, he has an entire
section dedicated to advanced
implementation. So, it's a full AI guide
for Claude. It's completely free. I'll
put a link in the description so you
could access it. Okay, for this next
one, let's go ahead and create a
business dashboard. I'm going to show
you a couple of different things with
this one. First, we're just going to
create it with a prompt. So, I'm going
to ask it to create a business dashboard
that tracks revenue, expenses, leads,
customers, and profits. Now, you could
do this with a prompt, and it'll just
give you a template, or you could
actually upload something like a CSV
file that has all those numbers, and it
will turn it into the dashboard. So, I'm
going to show you both. Let me quickly
create this one first, and this created
this artifact for us. And as you notice
here, I didn't mention the word
artifact, and it's still new to create
it in this artifact format. If it
answers you in chat, all you have to say
is turn this response into an artifact,
and it'll give it to you in this kind of
view. Now, this is good, but it's made
up all these numbers. They're just
placeholders. I'll have to do some
revisions here for it to actually give
you the numbers that are the right
numbers for this business. So, the other
thing you could do is you could actually
upload, let's say, an Excel sheet or a
CSV. I actually have this Excel sheet as
a demo here. So, this has every month it
has revenue, expenses, leads, and
customers. So, I don't have to do this
as a follow-up. I already created this.
This is typically how a lot of
businesses keep track of things. But if
you want to share this with other
people, a lot of times those
spreadsheets could be messy. They're not
really well organized. But I could
upload that file here. Now, I could just
say turn this into a dashboard. Now,
this created this new dashboard for us.
Now, this has all the right numbers, and
I could use these filters here if I want
to see the things by month, or if I want
to just see the full year here, and it's
really useful. Now, the thing I didn't
show you yet is these are shareable.
That's the really useful parts about
them, because now I want to share this
with my team instead of that
spreadsheet. So, all I have to do is go
up here, and I just need to publish this
artifact. What it does is it publishes
it to a web, and if you have a Teams
plan inside of Claude, you could also
share it just with your team. This keeps
it private. This keeps it public here
only if someone has that link. So, if I
click this right here, it generates this
link. I just have to copy this link, and
if I don't want to keep this public, I
could always come back to this chat and
unpublish it here. But, let me paste
this URL here, and this is what that
artifact looks like with that web link.
And it looks great on mobile, too. So,
if you look at it on your phone, it's
nicely mobile optimized. And you could
also create interactive tools, as well.
So, create a debt payoff calculator
where I enter balances, interest rate,
and monthly payments. And this is a good
example, actually. This time it created
this inside of chat, and it's completely
usable here inside of chat, and
everything is fully editable. But, all I
have to do now is say, "Turn this into
an artifact," because this is not easily
shareable. It's useful for you, but if
you wanted to share this with other
people, you can share it as a chat, but
the artifacts are far easier because you
get that link that anyone could go to.
Now, I got this artifact. Everything is
fully interactive here, and you'll
update it, and again, I could just go
ahead and publish this and share it with
whoever I want. And remember, these are
just chats. So, anytime you could come
back to this chat, you could use this,
you could build on it here, and if you
want to, you could pin this chat, so it
just always shows up on top, so it
doesn't get lost in your recent chats,
and you could always make any changes to
it that you want. Now, with that free
resource I mentioned, you get a of
different examples for artifacts
including prompts to build them. So, I
definitely recommend you grab that. And
when you combine artifacts with cloth
skills, things get really interesting
because with skills, you could tell how
artifacts should look. So, a dashboard
always looks consistent. A website, a
presentation always looks consistent
with cloth skills. I made a video all
about cloth skills that I recommend you
watch next. Thanks for watching this
one.
Ask follow-up questions or revisit key timestamps.
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.
Videos recently processed by our community