Create Your First App

In this video we create an Elements app from the Command Palette, look around the new project, start it with elements start, and ask the AI agent to build a todos app with sign in. Then we sign up and add a task.

1. Elements: New App

Press Command-Shift-P (Ctrl-Shift-P on Windows) to open the Command Palette. It starts with a > character. If you delete it by accident, you are in a different menu, so type > again.

Type new app and choose Elements: New App with the mouse or the Enter key.

VS Code asks for a name. By convention, names use lowercase letters, with underscores between words. Leave it blank and press Enter, and Elements picks a name for you.

2. Trust the authors

The first time, VS Code asks whether you trust the authors of the files in the folder. Check Trust the authors of all files in the parent folder 'projects' and click Yes, I trust the authors. You won't be asked again when you create the next project.

3. Look around the project

The project opens in VS Code:

• Terminal, at the bottom, opens automatically in the project's directory. Type pwd to see it: ~/elements/projects/<name>. Press Control-L to clear the screen.
• Chat, on the right. Ask the agent for help when you get stuck, and to build the app.
• Explorer, the files icon at the top left. It shows the project's source code. Most of an Elements app is in the app folder, including the pages the new app comes with.

4. Start the app

Click in the terminal and type:

Terminal
elements start

Run elements start after you create an app, and each time you open VS Code to work on it. The Elements project server runs in the background all the time; elements start starts your app server, so you can open the app in a browser.

5. The built-in browser

The app opens in a browser tab inside VS Code, at localhost:4000, showing "You're running on elements." Keep it there while you build to watch the changes arrive.

You can also open localhost:4000 (opens in a new tab) in any browser, to see the app the way your users will and to try different screen sizes.

6. Prompt a todos app

In the chat, type a prompt and press Enter:

Agent Prompt
Build a todos app with authentication, email and password.

You don't need a big spec up front. Start talking, and Elements keeps the agent on task, building something that makes sense. Add features to the prompt if you like.

7. The agent builds

The agent reads parts of the Elements manual and gets to work.

The build state in the lower left of VS Code sometimes turns to error. The agent made a mistake, such as a type error or a database migration error, and Elements tells the agent what the error is and how to correct it. The agent fixes it, and the state goes back to a green Ok.

Elements is a project server that runs while you work, keeping the agent correct and your app working. That matters more as the app grows: new features don't break the features you already built.

8. Try the todos app

When the agent finishes, the app shows a sign in page and the build state is a green Ok.

Click Sign up, enter an email address and a password, and create the account. Add a task, and it appears in the list.