we are going between agent edit
and ask to kind of show how you can use
these three different modes.
ask is really good at talking
through changes that you want to do.
Edit mode is for those specific changes
that you want.
And then agent mode
is when you just want to vibe,
So you just use Agent Mode
to get it done for you.
Agent mode is just so good.
Honestly. Yes.
Oh my goodness.
Hi everyone.
I'm Kate Asia and I'm here with John.
And today what are we doing John.
I think we're going to take a look
at the whole bunch of different models
that are available inside copilot.
And we're going to
just try them out in the different modes.
So there's, ask mode
where we can just ask questions,
get responses from Copilot.
There's edit mode
where we can pull in a bunch of files
and do mass edits, refactor
changes across them.
And then there's agent mode
which is really great.
and this is one of my favorite ways
to, to do prompting for agent mode.
Right.
Because what it does, it takes
really a fairly large prompt, usually,
pretty descriptive
about a number of different things
you want to do.
And it's going to run through it.
It's going to pause every now
and then kind of ask
if it's doing the right thing,
tell us what it wants to do next.
Go ahead and do more.
And then we get
to kind of check in with it
and see how the progress is going
each time.
But one of the keys to
that is having
a really good solid prompt.
So yes,
it's kind of my standard
for how I tend to do it
nowadays,
where I actually just put the prompt
into a read, me and, you know, just just
so our audience knows,
this is not my first cut at this, right?
Meaning
I was kind of working with copilot
and saying, like, okay,
this is what I want to do,
but help me refine this.
Read me
basically making it a full PDF
for product requirement stock,
and putting all the things in there
that we would need
and then testing it out
a little bit to see what things were good
and what things were weren't.
I imagine that's a lot of what
a lot of the developers out
there are hitting, right.
It's just kind of
tuning their prompts properly.
So yes, the situation they're in.
So it's like using Copilot
to create that PRD,
to use Copilot to build
the app based on the PRD, I love it.
so what we've got here then
is, is this read me now,
which really contains
all the stuff
that I'm gonna feed into copilot.
And I guess you're going to do with it
all, and we'll see how it goes.
It's a basic travel
reservation app, you know?
So, I want to view hotel rooms.
I want to be able to make
a reservation, etc..
And intentionally we're
keeping the technology stack
really simple here, right?
Obviously more complex.
This isn't the way you do it
in a real production app.
I'm like,
loading Vue.js from a car
and I don't have a build step
for the front end, that kind of stuff.
It's okay.
Okay, we want it to be fast
so our viewers don't have to wait forever
for a million,
you know, node modules
to pull down and install and all of that.
And we've got some specific instructions.
This is something I really like to do
where I'm going to initially outline
what the project structure
is going to be.
Now, some of the models
that we're going to play with,
except visual inputs too.
So I could just as a visual diagram,
but you know, for now
I'm just doing it in markdown here
so that the models can read it.
And I really love that,
you know, you've structured
the read me this way
because sometimes when I ask agent mode
with whichever model to,
you know, to spin up a react
app or spin up a Vue
app, it's not able to do it accurately.
So I think having this project structure
to tell it, hey, here's
exactly how I want you to do this.
I think that's going
to make a difference.
I'm curious to see how that works.
Plus, it's
an opportunity for us as developers
to kind of make thing to content
if we like to have it structured
because we all have a
different preferences
where exactly
we want our templates, where we want,
you know,
our virtual end to exist,
Every good read. Me too.
Always has set up instructions.
And that's useful for us as humans,
because of course,
we're going to want to be able to go in
and set up this project elsewhere.
But it's also really useful to the model
because it can look through this
and I can get hints as to some
I want like,
you know,
I'm saying
explicitly here,
like you're going to set up
a Python virtual environment.
Best practice right?
So hopefully we will run it through.
It'll actually go and do that for us.
how is the read me
right and copilot instructions.
How are these two different.
So in the instructions we have like
operator interaction security environment
variables version control code styling.
So it's essentially
like guiding the model
on how you wanted to build the app
testing requirements.
Python projects I can see.
So like the read me is the PRD
essentially where you're like,
hey, here's what we're building.
Here is a tech stack.
And then in the instructions
you went ahead and gave it
like specific guidelines
on what you want,
the shape of the code to be.
Yeah.
And the
instructions are something
I'll actually end up reusing
between projects often. Right.
So if people haven't used
copilot instructions yet,
I think to know about it,
is it basically
it's kind of like the pre prompt.
Like before you begin
any interaction session
with copilot,
it's going to have that already there.
It's going to know the instructions file.
So when you're working on one project
you put in their stuff
that you want to apply kind of
to every interaction you have.
But you also want to narrow it down.
So, you know, that's why there's that.
Like for Python projects,
only if I happen doing a step
that's not related to Python,
it should basically
just ignore that section
because it's not going to be relevant.
But then the other thing
is I'll take this
and I'll take the same
copilot instructions file.
And it's just one of those things
I seed into any new project,
and I might adjust it,
but there's certain things
that I'm going to want
always to be the same. Right?
For sure.
So here's one that I
that I think is kind of fun.
I picked this up
from someone actually, at a conference
a little while ago.
And this has copilots working.
I want a history of what it's doing.
Right.
Because eventually that chat session
is going to go away.
You know, I'm going to restart vs code.
I'm going to clear it out
and do something else.
I want an actual record,
not just of the actual commits,
but of the actual changes
that occurred locally
before I even necessarily
committed anything.
So I just tell it.
Hey, make of changelog.md
and then each time you do something,
add on to that changelog.
And that just gives me a history.
I can see.
Love it.
I've never seen this before
and now that I'm looking at it,
it makes so much sense.
It makes so much,
so much sense
to have it do its own
versioning on the of the changes
that it's doing.
But should we like,
get into building something?
Let's we've talked enough.
Let's let's make this happen. All right.
What model do you want
to play with today.
So I've been partial towards cloud 3.5.
For some reason
I tend to get the best results from 30.5,
but I am open. But okay.
So I can start with 3.5.
And you can do.
Yeah.
I'll, and actually
before I even pick, why don't
why don't we point out to right here
I'm looking in ask mode.
Uhhuh. And there's three modes, right.
There's there's ask, there's edit
and there's agent. Right.
So an ask mode,
you have the largest breadth
of selection for your models.
So yes we could do this
list is a lot bigger
when you move into Agent mode
you get a subset of certain models.
Just don't work in agent mode. Right.
Okay.
So this is what we have to work from
for now.
And then we'll go and play
with the others and ask mode later,
I guess.
So let me do three five.
You know what?
Let's let's give people a preview. Right?
I've got my 2.5 pro.
Right. Let's do it.
Only came out recently.
Eventually this will move out,
you know, hopefully to, GA.
But for now,
we've got internal access to it.
GitHub. So why not?
All right.
I think what I'm going to do
is I'm just going to highlight
the readme to give it focus.
And then I'm just going to say
implement this.
Oh type.
That's very
I'm going to I'm
going to do the same thing.
I've never been so like two words.
Let's see what happens.
Well I'm able to do this okay.
So boop.
All right.
So so far already.
You know you can see
code is already like writing stuff
like it's. Yeah.
And it's telling me, of course,
what to use for references,
which is just the copilot instructions
for now. Right.
So, Claude,
it looks like he's
going right to building. Yes.
LS 2.5 Pro is kind of giving me
a description.
A pretty heavy description
of what it's plan it's going to be.
Not going to lie, I'm liking what Gemini
2.5 Pro did before
it went into that terminal command.
Right. Yeah.
And you know I always like to point out
with these two
you're about to hit continue right there.
Copilot can access the terminal,
but only when you give it permission to.
So it's not gonna, like, run off
and do a whole bunch of stuff
on your machine without you asking.
It's going to pause there and say,
okay, this is the command
I want to execute.
Do I have permission to go ahead?
I think that's hugely important.
I think so too.
All right.
So we're both seeing here we've got
we've got files that are appearing.
Yeah.
And we've got the option to keep or undo
any of those individually.
But also,
to keep or undo them in unmasks.
Right.
So I'm liking what it's built so far
and I'm going to keep those, but,
no, I know, so Clyde is still going in
Gemini Star
GPT why is why does that happen?
It's in preview mode.
So hey, you know the the hosting.
This is one of the reason
we dogfood things
internally, right,
is because sometimes they break
and we have to figure out why.
I have seen this happen before,
and I have a feeling it's
because, you know,
we have certain internal quotas
and that sort of thing that we can use.
So I might have hit it, but,
I can actually just try
telling it to continue
and see if it's able to
pick up from where it was.
Maybe. Okay.
If not, I mean,
and this is one of those things
with the gentle coding, right?
It builds so much stuff,
I I'd be afraid
if it didn't work here and continue.
I could just undo all of these,
wipe it all out.
I still got my read
me there and just start over and it's
back.
Just choose a different agent
and go again, right?
Exactly.
So I'm still working.
Claude is still going.
It's going nuts. Let's.
Let's watch.
Cheers for what it looks like
Gemini spinning back up
and so set up for a while.
So now Claude has started the server
like it's.
Oh, you're actually at the point
of executing right now. That's great.
All right, what do we got?
Okay, I'll just open.
I'm gonna try.
I see we've got an,
python at the top.
Like, in the data Json structure.
We asked it
to make a single main.js
and a single index HTML.
I'm going to guess for now.
It probably put
the CSS embedded in the HTML,
or it's just using the base
tailwind styling.
I don't know.
Yeah. Let's try it out.
It's keeps opening in the wrong
browser window.
So I'm just going to copy paste here.
All right.
We can't.
Yeah.
Let's see.
Okay I need to zoom in here to see
unexpected token.
See the end here in
that CSS should not be used in okay.
So I'm not too worried about that.
I actually saw that during testing.
And it's basically
just because we're doing unexpected
like loading and tailwind.
So it's actually this one.
It's actually that one.
Yeah. Yeah. All right.
Well I mean this gives us a chance to
to show off
one of our favorite things about copilot.
Right.
Which is when you hit a bug like this,
you can just ask it
what's going on and have it. Yeah.
A solution,
exactly what I was going to do.
So I got this error
and then you just paste it.
Something else
I like to do is
I like to just like
actually take a screenshot
and just paste it.
Oh, nice. Yes.
And then just pop it in and. Yeah.
Claude does take that visual input.
So like,
if you're using like,
I think or for mini
or for mini does not take visual input
and you'll see it by like
like it crosses it out out there
to indicate like inaugural.
I cannot see that.
Oh that is so cool.
I hadn't noticed that little UI change.
We should probably point out
to people too.
I bet a lot of
folks are used to dragging
and dropping
from their file tree
in vs code into the chat.
But the files
you drop in as you just demonstrate
don't actually have to be
in your project.
Like you can pull a file
from anywhere on your computer,
drag, drop it onto the the chat window,
and that's going to make it
available to the interaction.
All right.
So you've been doing all this.
Gemini has finally gotten to the point
where I can run now.
All right.
So it's setting up
my virtual environment.
Yay.
It's built a whole bunch of files.
That's I
call out
because I
don't believe
could set up a virtual environment.
unless it did, and I.
I was just vibing too hard.
I think,
yeah, it did.
It's right here.
Okay.
So it's one of the first things
that it did was to create that.
Okay.
All right.
So someone thinks it's done
but I didn't see it.
Okay. Execute.
What I'm going to do though, I know it's
12 told me what I have to do. Right.
So I'm just going to go
into a new terminal window
and I'm just going to execute,
so I'll activate my virtual environment
and then I'll fire a python.
Come on, little terminal. What?
Don't you love me
so, so far while you're doing that, I.
You can see why I tend to stick with
cloud 3.5 on it.
Because for me, I get the best ones.
I've been getting the best results using.
Quote 3.5.
You know,
and that is what I tend to use a lot.
I think part of it is like it's
just the right balance
of like speed, precision.
Right. Okay, there we go.
All right.
Because, yeah, like, I don't know.
We'll see
if Gemini's result is a lot better,
I don't know.
Oh, does it load on the first try?
Yeah.
Okay.
Oh, I just didn't,
I didn't do
my pep,
requirements install, that's all.
Fortunately,
I know, I know what that is, so.
Okay, actually, though,
I'm going to do it
the right way, right at the right way,
which is, I like to
I like to trust my, brain.
I know what it does.
But at the same time,
I like to see how the model reacts.
Yeah. Okay.
So I'm going to feed it back that error
and hopefully it tells me
I need to do a pip3
install of the requirements
file or something like that.
Uhhuh.
No, no. Okay. What.
All right.
Well.
I know
I'll check what we have here.
Yeah.
Did I resolve the error?
I did not okay,
so we might have a little bit of a
more debugging to do.
One did it,
did it save the file after it changed it?
Yeah. It did. Okay.
So I've had that problem
occasionally where
there's a, there's a
I guess the viewers should know,
there's the keep step.
But sometimes you also have
to manually save the file
or do a save all I found,
just to actually get it down to disk.
Yeah. It's all saved.
Yeah.
We kind of want to see
what the model can do. So.
Okay, while you're doing that,
I've got mine spun up.
So let's take a look. All.
This is fun.
Oh, did all of this gives me
an opportunity to talk about this?
By the way, since it's here, it's like,
So Cassidy recently wrote a great blog
post called which I models
I use with GitHub Copilot. Right.
So you're watching this gem here,
but if you want like her opinions
about what models are good for,
what she's got a nice little Tldr
breakdown
and then talking about each one, right?
Let's see, let's see.
All right. Okay.
So so close.
I know the witnesses, though. Okay, cool.
You know,
and I'll we'll see what
it we'll see what it does
when I give it the input.
But,
just to talk through that for viewers,
Jinja is,
generally server
side templating language,
and it uses a very similar syntax
to, what Vue.js does.
So when you just dump them
both into a single file,
it can be a little confusing
for the interpreters
as to which thing it's
supposed to interpret in which context.
So it'll probably have to do
some escaping here. Yeah.
To protect, the server side,
rendering engine from the components
that are only supposed to be interpreted
on the front end by Vue, I see.
Okay, there we go.
So yeah, it's it's it's wrapping.
It's going to wrap some stuff in raw.
It looks like.
And let's I
don't know if I need to reload or not.
Let's see if that takes.
Yes.
Oh my goodness.
All right.
And, so so I have the same error.
I'm so impressed. Okay.
So Gemini was able to, to do it
and it resolved
whatever error you had on the first go.
Meanwhile, like quad cloudy Tokyo
has been has not been able to identify
the unexpected
token on line 131 in Main.js right.
Is this one of these places
where we need.
And that's the actual line, right?
Yeah, this is the line.
So I'm kind of looking to see
I could also change the model.
Yeah, yeah.
Opportunity for us to find out.
Which one should I use?
Oh, well,
I mean, two fives when performing well,
but we've also kind of shown it off
three, seven.
I know I was going to go,
I was going to go three seven thinking.
And now we can ask. Right.
Okay.
We can say like what is wrong with this?
What is wrong with the highlighted line.
Yeah.
And maybe we give it
the, the error message.
We're saying, yeah, okay.
All right.
Let's see.
And so let's see.
So it's referencing the instructions
and then it references Main.js.
All right.
So it's thinking you know
thinking takes time. It does.
But you know it's crazy.
Like sometimes
I feel like the models are slow,
but are they slow?
I don't think so.
I think it's just like we're impatient.
Impatient?
We want wanted to be like a microwave.
We've gotten
so used to having our answers right now.
I don't
if I could build this much this quickly
20 years ago, I would have been listen,
craziness.
Okay.
All right. Okay.
Now, what I love about this is,
unlike the others,
which are just like,
okay, I'll rewrite it,
and they kind of give a brief,
a deep explanation.
So now
it's saying it's
because there is a space,
but I just added this space.
So, remove the problematic space,
adds a formatting method
for better maintainability.
All right.
I'm just going to do this.
How about that?
Oh, if I do apply an editor from here.
Yeah.
Let's see
if it will intelligently know
where to apply these changes.
Yeah okay.
What would you have done.
You know, probably just because I've,
I've seen this a couple times.
Probably I would have asked it
if room dot price
is actually a valid variable
like it's awesome.
Price isn't in the data model.
And so sometimes I've seen syntax errors
where it really should be telling you
price doesn't exist.
But inside is
just like the dot is invalid
because it doesn't know how to descend.
I was going to say
I would expect a different error
if it wasn't a valid.
Yeah yeah yeah yeah.
So that I mean that's just conjecture.
I don't know for sure,
but I like this because it actually
we'll see whether it's able
to call that format price
method properly.
So we'll know whether it's actually
getting through the template.
Let's saying,
you know this is my first time using Vue
as well.
I, I have not touched
feeling a little while,
which seems like it's, it's yeah.
Persisting.
can you click on into the main
JS line one.
Yeah. That's a good.
Yeah. It's the same one thing.
One. It's not clear in the cache.
That's our whole problem.
And this is, this is where the I'm
is they don't have full awareness
of what's going on.
We still have to think, I don't know.
We can just ask it.
We can just say, like,
it looks like the browser's
and clearing the cache. Yeah.
Oh, you want me to ask it?
Yeah.
I just want to see because, like,
okay, in case
developers haven't used this before,
if you're in dev mode in Chrome,
if you are here, console open right
then when you control
hold down that refresh button.
What what you just showed
is that refresh button on Chrome
has extra options.
It's got the extra empty relived.
But can we get
can we get them all to know that
that's true
and to let's see let's find out.
So what do you
what do you suggest I put here.
Something like
it looks like the pages and changing.
Even though we've saved it,
the browser still has the old template
or something like that.
Let's see.
I wonder if you're thinking,
Think for me.
Glad you know what?
I'm going to say the same thing in mind.
Okay,
so that was
I was going to say, I want to say, yeah.
So let's see, who should I do this with?
Let's go into ask mode and I'll pick.
You know what?
Let's go with Copilot Base right now
in case in case
we're playing around
with naming conventions and stuff.
This is internal only I think right now
copilot base goes to like, or one
I think 4.1. Yeah. Yeah. Okay.
So this is really for one responding
just so viewers now it's fine
for template.
But you know, this is
this is also proving that,
you know, when you take time to think
through your process logically,
write down all your steps
of what you're going to do,
you'll get better results. Right?
Because Gemini 2.5
went into thinking, planning
and then started coding.
Club 3.5 said yes,
okay, I'm gonna do it here. Go.
Right. Yeah.
It was it's interesting.
And you know,
I don't get me wrong,
I've had great success with cloud 3.5.
Yes, it is more limited.
It doesn't go as deep.
It doesn't give
as much of a reasoning step
ahead of time.
And it sometimes
feels like for very complex cases,
I still need a bigger model.
all right okay.
So you got some results.
I've got some results.
Good.
Then refresh the browser.
See the changes aren't showing up
because you modified the source file.
Okay.
And then what's your step
by step solution.
Okay. This change looks identical.
This is great.
So boom 437 I'm looking in GPG for one.
They both said okay.
First make sure that the changes
are actually there
and copy
your your main JS file
into the static directory. Yeah.
And then does
your give us the commands to copy
for Windows and Mac.
Very very good. Okay.
Then it says refresh
your browser browser.
Yeah.
And in mine it gives me a hard refresh.
You know.
Oh nice.
Okay. Yours does.
And then it gives me,
give me some like, you know,
you can set up a file watcher.
All right.
So let's clear cache and see.
But that was good that so three
seven did not say clear cache
okay.
But maybe it's
maybe that earlier step is the right one
that maybe the
the copying it into the static.
Maybe that's not
actually maybe that's
not a bad suggestion.
So which I could see because,
you know, again,
we're not really running this
the right way.
We're not running with the build
step on the front end. Yeah.
This is why it's using the
static directory. I think.
So copied.
There we go.
Oh, yeah.
Oh, right. Okay.
So we don't know which step
which was the right.
I think it was somewhere in there.
I think it was the copy
because when I didn't copy
and I was just like okay,
you didn't tell me to.
You didn't tell me to clear cache.
Let me just clear the cache.
Clear in the cache did not work.
It's after
I copied
and clear the cache that it worked.
So it actually solve the issue.
It did solve the issue.
That's awesome.
And, it's advice on, like,
how to clear the cache.
Yes, how to fix it
turns out to both have been right.
Turns out to both have been right.
So thank you.
So,
by the way, that you were asking
about debugging, right.
And it did
a good answer to said, okay,
you can set flask
debug in your env file, which.
Right.
So I'm just asking it,
can I do it
without setting anything in the file?
And those results suck.
So if there is a
dash up on the command on the actual same
line, it it doesn't know.
All right.
Okay. So we both have a working app.
Awesome. Awesome.
they actually look really,
really similar, right?
They actually do slightly
different data assumptions, but whatever.
And I assume a lot of that's
just because it's like basic tailwind
styling, right?
Yeah.
And look, I have some price here.
Oh yeah.
Very interesting.
So let's see room.
Let's see if we can book anything.
Yeah.
The date picker.
Does it work? Okay.
I mean, just using like the same.
Yeah. The same. Yeah.
It's the same style. Yeah.
Which is good because.
Oh, reservation created successfully.
Yay. All right. Yep.
Did it for me.
Weird that it's using the numbers
for the results, but, Oh, interesting.
also interesting that the ID
is showing up on the UI, right.
Which like, it should be.
Okay. So let's let's do it.
Let's let's fix it up.
Because,
you know, what we've shown here
is actually a fairly unusual case.
Like most developers,
they're they're working on brownfield,
the recount stuff that's already there,
not Greenfield
building an app from scratch. True.
You only do that once in theory,
in the lifetime of an app.
So I like this idea
of now we should refine it. Right.
So I could say something like, hey,
the IDs aren't shouldn't be showing.
And then I like the ear shows price,
so I'll ask it that too.
Okay.
You know what?
Let let's try out.
Let's try, copilot based GPT for one.
It did so
well on the first step,
I'm going to go into edit mode.
I think it's what I'm going to do.
All right
I'll follow your then edit mode.
Oh.
If I go to edit mode
let me hit done edit mode okay.
What are we doing. What are we doing.
So I'm going to I'm going to ask it
to remove the IDs okay.
Add the price okay.
Go ahead okay.
All right.
So I'm going to I'm going to grab
basically just
everything I think
is going to be relevant.
Like I don't think
the env matters for this,
but probably the static
the templates are going to be important
that the change log obviously
while the data makes it
I don't know if it has price in there.
And I
wonder if I include the readme,
I wonder if it'll adjust the read me.
So okay, all of those into my context.
So I before you keep going,
I want to call this out.
So with eight with with edit mode,
it's important
to drag your files
into the context window.
Edit mode is going to iterate
through anything.
I've given it as context, but unlike
agent mode
which like will automatically expand
the context, right?
I don't think edit mode
auto expands context.
I think that's
yeah,
I think that's why I'm calling it out.
So I just want, you know,
if you're when you're watching this,
I want you to know
that when you're using edit mode,
you have to give it access
to those files
and folders
that you wanted to be able to edit.
Otherwise, I don't think it finds it
automagically. Right?
I don't think so.
Yeah, I don't think so.
And that's intentional.
Okay.
Cool. So yeah, that context matters.
There we go.
I should
yeah.
And also at workspace
doesn't work, right.
We can show that in in ask mode,
but in ask mode,
if you just want to include
everything you can say at workspace.
And it's
basically give it access
to all the files
inside the VS code workspace.
Edit mode that's not available.
It's explicit addition
as you said of the file. Okay.
So I'm just going to tell to do things
like let's
improve this up
one.
Remove the reservation
IDs.
The front end.
Just and say page
and let me be explicit
and say the visible IDs
like I don't want to do anything
like remove
the IDs and I have to infer what they
are on the back end. Right,
right.
It's just from the front end page.
Yeah. Exactly. Right.
To, price to the room
lists,
available to the room types.
Again.
Okay.
Let's see what it does.
So I can
we can actually start
to see what it's doing here. Right.
Like it has a whole bunch of directories
available as well as specific files.
So you can see it's
even searching for explicitly
like where it reservations,
where the residents of those
and then
including only those
matching files in the context.
Yeah, kind of cool.
All right.
So I'm really glad
I dropped in my data Json.
We had told it in the read me for now,
we're not using a database,
we're just using a Json file
because it's simple and easy. Right?
And we gave it some mock data
and I,
I in the read
me maybe I didn't actually include price
in there and just see.
Yeah.
So so it like your model inferred it.
But mine decided not to add that
because I didn't see it
initially in there.
So now it's actually adding it to that
Json structure.
Nice.
It's helpfully added a changelog entry
as we asked it too. Nice.
Oh yeah, the changelog.
It's putting the price into the the HTML
right there. Great.
And it's updated the JavaScript.
I don't actually see
any changes in there.
That's interesting
because I think there would be well,
there isn't a full ORM here,
but I wonder if we're gonna
run into a problem. Where is price? Not?
We may have to come back
and do something manually.
I don't know,
I see, I'll keep this and just reload
there.
Okay.
No. It's good.
So we got a price, for both of them.
And the IDs are gone.
Perfect. Exactly. What?
Yeah,
I actually
like how your UI is styled better,
because I would much rather
this cancel button
to be on the side over here.
I think that's pretty
standard in industry.
And I don't know, something
about the space thing.
And
I don't know, there's something
that I'm
I'm vibing with
more on your page than this.
We can try this. Right.
We were talking about
visual inputs, right.
You can see my screen.
Do you want to see us?
And that. All right,
let's see.
Because another call out I had was,
this model did not, I lost a screenshot.
I'll just do it again.
It did not include
anything in the changelog.
It's not doing it.
It did not do it.
That's right.
Now I wonder why should we?
Should we try one other thing
while you're working?
Yeah, sure.
It's actually reading
the copilot instructions.
Right.
We could put something like
talk like a pirate at the top
so that we can actually see the action
that is obeying the copilot instructions.
But it was.
You see the suggestion,
follow the instructions.
Yes,
but with a focus on code quality
and maintainability.
Why not?
But, Yeah, let's see
if it's actually doing that.
And hopefully I understand,
the language.
Just a little.
So I'm
going to go to,
I'm just going to go to Agent mode
and I'm gonna screenshot
your UI.
And we're going to pop it in here.
And who do we go with.
Do I go,
well let's see, I know Gemini two flash.
We know Claude 3.5, sonnet and GP2 four.
Oh, well, visual inputs.
So let's try Gemini.
Okay.
And, you know, even Gemini Flash
I think will do. We want to play okay.
Oh, it's not an easy mode.
Of course. Yeah, yeah.
Sorry. My bad.
No no no.
So I want to say like what would I say.
Like I think I would just
update UI to reflect the new design.
I don't know,
it's not that new,
but that's all I would say.
What would you say?
No, I think that's perfect.
Yeah, but it.
So let's see if it talks
like a parrot to see
if it's actually you see the reference.
It's saying here.
Yes. I mean right.
So it says it's pulling it in.
So how many changes do you have in your,
changelog? I'm curious.
Great question.
It
it looks like
it's been pretty good about it.
Like I've got my initial commit.
I, I wow. Yeah.
Fixing the ginger problem.
I've got, Whoops.
Sorry.
I've got.
Input validation.
The template change.
Yeah.
Now it looks it looks complete to me.
Amazing.
So again,
I'm not sure
why it's not updating the changelog here,
but it is talking like a pirate.
Ahoy there.
But I see
you want the UI
to match the design you've shared.
You've shared.
Okay, so it is
doing it good.
Now this is interesting.
You asked for a
UI change,
but it's changing the data structure.
Whoa.
It's going above and beyond,
but not necessarily in a good way.
Unless you know what it did,
it's pulling the data out of the
the design as well as the layout.
Oh, right.
I wonder,
so we could go with this
and roll with it,
or we could cancel
this run, undo
everything that it's about to change,
and then say, just change the design,
but not the data.
See if that will be a little bit more.
I mean, it's doing cool.
I mean, Gemini 2.5 uses a lot of tokens.
Look at this. Yeah.
Which is something to be aware of right.
Like
and while I don't know
if there's a specific chart for it,
I know we have certain models marked
as like premium or using more tokens, but
I always feel like a good easy proxy for
it is just
how much output does it give me
and how slow is it?
Yeah, kind of
why that something's taking more energy.
Yes.
It's something just always go
with the highest power model.
But hey,
it was just Earth Day recently, right?
So I guess we should add in here
one way that you can be a little more
eco conscious is go with the lighter
weight models.
When you know that
they're going to be sufficient.
And the side benefit of that
is that they're faster. Right.
And then only going forward
to those heavier models
like 2.5 Pro, for example, or three seven
and Claude,
when you really need that horsepower.
Good call out.
So now I
have to update the UI
to reflect that new design.
Do not change the content,
just the UI styling.
Is that sufficient?
Let's see here.
Ahoy there matey.
And I missed it while I was talking.
Did you?
You hit undo right on.
Yeah, yeah, yeah, I even cancel it.
I stopped and cancel
and just removed it
from the context window.
When you hit cancel, does it auto undo?
No, no, it just stops.
It stops a generation.
And then I went up and just,
hit the click on this button to remove
the last request.
I guess. Okay.
That's something
I don't really mess around with much too.
But good, good call out.
Right?
That like
when I'm doing things in a session,
keeping the
full history and
it might, you know, that's my
this session gets long enough.
It might eventually start
forgetting some of the older stuff.
But you can go and you can
manually, manually remove elements
from history by just axing them out.
Exactly.
And it's also a really good way to remove
any changes that you don't want.
Because then when you,
when you remove that request,
it removes
all the changes that are adjusted to the.
It's pretty good.
Okay.
Look these changes.
Oh.
It finally did it.
It's
it finally did it here.
All right, all right.
So what do we got? Okay, good.
That's file names.
We got the main JS change
and we updated the changelog. Yep.
But it didn't touch the JS.
Here we go. All right.
Yes I
only got it to notice the changelog.
I have no idea.
Oh, of.
We swear
it's it's not passively listening
when you talk about things
unless you press that microphone.
this UI
does not look like yours
because this is not blue.
This is not blue.
Oh, it's not page.
It did put the button here okay.
Oh yeah. And it did update like here.
And I would just as availability
and price like yours okay.
I want to do something I'm going to add
a color palette.
You just gave me such a good idea.
Oh, I'm going to follow two second.
Will I find one?
Hello, finder.
Yeah. Are.
I do love this tip though, John,
of using of having it
do its own changelog.
So you can kind of go through
and see the history of the
changes made that it made
it.
This has helped me up so much.
Yeah, I love that
you have a long editing session
and it just flies out of your head.
All right.
I'm going to stick in edit mode.
I think the context I used
last time is actually pretty good.
I'm going to switch though, to
Gemini Flash,
which is available in edit mode,
and I'm going to say Apply green.
This color palette.
And then I'm going to give it this.
This is going to be ugly
as I'll get out
because I haven't like explicitly
picked this palette for this purpose.
I just grabbed an image I had.
But I've got this color palette file,
okay.
Which has like some more stuff in it.
Oh, nice.
Okay.
All right okay.
No flash.
Yes 2.0 flash.
And it's it's
it seems like it's cranking along
like it gave me responses pretty quick.
And it's doing what
I would expect it to do.
Oh I love this.
So it's,
it's it's not even just defaulting
to hex colors.
It's actually using these named colors,
as the style.
So I wonder, is that part of tailwind
or is that is creating a separate CSS
that has these named colors in it?
I do believe I do believe it's a tailwind
telling thing. Okay.
Yeah.
You know,
I'm, I'm
I'm so old I just
I still default to bootstrap.
No.
Let's to
the thing is we use the tech that we know
and that we're used to.
You know what I'm saying, right?
Yeah.
It's like I was doing the same.
I did a stream earlier today
and somebody was telling
me to stop using. Whoa.
It's ugly,
but it's right.
To stop
using npm and instead use p and p m.
And I was like, you know, you know,
I but
I'm just doing what I'm used to, right?
Yeah.
We, we get these other
like that's, that's a great call out to.
Okay.
So you're giving me all kinds
of great ideas right.
Like okay.
Now I'm because I've used Pip forever.
Right. But I know there's other options.
So let's ask I so I use two, right.
Yeah. I just I mean it's forever right.
All right
I'm going to go for a fast
one like oh for mini.
So for mini.
No. There it is. Yes. Okay.
And I'm going to ask it, well, should
I use
instead of Pip
because I know
there's other module managers out there.
I just haven't gotten used to them.
Guess what?
We've been making all these changes.
We should we should do a comment.
You know? Oh, my gosh.
No way.
Okay,
since
we're both working at the same code
base, let's make two different branches.
What do you think? Oh, yeah. Okay.
All right,
so I'm just going to make a new branch
and I'm going to call this one
package on.
And what did I use?
I used, Gemini to recur.
And this is like clod 3.5
plus plus.
And this is a great
to show off of this button to exactly
buy auto generate.
Here we go.
The one thing about this auto generating
comment commit situation though,
there's so long sometimes.
And for me I'm like,
I would never write so much
in a commit message.
But these very long
commit messages have saved me
so many times
when trying to figure out issues.
Mine for
some reason, is not actually generating.
I've never had this happen before.
Are things staged?
We call that a plus.
I could yeah, just add.
Oh, man. This. Well. Oh.
Well, this,
Yeah, this is, Yeah, I get it.
No.
Yeah, yeah.
Okay.
Mac specific.
Oh, right.
Yeah.
Bad coding,
code and everything.
Even your even your get configs.
Weird is I thought I had not.
There we go.
Okay.
It is in there.
Why is it.
Oh
I'm just saying that it.
All right.
I'm not gonna
I'm not going to bother
debugging this right now. I'm just.
Yeah, it's not worth it.
Honestly.
But I mean, that said,
the answer gave is correct.
Of course. But.
All right, there we go.
I've got I've got a commit message here.
This is pretty nice, actually.
It says like it is too long.
Yes, but,
it's telling me
that it's implementing it.
It says it out of the back backend API.
It create the front end.
Oh, wow. Is like,
this is a really nice detailed
commit message.
It's very long, very detailed.
It is very long though. Yes.
Okay.
And I'm just going to think that.
I'm going to
or I didn't get a great answer.
And I think it's
because I wasn't detailed enough.
I said, what should I use instead of pep?
And then it just says, well, you can use
and this is true.
Like if you don't have
Pip itself installed, but you do have
Python module Pep,
you can call Python three
and just say execute this module Pep.
But that's not really what I meant.
Can I use
a different
Python
module manager
other than Pep?
What are the pros
and cons of each?
Okay,
and I love how we are going
between agent edit
and ask to kind of show how you can use
these three different modes. Right.
So ask is really good at figuring out
what can I use
rather than pep figuring out, oh,
how can I improve this
particular function?
Oh, do you have any ideas on that?
You know what I mean.
Just like kind of talking
through changes that you want to do.
Edit mode is for those
specific changes that you want.
So you add the specific context.
You ask you what you want
and then it goes ahead and do it.
And then agent mode
is when you just want to vibe, you know,
you just want you just want things done.
So you just use Agent Mode
to get it done for you.
And we tend to use like flow.
I mean, we've seen this today, right?
We tend to just kind of flow
between them.
You can kind of
think I do it any given time, right?
Yeah.
Yeah okay.
This is great.
Now it's giving me
some good complete
now, now that I've prompted it
the right way
and really told it
what I was trying to do and, and poetry,
I have heard of poetry and I have not,
made use of that yet.
Sadly, I'm told it has some times faster.
Yeah. Which they call out here too.
And does this Pi project more files?
So,
specific and well-defined
for what you're going
to want to have for packages.
Wow. So many options.
It's too many of these things
essentially just stick with Pip,
you know.
No, I don't
I probably will I say I'll change, but I
so you
you updated your UI,
which gave me the idea
to take a screenshot and ask
ask copilot how can I, update
this UI like any suggestions?
Yeah.
And you're using a screenshot.
So,
that means that you don't
even have to have it
inspect the code itself,
which should make them
a little bit
more lightweight
and easier for it to process.
Right. Exactly.
So I'm going to just go to ask mode.
And oh three many doesn't have vision
okay.
For oh has vision or.
Oh yeah oh one preview
or one preview does.
So these smaller ones don't have vision.
So let's use let's use for oh okay.
They're 4.504.5 is a newer one okay.
That doesn't have visual on.
Let's just use for oh so many models.
I mean I can't keep them on my head.
Yes.
How can I improve this UI?
That's all I'm going to say.
Again,
these type of abstract questions
we can ask chat I love it.
So accessibility
enhancements, form validation, feedback.
That's you
responsive design load indicators.
How do you know there's a load indicator
I know right.
Like it's just kind of a it's
it's putting in some great
generic suggestions
even though it doesn't
actually have the information
as to whether this one there or not.
It can't from the static screenshot,
improve visual hierarchy.
Okay.
User feedback on actions and hands
room cards,
security improvements.
Is it going through the code? What?
What did reference?
No.
See, I wonder if some of this is because
of the copilot instructions.
Because I actually said
in the instructions
do a security pass on everything.
There we go. He's not.
So even though it's
just doing the visual thing
here, it's still reminding us. So that's
that's interesting.
We might actually want to go.
I mean, we could leave it,
but we this would imply to me
too, that I should
improve my standard
copilot instructions file,
and I should put a caveat in there.
You know, that
like if when you're giving advice
about the code itself,
then talk about the security.
If you're doing
nine step or something, don't.
So I could improve that.
But also see I error
that would be a really good addition
to the instructions.
So reference the instructions.
The screenshot.
And I forgot that I had the index.html
file open.
So that's
that's where it's
getting the validation feedback.
Accessibility. The loading indicators.
So that's how it knows
that it's not there okay.
So it's not just like randomly.
Yeah I was like wait how do you do that.
Because the file is open
right?
Right. Which is a good thing.
Which is a good thing to think about.
And you could remove it.
Yes.
But,
you're in fact,
we should call out this little
UI thing, right?
Because as you said,
you were in edit mode.
You dragged in.
Oh, you weren't asked mode,
but you dragged in certain files.
But it also always pays
attention to the file
you currently have open
and focused in your editor pane.
Unless you hit that little
this little icon here.
So you could have
if we'd know this question.
Yeah, yeah. Okay.
But these are honestly
very good suggestions.
I love it.
You know,
so one thing we haven't talked about,
because you got me thinking
about security
is we haven't thought
talked about the
all the other adjacent
like other than just producing code
and talking about code and config.
What are the other things
that we tend to use Copilot for, right.
So security's one of them.
Security
I might say something
in, in ask
mode like,
you know, at workspace again
I just want you to look
at everything now. Right.
How can I make this app more secure.
And I'm going to pop it here to.
You're using for preview.
I can.
Well, yeah. Oh, for many even.
Oh for many, yeah.
Oh through many then.
Okay. Oh, this'll be fun.
All right.
I should have waited to
hit enter until you did.
Then we could have done so. Here.
But in order to answer that.
Oh, it's still talking like a pirate.
I may need to stop and
what we're seeing right now. Two.
You're on. Oh, three.
Many. I'm on oh four.
Even though I hit enter
first, you're getting responses.
That's true.
Okay.
And I'm just going to remove that pilot.
Oh, I thought it had flavor.
I just, you know, Ahoy there.
Maybe so.
Now much like space information.
So I wonder
if I've actually stalled out here.
I'm just going to stop testing request.
Oh.
Something I was just going to
say was so to
and kind of answer that question
that I,
that we've been seeing
floating around of like,
what model do I use?
How do I know what model to use.
It's it's
just it's a matter of trying the model.
If you get the output you like,
you know, you keep it.
But if you don't,
you remove the output
from the context window
or the generation
from the context window.
Try a different model.
You know what I mean?
If you want to go back and forth,
think in thinking mode.
Use a reasoning model.
If you want to,
you know, not use up
your tokens too much.
You know code 3.5 is a really good one.
I think, even GPT
four is a good one too.
Or like Copilot base
or for four one is a good option.
So let's look at our
security recommendations.
I mean, I'm liking them.
They're they're solid, right?
Like, okay, let's
keep going in debug mode.
Of course, I don't have any Https.
I don't have any SRF.
I mean, of course,
like all the things
you'd expect for like,
hey, I'm just blasting out this project
vibe coding by coding, then,
I just,
I think that's one of those things.
It's like so important too.
Is that
there's a big difference
between making an app that works
and making an app
that's production ready
and can really go out there, right?
Yeah, probably the most important thing.
So nothing else.
Like all y'all vibe
coders out there,
you're building awesome stuff.
Once you figured out
how to not just make it work
on localhost, your next step,
make sure you ask copilot,
how can I make this more secure?
What's wrong with it?
And go through and just follow
all those recommendations?
Because yes,
I want to put something out there
and then the next day
have someone worm their way in and just,
I know it was all your keys,
and that's what's been happening.
That's that's what's been happening
and it's been painful.
But yeah,
these are actually very solid suggestions
from both. Both models. Yeah. Yeah
I love it.
I'll have to I
have to go figure out what flask WTF.
That's I've never heard of that
I know I've never
I've never heard of that.
All right. Cool.
So what's another thing
that, that we always want to do.
Besides just security passes,
security passes,
accessibility pass
accessibility I love it.
All right,
let's let's grab
another I'm going to go this time with
what haven't we played with here?
I don't think I've done 4.5, actually.
I, either okay together or space.
So like space.
How can I share this?
Is.
Is,
it's accessible.
Okay.
Now we're both using the same model here,
but we use,
We're getting some
some slightly different, Awesome.
So like, see, the content is the same
but the format is very
the format is different. Yeah.
I love that they
both give us, like,
okay, here's what you have
and here's how you can improve it.
Type thing.
Yeah.
Just this example changes kind of stuff.
Yes. Oh and then yours.
This is great.
Yours is going on to even like
more detailed color contrast keyboard.
Now with navigation you
yes page title and headings.
These are really really good
solid suggestions.
Yeah.
For anyone who doesn't who hasn't
come across the term
accessibility before.
What we mean here
is things like making this available
to people who are colorblind and, or
have low vision
capabilities or even blind.
And there's other subtle things too.
But this is all about making sure
that your site is usable by someone,
regardless of their personal differences
and experiences.
It's too easy to assume that, hey,
you know,
I experienced the site a certain way,
so everybody else does,
but there's really simple things
that can trip people up.
Like if two colors,
it's hard to see the difference.
If you have certain
kinds of colorblindness,
then you're not going to know
that those are two different buttons,
or they need to do
two different things, right.
So this is a really good pass.
Just make sure it's it's
available for everyone.
And also worth noting,
if you're working for certain
government agencies
or certain government funded agencies,
you're actually required in certain
cases
to make sure
that your interfaces are accessible.
So it's not just a good idea
to legal requirement.
We just did an accessibility pass.
What about, testing?
Testing?
What good is an app without testing?
I'm going to call out something
specific here
to do in my copilot instructions, because
I did okay about this.
A testing requirements, right?
Include unit tests for new functionality,
minimum code coverage percentage.
Like. Right.
How much of my code
is actually touched by tests,
integration tests for API endpoints.
Obviously we can expand this,
but okay, I'm going to go with oh form.
Oh no.
Oh three mini.
Oh. You want to do a 3 or 4 again okay.
All right.
That's cool, that's cool.
And we're in asked mode.
Yeah I'm just going to
workspace it again.
I think it's a lot of work workspace.
It's
not it's not such a big application yet.
If we had let's.
I was going to say
like I'd hesitate to use
at workspace in a larger project,
because it would just be too much.
But here it's only going to include,
like 20 files maybe, or so. Yeah.
So we also have a slash command
slash test
which is slash tests at workspace
slash tests as well.
We can just do
that directly.
The one thing here
I'll say is,
The, the the idea of generating tests,
it sounds like we can add to this. Right.
So aside from just saying slash tests,
I might say something like he make
tests and use.
And here
I'm going to call it a specific file.
And I'm going to
that data file data dot Json
or data validation.
So that it won't just be like okay.
Yeah.
You got a
you got a 200 okay on a page,
but it'll actually look at what
it should be returning
from our data source. Nice.
That's that's a great tip.
Right.
So it.
Oh. Ooh.
So the first thing
oh three minute okay okay.
Oh I need a Python interpreter.
When did my interpreter.
Why do I keep getting it.
No I mean yeah
it should automatically pick your
you think but.
Oh well
Oh I tell I test versus test.
I'm going to go with pi test.
I think
I'll have to redo this one second.
Is it. Yeah.
It's stalled out on that.
Sure.
No.
Make tests.
Can type because I'm rushing.
Yeah, I have this.
Most of the time.
This thing I see like, the faster
you go, the slower you go.
And it's it's consistently so true.
I wonder if we should use
station mode for this.
Oh, because we are in chat.
Yeah,
but it's actually doing more
than I would expect in in ask mode.
Right.
Oh, okay.
Go.
Select.
Yes. Okay.
That's sweet.
So this is one of these
cool things right.
I, we get used to certain ideas and
copilot will work in VS code.
It'll work in the JetBrains
series of IDE is
we've got a chat in eclipse now,
which is really cool.
And then we've got code completion
but not full chat
and a few other ideas like,
Tim.
But I will say, like,
even though I used to use idea
JetBrains stuff
a lot, like that's kind of most
nowadays
the integration between
Copilot and VS code,
where it can do
things like it can automatically fire
off these separate panels,
tell vs code
how to attach the test frameworks,
that kind of stuff. To me that's huge.
That's part of what really keeps
me using it in this environment.
Yeah,
huge.
So oh for many responded
and you know
you have all these steps and stuff.
Oh three mini
just told me here's
a step by step
overview of what tests will be created.
And then that's it.
Stopped it.
So did change the import Json.
But then it didn't go beyond that.
Okay, I wonder if if you keep that.
Oh actually I didn't
I didn't notice this right here.
I keep forgetting I keep oh no no.
You you sorry. Yes.
Yeah I keep forgetting
this new UI where like,
you can see the files that were changed
right in the context window.
So that's a good color
because I was ready to say, like it
didn't do it. Right. Right.
But it did. Actually.
Oh, yours. Do your tests pass?
I mean it did it did do it.
It went through it made it my tests.
Now that said,
this is the entirety of the test,
so I'm not super happy with that.
And you know how you said,
hey, we should commit?
You're absolutely right.
Yeah.
Because I cannot undo all this.
And we're going to always
commit as you go.
would say it's not like making it test.
So now that I know why
I should using pi test, why not?
Okay.
surprisingly, all the tests
passed.
So let's take a quick look through.
Okay.
It's it's
it's got it's embedded
the data in Python,
which is maybe not the way I would do it,
but I get I get it.
Okay.
What do we actually have for tests here.
Yeah.
So we have.
Yeah.
Loading up the data.
Keep it all right.
Testing the room, testing for testing.
Get rooms,
testing, reservation suitable.
I would restructure it, but it's.
But it's a good set of tests.
Success checking.
This is really good actually.
And I am very impressed
and surprised that it
ran on the first try. Yeah,
yeah.
Well, one
thing that
strikes me about
this is that these are not item
potent, right?
I mean, it's kind of
after it runs these tests,
I don't think there's
any kind of rollback or anything.
It's just using Json.
So this is going to actually
alter our data for the app.
And I wonder if that's just
you couldn't
figure out how to do it
since we weren't using a real database
with the rollback capability,
or did it
put a mock in there and I didn't notice.
Yeah, it didn't
alter our Json file at all.
Oh, when it ran it okay.
So it must be doing something.
Oh here we go. It's right here.
So it loaded
and it's passing in the original data
load data overrides here.
So I think the data it's using is here.
Right?
I think that's why it created this.
This dummy
data sort of situation
so that it wouldn't overwrite the data.
Dot Json. Interesting.
That's a funky workaround.
I would not have thought of.
Creates temporary data. Yeah, yeah.
Okay. Okay. All right.
That's an interesting pattern.
Like it?
All right,
there's one more thing
I'd love to do
before we run out of time today.
Okay?
Is I would love to talk about
document patient.
Good old docs.
So how do we think that it's good
for us to go about doing?
I have an idea in my head, but how would
I think I would approach it by?
What I typically do is I'm just gonna
call some stuff here.
So typically I just have the read me open
and I would do at workspace in chat mode,
I would use ggplot 3.5
because Claude is a very good writer.
Okay.
And I would say
update the read me based on the
the current project structure
or something like that.
Okay, cool.
I'm going to try
a different approach
simultaneously, and I'm going to do this
one using Gemini Flash.
I'm going to do it with edit and I'm
the source code.
The templates
actually yes, it's true,
I would use
edit or agent to do this
because then it actually does it.
I
maybe I you know,
this is a slightly workflow.
I want to try this out.
Okay.
Make documentation for this app.
Give me an exact,
summary.
I docs
and a slash does visual.
Well, it does multimodal input.
But if I ask for a workflow diagram.
Maybe it'll use mermaid or something.
Next let's be and workflow diagrams
using mermaid JS.
Yeah okay.
So I didn't say include a diagram.
And I'm going to use
agent mode and claw 3.5.
That's what I would use
because sometimes when I ask in ask mode
if I say update the read me,
it doesn't,
return the contents of the read me
in that code block format
for me to just apply it.
So that happens sometimes in ask mode.
So actually using edit
or agent is a better move.
So this will be really interesting right.
Because both of these modes
have relative freedom in like being able
to modify and create
a large number of files.
But I wonder
if edit was the wrong approach,
because I see that it's actually
rewriting my files
instead of creating new ones.
Oh, but you said explicitly
update the read me.
Okay, so we might see
we might see very similar.
Yeah, yeah,
I think I think what I'm going to do,
I like this
I like what it gave me for output.
It's telling me the API,
telling me the post, etc..
It's got the workflow diagrams.
It did it in mermaid.
Great.
Let me, let me keep this for
now just so I can preview it
so we can actually
see what it looks like.
There we go.
We have no renderers up.
All right.
So it's got it's
got all the instructions I had in there.
It has existing
set of instructions etc., etc..
And then it's kind of added sections
at the end,
the API endpoints example responses.
Love it.
Post get delete.
Yeah.
And the workflow sequence diagrams.
If I were in a,
if I weren't just
using the native embedded,
markdown renderer
inside VS code,
there's other plugins you could use,
or I could
commit this into the repo
and really see the mermaid diagram.
So actually we do that.
Yeah. On this side.
So it just updated it
maybe because I said update.
So there isn't a lot of changes.
So it updated the stack.
It gave it like let me actually go to the
so we can see this better.
Hold on.
Here we go.
So it updated the
like the about what the app is about.
And actually it removed
tailwind CSS to bootstrap.
Interestingly
it updated
the features
did actually make that change.
Was it just it did.
It's it it bootstrap bootstrap five
instead of tailwind
it added testing.
It updated the project structure.
And then it added a testing instruction
and then it added
like the updated the Json output.
And that's it.
Okay.
So actually I think your prompts
worked a lot better
for updating documentation or
oh or Gemini over Claud.
Oh okay.
So I'm going to
just undo and and do it again
with a different model,
with a different model.
Why not?
Why are you doing that?
I'm going to try
a slightly different approach
here to where I'm going to.
I really want it to make a separate
file for this. This time
I don't think, oh,
yeah.
What if you tell it to
explicitly create a new file
in edit mode?
Yeah. Okay.
Okay. Also I'll do that.
I also have new file doc someday.
Yeah.
I've got all the same in context
I had before.
I'm just going to copy,
copy your prompt and see if I can get.
Maybe not all of it.
Oh, okay.
Okay. Yes, it did. It
nice.
And so here we have Gemini
updating the read me
in the context window
instead of in the Readme file.
This is something I noticed with Gemini
a lot of times
where it won't actually do the thing,
it will say okay,
it will do it in the window
and like I have to apply it.
That interesting.
So like
here is the entire updated read me,
which actually looks beautiful.
So Gemini is a Gemini
2.5 Pro is a go for read me.
But it didn't actually apply it.
And because like I said with read Me's
it doesn't return all of it
in that,
like a code block
with in markdown format.
So all of this would have to be like
copy pasted, copy paste it.
But okay, so now I'm going to say
okay I wonder if there's a way to use it.
File. Now.
Yeah I'm going to say
okay update the file now.
And see if that will work.
Sweet.
Meanwhile I actually actually went
and pushed my last,
not the last set of changes,
but the one before
where it put the output into the read me.
I pushed it up to GitHub
just so that
people can see what this must look like.
Yeah.
Oh, that's so nice.
Oh wow. That's nice,
that's nice.
Yeah.
So now I can see the actual interaction
between all my components on every flow.
See, my PM is going to love this.
Do we have anything else
we want to try or.
I think I wrap up, I know I'm right.
We did security.
Security accessible ability.
We did testing.
We did documentation.
I think that's good.
And we played with so many models
for this project.
I think the key, a key takeaway
I have is quote 3.5.
Sonnet is still very good for everyday
coding tasks. Yeah.
And even like oh three and zero
for many as well.
Those, those also did really well
in they're fast.
Yeah.
Especially for just like
pure like fairly
contained code generation.
Those performed beautifully.
And then Claude three five
was really good in agent
mode for that large building.
both Claude three five and
Gemini two five Pro
did a great job with that.
A gentle
quirk of
just like completely build something.
Greenfield for us.
Agreed.
And I, I really love the way that Gemini
two a flash did documentation.
I think that was really super solid.
Yes, I actually agree.
And that's why I ended up switching
to Gemini two Pro,
because it's it's really good
at technical documentation
because I'm just scrolling
through what it did right now
and I'm just like,
yeah, this looks really good, I love it.
So key takeaway in terms of
what's the best model to use.
It depends.
You know
those the smaller, faster models.
You know some of the, the GPT minis
certainly.
You know, the flash models,
good for quick generation,
the reasoning models, really good
for talking through
and also for building documentation
because they're just verbose
and they have all the right stuff.
We saw benefits
of using the visual inputs.
Oh, yeah.
Gemini.
And on GPT four. Oh,
for fixing up the UI the way we want.
And I'm sure there's lots of other things
we could do with them.
So all in all, try the models.
You have access to them,
not just in, copilot in VS code,
but also on GitHub models.
You know,
you can
test out so many models on
github.com using GitHub models.
So go forth and play.
Have fun, have fun.
Don't be so serious.
Have fun.
That's what it's all about.
Yeah.
It's been awesome working with you today.
Thank you so much.
This has been really,
really good, really, really fun. Wicked.
All right, I'll see you. Yeah. Hi.