--- title: "Build with AI" author: "@chris" author_url: https://elements.dev/u/chris published: 2026-10-02T15:11:56.249Z url: https://elements.dev/feed/01a0fd2b-f60b-74d5-8472-eaf5c91f07ac kind: lesson format: article --- # Build with AI by [@chris](https://elements.dev/u/chris) ยท 2026-10-02 ## Description Your agent on the left, the live build and your running app on the right, all on your own machine. Claude's desktop app puts everything you need to build with AI in one window: a chat with Claude, a terminal with the live state of your build, and a browser showing your app. Ask Claude for a change and watch all three update. **The Claude desktop app, building an app with Elements:** ![Claude's desktop app building Lantern, a todo list. The chat on the left describes what was built and that the build is clean with all 4 tests passing. The terminal pane at the top right runs elements build and reports State: Ok in 0.000012 seconds. The browser pane at the bottom right shows the app at localhost:4000 with five tasks, two checked off, and a progress bar](/learn/01a0fd2b-f0a8-7f1b-8e8e-2ce8ecf38900/01a0fd2b-f60b-74d5-8472-eaf5c91f07ac/images/01a0fd2b-f702-7c10-bea3-c20b0c49f5bb) ## Open your chat, terminal and browser in Claude ### 1. Paste the prompt into Claude Open Claude's desktop app, switch to the Code tab, and paste this into the chat to create and start an app: ```prompt ``` To work on an app you already have, open its folder instead and ask Claude to start the app. ### 2. Open the app and the terminal Once the app is running, Claude opens a terminal in your project and shows a link to the app. Click the link to open it in Claude's browser pane. Both stay inside Claude, not in a separate terminal app or browser window. Codex and the agent editors, such as Cursor, have their own terminal and browser panes that work the same way. To open them yourself, use the terminal and browser icons at the top of the Code tab: ![Claude's desktop app with a red box around the terminal and browser icons in the toolbar above the chat, labelled Terminal and browser](/learn/01a0fd2b-f0a8-7f1b-8e8e-2ce8ecf38900/01a0fd2b-f60b-74d5-8472-eaf5c91f07ac/images/01a0fd2b-f7cb-7acc-9dad-55e301712002) A terminal you open yourself can start in a different folder. Move into your project first: ```text agent-terminal cd ~/elements/projects/myapp ``` ### 3. Run the build view In the terminal, type: ```text agent-terminal elements build ``` The build view stays open and updates as files change. Green means the build is ok. Red means the build has errors. ## Build something with Claude Tell Claude what you want to build, in plain words: ```text Agent Build a todo list that stays in sync across every open tab, with starred tasks pinned at the top and a filter for active and done. ``` Claude builds all of it: a table in the database to hold the tasks, the page that lists them, and tests that check it works. Watch the panes while it goes. Each time Claude saves a file, the Agent Terminal updates in milliseconds and the browser shows the change. If something breaks, the build goes red, and Claude reads the same error and fixes it before it tells you it is done. ## Watch Claude test your app Claude does not stop at writing the code. It opens your app in its own browser pane and uses it the way a person would. It signs in as a test user, fills in forms, clicks through each flow and checks the page at phone width, and you watch every step happen beside the chat. When it built Lantern, it added five tasks, checked off two, starred one, renamed one and switched the filters before it reported back. **Claude signing in to Lantern as a test user:** ![Claude's desktop app testing Lantern's sign-in. The chat says the home page sent it to the sign-in page and that it will click the Email field and type the first test user's email. The browser pane shows the Lantern sign-in page with ada@lantern.test typed into the Email field and the password still empty. The terminal pane reports State: Ok in 0.000008 seconds](/learn/01a0fd2b-f0a8-7f1b-8e8e-2ce8ecf38900/01a0fd2b-f60b-74d5-8472-eaf5c91f07ac/images/01a0fd2b-f87d-78c3-85d8-5913e8d0454b) Elements is what makes this fast enough to watch. Each save reaches the open page in milliseconds through hot reload, so the app changes in front of you while Claude works, with no restart and no refresh. The project server answers Claude in microseconds, so it checks its work after every edit instead of guessing. Claude tests the real app: the same code, the same Postgres database and the same build you will deploy to a server you control. An online builder shows you a preview. Here you watch your actual app come to life. ## Everything runs on your machine The code, the Postgres database, the tests and the running app are all on your computer. The files are ordinary files: open them in any editor, commit them and deploy them to servers you control. You get the speed of building with AI, and you own the app outright. The manual: [start](/learn/man/start), [build](/learn/man/build), [browser](/learn/man/browser), [tests](/learn/man/tests).