Build a Slack clone and deploy to DigitalOcean

Elements provides a build environment for humans, and their agents, to build apps successfully the first time. In this video, we'll install Elements, create an app, and ask Claude Code to build a realtime chat app where anyone can read and authenticated users can post. Then we'll deploy it to a cheap DigitalOcean box. No other services necessary.

In this video, we'll use Claude Code to build a real-time messaging app like Slack and then deploy it to a cheap digital ocean droplet. Install elements by pasting this script into your terminal and pressing enter. After Elements finishes installing, change into your project's directory, create an app called Chat, and start up the incredibly fast Elements Server. A browser will open with your live demo page.

To get a quick sense of the developer experience, open the project in your editor. I'm using a terminal editor, but a regular one like VS code or cursor works great also. Make an edit to the home page's HTML and save the file. See the instant change in the browser? That's the super fast hot reloading, so you can see the results of your work at the speed of file saves.

Next up, let's boot up Claude Code in the terminal. I'm using the terminal directly, but any agent system will work fine. I'm using the Opus 5 model, but you should also have good success with Sonnet or one of the cheaper models. Let's give Claude a simple prompt for building a real-time messaging app. I want it to be sort of like Slack. It has a login and authorization. Only a logged in user can post, but anybody can see messages in real time as soon as they're posted.

We'll let Claude work for a few minutes. Fantastic. Not only did it build the app quickly, it verified there's no build errors and tested the UI to make sure it looks great and works as expected. Let's test it ourselves. I'll create a new user account with email and password, post a message, and then verify that another unauthenticated browser sees messages as soon as they're posted.

Before we deploy, let's take a quick look at the build environment that Claude used so you can get a sense of why it's so effective. Elements has an always on build server running in the background. Clients like the Elements build command connect to the server and get near instant build results. TypeScript is integrated directly into the elements binary, and there's a new reactive HTML language 10 years in the making directly built into the TypeScript compiler. Notice as soon as there's a type error, my editor shows me the error. That's because the Elements Server also implements the LSP protocol. Your editors connect to the Elements server just like the other build commands, and reusing the same project server dramatically reduces resource usage.

You can also see build errors using the elements build command. When I fix the error and save the file, the build state is updated near instantly. When agents like Claude Code are building, they'll use the elements build command with the JSON flag to get structured build feedback after each feature they write. This helps the agent make rapid progress and be confident in its changes.

Testing is baked into the elements build, and you can see test specific view by using the elements test command. Notice how quickly the test results update when I make a test fail. Agents will make heavy use of testing to verify your application works as expected and doesn't regress over time.

Next, let's deploy the app to the internet using Digital Ocean. Create a new droplet, select the Ubuntu operating system, regular SSD disc type, and the $12.02 gigabyte RAM plan. You can get away with a smaller plan as a typical application will only be about 200 megabytes, but the 2 gigabyte plan is a very safe bet. If you don't have an SSH key, click the add SSH key and follow the instructions. Otherwise just select an existing key. Finally, create the droplet and wait a minute or two for it to complete setup.

Grab the public and private IP addresses. You'll give those to your agent, and it will update your app's deploy config. I'll be using the demo.elements.dev domain name. Don't worry if you don't have a domain name. You'll just deploy with the public IP address. Use that address in your browser to visit the site, but if you do have a domain name, Elements will automatically get you an SSL certificate.

Great, the live site is up and running, and notice this entire site is running on one digital ocean droplet with no other services. The database is running automatically on the machine. Load balancing is handled automatically, and as you add more machines, it will automatically load balance amongst them. The first deploy takes about a minute, but after that, a hot deploy takes only a few seconds because Elements uses a project server peer to peer protocol, only updating the minimum files required, and then does an incremental build on the deploy box.

I've been working on Elements for about a decade, and I'm so excited to be releasing it to you. Next up, install it yourself, create an app, and deploy it.