BIG Claude Code Update: Web, Mobile, Sandbox!

Okay, so it seems Anthropic have been pushing  updates like crazy to Claude Code because we have   yet another big update. Meanwhile, the OpenAI  Codex team have been taking a nap because we   haven't seen something particularly interesting or  a big update for the last few weeks. But anyways,   we're going to be going through this update  to Claude Code, which includes Claude Code   Web and also a brand new sandbox mode as  well. Now firstly with Claude Code Web,

you can now run Claude Code on the claude. ai  website. And that probably kills a bunch of the   startups that were doing like Claude Code, but  running online. And you can also run it on the   iOS application as well. It's unfortunately not  available on the Android application yet, and I   guess that's a life for being an Android user. But  hey, so if you go to claude. ai, then you can press   a code button and that should take you to a brand  new claude. ai/code. And then during onboarding,   you link up with your GitHub account and then you  choose your default Claude Code environment. And   this is basically for safety when it comes to  coding. And the recommended option is trusted   network access, which means that there's some kind  of like whitelist of domains that are only allowed   when it comes to running Claude Code in the  cloud. And if you click this link down here,   then you can see the list of trusted websites that  they have. And this includes some like container   registries, GitHub, package managers and so forth.   Anyways, let's click on trusted network access.    And then we can pick one of our repositories.   So I'm going to pick the repository for my text   speech application, which is Hyperwhisper. There  will be a coupon code down below for this. So   basically search for Hyperwhisper. And then I  can add a different environment as well. So I   can choose another environment that has no  network access or a custom access with like   allowed domains that can only be accessed. So this  can be particularly good for like enterprises,   which only want to access internal documentations  or something like that. And then you can also set   your environment variable keys, because in some  cases you may have an environment where you have   a build command that has to run, and that  checks if your environment keys are there or   not. And if they're not there, then the build  command fails, and Claude Code can basically   run build commands better because you put in  your environment variables into here. Anyways,   what I want to try doing with Claude Code Web  now is translate the entire landing page of the   application into Japanese. I recently translated  this SwiftUI application to Japanese because I saw   that I was getting purchases from Japan randomly.   So I figured I might as well get more purchases   from Japan by having it in Japanese. Hey, so can  you translate the landing page of the Next. js   application to Japanese, come up with the key  value pairs, and install the relevant packages?    First come up with a plan and then let me know  what you're going to be doing. And if I approve,   then go ahead and do it. So if I press enter, then  there's an option that says enable notifications.    I can enable that and then Claude Code will then  notify me like, Hey, when this is done. And now   you can see it's running right over here. And it  seems that when it gets to a point when it stops,   then I will be able to open this up in the CLI.   Or create a brand new PR for this. And you can   see it's created its own branch here, which is  add-japanese-translation. If I open up iPhone   mirroring, then I can go to the Claude app  and I should be able to see the exact same   thing. So going to code, I can then click on the  session and I can see that this is in progress   and I can also enable notifications on my phone  as well. Allow. And then I will be known or like   notified when this is done. So this is a plan  that I came up with and if I say go for it,

then it gives me a to-do list kind of like the  one that you see on the CLI. So I like how they're   going for the same feel where they have crunching,  moseying, unraveling and so forth. So yeah,   it feels very familiar in a way. Now, I think  that Claude Code Web, which is like Codex CLI Web,   is significantly better for tasks that require  only one or two things, like very small changes   in the sense that you don't require as much back  and forth. When there's a lot of back and forth,   it's better to use it in a CLI or use it  in VS Code or something instead with the   IDE extension. But when there is a very well  defined task such as translating a webpage,   then it's much better to have it running in the  cloud and then you can focus on bigger tasks in   the CLI version instead. Anyways, whilst we're  waiting for this to complete, let's go through the   brand new sandbox mode that they have available.   Hey, so as a short aside, after popular demand,   I made a brand new Claude Code class that's  available. There will be a link down below and   I basically cover every single Claude Code feature  that's available and I'm continuing to update the   class every time a brand new feature comes out.   So it can be pretty useful for you if you want   to master everything to do with Claude Code, or  if you want to train your entire company up in   using Claude Code, everything is covered in this  class, including many of the advanced features.    So if you do want to take your Claude Code skills  to the next level, do check it out. There will be   a link down below. Now, they did write a blog post  about this and they wrote some docs about this as

well. So I'll quickly be going through that. Now  firstly, if you've used a Claude Code CLI before,   then you know that it asks for permissions quite  a lot. And this can get quite annoying over time   because you're always pressing approve, approve,  approve. And eventually it becomes quite dangerous   because some people get tired of approving stuff.   So they just approve everything and then you're   more at risk of a prompt injection or something,  especially if Claude Code is finding things online   or decides to edit a file outside of the workspace  you're currently in. And then maybe Claude Code   comes across a prompt injection online in a repo,  it downloads some like software on your computer,   and then all your crypto is gone or whatever.   So what they introduced is a sandboxing mode,   and I'll show you how to enable it shortly.   Basically creates predefined boundaries in which   Claude Code can work freely instead of having to  ask for permission every time. And this includes   file system isolation, which ensures Claude Code  can only access and modify specific directories,   and also network isolation, which means that  Claude can only connect to approved servers.    And like I said earlier, this can prevent a  prompt-injected Claude from leaking sensitive   information or downloading malware. So basically  what they introduced is a brand new sandboxing   runtime of which the docs are available here and  we'll be going through shortly. And they also made

the same runtime that it uses open source. So you  can see it's available here. If you download it,   then you can also use it in other circumstances,  such as if you replace an NPX command for an MCP   server with SRT instead, then it will sandbox  that particular server, meaning that an MCP   server that you have running locally, such as  in Claude Desktop, can only run like within a   certain folder or only access certain websites.   And they do explain more how this actually works,   but we won't be going through that part in this  video. And then there's some example configuration   for the sandbox as well. And there's some more  information and diagrams on how it works. And   this is exactly what the web version of Claude  Code is running and now we can enable it on our

own version. Anyways, firstly, we want to make  sure we're on the latest version of claude by   doing claude update. And then by running claude  code, we can then see we have a new slash command,   which is /sandbox. So running /sandbox, we can  see that we can then configure it. Right now   it's disabled, so pressing enter. So you can see  we have a couple options here. We have no sandbox,   sandbox bash tool with auto-allow in accept edits  mode and sandbox with regular permissions. And   then we can define more specific permissions.   So let's first go to with regular permissions,   pressed enter. And then if we open up the claude  settings JSON file, we can see currently it looks   kind of like this. So you can see that we have  sandbox enabled and we have auto allow bash if   sandbox is set to false. And that basically means  that it will not auto-approve bash commands when   sandboxed. There are a couple of other properties  here, such as excluded commands, commands that   can run outside the sandbox, such as Docker,  you would still want your Docker server that   you have running locally to start and whatnot.   And then you can set up your own proxies as well   instead of having Claude use their own proxies.   And this can be quite useful if you have like a   corporate proxy and you want to inspect everything  that's actually passing through somehow. Okay,   so in my case, I'm going to add these to excluded  commands, because I want to be able to run Git   and Docker from Claude Code without the sandbox.   So if I then go to sandbox here, paste this in,   excludedCommands, also add git. And the next  thing I want to do is also add local binding   because currently with background tasks, if I try  and run npm run dev via Claude Code, then it will   fail because right now it's off, the default is  off for allowing binding to local ports. So you   can see right now if I tell Claude Code to do npm  run dev in the Next. js folder, then after finding   that folder, it will then say sandbox blocked one  operation use /sandbox to disable the sandbox. And   I don't want to disable the sandbox, but I still  want to be able to run npm run dev. So what I can   do is I can basically copy over this network part,  allowLocalBinding, paste that into here. And this   basically means that allow local binding will  be able to see any Docker containers that I have   running. And as for allowUnixSockets, it means  that it will be able to connect to Docker and like   see anything happening in my Docker containers.   Anyways, so if I close Claude Code, restarted it   to apply those settings again, and then say npm  run dev in the nextjs folder, then you can see   it run completely fine, just as you would expect.   Anyways, so you can use these sandboxing settings   to basically set up like good permissions and  best practice for your organization, especially   when you're using Claude Code, and then have them  synced across everyone's repos because it's in the   settings. local. json file. And as for the other  changes since my last video, we now have a brand

new toggle to enable and disable thinking in the  IDE. So if you use something like VS Code and you   have the Claude Code extension installed, on the  right hand side, you can see there's a stopwatch   kind of icon. And this basically enables and  disables thinking mode when it comes to the Claude   Code VS Code extension. And finally, we have  two more changes here. Claude Code will now ask

you more questions in planning mode more often,  and there's now an interactive question mode. So   I can say something like, using the interactive  question tool, can you give me a quiz? It should   be a math quiz with five different questions. So  it seems to be generating the quiz with that tool,   but it seems the tool only allows up to four  questions at a time, unfortunately. And for some   reason, this particular case, it decides to give  me the answers, but I'm just going to do something   ridiculous. So you can type something else, which  is quite ideal, say 200, and you can see this is   the feedback that it gave me. So unfortunately, I  only got 50%. But the power of this tool actually   comes in when you're prompting it. So in your  claude. md file, for example, or your skills file,   you may tell Claude Code, Hey, can you use an  interactive quiz tool to basically ask me any   more clarifying questions before getting started  with X, Y, or Z? Claude Code will by default use   this tool more often in the planning mode. So if  in planning mode, I say something like, can you   change the color scheme of the landing page? Then  after exploring the project, you can see it will   then ask me some clarifying questions about the  color scheme that I would like. So it gave me some   pretty good questions here about the theme style.   I can also go here, background, accent style,   and it seems it gave me three questions here.   So I think this tool is pretty powerful. Like   Claude Code does tend to be more forgiving when  your plans are not very good, which is especially   good for like new developers. But I think one  small disadvantage is this tool only allows   for up to four questions, unfortunately. And when  you're getting started with a brand new project,   Claude Code may need to ask you like 20 questions  or so forth in planning mode. So you may have   to tell Claude Code, don't use the interactive  quiz tool. Ask me like 20, 30 questions instead,   just as they are. And then you can use a tool  like Hyperwhisper to quickly answer all those   questions. Okay, so now if we go back to the  programming task for translating the landing page

from earlier on in the video, you can see I can  either create a PR out of this. I can't actually   see the code that it changed, unfortunately. So  I think this web version still needs a tiny bit   of work because the Codex CLI version allows you  to see inline diffs and so forth. So I can either   create a PR out of this. And then you can see  it's right over here. I can see the diffs that   it made. And if I press open in CLI, then it will  copy a command to my clipboard so I can hand off   this entire chat history to my local version  of Claude Code. So if I paste in this command,   you can see it says, claude --teleport, then  the session ID, press enter. Then it will,   because it's connected to the same account, it  will then load up the Claude Code project. But   I have to clear my Git working directory. So give  me a second. And now if I run that command again,   you can see this entire session and the session  history has been loaded onto my computer.    So I can continue the session as it is. And  I think that's like a pretty handy powerful   tool. And you can see because in this case, after  resuming the session, the context window is about   50%. It means basically everything like token wise  has been loaded back into the session of Claude   Code. Anyways, those are basically all the updates  for Claude Code today. If you do want to check   out the Claude Code class that I have that covers  basically everything to do with Claude Code, then   it will be linked down below with a coupon code. Use Arrow Up and Arrow Down to select a turn,