Claude Code on the web

Claude Code has a new web interface that allows you to select a github repository, give it a prompt, then let it build. It will keep working until it completes the task and then you can come back later and check out the results. I have found this is a great way to get a prototype started or work on a larger change without having to give approvals or tie up your local machine.

I have used GitHub Codespaces in the past and one thing I like is that they will get an environment set up for you based on the type of project. You don’t need to install local tools to run something or even know what you need to install. The other advantage that they have with using something like Claude Code on the web is you can create multiple Codespaces for a single repository. One way to get better results from Claude Code is to give it the same prompt multiple times and compare the results.

Key Takeaways

• AI for Prototyping: Use Claude Code on the web to quickly generate a baseline application from a natural language prompt.
• Instant Environments: Launch a full-featured VS Code environment for any GitHub branch with a single click using GitHub Codespaces.
• Seamless Iteration: Use the Claude Code extension inside a Codespace to debug and add features to the AI-generated code.
• Zero Local Setup: This entire workflow—from idea to a running, publicly accessible app—requires no local software installation other than a web browser.

Generate an app with Claude Code

Running pace calculators are simple, but most of the ones on the web are cluttered or not very user friendly. Let’s see if Claude can do better. I have never used Next.js so I’m going to let it create this application in it and see how it goes. I’m just giving it a prompt in the web and pointing it at a new repository I set up.

After a while it is going to come up with something in a new branch. You can copy the branch name or open a PR in the section at the bottom:

Launch the branch in Codespaces

I’m going to jump back to GitHub and find that branch. If I click on the Code button you can go to the option to open in Codespaces:

This is going to open a tab with my new Codespace. This is great because it looks and works just like VS Code on the desktop.

One thing Claude didn’t give me was a launch file to run the app. I’m going to jump back to the session with Claude Code on the web interface and ask it to build one for me.

Claude is going to make those changes and then push to the same branch. I can jump back to my Codespace and pull the changes from git. It built a few options to run it and seems to have created a duplicate of one.

Once I hit run and it builds I can open the site in a new tab to see the results. There will be a pop-up like this in the bottom right to make it easy to get to the running site.

Everything worked and it runs right from the Codespace!

It kind of works, but the pace is in minutes per mile but says per kilometer.

Add Claude Code to VS Code in a Codespace

I want to get Claude to fix the pace issue. I want to stay in the Codespace so I’ll install the Claude Code extension in VS Code in the Codespace.

The extension doesn’t can’t sign in with the normal callback flow since this is running codespaces, but it provided a link that let me get an auth token.

Now that the extension is installed and I have signed into Claude and can use it inside Codespaces. I prompted Claude to fix those issues and it made changes in the Codespace in the browser. The experience is basically the same as running VS Code locally.

It fixed those bugs and is able to calculate multiple pace targets for me!

Summary

Using Claude Code on the web I was able to vibe code a new running pace calculator website. GitHub Codespaces makes it quick and easy to test and iterate without having to install or run anything locally. I’m able to have a complete development workflow in the web using Codespaces. I’m not sure I love how this pace calculator turned out so I’ll probably keep working on it.