Rubber Duck Thursdays - Building with Agent Mode and MCP

Estimated read time: 1:20

Summary

In this episode of Rubber Duck Thursdays, the GitHub team delves into exciting new features related to Copilot Agent Mode and the Model Context Protocol (MCP). The session includes a deep dive into how these tools can enhance the coding experience, featuring live demos and practical applications. The episode also covers recent updates from the GitHub changelog, showing developers how to maximize efficiency with these new tools.

Highlights

The session starts with a friendly welcome and fans tuning in from around the world 🌍.
Introduction of Copilot agent mode, now available in the Visual Studio Code stable release 🚀.
Detailed walkthrough of Model Context Protocol (MCP) servers and how they integrate with Copilot 🛠️.
Live demonstration of using MCP to create GitHub repositories and issues directly from Visual Studio Code 💻.
Discussion of the new GitHub changelog updates, highlighting improvements like security campaigns and dependency graph enhancements 🔧.
Interactive and engaging session with community Q&A and live problem-solving, making it an insightful watch 📺.

Key Takeaways

GitHub has introduced Copilot agent mode in Visual Studio Code, enhancing the developer's workflow 🚀.
Model Context Protocol (MCP) servers act as superpowers for large language models, allowing for more complex interactions 🌟.
The GitHub MCP server's tools can automate GitHub-related tasks directly from the IDE, such as creating repositories and issues 🛠️.
New updates on GitHub changelog include support for advanced project structuring and improved security campaigns 🔧.
Co-pilot with MCP support can significantly accelerate development speed by automating repetitive tasks and enhancing AI interactions ⚡.
Participating in GitHub's community discussions and live sessions helps in staying up-to-date with all the latest tech advancements and tool updates 💬.

Overview

The episode kicks off with a warm hello to viewers globally, setting the stage for a deep dive into GitHub's latest developer tools. With the introduction of Copilot agent mode in Visual Studio Code, the team explores how this feature can streamline coding tasks and bring a new efficiency to the development process.

A major focus is on the Model Context Protocol (MCP) servers, which serve as dynamic extensions to large language models. These servers allow developers to accomplish complex tasks such as creating repositories and managing issues directly from their IDE. The GitHub MCP server is highlighted as a key tool in automating repetitive GitHub tasks, helping users maximize productivity.

The episode doesn't stop with introductions but also integrates practical demonstrations. Viewers get to see a live setup where the hosting coder uses MCP within Visual Studio Code to efficiently create new GitHub projects and issues. As the session progresses, viewers are treated to updates from the GitHub changelog, which include enhancements in projects structuring and security protocols. The show wraps up with interactive community engagement, making for a well-rounded and educational experience.

Chapters

00:00 - 01:00: Introduction The Introduction provides an overview of the book's main themes and objectives. It sets the stage for the detailed discussions that follow in the subsequent chapters. The author outlines the motivation behind writing the book and describes the intended audience. Additionally, key terms and concepts are introduced to prepare the reader for the content ahead.
01:00 - 03:00: Video Overview The chapter titled 'Video Overview' begins with a musical introduction, setting the tone for the content that follows. The chapter likely provides an overview of a particular topic or subject presented in video format, although the specific details are not provided in this transcript excerpt.
03:00 - 05:30: Introduction to Agent Mode and MCP This chapter provides an introduction to Agent Mode and MCP, setting the stage for what appears to be a discussion involving these topics. The transcript starts with the speaker greeting the audience, indicating the beginning of a presentation or lecture. Due to the limited transcript provided, further details on the content are not available.
05:30 - 11:00: Announcements and New Features The chapter titled "Announcements and New Features" likely discusses new updates or features being introduced, possibly within a company or product line. The transcript begins with a friendly greeting "morning how are we hopefully you're all", indicating a casual start to a presentation or meeting where these announcements will be made.
11:00 - 14:00: Security Campaign Updates This chapter provides updates on the security campaign, although the specific details are cut off in the transcript with the phrase 'doing well um we got another week we got.' It likely covers new developments, progress, or challenges in the ongoing security efforts.
14:00 - 17:00: GitHub Issues and Projects Updates The chapter titled 'GitHub Issues and Projects Updates' begins with a segment called 'Rubber Duck Thursdays'. The speaker starts the discussion by mentioning the routine event and its relevance. The focus of the chapter is likely to involve updates on GitHub issues and management of projects. This might include changes in processes, new features, or best practices for handling projects on GitHub.
17:00 - 20:00: Dependabot and GitHub Actions Updates This chapter delves into the updates concerning Dependabot, a tool for keeping dependencies secure and up-to-date, and GitHub Actions, which is a CI/CD service provided by GitHub. While the transcript snippet provided suggests some content such as 'going to be diving into a few things,' it is not possible to create a detailed summary from such limited information. However, the focus will mainly be on understanding the latest improvements and changes in both Dependabot and GitHub Actions. Expect to learn about new features, enhancements, and how these can be utilized to streamline project workflows and improve automation.
20:00 - 24:00: Copilot Agent Mode Details The chapter introduces and explains the 'Copilot Agent Mode' feature. This segment seems to start with an introduction, as inferred from 'as you've probably guessed by the,' indicating a transition from preliminary context to the main focus on the Copilot Agent Mode. Unfortunately, the transcript ends abruptly and does not provide further detail.
24:00 - 30:00: Question and Answer Session The chapter begins with the speaker introducing the title of the episode related to a question and answer session. The discussion seems to focus on engaging with questions from an audience or listeners, possibly providing insights or clarity on various topics.
30:00 - 35:00: Introduction to MCP Servers In the chapter 'Introduction to MCP Servers,' the speaker begins by introducing the topic of the stream without providing specific details about MCP Servers. The transcript indicates the start of a session, but lacks substantive content pertaining to the chapter title.
35:00 - 50:00: Demo of MCP and Agent Mode This chapter provides a demonstration of the Copilot agent mode and explores the MCP (Model Context Protocol). It discusses what MCP is and the reasons for its use.
50:00 - 90:00: Building a Project with Agent Mode This chapter introduces the concept of using 'Agent Mode' in building projects and discusses its relevance. It references announcements made in a previous week's stream about new developments, including the availability of Copilot Agent Mode in Visual Studio Code and GitHub MCP servers. The chapter promises further explanation about what MCP servers are and their potential utility for users.
90:00 - 100:00: Improvements and Iterations The chapter discusses recent updates and announcements, emphasizing a busy week of changes. The speaker encourages the audience to monitor the change log for upcoming developments. The chapter also hints at a session for creating or building something, though specific project ideas are still being considered.
100:00 - 108:00: Recap and Conclusion The chapter provides a recap and conclusion. The speaker acknowledges a side personal project that they haven't completed. They mention different strands like vision that can be integrated into this project. The chapter closes with greetings from various individuals, indicating a collaborative and friendly environment.

Rubber Duck Thursdays - Building with Agent Mode and MCP Transcription

00:00 - 00:30
00:30 - 01:00 [Music]
01:00 - 01:30 good morning everyone good morning good
01:30 - 02:00 morning how are we hopefully you're all
02:00 - 02:30 doing well um we got another week we got
02:30 - 03:00 another Rubber Duck Thursdays we are uh
03:00 - 03:30 going to be diving into a few things
03:30 - 04:00 today as you've probably guessed by the
04:00 - 04:30 uh title of this uh of this episode
04:30 - 05:00 today of this stream um we're going to
05:00 - 05:30 be looking at Copilot agent mode we're going to be looking at um MCP model context protocol what it is and why you
05:30 - 06:00 might use it why you might care um so hopefully some of you have heard of these things already uh because I kind of teased last week on our stream that uh there'll be some announcements coming there'll be some things coming and here we are a week later we have uh Copilot agent mode available in Visual Studio Code uh we have the GitHub MCP server now available so um we'll talk about what MCP servers are in a little bit um and why you might um want to use them
06:00 - 06:30 why you might care um and then a series of other announcements as well so it's been a busy busy week and uh yeah that's why I kind of teased hey keep a keep a watch on the change log because there was a few things coming so um yeah we'll uh we'll do our usual thing we'll dive into um all of the kind of change logs that have happened and then we're going to go and do some building um I was trying to think of ideas of what to build today and
06:30 - 07:00 um there was something I started and never kind of got around to a bit of a kind of side personal project um and I was thinking of a few different strands that we can pull together like vision and other things as well so we will um we will go and build that's what we're going to do this morning and good morning everyone thanks for all the hells and the good mornings here hi hi hi hello uh hi from Bangladesh hello from India
07:00 - 07:30 great well welcome um keep dropping where you're kind of tuning in from uh keep dropping in what are you hoping to see today i guess we've kind of given a bit of a clue for today's one um but yeah let me know what you're working on let me know what you're kind of interested in as well have you also tried Visual Studio Code agent mode or GitHub copilot agent mode in Visual Studio already um how's it been going have you tried MCPS have you tried model context protocol because it's not just available
07:30 - 08:00 with agent mode it's available with other um AI tools as well so um again we'll cover a lot more about what it is in a bit but let me know um yeah let me know what you've been doing i always love to hear what our community are up to hello from Macedonia uh good morning are you also on Twitch we are uh we are on the GitHub YouTube channel the GitHub LinkedIn page and the uh GitHub Twitch page as well so whichever your preference we are there
08:00 - 08:30 so please join us um wherever you like of those three of those three uh wave good morning uh good morning greetings from Germany hi from India hello from Earth i'm reassured by that we haven't got aliens coming just yet so that's okay you know or maybe they're among us and on Earth in which case great hi so hello from Earth hi from Chennai prefer Twitch great yes you over on Twitch thank you greetings from India
08:30 - 09:00 hello hello good so then um I'm going to waste no time this morning i'm going to um take us straight into our usual uh kind of deal here i'm going to change things up a little bit i'm going to move me there we go let's see how that goes um because I want to make sure you're getting as much of the kind of screen and the blog as as much as you can there and of course we can always just remove me from it as well if we need so let me know let me know if it's all readable
09:00 - 09:30 and all good uh good morning from Vienna welcome welcome uh thank you for joining this morning i appreciate it uh great so uh what has happened over the last week quite a lot as I mentioned uh so I think we may have covered this last week but just in case um we'll go from April 3rd which is um obviously week ago today uh the porocross merge experience there were some updates to that so you may if you've been tracking
09:30 - 10:00 the G change log you may have seen that u we've kind of been uh refining that user interface that UI um and there's some additional changes going on there so now you can uh group these workflow checks and these kind of status checks by status so have no grouping there as well and then there's some additional fixes like um the time that it started and how that displays the draft section tool tips not displaying etc so some good quality of life updates
10:00 - 10:30 there um if you're using GitHub enterprise server and hosting on VMware um well now VMware ESXi8 support is now available um because 7 uh.0 zero is reaching um end of support by October 2025 so if that applies to you you probably already know that and if it doesn't apply to you now you know there we go so good to be aware of if you're self-hosting GitHub enterprise server there dependency graph supports all
10:30 - 11:00 Pearl identified package ecosystems so let's see here github's dependency graph now supports a wide range of wider range of ecosystems including transitive path information and the registered data in the ecosystem it increases the accuracy and usefulness of GitHub's dependency insights sbombs and API results the package URL project provides a registered software package ecosystems with the standardized format for package type inspace version human readable identifiers so it helps identify and transitive and direct relationships they
11:00 - 11:30 submitted uh good so some quality of life uh updates there as well and we can see that then in the uh I guess in the other category there uh when we're looking at the dependency graph so good let's uh see what's going on here right uh Copilot VS Code March release uh I kind of hinted last week that uh there were some things coming and this that this
11:30 - 12:00 was kind of the big update um so agent mode is now available in Visual Studio Code stable so um what that means is over the kind of coming period I don't really know what the time frame is um you're going to see that light up in Visual Studio Code so it will kind of appear there um but if you don't want to wait there's a setting that you can enable to get access to that um in your Visual Studio Code settings we can talk through
12:00 - 12:30 that as well um but agent mode available in Visual Studio Code um that also includes model context protocol support and I'll explain a little bit about what that is why why you should care in a moment um and then some uh additional built-in tools then as well ux improvements so before you had co-pilot edits in one kind of page or one tab and you had um the chat view in a different tab and if you were in insiders you probably saw that then there was a drop
12:30 - 13:00 down in the edit mode for agent or edit mode um now it's just back to one view and you've got a drop down to switch between those three but we'll see that in a sec um next edit suggestions so that thing we've seen on the uh panel on the screen before where it kind of detect you've made a change and then understands where else changes are needed that's now generally available so again a great quality of life update there um and then um we have made generally available in GitHub
13:00 - 13:30 copilot the kind of clawed models there so Google Gemini and the openi models so if you're using 03 m was it 03 mini 03 mini uh I can't even remember the list of models my brain is struggling this morning um but we'll see anyway when we get to Visual Studio Code um also uh there's a preview now where you can bring your own API key for providers like Anthropic Azure Google Cloud Open
13:30 - 14:00 AI and more so again worth checking out if you've already got uh some other keys there again this is another of the big ones we will be looking at this in a bit but the GitHub MCP server is now available so think about um these MCP servers model context protocol as tools that these large language models can go and use and this protocol is a standardized way of defining really what capabilities um are in that kind of tool set or in that package so the GitHub MCP
14:00 - 14:30 server is one of those um packages that you can kind of go and use to extend the capabilities of the AI so uh it was previously and you'll see this in the write up here as well uh it was previously um kind of a reference implementation from anthropic and now um GitHub has published uh its own kind of version of that and kind of taken ownership of that um so again we'll take
14:30 - 15:00 a look at that in a moment and you'll see uh see a bit more in that there we go multiple new models are now generally available in GitHub copilot so we've got claw 3.7 sonnets generally available 3.5 sonnet 03 mini and Gemini 2.0 flash so uh yeah a good uh again quality of life update particularly for those enterprises who want some of the additional things that come with uh you know products and services being
15:00 - 15:30 generally available um that came out on Friday just gone so uh there we go then GitHub Copilot Pro Plus um so there's a new tier so if you think about um kind of the co-pilot SKS you can have there's obviously copilot free which we brought in kind of December time um but before that there was copilot individuals there's copilot business and copilot enterprise when you think about it from that organization side there's kind of two tiers on the organization side
15:30 - 16:00 you've got business and you've got enterprise um well now we're bringing another skew on the individual side so there was kind of copilot individual um or copilot pro I guess and then now we're bringing copilot pro plus and you can see that has uh some of these additional premium requests here um you get access to some of the latest models like GPT4.5 for example and then more to come there as well I'm sure so uh another update
16:00 - 16:30 there and Copilot code review if you've been using that in your pull requests uh copilot code review is now uh generally available as well so it really was a big big news day on Friday in terms of all of the kind of releases and things going on maybe we'll get a chance to go and see um that in action a little bit um but you can see there's a couple of ways that you can go and use copilot code review one being uh in VS Code and where
16:30 - 17:00 you can go and uh fact I'm going to open this video and uh play it here maybe maybe not thank god I love it um but yeah maybe we'll see if we can have a look at that in a moment um changing to the repository object in the push web hook we're updating the URL field for push web hook events previously both HTML URL and URL return the same link unlike other events like pull request now HTML URL will return the repository
17:00 - 17:30 URL and URL will provide the API URL okay quality life update great to see that this was a nice one uh that came out a couple of days ago uh security campaigns so I really really like security campaigns actually because um if you think about all of these security alerts that we you know can get and I'm thinking about from the development standpoint particularly with GitHub advanced security um you know there's
17:30 - 18:00 secrets there's dependencies there's code alerts and things as well and sometimes it could be a challenge to kind of go and manage those and what security campaigns allows us to do is those code alerts um it allowing us to kind of group those up into some kind of logical method so if I'm like a security manager in the organization I can say right we need to burn down and tackle all of these issues relating to SQL injection for example or whatever it may be um so then or or you know this high
18:00 - 18:30 criticality or these ones which can be solved with copilot autofix that gives you this way to almost build this kind of initiative this campaign uh to go and then uh encourage development teams to go and burn that down then um so that's why I like this it brings that the security teams and developers closer together in GitHub and that's why I'm a big fan of this actually so uh yeah that one generally available uh two days ago and now that also
18:30 - 19:00 includes things like draft security campaigns so you couldn't have drafts previously also the one I did like here was automated GitHub issues so you can optionally create GitHub issues in the repositories that have alerts and then um those issues are created and automatically updated as the campaign progresses i thought that was quite cool actually now you can have it on your backlog for example and track that work as well thought that was kind of nice um and organization level security campaign
19:00 - 19:30 stats as well so some good quality of life updates there uh so security campaigns available for users of GitHub code security on GitHub enterprise cloud so yeah if you're uh using GitHub code security so that's like the code QL features and all of those pieces then you can go and use security campaigns there so yeah thought that was uh pretty cool what else have we got what else reload responses with other copilot models on github.com so if you are using
19:30 - 20:00 github.com/copilot so that immersive view um because there's two views that you get on github.com you can either have copilot pop up as like a little assistive view um when you're looking at any kind of repository page or you can go and um have this kind of full screen experience and have that chat uh in that immersive view um and I think what it's talking about here yep the immersive mode um there are now more choices when reloading your responses um so you can kind of try and switch between those models and regenerate co-pilot responses
20:00 - 20:30 using a different model um so yeah again another nice quality of live update there what it allows you to do is kind of explore between those different models and which one will give you um maybe kind of the most helpful response in that situation there as well that's good good to see that uh what else have we got april 8th uh DeepSseek V3 0324 is now generally available in GitHub models so 671 billion parameter mixture of experts
20:30 - 21:00 model v3 will be deprecated and I guess this is um the replacement for that is what it kind of sounds like here uh so that cool great good to see that um kind of update there uh so if you are if you've been kind of experimenting with models or even if you haven't actually um a few weeks ago we did a little bit of a walkthrough of GitHub models what it is and you know what why
21:00 - 21:30 you care why you'd be interested if you're building apps which maybe you want to bring AI into them make them more intelligent github models is a bit like this kind of playground where you can um write some pro prompts test things out and uh see how that experience goes and then you can kind of start um you know integrating that in a dev test kind of scenario there and gives you that ability to experiment so yeah what that is saying there is Deepseek V3 0324 is now GA generally
21:30 - 22:00 available in GitHub models so uh a great update there what else what else what else and then I promise I will come back to the chat i have seen it kind of going through so you all know I'm terrible at multitasking all right so peral delegated bypass and custom property regex support generally available in repository policy delegated bypass is in preview okay so push rules um push rules I am such a big fan of
22:00 - 22:30 um here we go such a big fan of push rules um push rules effectively are there to help you with kind of your repository governance so thinking about things like preventing changes to certain file making sure that certain checks are in place for example those kinds of things um the team have been working on a load
22:30 - 23:00 of different um kind of rule sets so like push rule sets repository rule sets there was a third one that I've forgotten the name of right now but to help with that overall governance across your code across your repetries and so what this is saying here if we bring this back and uh oop there I am there we go um is a
23:00 - 23:30 couple of things so delegated bypass is where you can authorize certain users or certain actors uh to be able to go and review before someone can kind of go and override that um then reg x support as well uh is pretty cool where um you can specify that if you're using custom properties for example and custom properties are a way that you can go and assign like metadata to your repositories so you can start targeting them flexibly based on
23:30 - 24:00 those rules um now with the text type you can make sure that the text follows a certain um standard a certain pattern using reg x you know if you want to have an owner for example and it needs to be an email um have it that way etc etc that's kind of the example there I guess they're they're kind of alluding to yeah good quality of life updates there great to see that uh this one came out yesterday and again such a big fan I'm a big fan of all of it to be honest I I do
24:00 - 24:30 like uh kind of the investments going in the tigling here um but evolving GitHub issues and projects uh there was a public preview in January around this there's been just a ton of investment into GitHub issues so being able to have sub issues for example being able to have issue types um advanced search capabilities as well and they are all now generally available so now you'll see for example um you can go and assign an issue type to uh to your
24:30 - 25:00 issues and then combine that you've got sub issues as well so what this then starts allowing you to do is build up this hierarchy of like hey we've got this epic this epic has this kind of task or this feature whatever your kind of structure looks like and makes sense to you you can start building that now and then uh some additional search capabilities then with issues as well and alongside that um you know obviously a lot of people use uh issues with GitHub project boards um they've
25:00 - 25:30 increased the limit from 1,200 items on the project board or issues to the project board to 50,000 so uh yeah pretty significant increase uh so uh hopefully that will uh that'll keep you all going on your planning there and then some enhancements to the UI so filter bar autocomplete syntax highlighting create more option i've used this quite a lot recently actually that's been really useful um alphabetical ordering of issue forms
25:30 - 26:00 nice copy link uh that easily share the URL of the issue and then uh load more um and just you know good quality of life updates and and paper cuts there so good to see those yeah I saw this one pop up yesterday um so if you're using Helm um so I've typically used Helm when I've been working on Kubernetes projects personally um but either way if you're using Helm um dependent upon version updates uh are now supported sorry Elm
26:00 - 26:30 is now supported for dependabot version updates so uh yeah that means you can kind of keep those uh Elm packages uh current keep them up to date by using dependable version updates and if you saw the stream I think a few weeks ago you'll know how such again I keep saying I'm such a big fan i really am um because personally I don't like you know having to kind of keep checking in on my package um log files and things like that what versions I'm using of things
26:30 - 27:00 depend helps me keep those up to date and when I've got that with actions actions run the checks because it's raised to the pull request the checks run and I have that kind of increased confidence that I'm bumping that package version um is going to be fine is going to be okay so you kind of see how all of these ecosystem of tools come together into that development life cycle there so that's great um GitHub actions hosted runner fleet now includes a 96 vCPU large runner wow
27:00 - 27:30 so uh yeah if you are in need of some uh powerful machines there uh to go and run some uh workloads some workflows I should say um there you go i would love to know if you are using that what kind of uh things you're building there that is uh wow 384 gigs of RAM huh i'd love to know what you're building i assume it's probably like um
27:30 - 28:00 machine learning or AI based apps or something related um but yeah I would love to know what you're building there u right and then copilot chat now supports pasting links um I saw this one just before I was going live actually haven't had a chance to have a play but uh yeah you can paste links into uh into Copilot chat now so issues discussions uh discussions and pull requests and now you can reference these within Copilot chat simply paste a link into the chat and copilot will do
28:00 - 28:30 the rest got it so I'm assuming then it's just those types of links there i think um maybe we'll get a chance to try later maybe not cuz we've got a lot that we want to fit into today's session so So there you go that's um that's the latest on that one let me uh jump back here and uh and take a look at what's been going on in chat how to connect Microsoft Visual
28:30 - 29:00 Studio Code to C panel public html font i want to use Microsoft co copilot agent for create WordPress home plug-in uh don't know is the honest answer um it's been a while since I've used C panel wow it's been a good few years um but I guess C panel is kind of like your admin panel for your hosting provider right um and so what I would probably say is think
29:00 - 29:30 about how you're deploying your code from your local environment to that hosting provider i think that's the answer that you uh want to think about because I probably wouldn't edit directly on that environment because that's effectively like editing in production um you know you might want to go and have your source code version controls um in GitHub in a git repository and then you kind of push those changes and deploy those changes on whatever kind of cadence or cycle makes sense so not sure I would um edit
29:30 - 30:00 directly uh personally um but then of course when you've got that code locally anyway you can start using Visual Studio Code Agent World there so that's how I would probably tackle it hopefully that helps [Music] uh yeah so there's quite a long write up basically around agent road and kind of how it's shaping um development and you
30:00 - 30:30 know I I guess what I'd say there is um you know it's co-pilot right we are still the ones driving that we are still the ones kind of reviewing and looking at the code um and I personally what I found is it's helped me do more and it's helped me learn as well because what I always found when I was kind of coding in the past is I'd be kind of looking up docs trying to understand like how this method works how this SDK works and then trying to map that back to my project
30:30 - 31:00 and then I realized I'm actually using a slightly older or slightly newer version of the SDK than is documented and it it was just a lot of friction in that and what I do like about kind of copilot chat copilot agent mode is I'm learning in the context of what I'm working in so there's a ton that I've been just learning around like um React and along around many different things to be honest and so um that's what I would say is we're still the ones in control we still are the ones who are kind of
31:00 - 31:30 driving that we're still the human in the loop and um it's there as a tool just like you know if I'm an accountant I probably use Excel or I probably use some kind of other tools for example so um that's what I would say there so I hope that helps [Music] um the question is Claude or Gemini i'm not sure what the question is there uh so please come back to me what what what was the context of that i've forgotten what discussion point that may have been back then
31:30 - 32:00 um is automatic remediation with copilot autofix secure enough or should manual validation always be required um so copilot autofix remember that's just going to provide the potential fix um again like I mentioned about co-pilot and agent mode it's there to assist us so we are the human in the loop we're the one who should be kind of reviewing that the thing I do like about copilot autofix is just like dependabot it raises it in the pull request if we've
32:00 - 32:30 done the right thing if we have um created GitHub action workflows added other kind of status checks like builds for tests linting all of those other things then you know those are quality bars that that code whether it's copilot copilot agent mode whether it's me whether it's copilot autofix whether it's Joe Blog's developer someone else on the team we all have to pass that barrier that kind of quality check and
32:30 - 33:00 so that's why again I'm I'm so about having things like GitHub action workflows and having CI/CD in these good kind of processes that quite frankly we've been talking about in the industry for years and years and years now um and still in places I see it not being done um this is why it's so important because when we've got those quality checks in place it allows us to start using those tools and bring those together to move fast so that's what I
33:00 - 33:30 would say is it depends right like depending on what your needs are maybe you want to have that manual validation as well and I do always review the code before I kind of push it and commit it etc um so that's something generally we say and recommend to do but I think having those things like actions and workflows just help you accelerate with some of those checks and you know unit tests still work to um maybe integration tests if you got those um the builds still work linting still works and any
33:30 - 34:00 other quality bars you put in place as well those help just keep that momentum and that acceleration so that's what I'd say there great thanks Anoir good to uh good to hear the love for governance i think um again I think it's one of those really really important things that goes hand inhand with what I was just talking about with uh kind of action workflows pull requests etc is just making sure we have those good
34:00 - 34:30 um standards of what we expect in our repositories whether it's um naming of branches whether it's what files are allowed to be edited and by who whether it is um whether we have to go through a poll request or have certain required checks in place um you know these are all important things and absolutely taking taking that seriously so thanks for that uh what is the documentation URL uh so I'm assuming uh that you're asking
34:30 - 35:00 about this page uh in which case please go to gh.io/changebook uh that is the URL that you want to go to uh to go and take a look at um all of those announcements that we were just talking through so uh yeah please go and have a peek at that i will leave that up on screen for a moment let's see any plans for introducing Gemini 2.5 Pro to Copilot great question
35:00 - 35:30 don't know if I did know I probably wouldn't be allowed to say anyway but uh you know of course I think bringing those latest and greatest models into Copilot is of course you know always on the team's mind so watch this space um you know nothing that I can share or have news to share at the moment I'm afraid so um stay tuned is all I can say there I'm afraid um good okay I think I'm caught up on
35:30 - 36:00 the chat let me know if there's anything else that I've missed because any other questions please uh please let me know um and again you know if you haven't said already let me know where you're tuning in from let me know what kind of projects you're working on at the moment i'm always super intrigued to find out what everyone is working on and the kind of things that you're doing here so going to have a quick drink and we are going to talk
36:00 - 36:30 about GitHub MCP server but before we do that we should probably just contextualize a little bit with what MCP servers are so let me do it like this there we go okay we're going to zoom in a bit just so it's super super clear on the screen for you there's a nice diagram somewhere oh maybe it's not on this page maybe it's on this page there we go
36:30 - 37:00 right I just zoom in uh maybe I'm just going to open this in a new tab oh too zoomed in there we go let me bring myself off screen as well uh uh there we go okay so what is an MCP server this diagram will kind of help but before we look at the diagram let me
37:00 - 37:30 explain think of an MCP server as let's backtrack again what is MCP mcp stands for model context protocol so if you've been watching the channel you'll know that one of the things I've said so many times over and over again is context is so important when we're working with these large language models it's important when we're working with anyone if I'm working with my colleague and I ask them to go and review something I need some Yeah I need them
37:30 - 38:00 to know what we're reviewing or what they're reviewing and why I want them to review it like if there's certain areas I want them to pick up on in particular if there's certain things I want them to go and take a look at and so when we're working with large language models it's no different which files are we talking about um what you know passing that file in as context um making sure I phrase my question correctly that prompt in such a way that what I'm asking for is not ambiguous and so when you think about
38:00 - 38:30 model context protocol the clue is in the name there what it's all about is how are we bringing additional context that we can pass in to those large language models so really it's all about how do we either go and get these kind of tools or um these resources and pass those contexts then in to this kind of um server and then return that context back to the large language model that is what it's about that is what model context
38:30 - 39:00 protocol is there to go and solve so let me go and bring that back on screen so you can see here that really all that that it's doing here is you as a user you go and um have your prompt you go and send that to an agent that agent then goes and uh you know is the large language model talks behind the scenes it sends a prompt it sends any context like the files etc you've been working on but maybe it has a set of
39:00 - 39:30 capabilities that it can go and use so certain tools it has those tool descriptions as well it sends those to the large language model then that decides right to do this task I need to go and use this tool i need to go and use this thing and that is where then the agent go and calls these tools and these tools could be many different things one of them could be an MCP server like one from Plexi one from uh GitHub which we'll see in a moment or maybe some FS code extensions there as
39:30 - 40:00 well and these MCP servers can take different forms and we'll see that in a moment but then once you've used this tool the tool does a thing so it might be like reads a GitHub issue it might be creates a GitHub repository whatever it may be you can then go and um run that tool the agent runs that tool that gets sent back to the agent with the kind of summarized kind of context and before running that tool maybe you need to have some kind of confirmation that you're happy for that
40:00 - 40:30 to run so creating a repo or whatever it is um and then the agent executes a tool and then you get your result that in a nutshell is what goes on with MCP servers so think of them as like superpowers I guess that um we can equip to our large language models to our agents so that is um in a nutshell what these MCP servers bring they enhance the capabilities of what our agents can do
40:30 - 41:00 because if you've been using agent mode so far in copilot agent mode in Visual Studio Code you'll know that there are certain things it can do like you can read files you can read from the terminal you can go and um you know read the uh test results for example but I couldn't go and do something out there like creating a GitHub issue creating a new GitHub repository searching Chris Radington's GitHub profile those types of things it
41:00 - 41:30 couldn't until now because of this idea of model context protocol and over the last few weeks it's gained a lot of momentum and a lot of popularity and uh of course you've seen uh the GitHub has uh released its own GitHub MCP server here so uh yeah that's uh that's a little bit of context so hopefully that helps first off so uh let me uh jump back to
41:30 - 42:00 here and I'm going to bring up my screen there we go so this is the GitHub MCP server repository um you can see it is uh public so you any of you can go and
42:00 - 42:30 look at this and let me just bring this off screen one second just so I can check that I'm putting the right uh short URL in before I share it yeah I am great uh you can go and I'm going to put the link in the chat in case any of you are interested in taking a look
42:30 - 43:00 yep we go and I'll just bring it up on screen so gh.io/mcp will take you uh to this repository and this is public repo you can go and take a look you can go and raise a pull request if you like as well uh but the team are hard at work on uh uh on changes here as well um but really this MCP server is the set of
43:00 - 43:30 capabilities if you wanted to interact with GitHub there used to be a reference implementation from anthropic um GitHub recently uh took ownership of that and you can see in here there's a few ways that we can go and make that run um now of course you're not limited to using this in Visual Studio Code so if you're I guess using Claude Desktop or any of the other kind of local um AI tools that support MCP you can go and use it there too but here's an example of using it
43:30 - 44:00 with VS Code um and the way that it's done here is it's actually pulled down as a Docker image um I'm actually going to show you it as a uh just a local binary that I've built so I've taken the code locally i've built it and running it locally uh just in case you don't have Docker installed in your machine so cloud desktop as an example you can see uh here as well um etc and then if we scroll down you'll see that there's then a number of tools that can be called but
44:00 - 44:30 think about these MCPs as kind of like a wrapper around the API so if an agent is trying to uh perform a task it has a set of tools that it can go and call that it can go and use and these tools have some kind of description against them to help the agent decide is this the right tool for the job is this the tool that I want to call in this instance those you can imagine if you put more and more tools
44:30 - 45:00 in there or if they're very similar descriptions then it might get confused which tool to kind of pick so um this is kind of one of these interesting challenges at the minute but you can see for example um you know get me getting details of the authenticated user getting an issue getting some issue comments creating an issue listing issues updating issues searching issues um so there's a lot of these different tools which are here so
45:00 - 45:30 bless me excuse me uh so that in a nutshell is the gift of MCP server so let me jump across like a cooking show here's something I made earlier so this repository right now uh is local it's not um it's not pushed to GitHub yet it's nothing's kind of there
45:30 - 46:00 on github.com and I can show you that by going to this URL so github.com/krisington/strat Oh stratg-up there we go we get the 404 so it doesn't exist it's not there yet so one of the first things that I want to go and do is I want uh to push this repository
46:00 - 46:30 to GitHub again remember in agent mode um before we had the MCP support this isn't something the agent could go and do it couldn't create a repository um so let me go and do this first off let's explain uh what's going on here in this file so this mcp.json JSON we have in this.v code folder and then we have this MCP.json
46:30 - 47:00 file this is where we configure the MCP servers that are available so what tools um the agent can go and use for this uh repository for this project so we can see that there's one server um and I've just named it GitHub-s server now there's different types if I just get rid of that a sec and put type there um SDIO is one of those but when we go and add a new server you can see
47:00 - 47:30 we can do stdio server and events or SSE um and then of that stdio we can run things like npm packages pip packages docker images as well or we can just run the local commands so that's the the path effectively for the uh compile binary that I've got locally on my machine and then just passing in that argument then so I can just hit start on that and we can see that's now running
47:30 - 48:00 that's that server is running in the background and when I open up chat uh if I have agent mode here we can see we can click on this kind of um wrench and this kind of screwdriver icon for tools and you can see we've got a number of different tools available here to go and use now one of the other things that I've done just before going live is if we're interacting with GitHub we of course need to authenticate so I
48:00 - 48:30 can access my private repositories and things like that i need to generate a personal access token again I'm going to go full screen for this please do not store that in source code do not store that part in your code um there is a way here you can see that we've got this type of prompt string and then it's stored kind of behind the scenes in Visual Studio Code here so we don't actually um have this personal access token in the code so do not put
48:30 - 49:00 in the code if you look if you listen to the stream last week you'll know that having secrets encoded bad don't do it don't do it so uh personal access token there so we can see that uh that uh is used then as part of this environment variable for this MCP server so that is how that server then gets access to um basically to act on me on GitHub but I've generated a token
49:00 - 49:30 that has certain permissions that I'm comfortable giving it and then it can go and do things based on that token so as an example I could go and say something like let's switch to Claude for this um create a GitHub repository called strategy dash up now what you'll notice every single time you run one of these
49:30 - 50:00 commands is it will ask you to confirm what you're doing here and you can go and take a look and say right create a new GitHub repry this tool is from here etc so be careful but one of the things I notice as I review it is oh actually it's not going to be a private repo and for me for what I'm doing here I want this to be a private repo i'm gonna cancel that and that's on me to
50:00 - 50:30 you guessed it provide more context to the agent because I didn't say I wanted to be private it didn't know it didn't have any understanding of what I wanted to do so let me do that again it must be a private repository we'll go and run that there we go looks good and there we go private true this
50:30 - 51:00 time next JS base strategy app yep that's correct uh based on uh what I've got here so that looks good let's go and run that there you go so I've created a private GitHub repository called strategy- app the repository has been initialized with a readme so uh that's probably one of the other things I should have done and you may have noticed it is it said auto init
51:00 - 51:30 true actually I don't want it to auto init there we go i've refreshed that page you can see it's created the repo for me um I'm actually going to delete this try again because again I should read uh what's uh what it's uh going to go and do i kind of ignored the auto init uh line there uh so let me go and do
51:30 - 52:00 that and I'm just going to run the exact same thing again and let's create a new chat just so it doesn't uh There we go they're being super um super clear there we want it to be
52:00 - 52:30 true private yet and auto init false looks good looks good and so when we look at this we can start seeing all of the different things that it can go and do now it can push multiple files to a GitHub repo in a single commit now it's funny i've created a private repo do you want me to go and uh create this repo locally no I don't thanks um what I'm going to do at this point is
52:30 - 53:00 I'm going to go and go to strategy up i'm going to go and add that my terminal there right and I could have used um you know the agent to go and push up the files for me if I wanted as well but now when we refresh we should see there we go we've got our uh we've
53:00 - 53:30 got our repository so I was kind of thinking what do we build um and you'll notice obviously I've kind of decided a bit on an idea here um strategy up so I was thinking that I studied um an MBA over the last couple of years and there's been this tool that I wanted to kind of build of just like a visualization kind of tool
53:30 - 54:00 to help with like plotting um basically different kind of strengths weaknesses all of that kind of stuff you know SWAT analysis if you've heard of that a similar kind of tool so I was thinking I might build something like that but I'm going to use agent modes to help me make that but also create things like GitHub issues and use some of these other tools to help me along the way as well so that's
54:00 - 54:30 what I was thinking that we might do here oh um let me do this uh let me We'll do this well this is kind of what we're looking to build something like
54:30 - 55:00 this where you've got um you kind of different pest uh categories so whether it's political economic social or techn technological so what those different opportunities are outside and then some different color coding of how prepared are we and how relevant is it to us so you're kind of assessing like what are those external threats to us that's kind of uh the uh the visualization here so what I was going to do is I was going to pass that into agent
55:00 - 55:30 mode and I was going to pass it into agent mode but ask it to create a GitHub issue for us so not solving a problem immediately but instead um you know let's create an issue to work on it later so I would like to create a GitHub issue in chrisington/ um tree
55:30 - 56:00 app the issue is a clear requirements uh how much I say here requirements clear set of requirements or core functionality of the set should generate a uh should generate a no should allow user to create a
56:00 - 56:30 diagram similar to the attached i think I'll need 4 for this by the way uh the app should allow the user to create a diagram similar to the attack allowing them to add as many points onto the diagram they choose the gr is a please provide in the issue please
56:30 - 57:00 provide um a clear description of what the diagram's purpose is a description of the user inputs needed diagram from
57:00 - 57:30 um yeah I think that's probably good enough for uh for our initial one here so GT40 we've attached the image we've got this context here let's go see it's used one reference it's used that image so we haven't got any custom instructions i saw a bit of a chat uh conversation about that earlier on that wants to go and create an issue so core functionality rings
57:30 - 58:00 diagram creation it's fun it's to allow us to create a rings diagram yeah points to the diagram to find attributes so you can see how it's kind of broken down what uh what the requirements are for us
58:00 - 58:30 there enhancements and core functionality i don't think there's a label core functionality so I'm curious how that will go um but let's give it a go let's see great now I'm going to go back to the browser here just so you can see there we go it's the pull request as well oh I needed to uh do that as uh I
58:30 - 59:00 guess depend auto enabled for me here we go we can see that uh it created a pretty good uh issue for us so yeah the functionality up is to create a rings diagram great that looks like a great start now you know what I'm probably going to
59:00 - 59:30 do next i'm probably going to um use co-pilot agent mode to create based on this uh on this issue but before we do that let me just uh take a look at the um at the chat here i did see some questions coming in uh it's the last one we answered so when you ask colleagues for help
59:30 - 60:00 context is often gleaned by colleagues because they know your situation background and projects you're working on an agent or doesn't have that so you have to apply it the more context you spy the better the answer whether colleagues or agents which is why you have copilot custom instructions files in your source repo couldn't put it better silly dev and welcome back thank you for joining again here today hope you're doing good uh how late am I what's the saying a wizard never late they arrive precisely when they're meant to so you're exactly on time welcome and
60:00 - 60:30 you can always go back and watch uh on YouTube or LinkedIn as well um but mostly what we've kind of covered so far is the change log and just bit of context setting around um co-pilot agent mode and model context protocol as well can I share the contents of JSON file what needs to be copied VS code for MCP enablement um I would say um take a look at the uh link that I shared a bit
60:30 - 61:00 earlier so gh.iocp because the VS Code example is in there that you can go and configure um because right now the way I've configured it I've got a local binary build of mine rather than docker just because I wanted to show you there's different ways of doing that so even if I copied and pasted it it wouldn't work because that path is unique to my file system so uh yeah take a look at the uh at the read me um is what I'd say because it's all on there okay so uh rings diagram traction
61:00 - 61:30 great um let me also show you this so we're going to add uh another tool to our toolkit here uh we're going to create um an MC not create an MCP tool but we're going to use the MCP tool here and we'll use it in a bit just to maybe kind of inspect and see what's different and again I've never tried this this is completely my curiosity here at this
61:30 - 62:00 point so let's go and add that here now of course Playright is just um you know it's going to do things like UI testing and kind of navigating so it doesn't need like any personal access token or anything like that and you'll notice that this one is just running uh as an npm package so that's what that's doing there if I hit start on that we can see that's running oh yes I do mean to share the screen sorry T3
62:00 - 62:30 thank you for uh for uh for mentioning that you know uh how bad my multitasking uh is so uh thank you thank you for calling it out so uh just to uh to mention here there's the uh playright uh MCP server here from Microsoft if we scroll down uh there's an example of how you can go and configure that so there we go uh right there uh it's run uh basically as an MPX
62:30 - 63:00 command so an npm package uh and playright mcp latest um is kind of the package version it's bringing down there t3 you could say that maybe there was a lot of space on screen available for uh say uh a screen share for example got you there we go got you uh so there we go we've got uh we've got this tool now running so we can see that uh we've got the GitHub server MCP server running we
63:00 - 63:30 also got the Playright MCP server running and it has 20 tools so now when we bring up agent mode this time we'll see that we don't just have the uh GitHub tools now we also have the playright tools so being able to close a browser being able to wait in the browser file upload pressing keys navigating you can see how this becomes um really powerful when you start bringing all of these tools together so this is one of them the other one that I want to maybe go and
63:30 - 64:00 bring in uh [Music] and is looking at the uh kind of reference implementations um from uh Anthropic here on the model context protocol uh GitHub organization and I was looking through because you know there's a number of different reference servers here and you can see the one uh that was here from GitHub originally And you can see here that's starts deprecated in favor of the
64:00 - 64:30 GitHub MCP server that we've just been talking about but it's interesting right you know there's things that you can do here maybe around memory and bringing memory into the agent can create entities relations add observations etc which is cool which is fine um but I was thinking and I'm just
64:30 - 65:00 curious sequential thinking sounds kind of interesting for a problem like this because there's going to be a number of different steps that it needs to kind of go through so what I was thinking was maybe trying this MCP server um cuz I've it's it's not one I've used so I I kind of want to experiment a little bit see how it goes um and yeah see if it's one that we can kind of easily plug in and uh and use what I'm going to do is I'm just going
65:00 - 65:30 to copy this bit here um and we'll use the MPX version i think that's good uh for us for what we're what we're doing we'll go and uh we'll go and hit start on that great we can see it's discovered one tool so that's clearly uh working
65:30 - 66:00 for us now let me go on to this if we take a look at the tools available there we go sequential thinking is in there so let's try this then um please be the issue in Chris Wington app your task is to
66:00 - 66:30 sequentially think through and you can see I'm using the keywords here kind of just to trigger it that it knows what tools to go and call um your task is to sequentially think through the steps to go and influence it please make the needed changes in the code base for an initial version i will feed back any changes
66:30 - 67:00 that are required later that's right how does everyone think this is going to go have I provided enough context like am I clear in my in my prompts here let's
67:00 - 67:30 see first off uh gathering some context about who I am so that's one of the GitHub MCP server tools okay there we I need to see the uh issues in the repo sure looks good and then once it's done that I
67:30 - 68:00 guess it's going to look at the There we go i was curious what came back ah so the whole party did come back in the list issues okay cool now first I should check the current state of the nextJS application like a nice
68:00 - 68:30 okay let's run that then see how that goes that's done the first step now it's the second step right we have the next jack
68:30 - 69:00 application okay cool so it's kind of thinking through what have we got currently in the app uh in terms of dependencies what do we need fair enough let's uh let's try that i'm not going to interrupt it just yet i'm just curious what direction it takes here so yeah let's first install the required dependencies we'll need JS go there
69:00 - 69:30 okay cool and what I like about this is we can see that kind of thought process as we go through step by step as well right I'll install the necessary dependencies great right those are installed uninstall
69:30 - 70:00 that's that now we need to create the core components uh so points a category ring diagram control panel okay it's kind of going through as I would break down the problem i guess thinking through the components and what not do we need seems reasonable so far
70:00 - 70:30 let's create the essential TypeScript types we need to define the interfaces for points and enum based on whether it's political economic logical or social yeah hey nice like that
70:30 - 71:00 great so it's now going through and uh this added the types let's go and review that first and see how we feel about that so categories technological yeah are you likely likely average yeah yeah yeah now it's interesting it's got the X and Y that could be like a bug or a feature later depending on how we want to go and implement that because I haven't really
71:00 - 71:30 specified how we decide on the X and Y just yet I think in the original issue um so yeah let's uh let's see how that goes i'm curious how it will define that later all right so now that we have our types defined let's create a standard store to manage the diagram state yeah yeah yeah okay I guess
71:30 - 72:00 uh yeah it did create that in a types folder for us as well nice good let me create the store directory and implement our sand store for managing the diagram states close that a sec so importing create from sustand types point update remove select save state code
72:00 - 72:30 state okay they all seem generally uh reasonable so we're adding on to the state with a random ID cool update point passing the ID what the updates are okay remove the point if it's the right one then make a null yeah yeah save state load state okay nice and then what's the next step uh now we need to create the D3JS
72:30 - 73:00 visualization we'll need to create a ring diagram component the ring structure implement point plotting with size based on okay ah nice i didn't catch that in the uh in the issue so let me jump uh jump back here let's look back at the original kind of requirements that we passed in here we go so yeah it incorporates these different
73:00 - 73:30 relevancies and that's the likelihood that's where those enums have come from you can choose colors or patterns to represent preparedness so I'd expect some kind of mapping between preparedness and color adjust the size of points to reflect relevance the high moderate low and that's what it's saying here we'll um implement point plotting with size based on relevance and color based on preparedness so it's even bringing in those individual requirements there that is nice i like
73:30 - 74:00 that okay so how do what do we need to do here so let me create the store let me create the components directory oh yeah that makes sense yeah cuz I guess it's also think
74:00 - 74:30 it's kind of going back to set I suppose here to solve that sub task is I'm assuming what it's doing um let's figure out what components are needed what ones we need to make to then go and uh and solve that okay so we're making the ring diagram component now nice let's see
74:30 - 75:00 i didn't say anything I think in the requirements about how many rings there are or anything like that yeah I didn't so uh curious how that's going to uh be interpreted here
75:00 - 75:30 let me just uh take a look and have a look through the code so for diagram SPG not for the current one return makes interesting it's hard coding the width and the height i don't ah no there are okay categories and when we look at the categories in the
75:30 - 76:00 types interesting don't think it's quite going to work out as I wanted it to cuz my initial sets of requirements were not as clear as they were supposed to be this shows the importance of your requirements folks well I think what it's going to do is create a ring for each category that exists so it would kind of have E SD or
76:00 - 76:30 something like that rather than having them as corners so I'm actually going to course correct it at this point this is what we should do right when we're working with these kind of tools it's kind of come in and I could continue i could pause i'm just going to reprompt it and say I think I need to add some more context for you the ring number of rings could be based on
76:30 - 77:00 the number of degrees but did I do it on i'm just going to look back at my original diagram uh likelihood is actually based on the likelihood instead like likely to highly unlikely and that should be in the
77:00 - 77:30 types is good okay so to the point earlier about do you just kind of accept it this is why it's important to review because what I wanted isn't quite what is there so highly likely instead the circles could be um split into four quadrants based
77:30 - 78:00 Instead the TLDDR um the number of rings equals the life stages those circles are split each split into four categories always use the
78:00 - 78:30 information you can keep it up just using this to explain it for how that goes oh okay i might need to go back and reprompt that one it's moving on to the control panel here i guess cuz we uh were at that point
78:30 - 79:00 where it's uh was like "Hey do you want to continue?" I guess it's just interpreted that as continue please but that's okay we can uh copy that prompt for now and we'll come back to that but this is something I know that uh we'll need to go and uh go and work on there we go nice need to restrict the
79:00 - 79:30 ring diagram component rings based on likelihood so five rings highly likely to highly unlikely yeah each rings four quadrants yes that clear so categories likelihoods ring width is likelihood yeah and draw the quadrant lines love it more category labels okay that seems
79:30 - 80:00 like it's more on track yeah now that was what I was worried about uh I think we've kind of fallen out of that um of what we were doing with the sequential
80:00 - 80:30 thinking and you carry on with the sequential thinking steps you haven't started let's see if it can do that based on the context of the thread
80:30 - 81:00 cool keep going
81:00 - 81:30 okay oh it's on the control panel for
81:30 - 82:00 us nice good morning Michael thanks for joining us there's uh Oh that's just a linting error by the looks of it yeah there we go pilot fixed that thanks hey Florian good morning good
82:00 - 82:30 morning right oh okay now we need to update the main page to integrate both the ring diagram and control panel components yes that is exactly what we need to do
82:30 - 83:00 okay I'll update the main page thank you so it's just bringing in those components and putting in a flex fine haven't really given it any guidance on how I wanted it to uh be laid out at the minute so that works uh finally we should improve the app style and UX okay adding a legends
83:00 - 83:30 oh nice okay okay i like that where will I add the legends actually let me jump back to the sequential thinking step [Music]
83:30 - 84:00 yep so it's making a new component nice that's what I was hoping for even though it wasn't explicitly in there love that that it's uh and just marking that dynamically [Music] good okay okay i still haven't seen
84:00 - 84:30 uh where or how it will do the X and Y but I'm just uh curious now to see what we get
84:30 - 85:00 oh yeah okay so that's going to be in the control panel uh I expect maybe some of the others
85:00 - 85:30 yeah assuming we need that in the bedroom as well there we go cool oh okay i mean the obviously the UI is a little bit funky right now but we can uh we can fix that nautical likely
85:30 - 86:00 no it worked it's very impressive like I guess there's a lot that we need to go and change on uh Oh T3 was that Was that a pun was that a pun that we achieved our target if it was unintentional I very much like it i love a good pun
86:00 - 86:30 so that is very impressive you know what I'm going to do now though i'm going to feed it a screenshot of what we've got and where we are and ask it to improve but before we do that uh let me see here bear with me one
86:30 - 87:00 second uh so we want to go that way and I'm going to do VS Code oh and my camera is frozen again as well bear with
87:00 - 87:30 me well we've achieved some really cool stuff in that time I think uh right let [Music] me grab a screenshot of in fact what I'm going to do what I'm going to do first is I am going to take an initial uh initial commit of that we're going to commit and push that
87:30 - 88:00 couldn't do it on the main branch but don't do as I do we'll uh we'll get some good uh protections and things in place very shortly um I want to take a screenshot of the diagram you
88:00 - 88:30 go know what I'm going to do here uh I'm going to put both of the diagrams in there we go the aim and the actual it's uh it's next it's next next.js [Music] uh yeah so I initialized that app uh
88:30 - 89:00 couple weeks ago and did nothing with it so uh I thought it was a good uh a good example for us to go and try uh so oops just drag and drop it i'm going to try and help it with a bit of
89:00 - 89:30 names current implementation creates a new GitHub issue with a carefully constructed plan on how to get from the current implementation
89:30 - 90:00 This the second screenshots was a UI which is closer to the affecting PNG on first trans um the actual implementation seems to work well suggest changes at this point for example you might notice isn't very clear at the
90:00 - 90:30 moment please make sure to um create a GitHub issue we're not solving the problem yet there we are let's see so is this the new version my Copilot Pro says edit instead of agents aha Danish great question um so I'm assuming you're in Visual Studio
90:30 - 91:00 Code um and what you can do there is a setting in VS Code i'm going to try and find it one sec I dig into it well let me through all of my uh settings
91:00 - 91:30 uh ironically I uh can't find the setting um but I'll link to a video oh it's right there uh so it's chats.agents.enabled true i'm going to zoom in on that line and bring that up on screen so that is the setting that you want to put in your VS Code settings
91:30 - 92:00 file and if you reload the window uh then you should be uh good to go hopefully that
92:00 - 92:30 helps right so back to this what's fascinating is uh I think I forgot to remove the codebase reference here so uh I'm kind of tempted to run it
92:30 - 93:00 again but without the codebase reference i wanted more of a high level kind of requirement that makes sense oh and I didn't say where we want the issue created let me see [Music]
93:00 - 93:30 and there we go okay oh no in fairness that was uh my fault by the way Danish i um I left that as a reference just like I did again apparently ah what am I doing right remove that reference go and now we're seeing where we want to put it in and there right
93:30 - 94:00 cool okay but I will say I'm impressed ui improvements to align with target design h i don't think this is going to work and yeah you know 3.7 Sonic might be
94:00 - 94:30 better for tasks like this because I think um I'm sure I read somewhere that for UI pieces it's supposed to be improved as well so we could try uh Sonnet the reason we couldn't uh right now though is I believe uh vision support for those images is only GPT40 in agent mode I think at the moment so um so that's why we uh to use 40 for this one um let's do this let's do continue let's create that
94:30 - 95:00 issue let's jump back to the I'm going to close that old uh Okay good to know let's close that old issue cuz we've definitely completed that one uh right UI improvements to align with
95:00 - 95:30 target design and that's very clear in the original mockup readability current UI has a dark theme with low contrast
95:30 - 96:00 yeah yeah yeah yeah okay this looks fair I think once I save that so uh let's do this let's jump back
96:00 - 96:30 to All right so that we see the issue again we're going to do similar back in the issue and let's uh per the suggestion Danish we'll uh Danish uh we will uh for 3.7 let's try that out I'm not going to subconsciously
96:30 - 97:00 think through because I don't think we really need that on this one um Your task is to improve the UX specing issue and I'm just going to turn off that tool for now just so it definitely doesn't uh doesn't use that one right let's go
97:00 - 97:30 ah Dana Shaky now I think about it to your comment about um your version as edit instead of agent are you on latest build of Visual Studio Code um that might be worth checking if there's an update
97:30 - 98:00 hey it hasn't read the uh hasn't hasn't read the issue yet it starts making changes i will uh stop it and try it again cuz I do want to make sure it uses the
98:00 - 98:30 context from the issue because there was actually some pretty good context i'm just intrigued i haven't read the issue yet well I guess it wants to understand current states and then look at what the task is maybe let's see let's see okay it's going to start adding let's undo all that and this is why by the way folks we uh commit do not forget your good uh merge control practices this
98:30 - 99:00 [Music]
99:00 - 99:30 make the needed changes let's try that that should hopefully be uh a bit clearer okay let's jump back to 3.5
99:30 - 100:00 there we go okay so it's going to look for the issue for me
100:00 - 100:30 nice oh what are we trying to build here uh you may have uh missed it in the beginning Danish now let me grab the original uh screenshot i'll grab you uh what we got so what we're trying to build is um over
100:30 - 101:00 the last few years I've been studying for an MBA now and one of the things I learned about was this kind of diagram to plot like um opportunities initiatives risks things like that and I thought this was kind of fun because it's like a visual thing that is hard to describe so I want to take a screenshot of it and then use the tools to go and build this and that's what we're doing so we got to this stage but now we've built um this
101:00 - 101:30 and the you know the interface works but obviously the the UX isn't quite there um and that's because it just wasn't in the original requirements that we uh kind of captured and put together so um that's what we're doing now as our next iteration to get it closer to the uh maybe not exactly like the original but um yeah most closer in terms of like
101:30 - 102:00 uh just something cohesive I guess in struggling with the word there cohesive I think is the word I'm looking for right background foreground so it's keeping it black huh nathan hey
102:00 - 102:30 adding more margins bring the ring color in there okay yep that's exactly it Danish going to put that on screen so everyone can uh
102:30 - 103:00 can see that's exactly what we're doing of course a bit contrived you know would I create the issue and then do the thing like here the issues would have already been created but I'm just kind of trying to show how we bring all of this together into um into a bit of a story so uh yeah that's exactly what we're doing all right oh a few changes here hey
103:00 - 103:30 And let's Oh I stopped the server that's fine
103:30 - 104:00 did I do a different P oh no it's back there we go oh there's still a few weird things going on uh but
104:00 - 104:30 Okay so it's highly likely closer to the uh Oh I see what I was trying to do yeah oh there we go it just updated problem is right now this size doesn't quite work that's what I'd love is as I mouse over
104:30 - 105:00 it there's more of a tool tip like it happens eventually I guess i'm just going to do the exact same thing again was that two in the exact same spot yeah it was that's my concern at the minute is it I don't think it really does much with the X and Y like if we had a cluster of them that we needed to uh put in there I'd really like if we could drag and drop it ever so slightly but that could be a an additional feature request
105:00 - 105:30 um but you know given that what like an hour ago we didn't have anything we just had a diagram and now we've got these reusable components these control panels a bit more of a color scheme um we've come a fair amount there actually it works [Music] um test one in
105:30 - 106:00 technological uh although it's placing again there's some things that I need to go and fix like it's placing them in kind of the wrong place like it should be in like a quadrant like here for example but in technological economical should be Here I'm playing highly likely it's in that closer one political should
106:00 - 106:30 be very unlikely so lowest let's say it's very likely in preparedness here we go yeah so you can kind of see uh that's working there's just a few maybe kind of gotas to go and work on but um yeah I think we got a good MVP this is pretty
106:30 - 107:00 cool right well with that that was the main thing I wanted to do today and I think we've uh I think we've achieved quite a good amount there um I'm impressed that's been fun so to recap then what we did today uh we started off with a change log uh we started off with um just reviewing what's come up lately in terms of the GitHub change log so
107:00 - 107:30 over the last week um then we did a bit of a deep kind of discussion into what MCP servers are um explaining that they're like tools for these agents these large language models um things that they can go and do and call and then we went and um looked at how that works in Visual Studio Code the fact you configure them in that MCP JSON or VS Code settings JSON we added a few in there so we added
107:30 - 108:00 in the playright uh tool from Microsoft we added in the uh sequential thinking one the reference implementation from anthropic we added the GitHub MCP server then we talked about how on the GitHub side because obviously we're working with private repos we need to pass in that part token don't store them in code take a look at last week's video uh if you want to uh see why um and then we started building from an image from a
108:00 - 108:30 diagram used vision with aging mode to go and create the issue of what we wanted and then use those tools then to go and make that and kind of iterate on that um so that has been been really cool uh we've got quite far there today I feel so with that um what's going on uh I think we've got uh another one of these a little later today with Cassie i'm not can't quite
108:30 - 109:00 remember if there are other folks also uh going live today um we'll have open source Friday tomorrow and of course I'll be back uh same time next week and we'll maybe carry on with this or find something else to do um we'll see how much I play with this in the meantime and uh once I get it uh get it working and going but uh thank you for tuning in uh as always please do like subscribe please do uh uh do that so you can see when we're back online
109:00 - 109:30 and uh we're doing more of these types of things um and jump in the comments and let us know if this has been useful um otherwise folks have a great rest of the day and we will uh all be back same time same place next week thanks folks have a good one and bye for now