Chrome Just Got an AI Brain 🧠

Forget Playright, forget Cyprus, forget all of these automation tools. Chrome have just released the MCP server to take care of all of your diagnostic needs. Can Can we chat to AI to use Chrome? You actually mentioned this. This is why I kind of wanted to bring it up because you asked whether you can inspect the Chrome dev tools and and look at the code and do this and do that. This is what enables you to do. So MCPs are basically an API into a tool and this will become very relevant later on when we talk about uh dev day. They've basically given you an API that you can modify and do things and look at things in the Chrome browser whether that's diagnostics. Have you ever done Lighthouse and things like that? You can look at the the code. You can look at what's on the actual screen itself. But does this happen on my machine or is it like uh on a virtual server like this is on your machine? So your the web page you're currently looking at right now inside of Chrome has now an API wrapped around it. Ah okay. That you can that you can now interact with using a tool that has MCP functionality. So clawude desktop um warp uh I don't know what what do people use for MCP. Um, so you can say, you know, uh, Chrome MCP server, what's on the what's what browser tab are you on? Something like that. Or what's the current Lighthouse score of this page? Something like that. That is super cool. Yes, that is super. So I can theoretically can I like build a project with web flow and then use cursor to know what I'm like building. I don't know if you can take action on those things. Um I don't know. I literally don't know. But yeah, you can like what can you use it for? Verify code changes in real time. So what browser uh verify in the browser that your change worked as expected. So this is obviously if you're developing, right? If you're writing some code and you just want to check that it actually appeared on the front end. So this is where we get into, you know, um testing and things like that whilst we're developing. No more pasting of my console log into cursor. So cursor can just read it. Cursor can just read it. Exactly. Few images aren't loading. What's happening? So it could and then because it can read the console, it can look at those console logs and and do all that. Whereas the network tab a lot of times I had issues with exactly navigating the network tab and understand what is not loading. Why is that uh not working? So look, it can take action. Why does submitting the form fail after entering an email address? So this is obviously has to submit that form to be able to give you what the errors are in the console. So this is this is really really good. Um and performance audits. Look, this is what I was saying about the the um Lighthouse stuff as well. Live styling and layout issues, you know. So we can see the code, you can see the CSS. It can be really really handy. Um and it's just a simple case of adding that into your into cursor. That's all you got to do. How does it come to play uh with something like uh you know these agentic stuff that Chrome is trying to do and of course something like the browser because with this does that mean that the AI layer that we will have will have like more control over whatever uh page you are on. I don't think it has any well it doesn't demonstrate any um compatibility with the AI layer that GIA has or or comet has or or whatever. There's no MCP or there's no API to interact with that sort of stuff. We're just interested in the code that actually gets rendered on the page and the logs and the console and the network traffic and stuff like that. So, it's really the dev development sorry side that that it empowers. So, it's really cool. This is really interesting like Yeah. Uh I really love the idea and this is going to open so many doors. Yeah. No, for sure. So I've been really going hard in trying to sort of formalize an AI coding workflow. And one of the big things for me has been MCP servers. And so I now have I've got an MCP server that goes out and searches because generic webs there are MCP servers that actually search specifically GitHub and coding related stuff. It's like it's like Google for coders only ever returns code is results and things like that. So that could obviously refine you know when claude code goes and does a web search it's going to get a bunch of results from nothing to do with development. So, I've got EXA, which is my MCP server for doing that. I've got REF, which is up-to-date documentation. And so, with that, I've then got rules and sub aents that pick up on whenever I do this, use that MCP. Okay. And one thing, and I've released a video to my patreons uh yesterday, which is a real indepth look at how I'm using claw code and doing the rest of it. And I I finalize it by saying one thing I really want to get better at, which is where Chrome MCP comes in, is the actual looking at the rendering and bringing that into the life cycle. So I need I I would write a rule to say something along the lines of verify, you know, this and that. So you mentioned lighthouse. So we have unlouse, which is a funny name. It's literally Google Lighthouse, but for your entire site. So it um instead of like just uh lighousing one page, it takes your entire website like all of your pages and it tests everything. So it's really cool to basically just do this with one command for your entire website. I don't know if I like that idea. I don't know if like you know we talk about context. you you start to try and broad like I I can I can see the appeal of like testing the whole site but page by page like who wants to be testing all of this stuff all at once you know this is on Lighthouse. Mhm. And it gives you this view which is really cool. Look you wouldn't run this all the time. You would do this like once every so often. Yeah. This is too much to do after every change. like you give yourself a break I think a little bit and like like yeah I I don't know why I thought of this because when I thought of an MCP that can do you know at something with a page that I give it to maybe it could do it with multiple ones and yeah because I mean yeah to bring it to talk about the AI side of things and improving dev workflows and stuff like that it's becoming more and more apparent to me that you you cannot you you get much better results if you're very isolated and focused on one specific area and I think that goes in in this case as well work on the performance on a on a page by page basis like what what good does it I mean the one thing I I can see that's quite good about that is that you can test the whole site and then if something is coming up red as in really bad there's your priority that's all I can see that that's really good for but either way is you know whatever. Um yeah cool but yeah so MCP servers are becoming a big part of my workflow. The only thing to to say about it is that maybe for not your um your case but MCP servers eat up context. So, I noticed I had a bunch of MCP servers like enabled for my website, you know, as I'm coding and I would run out of context very very quickly because it's eating up loads of context. And you can check your context and claw code. Um, uh, you can get like a nice diagram. Uh, and you see that MCP adds up. So, I removed a bunch because I'm like, well, I don't really do that. I don't really use that very regularly through my coding workflow. like I'll just I might as well just do that outside or I'll do that once a day or something like that. I just don't need it on a I don't need it like within arms reach. So, I just turn off that MCP to save myself a bit of context. But this does like something that would work its way into my 100% like I'd need it all the time MCP server. I just need to build that workflow. So, um this is part of a larger conversation on my show Command AI which we stream live every single week. We discuss the news and all things related to AI in the world of design and web.