Part 2 of 10
Install VS Code
Install VS Code and Elements, build a todos app by asking an AI agent, and deploy the app to DigitalOcean. Then tour the project environment, the elements command, the website and the business.
- 1. Introduction 0:18
- 2. Install VS Code 3:30
- 3. Install Elements 1:27
- 4. Create Your First App 5:26
- 5. Set Up a Deployment Environment on DigitalOcean 4:49
- 6. Deploy Your App 3:11
- 7. The Project Environment 2:32
- 8. The Elements Tooling 6:07
- 9. The Elements Website and Community 2:48
- 10. The Elements Business 1:27
In this video we install VS Code, sign in to GitHub Copilot so the AI chat works, set up the chat, and open a terminal, ready to install Elements. ## Why VS Code VS Code is a free, open-source editor from Microsoft. You can build by chatting with an AI agent, and you can open and edit files yourself when you want to. Elements works with other setups too: the terminal, Cursor, Claude Code, Codex and others. Any agent working inside an Elements project folder knows what to do. The tutorials use VS Code so every video shows the same screens, and the steps carry over to the other editors. ### 1. Download and install Go to [code.visualstudio.com](https://code.visualstudio.com) and download VS Code for your operating system: Mac, Windows or Linux. On a Mac, the download shows in the upper right corner of Chrome when it finishes. Click it and drag Visual Studio Code into the Applications folder. ### 2. Open VS Code On a Mac, press Command-Space to open Spotlight, type `code`, and choose Visual Studio Code. On Windows, press the Windows key and search for it. ### 3. Sign in to GitHub Copilot The first time VS Code opens, it asks you to sign in to GitHub Copilot. Click **Continue with GitHub**. If you have a GitHub account, sign in and authorize VS Code. Otherwise, create one. GitHub Copilot has a free tier, so you can use the AI models for a while before you pay anything. GitHub sends you back to VS Code, which asks you to pick a theme. We use **Dark 2026**, the default, and click **Get Started**. ### 4. Close the Welcome tab and open the chat Close the Welcome tab. The chat window is on the right. Expand it so it is easier to read. This is where you ask the AI agent to do work and build your app. ### 5. Set up the chat The model picker at the bottom of the chat says **Auto**. You can pick a model by hand, or leave it on Auto and Copilot picks one for each task. We leave it on Auto. Next to it is the permissions menu, set to **Default Permissions**. Change it to **Allow all** and enable it. When you build an Elements app, the agent mostly runs the Elements tooling, so the agent works without stopping to ask. If you keep the default permissions, you approve each tool call the agent makes. ### 6. Open a terminal Press Control-backtick (`` Ctrl+` ``), or choose **Terminal > New Terminal** from the menu bar. The terminal opens at the bottom of the window. The terminal starts in your home directory, not in a project. Elements installs from here, so leave the terminal open.
First, let's install Visual Studio Code. That's the open source free editor we're going to use from Microsoft. I think it's a great choice for building applications. It lets us work with artificial intelligence, but also lets us drop in and use and edit files directly if we want to. If you're using something else, like maybe the terminal directly, or Cursor, or Claude Code desktop, Codex, etc., Elements is designed to work with all of those systems fine. We don't sit in front of any agent. We work side by side with it. So as long as you're using an agent that's working inside of an Elements project folder, it should know what to do. In most of our tutorials, we're going to use Visual Studio Code so we can standardize the tutorials and show people how to get up and running.
But all of these concepts will apply to any of these editors. Okay, so let's get started by downloading Visual Studio Code. Click the operating system that you have, macOS, Windows, or Linux. And after that download has completed in the upper right-hand corner, click it and drag the application into the applications folder. If you're on Mac, you can use Command-Space to bring up the Spotlight search menu and type code. That should bring up Visual Studio Code as the first option. If you're on Windows, you can do the same with the Windows key. If you're installing Visual Studio for the first time, the first time you open it, you're going to see this splash screen asking if you want to sign up to GitHub Copilot, and you should do that.
Click the Continue with GitHub button, and if you already have a GitHub account, you can continue and authorize it. Otherwise, go ahead and create an account on GitHub. It's free to get started, and it has a pretty generous free tier so that you can use the AI models for quite a while before you have to pay anything. I already have an account, so I'll click Continue. That'll redirect me back into Visual Studio Code and ask me to pick a theme, and I'll go with Dark 2026, which is the default, and click the Get Started button. Inside of Visual Studio Code, you're going to see this Welcome tab that has a bunch of things in it.
I will go ahead and close that. And over on the right is a chat window, which I'll expand so we can see it more clearly. This is where we're going to chat with artificial intelligence to do work on our behalf and to build our application. Let's set this up properly so that we have an easier time getting Elements installed and building our first application. Down in the chat box here, you'll see that there's a button called Auto, and if I click that, you'll see that I can pick a model that I want. And if I want to select one specifically, I can do that, or I can leave it on the Auto selection, which will let Copilot decide for me based on the task that I'm doing.
Keep that selected and keep this the same. And down in Default Permissions, I'm going to change this to Allow All, which sounds a little bit scary, but there's nothing that's going to happen when you're building an Elements application that you have to worry about. It's going to invoke Elements tooling to build the application for the most part. So you can enable that. If you're not comfortable and you want to leave the default permissions, that's fine, but you're going to have to say okay to a lot of the tool invocations that happen. So I find it much less annoying to pick Allow All and just go with it. Don't worry so much about it. All right, now in the main area here, we're going to open up a terminal window.
To do that, if you're getting used to keyboard commands, you can use Control-backtick. That will open up a terminal. If you don't want to use the keyboard, you can go up to the menu up here and click Terminal and then select the New Terminal menu item. That's going to open up a terminal down at the bottom. And importantly, right now we're just in the home directory. We're not in a project yet, but we're going to use the terminal to install Elements, so you can go ahead and keep this up. This is all we need now with Visual Studio Code, and next up we can go and install Elements itself.
Add a comment