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: ```bash 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](http://localhost:4000) 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: ```text Agent 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.

To create a new Elements application in Visual Studio Code, press Command, Shift, and P all together, and that's going to bring up a menu called the Command Palette. It looks like this with the greater than or caret symbol. If you accidentally press Delete and that caret goes away, you're now in a different menu. So if that happens, bring it back by typing it again. And now you're in the Command Palette. Once this palette is open, type new app, and that should show Elements: New App. You can select that with your mouse or press the Enter key. Next, it'll ask you what you want to name your application. Typically, by convention, we'll use lowercase letters and underscores to attach together multiple words in the name.

If you don't know an application name or you don't care, just press Enter and it will pick a default for you. And that's what I'm going to do now. Next, you're going to get a dialog box the first time you do this asking you whether you trust the authors of the files in this folder. And that's asking, do you trust me? And I suggest that you do trust me. So down here, select this checkbox that says Trust the authors of all files in the parent folder 'projects'. That way you won't have to do this every single time you create a new project and click the blue button, Yes, I trust the authors. That's going to create the project and open it up in Visual Studio Code.

Let me walk you around what's happened with these panels. There's a terminal window open at the bottom automatically, and we're going to use that to start up Elements. The thing you want to understand now is if you type pwd to get the present working directory, we are now in the directory of our project, myapp. This is the name of the application, and it's inside of the Elements projects directory. I can press Control-L to clear out this screen. Over on the right, we still have our AI chat window, which we'll use if we need any help. If you run into problems, you can ask the chat to help you. And we'll also use it to build the application.

Over on the left bar at the very top, this button that kind of looks like files, it's called Explorer. And if you click that, this is going to be all of the source code for your project. And most of it in an Elements application is going to be in the app folder. So, for example, you can see all the pages that come with the default boilerplate application here. We're mostly going to use artificial intelligence to write the code, so I'll close this. But if you ever want to go and look at a file, this is where you can find them. Next up, put your cursor back into the terminal and type elements start. You're going to type elements start whenever you create a new application for the first time or if you're bringing up the Visual Studio Code application again after you've closed it for the day and you're coming back to work the next day.

When the terminal opens, you'll type elements start and that will boot up the application. So the project server that Elements is running is going to be running always in the background, but elements start will start your application server, which is what lets you go into a browser and bounce around the application. Now notice that the site has opened up inside the Visual Studio Code editor, and I like to have it here while we're building so that you can see the changes coming to life. But if you want to type localhost:4000 into a regular browser, you can do that as well. And that will show you more of what your users will see. And it will also give you a bigger screen that you can look at and test out various sizes and so on.

But when we start building for the first time, I like to just keep it right here inside of the editor itself. Next, let's build an actual application by prompting it into the chat window on the right. I'm going to build a todos app with authentication, email and password. Yes, there are many todos apps out there, but it demonstrates a lot of the features of Elements, and it's also fairly quick to do. It's also a rite of passage if you want to be a developer. You need to build at least one todos app, so that's what we're going to do. You can feel free to add some new features to this if you want, but one thing to keep in mind is with Elements, you don't have to worry so much about coming up with a big spec sheet up front.

Just start talking. Elements will provide the correct guardrails and keep the agent on task towards building something that makes sense. Sometimes if you're used to vibe coding, you might be used to having to come up with these big giant spec sheets up front in order to build something. I would not worry about that getting started with Elements. Next, I'll press Enter. The agent will take the task, start learning a little bit about Elements by reading some of the manual, and get to work. Every once in a while, you'll see the state in the lower left turn to Error, and that means that the agent made a mistake. It might be a type checking error or a database migration error, and Elements is correcting it.

It will give the agent real-time feedback on what the error is and how to correct it. The agent will be able to fix it much more quickly, and then you'll see that error state eventually turn back to green OK, which means that everything is back on track. I think this best illustrates visually the relationship between Elements and any agent that you're using. Elements is a project server that's providing guidance to the agent to keep it correct and make sure that your application is going to work. And it's especially valuable as your application gets bigger and bigger over time. You can make sure that you don't break old features that you already built by adding new features.

Okay, great. It looks like the agent has completed the todos application, and we're sitting here at a sign-in page. In the lower left, the state is green OK, which means the application is okay. So we can go ahead and test it out before we try to deploy it. I'll click the Sign up button, create an account, add a password, and click Create account. I can create a task and it appears in the list immediately. Great, everything appears to be working. And next up, let's see if we can get this deployed to the internet.