Claude Dev: Build Web Apps Without Writing A Single Code

Do you remember the overly hyped autonomous AI programmer, Devin, announced three months ago?

Unfortunately, the demo video turned out to be fake, and Devin quickly faded into obscurity.

Today, another autonomous AI programmer was released that is actually Today, however, a new autonomous AI programmer has been released that genuinely deserves the hype. Powered by Anthropic’s Claude 3.5 Sonnet, it’s open-source and available in the VS Code Marketplace.

This new AI programming assistant is called Claude Dev.

What is Claude Dev?

Claude Dev is a VS Code Extension developed by Saoud Rizwan as part of Anthropic’s Build with Claude June 2024 hackathon.

It takes advantage of Claude 3.5 Sonnet’s agentic coding capabilities to handle complex software development tasks step-by-step. With tools that lets the AI read & write files, create entire projects from scratch, and execute terminal commands (after you grant permission), Claude Dev can assist you in ways that go beyond simple code completion or tech support.

The AI developer is packed with the following capabilities:

• Tracks total tokens and API usage cost for the current task loop.
• Shows edit diffs or new files in beautifully syntax-highlighted previews.
• Streams command execution output into the chat, so you never have to open a terminal yourself.
• Presents permission buttons (e.g., ‘Approve CLI command’) before using tools or sending information to the API.
• Sets a maximum number of API requests allowed for a task before prompting for permission to proceed.
• Displays the JSON of API requests when made and tracks individual API request costs.
• Determines if it can present the result with a CLI command like open -a "Google Chrome" index.html, which you can run with a click of a button when a task is completed.

How it works

Claude Dev uses an agentic loop style implementation with chain-of-thought prompting and access to powerful tools, enabling it to accomplish nearly any task.

From building software projects to running system operations, Claude Dev is only limited by your imagination. Start by providing a task, and the agentic loop initiates, using certain tools (with your permission) to accomplish each step in its thought process.

Getting Started with Claude Dev

Open VS Code and search for “Claude Dev” in Marketplace. Install the extension and it should be added on the left vertical tabs of the IDE.

Next, open up the Claude Dev extension and notice that it will require you to input an API key. Follow the steps below to get your API key:

1. Go to https://console.anthropic.com/
2. You may need to buy some credits (although Anthropic is offering $5 free credit for new users)
3. Click ‘Get API Keys’ and create a new key for me (you can delete it any time)

Paste the API key on the Claude Dev and finally click on the “Let’s go!” button.

It’s important to know that you need to have credits on your Anthropic account. You can choose to link your credit card or claim the free $5 credits by adding your phone number.

Claude Dev In Action

Once Claude Dev is set up, let’s try to create an app with it.

Prompt: Make a Tetris game with a life and a scoring system. Use flashy colors

For this task, Claude needs to create new files on your local disk. It prompts you to allow or decline the AI to make changes to your file system.

After a few seconds, Claude Dev was able to generate the files, saved them to my desktop, and the Tetris game is now ready to be played.

According to Sauod, files will be saved in the open workspace in VS Code and will default to desktop if there’s none.

I enforce the LLM to only work within the open workspace in VSCode, or if no workspace is open it defaults to the Desktop. But you can try to override this by telling it to operate at a specific path.

Simply click on the “Run command” button to start the game.

Awesome! With a single prompt, I was able to create a fully working Tetris game.

You can make further modifications to the game. For example, I wanted to add a guide on how to play the game.

Prompt: Add a tutorial on the left side of the game canvas to guide the user on how to play the game.

Overall, this mini-game took two minutes and a quarter of a dollar to make.

• Upload Tokens: 47,57
• Download Tokens: 45,061
• API Cost: $0.2186

Quite cheap but this could easily blow up once you start building bigger projects.

Anyway, what’s great about this is that the files generated by Claude Dev are all stored in your local machine so you can manually update them whenever you want.

You can watch the video tutorial here:

If You Are A Developer

If you are a developer and are interested in the source code, check out the open-source code on the creator’s GitHub.

To install Claude Dev, follow these steps:

1. Clone the repository:

git clone https://github.com/saoudrizwan/claude-dev.git

2. Open the project in VSCode:

code claude-dev

3. Install the necessary dependencies:

npm run install:all

4. Launch the extension: Press F5 to open a new VSCode window with the extension loaded.

Final Thoughts

Claude Dev is a very promising technology. We are finally getting close to having the ability to create full-blown applications and websites using AI alone.

One major concern I have is that it uses a large number of tokens per execution, burning through tokens like a kid at an arcade. I hope that more talented developers will come up with solutions to fix the token issue, perhaps through open-source alternatives.

I encourage you to try out Claude Dev and explore its capabilities. Let me know what you think about it.

‍