WEBVTT 00:00:00.080 --> 00:00:03.980 Obviously, the exact starting screen you'll see will 00:00:04.000 --> 00:00:07.520 will always contain an area where you can insert 00:00:07.580 --> 00:00:11.280 your prompts in the end because you're interacting with an AI. 00:00:11.340 --> 00:00:13.900 So in the end, what you're writing here is a prompt. 00:00:13.920 --> 00:00:17.700 So for example, what I'll do here is I'll start my development server so 00:00:17.800 --> 00:00:21.770 that with that started and running, I can visit the starting page of this 00:00:21.800 --> 00:00:25.500 Next.js app. And then of course, I can go to my Claude Code session 00:00:25.580 --> 00:00:29.419 here and ask it to replace the starting page of this 00:00:29.500 --> 00:00:32.980 Next.js project with a page that says 00:00:33.580 --> 00:00:37.280 "Hello World" centered in the 00:00:37.480 --> 00:00:40.280 middle of the screen, something like this. 00:00:40.460 --> 00:00:44.220 And what's important is that you can be more specific, 00:00:44.240 --> 00:00:48.160 throughout the course, but you can also be pretty vague for 00:00:48.200 --> 00:00:51.880 or tasks. And Claude Code will, 00:00:52.080 --> 00:00:55.780 as you see, if you take a look at what it did, 00:00:55.880 --> 00:00:59.840 does, Claude Code will, for example, search 00:00:59.850 --> 00:01:03.750 through the code base. And here it understands 00:01:03.800 --> 00:01:07.740 that it's in a Next.js project, also because I told it, 00:01:07.780 --> 00:01:10.980 figure that out from the package.json file without me telling it 00:01:11.040 --> 00:01:14.750 to. And then it searched for page TSX files, 00:01:15.000 --> 00:01:18.840 one file, which then of course has to be the 00:01:18.880 --> 00:01:22.480 file, and then it read that file, that one file it found, to 00:01:22.520 --> 00:01:26.200 understand it, to then thereafter write to 00:01:26.240 --> 00:01:29.550 it. Now here, it actually didn't finish the write yet 00:01:29.600 --> 00:01:33.490 because the first time you run Claude in a project, by default, 00:01:33.520 --> 00:01:36.990 it's not running in a mode where you granted it all permissions. 00:01:37.000 --> 00:01:40.120 You can do that, we'll see it, but by default, it's not in that mode. 00:01:40.180 --> 00:01:44.000 So it asks me down here whether I wanted to, uh, 00:01:44.080 --> 00:01:47.980 edit this page TSX file. And it asks me, "Do you want me 00:01:48.080 --> 00:01:52.060 to make this edit?" Now, what's this edit? 00:01:52.120 --> 00:01:55.900 Well, if you're running Claude Code in a 00:01:56.000 --> 00:01:59.820 outside of Visual Studio Code, it should show you the changes it wants to 00:01:59.860 --> 00:02:03.480 make here in that terminal. But since I'm running it inside of Visual 00:02:03.540 --> 00:02:07.480 Code, it actually uses its built-in integration 00:02:07.540 --> 00:02:11.390 editor because Claude Code, despite being a CLI tool, has 00:02:11.440 --> 00:02:15.109 many integrations with various editors, like for example, Visual Studio 00:02:15.120 --> 00:02:18.640 Code. Now, chances are you're not seeing 00:02:18.700 --> 00:02:22.440 using Visual Studio Code, and the reason for that is 00:02:22.480 --> 00:02:25.850 official Claude Code extension for Claude Code to 00:02:25.920 --> 00:02:28.000 interact with Visual Studio Code. 00:02:28.060 --> 00:02:31.860 So in the extensions marketplace in Visual Studio Code, you can search for 00:02:31.920 --> 00:02:35.900 Claude Code and then use that official extension by 00:02:35.940 --> 00:02:39.760 Anthropic and install that. And then in the future, you should get 00:02:39.800 --> 00:02:43.720 this integration and you should get this code comparison 00:02:43.780 --> 00:02:47.399 here. So what it did here is it opened up this div 00:02:47.480 --> 00:02:51.360 editor, this code comparison tool that Visual Studio 00:02:51.420 --> 00:02:54.400 Code also uses for comparing git, uh, commits, for 00:02:54.460 --> 00:02:58.060 example, and it shows us the changes it wants to 00:02:58.080 --> 00:03:01.970 perform. On the left side here, we have 00:03:02.020 --> 00:03:05.820 the, uh, original code file as it was before Claude Code 00:03:05.960 --> 00:03:09.390 did something to it or wanted to do something, uh, to it. 00:03:09.400 --> 00:03:13.300 And then on the right side here, we see the new version of that file, 00:03:13.360 --> 00:03:15.480 so the changes Claude Code wants to make. 00:03:15.500 --> 00:03:19.400 And you see it wants to delete a bunch of code and then simply add 00:03:19.480 --> 00:03:23.390 this, uh, one line here essentially where it outputs 00:03:23.520 --> 00:03:27.080 World." What you can do here in Visual Studio Code with its Claude Code 00:03:27.120 --> 00:03:30.180 integration is you can actually accept this. 00:03:30.190 --> 00:03:34.080 I can also reject the proposed changes, 00:03:34.120 --> 00:03:37.760 but of course, I can also continue in the terminal, 00:03:37.780 --> 00:03:41.220 do and either pick yes, 00:03:41.760 --> 00:03:45.510 or if I know that there might be more changes and I don't want to decide every 00:03:45.640 --> 00:03:49.160 time, I can also choose yes, allow all edits during the 00:03:49.200 --> 00:03:52.980 session, which is typically what you do because 00:03:52.990 --> 00:03:56.310 super annoying if you have a more complex change and it's working on a bunch of 00:03:56.340 --> 00:04:00.230 files to always grant this permission. So here I'll choose the second option. 00:04:00.300 --> 00:04:03.600 Now it does that. Now it also shows me the changes here in 00:04:03.660 --> 00:04:07.460 CLI, and it's done because that was a simple 00:04:07.500 --> 00:04:11.040 task. And with my dev server still up and running, if I go back to this 00:04:11.060 --> 00:04:14.660 page, I now unsurprisingly see "Hello World" 00:04:14.720 --> 00:04:18.579 Now, if you are using Claude Code in Visual 00:04:18.640 --> 00:04:22.580 it has an official integration and you find a link to that integration 00:04:22.680 --> 00:04:26.190 documentation attached, you don't just get 00:04:26.220 --> 00:04:30.140 that preview of the changes it wants to make, you can instead 00:04:30.220 --> 00:04:33.969 also use Claude Code from outside the terminal if you 00:04:34.100 --> 00:04:38.090 want to. If you open the command bar here in Visual 00:04:38.120 --> 00:04:41.980 Code, you can start typing Claude Code and then choose 00:04:42.320 --> 00:04:45.420 focus input, for example. And that will open up a new 00:04:45.500 --> 00:04:49.260 window, which allows you to have your conversation 00:04:49.540 --> 00:04:53.220 in that window. Now you can share your prompt 00:04:53.280 --> 00:04:57.120 here, you can attach files here. You can also copy images into 00:04:57.160 --> 00:05:00.920 your terminal, uh, session with Claude Code if you want 00:05:00.930 --> 00:05:02.810 We'll get back to that later in the course. 00:05:02.820 --> 00:05:06.740 But you could use this interface instead of the terminal interface. 00:05:06.760 --> 00:05:08.770 You can browse your conversations here. 00:05:08.800 --> 00:05:12.380 You can also dive into conversations here you had in the terminal. 00:05:12.400 --> 00:05:15.900 You can start new conversations and you can use this mode 00:05:16.180 --> 00:05:20.100 instead of the terminal. Now for this course, 00:05:20.140 --> 00:05:23.840 works in all editors no matter what you're using, and I like using the 00:05:23.880 --> 00:05:27.760 terminal, but if you absolutely don't like it, 00:05:27.860 --> 00:05:29.000 Code integration.