- An AI agent, Claude, demonstrates its ability to perform a complete website coding task by directly controlling a laptop, browser, and IDE.
- Claude can generate code, interact with local files, start servers, and debug errors by interpreting terminal output and making necessary code changes.
- The demonstration highlights the AI's capability to handle multi-step, interactive coding workflows, even when encountering environmental discrepancies.
Claude | Computer use for coding
- AI agents can directly control a user's laptop, including navigating web browsers and interacting with local applications.
- The AI can generate code based on natural language prompts and render it as output.
- It can download generated files, open them in a local Integrated Development Environment (IDE) like VS Code, and modify them.
- AI agents can interact with the VS Code terminal to execute commands, such as starting a local web server.
- Debugging capabilities allow the AI to read and interpret terminal output to identify errors (e.g., Python version issues) and autonomously apply fixes.
- The AI can utilize IDE features like "Find and Replace" to make targeted modifications to code files.
- Changes made by the AI are saved, and the running application (e.g., local server) automatically reflects these updates.
Developer Relations— A field focused on building and maintaining relationships between a company and its developer community.AI agent— An artificial intelligence program designed to perform specific tasks, often by interacting with its environment.Artifact— In this context, the visual or rendered output generated from code, often displayed alongside the code itself.VS Code— (Visual Studio Code) A popular, free source-code editor made by Microsoft for Windows, Linux, and macOS.Local server— A web server running on the user's own computer, used for developing and testing websites before deployment.Terminal— A command-line interface (CLI) used to interact with an operating system by typing commands.Terminal output— The text displayed in a command-line interface as a result of executing a command or program.Debugging— The process of finding and resolving errors or defects within computer programs or systems.
I'm Alex. I lead developer relations at Anthropic, and today I'm going to be showing you a coding task with Computers. So we're going to be showing Claude doing a website coding task by actually controlling my laptop. But before we start coding, we need an actual website for Claude to make changes to. So let's ask Claude to navigate to claude.ai within my Chrome browser, and ask Claude within claude.ai to create a fun 90s themed personal homepage for itself. Claude opens Chrome, searches for claude.ai, and then types in a prompt asking the other Claude to create a personal homepage for itself. claude.ai returns some code, and that gets nicely rendered in an artifact on the right hand side. That looks great, but I want to make a few changes to the website locally on my own computer. Let's ask Claude to download the file, and then open it up in VS Code. Claude clicks the saved file button, opens up VS Code, and then finds the file within my downloads folder, and opens it up. Perfect. Now that the file is up and running, let's ask Claude to start up a server so that we can actually view the file within our browser. Claude opens up the VS Code terminal, and tries to start a server. But it hits an error. We don't actually have Python installed on our machine. But that's all right, because Claude realizes this by looking at the terminal output, and then tries again with Python 3, which we do have installed on our machine. That works. So now the server is up and running. Now that we have the local server started, we can go manually take a look at the website within the browser, and it looks pretty good. But I noticed that there's actually an error in the terminal output, and we also have this missing file icon at the top here. Let's ask Claude to identify this error, and then fix it within the file. Claude visually reads the terminal output, and then opens up the Find and Replace tool in VS Code to find the line that's throwing actual error. In this case, we just ask Claude to get rid of the error entirely, so it will just delete the whole line. Then Claude will save the file, and automatically rerun the website. So now that the error is gone, let's go take a final look at our website, and we can see that the file icon has disappeared, and the error is gone as well. Perfect. So that's coding with computer use and Claude. This took a few prompts now, but we can imagine in the future that Claude will be able to do tasks like this intent.
TL;DR
- An AI agent, Claude, demonstrates its ability to perform a complete website coding task by directly controlling a laptop, browser, and IDE.
- Claude can generate code, interact with local files, start servers, and debug errors by interpreting terminal output and making necessary code changes.
- The demonstration highlights the AI's capability to handle multi-step, interactive coding workflows, even when encountering environmental discrepancies.
Takeaways
- AI agents can directly control a user's laptop, including navigating web browsers and interacting with local applications.
- The AI can generate code based on natural language prompts and render it as output.
- It can download generated files, open them in a local Integrated Development Environment (IDE) like VS Code, and modify them.
- AI agents can interact with the VS Code terminal to execute commands, such as starting a local web server.
- Debugging capabilities allow the AI to read and interpret terminal output to identify errors (e.g., Python version issues) and autonomously apply fixes.
- The AI can utilize IDE features like "Find and Replace" to make targeted modifications to code files.
- Changes made by the AI are saved, and the running application (e.g., local server) automatically reflects these updates.
Vocabulary
Developer Relations— A field focused on building and maintaining relationships between a company and its developer community.AI agent— An artificial intelligence program designed to perform specific tasks, often by interacting with its environment.Artifact— In this context, the visual or rendered output generated from code, often displayed alongside the code itself.VS Code— (Visual Studio Code) A popular, free source-code editor made by Microsoft for Windows, Linux, and macOS.Local server— A web server running on the user's own computer, used for developing and testing websites before deployment.Terminal— A command-line interface (CLI) used to interact with an operating system by typing commands.Terminal output— The text displayed in a command-line interface as a result of executing a command or program.Debugging— The process of finding and resolving errors or defects within computer programs or systems.
Transcript
I'm Alex. I lead developer relations at Anthropic, and today I'm going to be showing you a coding task with Computers. So we're going to be showing Claude doing a website coding task by actually controlling my laptop. But before we start coding, we need an actual website for Claude to make changes to. So let's ask Claude to navigate to claude.ai within my Chrome browser, and ask Claude within claude.ai to create a fun 90s themed personal homepage for itself. Claude opens Chrome, searches for claude.ai, and then types in a prompt asking the other Claude to create a personal homepage for itself. claude.ai returns some code, and that gets nicely rendered in an artifact on the right hand side. That looks great, but I want to make a few changes to the website locally on my own computer. Let's ask Claude to download the file, and then open it up in VS Code. Claude clicks the saved file button, opens up VS Code, and then finds the file within my downloads folder, and opens it up. Perfect. Now that the file is up and running, let's ask Claude to start up a server so that we can actually view the file within our browser. Claude opens up the VS Code terminal, and tries to start a server. But it hits an error. We don't actually have Python installed on our machine. But that's all right, because Claude realizes this by looking at the terminal output, and then tries again with Python 3, which we do have installed on our machine. That works. So now the server is up and running. Now that we have the local server started, we can go manually take a look at the website within the browser, and it looks pretty good. But I noticed that there's actually an error in the terminal output, and we also have this missing file icon at the top here. Let's ask Claude to identify this error, and then fix it within the file. Claude visually reads the terminal output, and then opens up the Find and Replace tool in VS Code to find the line that's throwing actual error. In this case, we just ask Claude to get rid of the error entirely, so it will just delete the whole line. Then Claude will save the file, and automatically rerun the website. So now that the error is gone, let's go take a final look at our website, and we can see that the file icon has disappeared, and the error is gone as well. Perfect. So that's coding with computer use and Claude. This took a few prompts now, but we can imagine in the future that Claude will be able to do tasks like this intent.