elements
3:30

Part 2 of 10

Install VS Code

by @chris 3h ago
0

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. 1. Introduction 0:18
  2. 2. Install VS Code 3:30
  3. 3. Install Elements 1:27
  4. 4. Create Your First App 5:26
  5. 5. Set Up a Deployment Environment on DigitalOcean 4:49
  6. 6. Deploy Your App 3:11
  7. 7. The Project Environment 2:32
  8. 8. The Elements Tooling 6:07
  9. 9. The Elements Website and Community 2:48
  10. 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 (opens in a new tab) 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.

Add a comment