Loading video...

Video Failed to Load

Go Home

goose + the Chrome DevTools MCP server is a cheat code. It fixes all my Docusaurus and TailwindCSS issues, then checks desktop, tablet, and mobile to confirm the fix actually worked. The future is now 😂

blackgirlbytes's profile picture

Rizèl Scarlett 🇦🇬🇬🇾

13,419 subscribers

75,408 views • 8 months ago •via X (Twitter)

ComedyArtsScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Coding agents can now automatically fix issues reported by DevTools → The MCP server now accesses the issues panel to detect and resolve problems like cookie errors or missing form labels.
0:22

Coding agents can now automatically fix issues reported by DevTools → The MCP server now accesses the issues panel to detect and resolve problems like cookie errors or missing form labels.

Chrome for Developers

32,331 views • 8 months ago

In Chrome DevTools, AI via Gemini can now help you understand what the problem is and how to fix it, straight from the Console!
0:30

In Chrome DevTools, AI via Gemini can now help you understand what the problem is and how to fix it, straight from the Console!

Addy Osmani

154,103 views • 2 years ago

Write 100x better code using AI (for free!) Install the Codacy extension (VSCode, Cursor, WindSurf). This will install an MCP Server locally on your computer. Your coding copilot will use this server with the Codacy CLI to check every line of code it generates. The way this works is pretty awesome (assuming you are using Cursor): 1. You ask Cursor to generate some code 2. Cursor writes the code 3. Cursor then calls Codacy's MCP Server to check it 4. The MCP Server will use the Codacy CLI to find any issues 5. Cursor will fix the issues and call the MCP server again 6. When the code passes all checks, you are done Level of effort on your side: literally zero! Code quality and security because of this: 100x better! Codacy has been doing this for a long, long time, and their Guardrails MCP Server checks for a lot of potential issues: • Security issues • Quality standards • Pattern violations • Linting issues You can see more information about the extension here: I recorded a quick video to show you how it works. Thanks to the Codacy team for helping me set up everything, answering my 1,000 questions, and collaborating with me on this post.
5:21

Write 100x better code using AI (for free!) Install the Codacy extension (VSCode, Cursor, WindSurf). This will install an MCP Server locally on your computer. Your coding copilot will use this server with the Codacy CLI to check every line of code it generates. The way this works is pretty awesome (assuming you are using Cursor): 1. You ask Cursor to generate some code 2. Cursor writes the code 3. Cursor then calls Codacy's MCP Server to check it 4. The MCP Server will use the Codacy CLI to find any issues 5. Cursor will fix the issues and call the MCP server again 6. When the code passes all checks, you are done Level of effort on your side: literally zero! Code quality and security because of this: 100x better! Codacy has been doing this for a long, long time, and their Guardrails MCP Server checks for a lot of potential issues: • Security issues • Quality standards • Pattern violations • Linting issues You can see more information about the extension here: I recorded a quick video to show you how it works. Thanks to the Codacy team for helping me set up everything, answering my 1,000 questions, and collaborating with me on this post.

Santiago

63,316 views • 1 year ago

Connect your agents directly to Chrome DevTools. 🛠️ The new Chrome DevTools MCP server allows agents to inspect the DOM and debug console errors in real-time using Gemini CLI or any compatible agent. Check out the documentation on GitHub →
1:01

Connect your agents directly to Chrome DevTools. 🛠️ The new Chrome DevTools MCP server allows agents to inspect the DOM and debug console errors in real-time using Gemini CLI or any compatible agent. Check out the documentation on GitHub →

Google for Developers

22,793 views • 8 months ago

Claude Code documentation agent keeps project docs up to date with Docusaurus. Created a Docusaurus site: npx create-docusaurus@latest my-docs classic Added the agent: npx claude-code-templates@latest --agent=documentation/docusaurus-expert --yes Then prompt: "Use docusaurus-expert to review that the documentation is correct and up-to-date" Now the docs stay synced with code changes. That’s how I set up as shown in the video.
0:40

Claude Code documentation agent keeps project docs up to date with Docusaurus. Created a Docusaurus site: npx create-docusaurus@latest my-docs classic Added the agent: npx claude-code-templates@latest --agent=documentation/docusaurus-expert --yes Then prompt: "Use docusaurus-expert to review that the documentation is correct and up-to-date" Now the docs stay synced with code changes. That’s how I set up as shown in the video.

Daniel San

68,566 views • 11 months ago

Doom is now an MCP App 🎮 Waiting for the build in Visual Studio Code just got fun with your favorite arcade games! Runs on all MCP Apps hosts: Claude, goose, Postman, and more. My server pulls the games from the awesome Internet Archive. Check it out!
0:28

Doom is now an MCP App 🎮 Waiting for the build in Visual Studio Code just got fun with your favorite arcade games! Runs on all MCP Apps hosts: Claude, goose, Postman, and more. My server pulls the games from the awesome Internet Archive. Check it out!

Ido Salomon

15,003 views • 7 months ago

How to add Chrome DevTools MCP to Claude Code (Bookmark this post to follow the setup later) This lets Claude debug your web apps in a real browser... performance traces, network inspection, console errors. Requirements: - Node.js 22+ - Chrome browser In the video below I show you: - How to install the MCP server - How to verify the DevTools tools are available - How to use it with a real performance trace
1:01

How to add Chrome DevTools MCP to Claude Code (Bookmark this post to follow the setup later) This lets Claude debug your web apps in a real browser... performance traces, network inspection, console errors. Requirements: - Node.js 22+ - Chrome browser In the video below I show you: - How to install the MCP server - How to verify the DevTools tools are available - How to use it with a real performance trace

Daniel San

52,315 views • 11 months ago

The Dev Mode MCP server is now easier to connect in Claude Desktop
0:22

The Dev Mode MCP server is now easier to connect in Claude Desktop

Figma

140,203 views • 1 year ago

MCP in ~2 min In ~2 min I try to explain what it is, build a MCP server from scratch, connect it to @windsurf, Anthropic, Cursor desktop app, show it working. All code and longer vid below ...
2:23

MCP in ~2 min In ~2 min I try to explain what it is, build a MCP server from scratch, connect it to @windsurf, Anthropic, Cursor desktop app, show it working. All code and longer vid below ...

Lance Martin

40,461 views • 1 year ago

🔧 Let your coding agent identify and fix INP issues for you → With Chrome DevTools MCP, your coding agent can measure performance for specific user interactions to find and resolve slow UI responses - on its own with the help of the browser!
0:31

🔧 Let your coding agent identify and fix INP issues for you → With Chrome DevTools MCP, your coding agent can measure performance for specific user interactions to find and resolve slow UI responses - on its own with the help of the browser!

Chrome for Developers

16,706 views • 10 months ago

The future of web development is here! AI assistance is now available in Chrome 131. Learn how this feature can help you code more efficiently: #DevTools
0:27

The future of web development is here! AI assistance is now available in Chrome 131. Learn how this feature can help you code more efficiently: #DevTools

Chrome for Developers

2,621,406 views • 1 year ago

🚀 Qwen Chat for Desktop is here! 💻 All the power of Qwen Chat — now with MCP support for smarter, faster agents. ⚡️ Run MCP Server, boost productivity, and stay in control. 📥 Grab it now:
1:41

🚀 Qwen Chat for Desktop is here! 💻 All the power of Qwen Chat — now with MCP support for smarter, faster agents. ⚡️ Run MCP Server, boost productivity, and stay in control. 📥 Grab it now:

Qwen

75,563 views • 1 year ago

Claude Code on desktop just added an embedded loop that can run your dev server, view the app, review local changes, and watch pull requests until they merge. It can now preview a running app inside the desktop UI while it iterates on fixes. It can also monitor CI for an open PR and either fix failures or merge when checks go green. Earlier “agentic coding” workflows usually bounced between a terminal, a browser, and GitHub, so the model could not directly see what the app rendered or stay attached to CI results without manual babysitting. The new server preview flow starts and stops dev servers from a Preview control, shows the app in an embedded browser, reads logs, and can interact with the page to verify changes. That closes a common gap where a model edits code but cannot reliably confirm the UI and runtime behavior match the intent. The local “Review code” step runs before pushing, and it leaves inline comments on the diff so basic bugs and risky changes get caught earlier. For PR monitoring, the desktop app will track status and CI checks, and it can use auto-fix to attempt repairs and auto-merge to land the PR once checks pass, using GitHub tooling under the hood. Session mobility adds a /desktop command to move a CLI session into the desktop app, and sessions can be pushed to the cloud to resume from web or phone.
1:15

Claude Code on desktop just added an embedded loop that can run your dev server, view the app, review local changes, and watch pull requests until they merge. It can now preview a running app inside the desktop UI while it iterates on fixes. It can also monitor CI for an open PR and either fix failures or merge when checks go green. Earlier “agentic coding” workflows usually bounced between a terminal, a browser, and GitHub, so the model could not directly see what the app rendered or stay attached to CI results without manual babysitting. The new server preview flow starts and stops dev servers from a Preview control, shows the app in an embedded browser, reads logs, and can interact with the page to verify changes. That closes a common gap where a model edits code but cannot reliably confirm the UI and runtime behavior match the intent. The local “Review code” step runs before pushing, and it leaves inline comments on the diff so basic bugs and risky changes get caught earlier. For PR monitoring, the desktop app will track status and CI checks, and it can use auto-fix to attempt repairs and auto-merge to land the PR once checks pass, using GitHub tooling under the hood. Session mobility adds a /desktop command to move a CLI session into the desktop app, and sessions can be pushed to the cloud to resume from web or phone.

Rohan Paul

33,431 views • 6 months ago

Chrome DevTools MCP is going to be a Swiss-Army knife MCP. Watch me use it here with Gemini CLI to open Google Scholar, search for a term, and save the top 5 PDFs to a local folder. I cannot stop thinking of all sorts of personal automation possibilities with this. Amazing release from the Chrome for Developers team!
2:02

Chrome DevTools MCP is going to be a Swiss-Army knife MCP. Watch me use it here with Gemini CLI to open Google Scholar, search for a term, and save the top 5 PDFs to a local folder. I cannot stop thinking of all sorts of personal automation possibilities with this. Amazing release from the Chrome for Developers team!

Delip Rao e/σ

239,248 views • 11 months ago

Introducing Asterisk MCP - An MCP server that fixes security vulnerabilities while you vibe code. Supports Cursor, Windsurf, Cline, Claude, and any IDE that supports the model context protocol. It can perform codebase-wide scans, analyze snippets in your conversation history, and verify changes/fixes for security issues. mcp dot asterisk dot so
0:57

Introducing Asterisk MCP - An MCP server that fixes security vulnerabilities while you vibe code. Supports Cursor, Windsurf, Cline, Claude, and any IDE that supports the model context protocol. It can perform codebase-wide scans, analyze snippets in your conversation history, and verify changes/fixes for security issues. mcp dot asterisk dot so

mufeed vh

14,353 views • 1 year ago

Automate Customer Support entirely with Cursor + MCP!! Cursor Agent can now autonomously fetch emails, solve code issues with codebase indexing and reply to these emails. Here's how you can do it in just 2 mins, - Go to Composio's MCP directory - Click on the Gmail app and copy the sse url for Cursor - Add MCP server in cursor and complete auth - Let Cursor fetch emails, solve issues and reply to the query instantly All you need is
1:01

Automate Customer Support entirely with Cursor + MCP!! Cursor Agent can now autonomously fetch emails, solve code issues with codebase indexing and reply to these emails. Here's how you can do it in just 2 mins, - Go to Composio's MCP directory - Click on the Gmail app and copy the sse url for Cursor - Add MCP server in cursor and complete auth - Let Cursor fetch emails, solve issues and reply to the query instantly All you need is

Karan Vaidya

63,866 views • 1 year ago

Introducing AI Assistance in Chrome DevTools! 🤯🚀 Ever wish you could have a coding buddy to help you with CSS and layout? Well, your wish is granted! The new AI Assistance in Chrome DevTools is here to make your life as a developer easier, powered by Gemini. The new panel aims to help you find and fix issues. Just ask it questions about your code, and it provides tailored explanations and even suggests solutions. This is our first exploration into agentic AI in DevTools and we're excited to hear what you think of it. Some key features: 1. Conversational prompts: Get tailored suggestions and code snippets. 2. Contextual understanding: AI understands the code you're working on. 3. Step-by-step guidance: Get help with everything from styling to debugging. Want to see it in action? Check out my screencast below to see how I used it to add a dark mode.
7:00

Introducing AI Assistance in Chrome DevTools! 🤯🚀 Ever wish you could have a coding buddy to help you with CSS and layout? Well, your wish is granted! The new AI Assistance in Chrome DevTools is here to make your life as a developer easier, powered by Gemini. The new panel aims to help you find and fix issues. Just ask it questions about your code, and it provides tailored explanations and even suggests solutions. This is our first exploration into agentic AI in DevTools and we're excited to hear what you think of it. Some key features: 1. Conversational prompts: Get tailored suggestions and code snippets. 2. Contextual understanding: AI understands the code you're working on. 3. Step-by-step guidance: Get help with everything from styling to debugging. Want to see it in action? Check out my screencast below to see how I used it to add a dark mode.

Addy Osmani

95,988 views • 1 year ago

Say hello to the MCP server You can now build and refine GraphQL operations from Cursor, Windsurf, and Claude desktop
0:24

Say hello to the MCP server You can now build and refine GraphQL operations from Cursor, Windsurf, and Claude desktop

Shopify Developers

198,454 views • 1 year ago

Advent of Claude Day 19 - Claude Code + Chrome Claude can now directly interact with your browser. Navigating pages, clicking buttons, reading console errors, inspecting the DOM, and more. "Fix the bug and verify it works" is now one prompt. /chrome to start.
0:36

Advent of Claude Day 19 - Claude Code + Chrome Claude can now directly interact with your browser. Navigating pages, clicking buttons, reading console errors, inspecting the DOM, and more. "Fix the bug and verify it works" is now one prompt. /chrome to start.

Ado

137,552 views • 8 months ago