Build AI Apps and Dashboards With Cloud Artifacts (Full Transcript)

[00:00:00] Speaker 1: Today, I'll show you how to use Cloud Artifacts. With Artifacts, you can build apps, websites, dashboards, games, and interactive tools, all simply by describing what you want. But they can also go much further than that. You can build AI directly into your apps, save data between sessions, connect to services like Google Calendar and Slack, and even publish what you create so other people can use it too. We'll start with the basics, then we'll work our way up to some of these more advanced capabilities. I'm Kevin, and let's dive in. To get started, head over to Cloud. You'll find a link right here at the bottom of the screen. Artifacts are available with a free account or with any of Cloud's paid plans. Once you're signed in, over on the left-hand side, click into Artifacts. And here, you can see all the artifacts you have access to. You can see just the ones that you've created. And over here, you can see the ones that others have shared with you. And right up here, you can also search through all of your artifacts. To create something new, right up here, let's click on New Artifact in the top right-hand corner. Cloud starts a new task and asks what you want to build. You'll notice here that it refers to the artifact as a webpage. But don't worry, we're not about to build the next Amazon. The webpage is simply the foundation for whatever we want to create. As a note, you can also create an artifact directly from a regular Cloud conversation. But for this tutorial, let's start right here. At the bottom of the screen, Cloud asks me a few questions about what I want to create. Now, I could skip these and describe everything myself, but let's actually go through these. I'd like to build a dashboard for my small business, the Kevin Cookie Company. So right up here, I'll select Dashboard. Here, it asks me about the visual style. I'd like to go with bold and colorful. I think cookie sales deserve a little bit of flair. Now, the questions you see might look slightly different from mine, and that's okay. Just run through them and provide whatever information is relevant. Here, I'll select Sales and Revenue Trends. Next, it wants to know where to get the data from for the dashboard. Now, you could use placeholder data or you could pull it from different sources. Now, I'd like to upload my own data. If you'd like to follow along, I've included a link to the same data in the description. Right here, I'll type in something else, upload my own data, and then I'll send that. Cloud now asks for the actual data. To provide it, I'll click on the plus icon. Let's go to Add Files or Photos, and there's my CSV file. I'll select this and then click on Open. Right over here, I'll now send that to Cloud. Cloud is now reviewing the data, figuring out how to best visualize it, and it's going to build a first version of our dashboard. Just give it a few moments. Once it's ready, let's publish the artifact, and then we can see what it made. Over on the right-hand side, we can see the artifact or the dashboard. To expand the view, I'll click on this icon, and that way, we could see the artifact better. Right away, we have some of the key metrics right here across the top. Down below, we also have some charts that help us understand how the business is performing. This isn't just a picture of a dashboard. It's fully interactive. Here, if I hover over the chart, you'll notice that it shows me all of the specific numbers for those months. Looking at the chart, it appears that Salted Caramel is doing fairly well. Clearly, our customers have excellent taste. What's especially nice is that Cloud built all of this from the CSV file we provided. I didn't have to write any code or manually build any of these charts. Now, I like this dashboard, but I want to make a few changes. I don't need to open up the code or rebuild the artifact. I could simply tell Cloud what I'd like to change. I'd like to continue refining this dashboard. To be honest, it's a little bit too bright for me. So right up on top, let's collapse this view, and over on the left-hand side, I can continue prompting changes. So over here, I'll ask it to add a dark mode toggle. Then over here, let's send it. Cloud now has finished updating the artifact, and right over here, we have a sun-moon toggle that I could click on to switch between light and dark mode. Let's click on that. And that is so much easier on the eyes. But sometimes you don't want to change the entire artifact. You just want to update one specific part. For that, we can use the annotation tool. You'll find that right here in the top right-hand corner. I'll select this, and then you can click on just a specific part of the page that you want to change. Now, right up here, it refers to Kevin's Cookie Company, but I actually refer to it as the Kevin Cookie Company. So over here, I'll highlight all of this text, and that opens up a comment dialog. And I can now tell Cloud exactly what I want to change in this specific area. So over here, I'll say, please refer to the Kevin Cookie Company, not Kevin's Cookie Company. Now, from here, I have two different options. I could send this to Cloud and have it make the change, or over here, I could simply leave it as a comment. That could be useful if, say, for example, a coworker's reviewing the artifact, but doesn't want Cloud to make the change just yet. In this case, I want Cloud to fix it, so over here, I'll click on send to Cloud. There we go, all fixed, perfect. Over here, I'll click on the three dots, and then I'll delete the thread. Now that we're happy with our artifact, let's look at a few of the options for sharing and managing it. In the top right-hand corner, let's click on share, and I can decide who I want to share this with. I'll set it to anyone with the link, and down below, let's click on share publicly. Over here, I can choose the version of the dashboard that I would like to share. I'll select version number three. That's currently the latest version. Then, in the top right-hand corner, I'll click on copy link. Now, anyone with this link can open the artifact in a browser and interact with the dashboard. In the top left-hand corner, let's go back to the main artifacts view, hover over the sidebar, and down below, let's click on artifacts. Here, we can see the new artifact we just created. If I want to make it easier to find later, simply hover over the artifact, and in the top right-hand corner, you'll see three dots. I'll click on that and then select pin. Now, you'll notice that there's now a new pinned section. When I click on that, there I see the dashboard. That way, you could quickly get back to your most important dashboards. Now, if you want to make additional changes to your artifact, you have to go back to the original chat or task. So over here, I'll hover over, go down to chat and tasks, and right here, I see the KCC sales dashboard. And when I click on that, I can now continue refining and working on my artifact from here. So far, we've built an artifact that lets us explore our sales data, but we can also build Cloud's AI directly into an artifact. At the Kevin Cookie Company, we're constantly experimenting with new cookie recipes, and I want to give employees a simple tool to help name them. So just like we did earlier, let's create a new artifact. Instead of going with all the different preset options, let's select something else. Down at the bottom, click into something else, and here, I'll ask it to create an AI-powered cookie naming tool for employees at the Kevin Cookie Company. Let the user enter the ingredients in a new cookie, and then we'll use Cloud to generate five creative names for it. I'll send that. And Cloud has finished building our tool. Now, right up on top, I'll remove the pre-populated ingredients, and I'll enter my own. So we have a new cookie with dark chocolate. We also have pretzels, caramel, and we also have sea salt. Here, I entered in all the different ingredients, and down below, I'll now generate five names based on those ingredients. You'll see that this artifact uses Cloud to generate the results. The first time we use it, we need to give it permission to access Cloud. So right over here, let's click on continue. And there we go. We have five completely new names based on the ingredients we entered. Salted pretzel caramel crunch. Ooh, the dark and salty affair. I have some good names in here. Now, what's important here is that these names weren't built into the artifact ahead of time. The artifact is actually using Cloud to generate a new response based on whatever we enter. So if another employee enters a completely different set of ingredients, Cloud will generate completely different ideas. And we didn't have to set up an API or write any code to make that happen. Our artifact can generate new cookie names using Cloud. But what if we wanted to actually remember the ideas that we like? Artifacts can also store data. So let's add that to our tool. Back here in Cloud, I'll enter in an additional prompt. Add the ability to save my favorite cookie names. And then I want someplace to be able to see all the saved names. Then over here, let's send that. Cloud has some follow-up questions. I want it to be available to everyone who opens this. So over here, I'll select option two. Cloud has now updated the artifact. And if you look next to all these different suggestions, we now have a new star icon. Now, I really like this one, midnight pretzel crunch. So over here, I'll click on the star. And if I scroll to the bottom of the page, you'll now see it appear under the saved ideas section. Now, here's the important part. This isn't just temporary information on the page. The artifact can persist this data. So when I come back later, my saved cookie ideas are still here. This makes it possible to build much more useful applications like trackers, project tools, customer lists, or anything where you need information to stick around between sessions. Artifacts can also connect to other apps and services using connectors. These connections are powered by something called MCP or Model Context Protocol. This basically allows our artifact to work with information and tools outside of Cloud. I want employees to be able to share one of their new cookie ideas with the rest of the team in Slack. So right over here, let's ask Cloud to add a button that lets me share a saved cookie idea with the team. Then over here, let's send that. Cloud asks me to connect to Slack. I'll go through and set that up. Now that we're connected, I'll let Cloud know. It asks me what channel I would like to publish to. I'll select this one. Over on the right-hand side, it's now included a share to Slack button in the artifact. Let's click on that. Now over here in Slack, I can see that Cloud shared this idea in the new cookie ideation channel. But what if the app that you want to use doesn't have a native connector in Cloud? That's where today's sponsor, Zapier comes in. With Zapier MCP, we can give Cloud access to thousands of additional apps and actions without having to build those integrations ourselves. So let's connect Zapier and give our artifact another capability. First, head to the following website and set up a free Zapier account. On the left-hand side, click on MCP servers. You could think of MCP as a standard way for AI tools like Cloud to connect to other apps and take actions. Right up on top, let's click on add MCP server. Here, let's click on Cloud and then copy this prompt and open Cloud and paste it in and run it. From Zapier, I can choose which apps I want Cloud to work with and which actions I want to be able to take. You'll notice that there are thousands of different apps that you could choose from. Now, in this case, I want to connect to Trello. So right up on top, I'll search for Trello and then click on this. Now here, I could select all the different tools that I want Cloud to have access to. For simplicity, right up on top, I'll select all tools and down below, I'll click on connect. Here, I'll select my Trello account. Now, we use Trello to manage new products and I want every promising cookie idea to become a card that our team can follow up on. Right here, I'll add the tools. Now that we've connected Trello, let's go back to Cloud. Back here in Cloud, I'll type in a prompt. Using Zapier, add an option to send a saved cookie idea. So one of these options here to our Trello board as a new card. Over here, let's send that. Here, I'll have it post to this board. I'll select that and over here, let's select tasks. Cloud has now updated the artifact and there's now a new option to send this to Trello. Let's try it. And here, if I jump over to our Trello board, there it is. Cloud took the information from the artifact and created a new card through Zapier. So even if Cloud doesn't have a native connection to an app that you use, Zapier can expand what you can connect to and what your artifact can do. There's one more type of artifact worth knowing about, live artifacts. This is available in the Cloud desktop app, which I have open here. Instead of building something from a snapshot of information, live artifacts can pull in current data from connected apps and local files. I built a dashboard similar to what we created earlier. When I open this artifact, it can pull in the latest data automatically. And up in the top right-hand corner, I can click the reload button to force it to refresh with the latest information. So for something like a sales dashboard where the underlying data is constantly changing, you can build it once and then keep coming back to an up-to-date view. And that's how to use Cloud artifacts. While we built a dashboard and an internal tool today, you can create everything from websites and calculators to games, interactive tools, and AI-powered apps. If you found this helpful, please consider subscribing for more videos like this. Thanks for watching and I'll see you in the next one.