Today I'm going to show you why having

updated context is really important for

your coding agents. First, we're going

to scaffold a simple TypeScript web app

using the Microsoft Learn MCP server.

Then, we're going to switch gears and

use the Context 7 MCP server to help us

build on that web app and compare and

contrast some examples with Context 7

and without Context 7. If you have no

idea what I just said, don't worry.

We're going to dive in right now. Let's

go. I first provided a simple prompt

describing what I wanted, which was to

scaffold a TypeScript web app. This web

app takes some comic APIs, allows the

user to select two characters, and

combine them using an image model.

You'll notice that I also called out

Shad CN here to help structure the UI.

You can see it drafted a plan, set up

the types, integration with the APIs

and more. After the plan was drafted, I

specified the image model I wanted to

use, which was GPT image one, and where

I wanted it hosted, which was on Azure

AI Foundry. Then I told it to use the

Microsoft Learn MCP, so that it can

retrieve some of the most relevant

developer docs. You'll see that during

the scaffolding process, it calls the

Microsoft Learn MCP tool and extracts

some of the relevant documentation for

its context. Now, let's jump to the end

of the process and launch our web app.

I'm going to search for Iron Man to see

if our Marvel API is working, followed

with Batman for the Comic Vine API. Now

let's test to see if everything is

working as expected for the image gen.

Cool. Looks like everything is working

well. You can see with the help of the

MSLearn MCP, we were able to scaffold a

web app that integrates various APIs.

But now I actually want to have some

fun. So, whenever I think of comics, for

some reason, it makes me think of the

arcade. And so, I want to mess with the

UI a bit and implement an 8-bit mode.

But, we're going to do a test here.

First, we're going to test implementing

8 bit mode without the context 7 MCP.

Then, we're going to implement it with

the Context 7 MCP and see which one we

like better. So, let's go ahead and go

back to the editor. Let's start

implementing the 8bit arcade style theme

without the Context 7 MCP. I'm going to

tell Copilot to use this branch of Shad

CN called 8bit CN to see if it can

implement the theme on its own. Now

let's go ahead and submit the prompt and

let it cook.

[Music]

[Music]

Okay, let's see what we got here. It's

decent, but I still think there's a lot

of room for improvement. The top banner

isn't super legible, and I'm not really

seeing a ton of 8-bit styling besides

some of the buttons. It's a solid 3 out

of 10 for me. Now, let's switch back to

the editor and see how Copilot does this

with context 7. You can see in my prompt

above, I instructed Copilot to use

context 7 this time around. Here, it's

asking me to execute the MCP tool call.

And once I confirm, you will see Context

7 searching through its library

returning relevant docs and snippets so

that Copilot has the context it needs to

complete the task.

[Music]

All right. So, now we're going to check

out the arcade mode that Context 7

produced. So, as you can see, it's a lot

more vibrant. the titles are actually

legible. There's a lot more 8-bit

characteristics kind of implemented into

the UI itself. There are some

inconsistencies like clipping of text

boxes into some of the titles, but I

think this is a lot better start than

what we got without context 7. What do

you guys think? If you liked what you

saw today, from vibing an image

playground with the Microsoft Learn MCP

to editing that image playground with

Context 7, then you can go to

github.com/mcp

and install the MCP servers in VS Code

or VS Code Insiders. We have Context 7

here and Microsoft Learn right below it.

Happy coding, y'all.