Tutorial: how non-developers build apps in Claude Code

0:00Create a clone of this website for me, and the only features I want are drawing tool, circle tool, box tool, and at the end I want to be able to copy whatever I paste into it so that I have it in my clipboard. And there it is. I can paste something into it. I can draw on the screen. I can add a circle. I don't have all the distractions. I don't have to pay for it. Now I can copy it. It's in my clipboard, and it's ready to use. By the end of the session, you'll know how

0:26to use Claude code to build anything. Let's get started. Presented by Zapier, the AI automation company. Adam, you taught me how to do this, and one of the first things you told me to do was go to get VS Code and download it. And the way you get it is by going to code.visualstudio.com.

0:42Hit the download button, and it's there. Adam, why why this tool of all the tools? Yeah. Um you know, you're about to start coding, right? You're going to build some app. You're going to build a website. We're going to do this this uh markup tool. Uh you need to code. You might not write the code. You might not look at the code. AI's going to do it for you. But these environments, like Visual Studio Code, they are built to help you manage a coding project, even

1:10if you don't look at the code. Okay. Once you've got it, it's going to look like this. And the first thing we do is what? Open, I think. Yeah, I always start with a folder. Anytime I'm starting a new project, I create a brand new folder on my computer. If it's an app, if it's a website, whatever, go and create a folder. It doesn't matter where you do

1:31it. Create one somewhere. This is how many folders I I've created here, and it just goes on and on. I'm going to create a new one right here. I like to use CCP for Claude Claude code project, and then I name it. And so this is going to be just for demo and teaching. And now all the files that we're going to have Claude code create will live in there, and here it is for anyone who wants to bring it up and make it go away. This is the button to do it. Now, it still doesn't have Claude code in here. What do we do to get Claude Code

1:58in here? Yeah, so this is a code editor. So, there's an extension that's going to let you run Claude. So, that little block icon on the left, if you click that and search for Claude, you should find the There you go. Claude for VS Code. It's by Anthropic. You want the one that's from Anthropic. Not the one that's from

2:18some random other person. I clicked the official one. It's got the little seal there. You can install it. It should take 1 second to install. And now already got it. And now, you'll already notice a little change, Andrew. At the very top bar, there's that little Anthropic icon. If you click that, it'll open up the place for a chat. Now, I'm assuming you already have a subscription to Anthropic. If you do, you click the big reddish-orangish login button and

2:44it'll take you to the Anthropic website. You'll approve access to Claude Code. It'll take us back. Mhm. Sometimes you have to sign in again. Make sure that I'm in. Continue. Okay. Uh now I can authorize. Awesome. Go through the sign-in. Yep. Let's go back and look and now you're looking at a chat window. So, now I can close this because this is where we got the extension. We don't need it. I can close this. We don't need that. I can close this thing. This What

3:17is this chat on the right? I don't know, man. It's a blank The VS Code like allows all sorts of different uh chat agents in it. So, there's a Code X extension. There's one for GLM. There's one for uh ZAI. Like, they've all got uh their extensions here. So, you could actually install and I do. I have Code X next to Claude Code in this

3:36one app. Let me actually put it uh make sure to emphasize that. You can come in here and get the OpenAI tool right here and just install it. We're just going to go with Claude Code and I'm going to hide this. And now, I do like to bring up the files and now we can see every file that we have here. And the first thing that we have here to create is a file. I'm going to say create a mark down file that says

4:02hello world. And I'll hit enter. And now it's going to take its time. I'm actually using Fable for this. And here it is. Here's the markdown file. What I like about VS Code is now I can click on it and I could see what it says right in here. Super simple. That's my file.

4:22Okay. Next, let's talk about switching models since I am using Fable. So, switch models. I can now come in here by just hitting {slash} switch and I can see whichever model I want. And let's pick Fable. But you can see that you can switch models anytime. And then while we're here, let's also show that you can see how much you've

4:45used by just hitting {slash} usage. And you can see that in the last 5 hours I used 36% of my usage. I've got 9% of my weekly and this week we've got Fable. So, I've got 16% of Fable used. And this is good to see so that you're aware of how much you're using. The next thing that I've got in the notes is adding an

5:04MCP server. What's an MCP server? Yeah, you know, this agent can access the internet. It can write files. It can read files. It can code. But often you've already got services that you that you have data in. You know, it's your email. It's your calendar. It's linear if you've got your your tasks up there. MCP is what allows this agent to talk to all of those services. The number one that I install first is often email and calendar because it can it can

5:32access all my information then. Okay. I really like using Zapier, our sponsor's MCP system. So, I'm going to go to zapier.com/mcp. And I hit get started. I already have an account. There it is. Okay. And um now I'll connect my apps. And so for this one, what we're going to do is we're going to go to let's connect

5:54uh email. And now you can see all the different things that I could have it do. Like I'm going to say yes, you can find email, you can add labels, but you can't delete emails, you can't create Where's read? I wanted to Let's make sure that it can read. Right, that might be part of find email. Oh, got it. Find email, um archive,

6:14create draft, forward email, send email. Yep. All right. So, we've got everything here. And I'm going to hit connect. It's going to ask me which account. I want this account right here. Add to tools. Great. Now I'm going to go into connect here. And I'm going to generate the token. Generate the token. And I know I'm not supposed to give it to anyone, but I'm going to show it all here. I'm going to say

6:42connect to Zapier MCP. And I'll give it this, which I will delete once we're done. [snorts] So, now that you've given this, because you've already set up Zapier to connect to your email, calendar, probably other stuff, too. It's really easy to give whatever agent you're building here or just Claude access We could ask it questions like What are the emails that I got in the last hour? Or summarize my week for me. Uh you could start to ask all sorts of really interesting and useful questions. You might have contacts in there that you want to load

7:18in for a project, too. What are some MCP servers that you think people should consider adding? Yeah, I think calendar and email are the biggest ones. I would go through, and I have done this for our for us. Like if you have a CRM, add your add your CRM. They all have MCP servers now. Uh if you're hosting code or something on GitHub already, add that one. Whatever tools you're using, are you in HubSpot all day? Are you in Salesforce? Add those and now your agent will be able to access the same data you can, but it does it faster and it can do it in an

7:49automated way without you having to copy and paste stuff between different tools all the time. Okay, it is done. We now have it connected. I'm going to close out this markup. Actually, you know what? One of the things that I like to do is I like this. I just move it over. I like it to be here and then I like my chat to be here. So, I have all my files here. I can read them in here and then I could talk to Claude right here. We now have it. It now has access to my email. Since we gave it access to email, let's create

8:17a page that shows all my junk mail and all my newsletters with one-click unsubscribe next to it so that I can see all my newsletters and I could have a decision whether I should unsubscribe from it. So, let's do this. It's a great idea. I'll use the microphone again. Use my Zapier MCP connection to find email from the last 2 weeks that is a

8:40newsletter that I can unsubscribe from. I want you to put all the newsletters categorized by the name of the newsletter. Make me make it so that I can uh expand to read the newsletter, but more importantly to the right of it, I want a big button that I can press that says unsubscribe and when I press that button, I want whatever the unsubscribe action is from this newsletter to happen so that I'm

9:05unsubscribed from the newsletter. [snorts] Okay, and now it's going to go. It's going to work. [snorts] The this one uh may not connect, Andrew, because as you connect to these MCP servers, you you usually have to create a new Claude session in order to access that like new setup. We'll we'll see if it figures out how to connect to it, but but if it's not working right away, the step is to hit the little plus. There's a little chat bubble plus in the top right and that'll create a new Claude session for you. And you can run multiple Claude sessions at the same time as well. Yeah, there you go. The

9:44Zapier tools. So I would take that message and copy it. Hit the plus. Now you've got a new chat. Paste it in here and this one should have access. By the way, I do use a lot of these chat windows. How do you keep it from getting confused by like I might have this chat window, this chat window and three others all accessing the same files here. How do you keep them from crashing

10:08into each other? I think of them as separate people. And so if I'm going to put three people on a job, well I don't ask three people to do the same job. Let's say they're building a house. I don't put all three people in the bathroom working on the bathroom at one time. I have somebody working on the bathroom, somebody working on the kitchen, and somebody working on the upstairs closet. And I'm thinking about that as kind of the

10:29organizer of of my team of agents. Adam, it's done. Let's take a look. This is what they did. So here's one from Open Router email. It's true. I don't need an open email from them. Dan Martell, maybe I do, maybe I don't. Naz, I like him. I'd keep that. 12 Labs, I do not. So I'm going to unsubscribe. I see and it knows where the link is because it got it. I'm going to open the

10:53link. And now I can unsubscribe. It takes me directly into it. That's so cool. It just basically read all my messages, figured out what's a newsletter, and then figured out what their unsubscribe method is and I could just go through all of this and I could unsubscribe. That's how easy it is. I will say it took a lot of time,

11:11um but it worked. Why don't we talk about this? Skills next. This is a design choice. Let's pick another design choice for it. Where do you get your skills? What are skills? Yeah, skills are basically repeated workflows. Uh we create a lot of skills. When I say, "Oh, I'm doing the same thing every day. I'm trying to write an email and I want Claude to help me or I want to process a bunch of emails or I want to

11:39design, but I want it to use my brand." And so, we'll build a skill that makes that thing reproducible. So, you don't have to copy and paste huge prompts every time. And dude, there's a lot of skills online. Like if you search for awesome design, like if if you're a product builder, maybe you struggle with what is a great user interface look like. You know, you haven't done this for years and years. you search for awesome design skill Claude, you'll find most of them are on GitHub. That's the

12:06place where they're going to be listed. And so, you can go in, grab let's say grab that first one. Yeah. What's happening in the in a skill, scroll up, you'll see it's a very small project. Inside the skills, there's a lot of folders here because this is saying, "Well, here's how I design with bold. Here I Here's a bento kind of

12:24style. Here's a colorful kind of style." And inside each of these files, it's just a really long prompt. But if you take the URL to this page, give it to Claude, and say install this skill for me, Claude will now be able to design in the in the system that you just saw there.

12:42Okay. I'm sure you've already seen everybody's seen on LinkedIn and you know, in these newsletters and wherever, "Oh, you've got to try this skill. You've got to try this skill for investing. You've got to try this skill for whatever." It's easy to install them. Take the link, give it to Claude, ask it to install it. And then it will also tell you how to use it. And if you're not sure how to use it, you can ask Claude, "How do I use the skill I just installed?" And it'll give you great step-by-step

13:08instructions. I just like that these skills are so easy to read. Here, mission, you are an expert design system guide author for cafe, create practical implementation-ready guidance that can be directly used by engineers and designers. Here's the brand. Here's the visual style, minimal clean. Here's the the typography, the fonts that you use, the colors.

13:27Okay, and now it's installing it. Yeah, a trick Andrew that that comes up a lot with Claude is is people get stuck. They don't know how to do something. Just ask Claude. Say, "Claude, how do I do this thing? How do I install a skill? How do I use a skill? How do I connect to Zapier?" If if this video isn't enough, if other videos aren't enough, use it as kind of an impulse to start and ask Claude to help you through it and tell it, "I don't know what you're telling me. You've got to break it down. I'm I don't know all this AI stuff." And it will happily meet

13:57you where you're at and give you step-by-step instructions. Okay, now we're going to say, "Now use that skill to redesign my unsubscribe page." Let's see what it looks like. All right, so here it is. This is what it looks like with Cafe. That's a skill. I make skills all the time. How do you make

14:17skills and when should we create skills? Yeah, anytime that I'm doing the same thing over and over again. So, this design is a great one. I would go and take this skill, for example, and I would ask Claude, "Say, Claude, please take this skill, take the structure, but I want you to fill it with my brand colors. I want you to reference my logo." And maybe not even just design,

14:38but also here's how my messaging works. These are the people I serve and here's the words I use to describe it. And you can just ask Claude, "Please make that skill file and save it on my machine so that I can use it in every project." Yeah, like if I take a look at this and I say, "I don't like how this text is really small." I might take the screenshot right here and say,

15:03"I don't like how that text is small. I want the text to be a lot bigger. Change it in the page and then also create a skill for me with this design style, but with the text being a lot bigger." And now I've taken their design and I've made it into a version that works best

15:18for me. Then I can and it. Okay, file is done and now you can see the text is clearly bigger, and it created a skill for me, which it put in this hidden folder. I don't like that it's in this hidden folder. What do you think? That's where they go. That's where they belong, and and you can actually ask it in this case, that little uh tilde at the beginning means that this is a shared file, so that every every Claude Code project on your computer has access to the skill that you just created. You could also ask it, "Hey, I don't want this to be shared with all, you know, of

15:51my Claude Code instances. Please create it just in this project." And then it'll put it in a folder in this project for you. Okay. Speaking of, there's something called a Claude MD file. I don't use it. What is it? How do I use it? What is it for? Yeah, every time you start a new

16:10project, you're starting from scratch. There's nothing in this folder, uh you know, Claude doesn't know anything. And the problem is you have a lot of context that you want to bring. Here's who I am, here's what I like to build, and every single time you start a new session, even if you just hit the little plus right now, it's starting from scratch. And this Claude agent will have to look at the folder, it'll have to ask you some questions. So, the claude.md file automatically loads into the chat session every time. So, what typically will go in that file is, here's the project, here's what we're working on, here's where the files are,

16:45here are the references that are interesting. It's basically a map for Claude, so that it doesn't have to relearn all of that stuff from scratch every time you start a new chat. All right, how do I create it here? It's real easy. All you do is {slash} init, i n i t. And you'll see it's going to do a learning exercise here. It's going to set Well, okay, let me look at this chat history, let me look at the files that are already in your folder. There you go, let me look at what's in this directory first. It's going to do all that work to look around right now,

17:15and then save that result, so it doesn't have to do this every time you start a new chat. It even read the Hello World thing that we created.

17:28And And Andrew, this works even better if you've already loaded in Let's Let's say you had a an interesting conversation with your your business partner about what you wanted to build. I add all that stuff into the folder, so that when I run the init command, it can vacuum up as much context about the the

17:46thing I'm trying to build as possible. And you see it made a Claude.md, Yeah. and you can you can open it up. But you would put other files in here, so that Claude.md has more context. Got it. Okay. So, here's the Claude.md file. I don't know why I put it here. I want it right here.

18:00And so, I can see what it is. Uh scratch work workspace for Claude code demos and teaching sessions. It got it right. Okay. Artifacts published Claude AI skills and there you go. Working here. Yeah. Andrew is an engineer creator, prefer plain language explanations. That's All right. That's fantastic. I really like this markup tool because I can paste any

18:22image into it. And then I can draw on it. [clears throat] I could add arrows to things. I could add boxes to things. Oh, but I don't like how they charge. So, what I want to do is I'm going to take this site. I'm going to go into VS Code, and I'm going to say, "Create a clone of this website for me, and the only features I want are drawing tool, circle tool, box tool, and at the end I want to be able to copy whatever I paste into it, so that I have it in my clipboard. Make a clone of this site, but keep it as

18:58simple as possible." And there it is. I can paste something into it. I can draw on the screen. I can add a circle. I don't have all the distractions. I don't have to pay for it. Now, I can copy it. It's in my clipboard, and it's ready to use. Let's talk about publishing. I want to publish it on the web for anyone who wants to

19:17use it. What do I do? Well, the easiest thing is just to ask Claude to help you publish it. And there's a lot of different places you can publish. One that I'll recommend because it's easy and Claude understands it very well is called Vercel. So, if you say help me publish this on Vercel,

19:33give me step-by-step instructions. I don't know what to do next. Being open and honest is a is a helpful thing in communication. If you don't know what to do, tell it. [snorts] When you hit enter to this, it's going to give you a really nice breakdown exactly what to do and what order. And if you just follow those steps, pretty soon you'll have you'll have a a website hosted that you could share with anybody. And by the way, this is a one-page tool. It just has this index file. That's all it is. If it had

20:01others, we'd see them here. Um So, step number one, create a free Vercel account. Skip if you already have one. I actually already have a Vercel account. Easiest option is to continue with email. Use this and get All right, here we go. Let's create a brand new one. I'm going to use one of my other

20:19accounts. Create a brand new Vercel account. This is going to be for personal. It's going to be for other. Just me. Uh what are you building? Um an AI app, a web app. Let's do other. Done. I'm working on projects. My team name testing Hit hit I'm working on personal. That that'll give you the hobby plan instead

20:48of pro. Oh. So, that should leave that should be free then. Continue. All right, we got it. Um now come back in. Step one is done. I created a new account with my Mhm. email. Then What's next? If you read Yeah, if you read step two and step three, Andrew, it's like open a

21:10terminal, do this in the terminal. Whenever I see instructions like that, I say, "I don't want to open the terminal. Please do that for me." Oh, great. Step two says open a terminal. I don't want to. You do it. And it'll do it. Oh, I should have said open a terminal and do stuff. I don't want to do it. You

21:32do it. That's okay. It It knows. It knows. It got It got the message. I'll run it and log in from here. You just need to click on the confirmation link that Vercel emails to. Okay.

21:48It just popped this window open for me. Mhm. With the code from the I don't know how it got the code, but okay. Let's say allow. There it is. It worked. markup-clone.vercel.app. It's up and running. That was super easy. Let's just grab a quick demo of something here. Come back into Google. Grab a screenshot. So, I'm going to take a screenshot from Google. I'm going to hit paste right here. Wait. Paste. And I'm going to draw

22:18on it. I'm going to add my circle on it. I'm going to even do this. Make the circle bigger. I'm going to add a box. And then of course, I can copy. The tool worked. It was that easy. It's published and public right now at markup-clone.vercel.app. I'll leave it up for a little bit. And now that this is over and you understand how to use Claude Code, you're going to want to build more stuff. Well, we've got a collection of repos that you can just give to Claude Code and tell it to build them for you as new tools or adjust it and then build it to your

22:48taste. There's a whole collection of them right here in the next video and I'll see you there. We'll both see you there.