Obviously, the exact starting screen you'll see will
will always contain an area where you can insert
your prompts in the end because you're interacting with an AI.
So in the end, what you're writing here is a prompt.
So for example, what I'll do here is I'll start my development server so
that with that started and running, I can visit the starting page of this
Next.js app. And then of course, I can go to my Claude Code session
here and ask it to replace the starting page of this
Next.js project with a page that says
"Hello World" centered in the
middle of the screen, something like this.
And what's important is that you can be more specific,
throughout the course, but you can also be pretty vague for
or tasks. And Claude Code will,
as you see, if you take a look at what it did,
does, Claude Code will, for example, search
through the code base. And here it understands
that it's in a Next.js project, also because I told it,
figure that out from the package.json file without me telling it
to. And then it searched for page TSX files,
one file, which then of course has to be the
file, and then it read that file, that one file it found, to
understand it, to then thereafter write to
it. Now here, it actually didn't finish the write yet
because the first time you run Claude in a project, by default,
it's not running in a mode where you granted it all permissions.
You can do that, we'll see it, but by default, it's not in that mode.
So it asks me down here whether I wanted to, uh,
edit this page TSX file. And it asks me, "Do you want me
to make this edit?" Now, what's this edit?
Well, if you're running Claude Code in a
outside of Visual Studio Code, it should show you the changes it wants to
make here in that terminal. But since I'm running it inside of Visual
Code, it actually uses its built-in integration
editor because Claude Code, despite being a CLI tool, has
many integrations with various editors, like for example, Visual Studio
Code. Now, chances are you're not seeing
using Visual Studio Code, and the reason for that is
official Claude Code extension for Claude Code to
interact with Visual Studio Code.
So in the extensions marketplace in Visual Studio Code, you can search for
Claude Code and then use that official extension by
Anthropic and install that. And then in the future, you should get
this integration and you should get this code comparison
here. So what it did here is it opened up this div
editor, this code comparison tool that Visual Studio
Code also uses for comparing git, uh, commits, for
example, and it shows us the changes it wants to
perform. On the left side here, we have
the, uh, original code file as it was before Claude Code
did something to it or wanted to do something, uh, to it.
And then on the right side here, we see the new version of that file,
so the changes Claude Code wants to make.
And you see it wants to delete a bunch of code and then simply add
this, uh, one line here essentially where it outputs
World." What you can do here in Visual Studio Code with its Claude Code
integration is you can actually accept this.
I can also reject the proposed changes,
but of course, I can also continue in the terminal,
do and either pick yes,
or if I know that there might be more changes and I don't want to decide every
time, I can also choose yes, allow all edits during the
session, which is typically what you do because
super annoying if you have a more complex change and it's working on a bunch of
files to always grant this permission. So here I'll choose the second option.
Now it does that. Now it also shows me the changes here in
CLI, and it's done because that was a simple
task. And with my dev server still up and running, if I go back to this
page, I now unsurprisingly see "Hello World"
Now, if you are using Claude Code in Visual
it has an official integration and you find a link to that integration
documentation attached, you don't just get
that preview of the changes it wants to make, you can instead
also use Claude Code from outside the terminal if you
want to. If you open the command bar here in Visual
Code, you can start typing Claude Code and then choose
focus input, for example. And that will open up a new
window, which allows you to have your conversation
in that window. Now you can share your prompt
here, you can attach files here. You can also copy images into
your terminal, uh, session with Claude Code if you want
We'll get back to that later in the course.
But you could use this interface instead of the terminal interface.
You can browse your conversations here.
You can also dive into conversations here you had in the terminal.
You can start new conversations and you can use this mode
instead of the terminal. Now for this course,
works in all editors no matter what you're using, and I like using the
terminal, but if you absolutely don't like it,
Code integration.