WEBVTT

00:00:00.080 --> 00:00:04.059
MCP stands for Model Context Protocol,
and it's

00:00:04.220 --> 00:00:07.970
a standard for exposing tools
and resources

00:00:08.039 --> 00:00:11.460
to AI tools, to Claude code or

00:00:11.700 --> 00:00:15.090
similar tools. And there's a broad variety

00:00:15.580 --> 00:00:19.120
of MCP servers you can add to Claude code.

00:00:19.140 --> 00:00:22.900
The official documentation has a list of
some popular options.

00:00:22.910 --> 00:00:26.400
And the idea behind all these MCP servers

00:00:26.500 --> 00:00:30.300
is simply to give Claude code more tools
and more

00:00:30.340 --> 00:00:34.260
resources it can leverage.
And specifically, it will leverage them

00:00:34.340 --> 00:00:38.180
when it needs to just as it will do web
search when it needs to

00:00:38.560 --> 00:00:42.360
or when you tell it to.
And one specific MCP server that can

00:00:42.440 --> 00:00:46.420
be very useful, in my experience,
is the context7 MCP

00:00:46.520 --> 00:00:50.490
server. That is an MCP server
that you can add to Claude

00:00:50.540 --> 00:00:54.200
code that gives Claude code easier access

00:00:54.340 --> 00:00:57.540
to official documentation of libraries.

00:00:58.480 --> 00:01:01.280
That's the entire idea behind that server.

00:01:01.320 --> 00:01:04.720
It makes browsing documentation for Claude
code

00:01:05.120 --> 00:01:08.020
way easier. On that MCP

00:01:08.140 --> 00:01:11.500
server GitHub page,
you also find installation

00:01:11.510 --> 00:01:15.210
instructions for Claude code,
and of course, you find a link to

00:01:15.260 --> 00:01:19.080
that GitHub page attached.
And all you need to do

00:01:19.140 --> 00:01:22.770
is copy this command here, go back to your

00:01:22.880 --> 00:01:26.820
system, open a terminal,
and then you wanna run this command.

00:01:26.880 --> 00:01:29.840
Important,
you can remove this API key part here.

00:01:29.880 --> 00:01:33.840
You can pay for this server to get higher
access limits, but

00:01:33.900 --> 00:01:37.420
you can also use it for free,
at least at the point of time where I'm

00:01:37.440 --> 00:01:41.380
this. So if you now hit Enter,
this will install this

00:01:41.460 --> 00:01:45.440
MCP server to Claude code. And
if you thereafter open Claude

00:01:45.500 --> 00:01:49.220
code and you run /mcp, you should see this

00:01:49.580 --> 00:01:53.260
MCP server as installed. Now,
if you want to

00:01:53.300 --> 00:01:57.060
install this MCP server not just locally

00:01:57.100 --> 00:02:01.070
but globally so that all your projects
have access to it, you can add

00:02:01.100 --> 00:02:04.140
the --scope flag here

00:02:05.100 --> 00:02:09.000
and set that to user. So if I run this,
this gets added

00:02:09.120 --> 00:02:13.100
as a global MCP server to my system,
so now that all my

00:02:13.140 --> 00:02:17.040
projects can use it. Now, with
that MCP server installed,

00:02:17.080 --> 00:02:19.360
Claude code can browse this documentation.

00:02:19.400 --> 00:02:23.380
What I'll do here is I'll copy my prompt
and actually

00:02:23.420 --> 00:02:26.720
close this Claude code instance by
pressing Control C twice,

00:02:27.740 --> 00:02:31.650
and then I'll restart it here
and paste that back in,

00:02:31.920 --> 00:02:35.870
formatting is a bit broken
but that's not too bad, so

00:02:35.900 --> 00:02:39.130
code also has access to the installed MCP
servers.

00:02:39.160 --> 00:02:42.260
At the bottom, I'll say use web search
or the

00:02:42.300 --> 00:02:46.240
context7 MCP to find relevant
documentation.

00:02:46.280 --> 00:02:50.060
So I'll simply give Claude code one other
tool for

00:02:50.120 --> 00:02:53.760
exploring and finding the relevant context
it needs for

00:02:53.880 --> 00:02:57.760
this prompt. Now, as mentioned, you can,
if you know which

00:02:57.800 --> 00:03:01.150
sources are needed,
absolutely copy them in by hand.

00:03:01.200 --> 00:03:04.960
That's the safest way of ensuring
that just the right information is

00:03:05.020 --> 00:03:08.769
available. So, that
is absolutely something you wanna do.

00:03:08.780 --> 00:03:12.650
But if you don't know exactly
which documentation articles are

00:03:12.700 --> 00:03:16.540
relevant and you don't wanna look it up
right now, you can also rely

00:03:16.600 --> 00:03:20.280
on web search and MCP servers like the
context7 MCP

00:03:20.360 --> 00:03:24.280
server. With that,
I'll switch to plan mode

00:03:24.320 --> 00:03:28.260
Claude code do its thing
and use these tools to

00:03:28.300 --> 00:03:31.720
find the relevant documentation
and make a plan for implementing the

00:03:31.760 --> 00:03:35.640
database and authentication. Now, here,
since it's the first time

00:03:35.700 --> 00:03:39.660
it's using that MCP server,
it's asking me for permission, and

00:03:39.720 --> 00:03:43.520
yeah,
I don't wanna get asked again for the

00:03:43.560 --> 00:03:46.160
It's a good sign though
that it wants to use it, of course.

00:03:46.220 --> 00:03:49.660
And here, I'm not sure why the display
is broken like

00:03:49.720 --> 00:03:53.640
this. It works to some degree
if I highlight it, but it

00:03:53.700 --> 00:03:57.600
now made a plan and I can see
that it correctly wants

00:03:57.620 --> 00:04:01.520
to import the database class from bun
SQLite

00:04:01.540 --> 00:04:05.440
and set up a database,
run some queries to use WAL

00:04:05.520 --> 00:04:09.160
mode, which is better for performance, and

00:04:09.280 --> 00:04:12.640
then also set up the tables for user,

00:04:12.720 --> 00:04:16.500
session, account, verification,

00:04:16.579 --> 00:04:20.140
and also notes, which
are the tables I have in my spec.md

00:04:20.240 --> 00:04:23.940
file. Then it also creates some indexes

00:04:24.580 --> 00:04:28.340
and then it sets up the auth.ts file where
it wants to use the

00:04:28.360 --> 00:04:31.960
database handle from the db.ts file,
set up an auth client file, which

00:04:31.980 --> 00:04:35.740
BetterAuth indeed recommends in their
documentation, set up a

00:04:35.780 --> 00:04:39.480
auth cache-all route,
which BetterAuth indeed needs with the

00:04:39.520 --> 00:04:43.420
to-next-js handler,
which BetterAuth also needs,

00:04:43.480 --> 00:04:47.040
in a lib folder. So
that plan looks good to me,

00:04:47.080 --> 00:04:51.000
like this. I wanna clear the context
and auto-accept edits and let

00:04:51.040 --> 00:04:54.940
it do its thing. And, of course,
the fact that we have a

00:04:54.960 --> 00:04:58.940
good plan here is because we used plan
mode, but we also

00:04:59.060 --> 00:05:02.640
gave it some relevant instructions
and context now

00:05:03.000 --> 00:05:06.650
by clearly pointing it at its web search
tool and by giving

00:05:06.680 --> 00:05:10.300
it this extra documentation-focused MCP,
the

00:05:10.340 --> 00:05:14.000
context7 MCP.
And it wants to start the development

00:05:14.060 --> 00:05:17.680
server to verify this,
but I don't want that, so I'll say no.

00:05:17.690 --> 00:05:21.640
And what you can always do
if you decline or also if you

00:05:21.720 --> 00:05:25.540
allow something,
is you can hit Tab with

00:05:25.600 --> 00:05:29.240
extra information, so for example,
a reason why you don't grant that,

00:05:29.320 --> 00:05:31.500
also provide extra information
if you do grant it.

00:05:31.520 --> 00:05:35.200
So here I'll say I'll run the dev server
myself, just to check for TypeScript

00:05:35.240 --> 00:05:39.120
linting and build errors. And therefore,
it now does run the lint

00:05:39.200 --> 00:05:43.010
command, the build command, and it's done.

00:05:43.060 --> 00:05:47.000
So now I reloaded this
and resumed this conversation to get rid

00:05:47.020 --> 00:05:50.630
glitches,
but it did now indeed successfully go

00:05:50.660 --> 00:05:52.300
plan.