Get started with Elements in Claude Code

In this video we install Claude Code and Elements, create a new app and start it, then ask Claude Code to build a todos app.

I've already showed you how to use Elements in VS Code and in this video I'm going to show you how to use it with Claude Code, the desktop application that runs on your machine. I think VS Code is better if you want to look at files and edit files yourself, and it has a little bit more advanced functionality. So for most users, it's probably the better choice. But if you're already using Claude Code or you want more of a kind of vibe coding experience, the Claude Code desktop app is actually quite excellent.

I use Claude extensively for Elements development, but I use it in the terminal. But when I do go over to the Claude Code desktop, I'm always amazed each week at how much better it's getting each time I check it out. So let's download it and give it a spin. I'm going to come over to the claude.com download link or you can Google search for Claude Code download and download the version for macOS.

Up in the right, when that finishes, just like any other application that downloads, click it and drag the application over into your folder. I already have it installed, so I'll stop that. Next up, if you're on Mac command space to bring up Spotlight, type Claude, and that will open up the application. If you're on Windows, you can use the Windows.

And do the same. After that, go over to the elements.dev website into the install page, which you can get to by clicking on the nav bar at the top. Create an account on Elements and go down and click the install script terminal box. That will copy this to the clipboard and you can paste it directly into Claude.

Paste that script right into the prompt and press enter. Claude shouldn't give you any trouble here and it should just go ahead and install it. It might tell me that I already have it installed, we'll see. If for some reason that doesn't work, you can open up the terminal over here by pressing command J on a Mac or by clicking this icon in the upper right hand corner, and you can paste the script directly into the terminal.

It looks like the Elements installer is running and Claude's going to do this for us, so we'll wait for that to complete. Claude successfully installed Elements and now it's asking me if I want to create an app. I don't have to name it. I can just tell it to create an app using regular language.

Claude will use the Elements program to create the application, and then it gives me instructions on what I should do to get it started. The instructions tell me to go over to this terminal and type elements start. When you do that, it connects to the Elements server and starts up an HTTP server where your browser, where your app will be running in the browser. Now I can open up localhost in my Chrome browser or I can click this link and it will open it up in the Claude desktop app itself, and that's what I'd recommend you do.

Click the OK button that will open this up and you should see a confetti welcome page for your Elements application. Over on the left, it gives me a suggestion. It says that we should build a todos app because that is a rite of passage for any serious developer, as we all know. So we can go ahead and do that I'll just say OK and I will have it build me a todos app and we'll see how it does.

Here we have the first signs of the todos app. It's already looking quite good, and Claude is driving the development of this application using the Elements project server and application framework. And it's able to build the application incredibly quickly because Elements is kind of like a guard rail that's, that's keeping it. Correctly writing the program.

So anytime it runs into a mistake, you might see the upper right here turn to red, which means that there's an error, and then Elements will correct Claude to correct that, to fix that error, and it gets back on its way again. Now it's testing the application in mobile, in regular desktop, it's creating new todos, uh, testing out the various user interface states, and so it should be done momentarily. Let's see if it works. Perfect.

Let me show you a little bit around the panels here so that when you close desktop, the desktop app and you come back, you can get back to where you started. Up here in the toolbar area, this is the terminal icon. If you press that, that opens up the terminal on the right. If you show up here and it's empty and nothing is running, you just type elements start.

So when you start up Claude Code for the day, you'll do elements start that will start up the project server and also allow you to see the state. So when it's green, it means everything's OK. And if there's an error, it will show up red. I'll show you that in a second.

If the browser is not open for some reason, you can click the localhost link here, or you can go up here to the toolbar and press this globe icon that will also bring it up. Now, before we quit for the day, let me show you over in Claude Code. I'm going to ask it to introduce a TypeScript error. And it just made a TypeScript error and you could see that the terminal over in the upper right updates immediately, and it shows the error.

Now, we can see this because we're connected to the same project server that Claude is connected to. Both of us are looking at the same thing. We're not running separate builds. And if I tell it to fix it, It will fix it and we will see the state revert back to state OK green.

When Claude's working on its own, it will check after each work, each piece of work that it does, it will ask Elements whether it made any mistakes and Elements will correct it if it does. Now sometimes it can do it without making any mistakes, but oftentimes you will see the state change to error as it tries to work through, especially more complicated features. OK, so I really like the Claude desktop app. It's actually quite wonderful.

I use Claude all the time for Elements. I might be one of their biggest individual customers actually, but uh I use it in the terminal typically. I do though, when I switch over and and try out the Claude Code desktop app, I'm always pleasantly surprised at how wonderful the uh the experience is. So, if you're already using it or you're used to using a vibe coding platform online, uh you might feel totally at home using the Claude desktop app.

If you want to edit files or look at code files at all, uh, VS Code. It's probably gonna be a little bit better of an experience for you. And if you want to have more direct control over the terminal layouts and things like that, I think VS Code is a bit better for that as well. Uh, but Claude Code desktop is perfectly fine and I think a great environment to build applications with Elements.

Elements is a totally agnostic, you can use whatever you feel the most comfortable with. All right, thanks. Have fun building guys.