Loading video...

Video Failed to Load

Go Home

Announcing Chrome DevTools MCP! 🚀 Connect your AI coding agent to Chrome's powerful automation & debugging capabilities with ease. Key features: ✅ Reliable automation: It can programmatically handle clicks, form fills, dialogs, and page navigation with ease. ✅ Performance insights: Go beyond simple audits. Instruct your agent to record...

addyosmani's profile picture

Addy Osmani

395,105 subscribers

268,387 views • 8 months ago •via X (Twitter)

Science & TechnologyNews & PoliticsEducation
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Announcing our public preview of Chrome DevTools MCP! Experience the full power of DevTools in your AI coding agent → With Chrome DevTools MCP, your AI agent can run performance traces, inspect the DOM, & perform real-time debugging of your web pages.
0:32

Announcing our public preview of Chrome DevTools MCP! Experience the full power of DevTools in your AI coding agent → With Chrome DevTools MCP, your AI agent can run performance traces, inspect the DOM, & perform real-time debugging of your web pages.

Chrome for Developers

1,041,402 views • 8 months ago

Cursor can now use web browser 🤯🤯🤯 It takes screenshots, tests apps, checks accessibility, and turns designs into code. It also has access to console logs, network traffic for debugging and automation Major step by Cursor to completely automate coding!
0:28

Cursor can now use web browser 🤯🤯🤯 It takes screenshots, tests apps, checks accessibility, and turns designs into code. It also has access to console logs, network traffic for debugging and automation Major step by Cursor to completely automate coding!

Melvin Vivas

178,378 views • 8 months ago

Introducing Tidewave Web for Rails and Phoenix: a coding agent that runs in the browser alongside your web application, with full page and code context. Tidewave deeply integrates with your stack, from the database to the UI, making AI development more seamless and efficient.
1:12

Introducing Tidewave Web for Rails and Phoenix: a coding agent that runs in the browser alongside your web application, with full page and code context. Tidewave deeply integrates with your stack, from the database to the UI, making AI development more seamless and efficient.

José Valim

97,922 views • 9 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,294 views • 8 months ago

Codex can now take on more of your browser dev work. With the new Chrome plugin in the Codex app, it can test web apps, gather context across tabs, use web DevTools efficiently in parallel, and keep results organized without taking over your browser.
2:34

Codex can now take on more of your browser dev work. With the new Chrome plugin in the Codex app, it can test web apps, gather context across tabs, use web DevTools efficiently in parallel, and keep results organized without taking over your browser.

OpenAI Developers

229,562 views • 1 month ago

Introducing Agent React DevTools. AI agents can now inspect React apps beyond the UI: → Component tree and state → Renders and performance → Structured output for debugging Works with React and React Native. Learn more ⬇️
0:25

Introducing Agent React DevTools. AI agents can now inspect React apps beyond the UI: → Component tree and state → Renders and performance → Structured output for debugging Works with React and React Native. Learn more ⬇️

Callstack Engineers

18,203 views • 1 month 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,689 views • 7 months ago

I just built this CRACKED Cursor MCP extension that makes your IDE fully aware of all the logs in your browser. Was struggling with a few issues recently and kept having to copy/paste logs but with this tool you can: ✅ Check all console logs + errors ✅ Analyze network requests, responses and errors ✅ Make changes to a selected element in your browser ✅ Take screenshots of your browser ... without EVER having to leave your IDE 🦾 Open source, FREE and compatible with Cursor, Cline, Continue and Zed. Link to the docs with setup instructions down below 👇
6:45

I just built this CRACKED Cursor MCP extension that makes your IDE fully aware of all the logs in your browser. Was struggling with a few issues recently and kept having to copy/paste logs but with this tool you can: ✅ Check all console logs + errors ✅ Analyze network requests, responses and errors ✅ Make changes to a selected element in your browser ✅ Take screenshots of your browser ... without EVER having to leave your IDE 🦾 Open source, FREE and compatible with Cursor, Cline, Continue and Zed. Link to the docs with setup instructions down below 👇

Ted Werbel

179,853 views • 1 year ago

This MCP tool for Cursor will literally save you HOURS of debugging 🔥🦾 With BrowserTools v1.2 you can… ✅ Analyze all browser logs w/ deep reasoning ✅ Capture + auto-paste screenshots into Cursor ✅ Run accessibility, SEO + web app audits ✅ Fully optimize your NextJS app for SEO ✅ Make changes to a selected element Watch the full video for installation steps + check my bio to access our docs 👇 BIG thanks to Emil for implementing the auditing capabilities!! If you have any ideas or feature requests, please reply down below and we’ll add them to the backlog 🙌
7:28

This MCP tool for Cursor will literally save you HOURS of debugging 🔥🦾 With BrowserTools v1.2 you can… ✅ Analyze all browser logs w/ deep reasoning ✅ Capture + auto-paste screenshots into Cursor ✅ Run accessibility, SEO + web app audits ✅ Fully optimize your NextJS app for SEO ✅ Make changes to a selected element Watch the full video for installation steps + check my bio to access our docs 👇 BIG thanks to Emil for implementing the auditing capabilities!! If you have any ideas or feature requests, please reply down below and we’ll add them to the backlog 🙌

Ted Werbel

78,724 views • 1 year ago

Introducing Gamma Agent: your AI design partner. Agent is an entirely new way to edit your gammas. We built Agent to think with you so you can bring your ideas to life. With Agent you can: ✅ Research anything: search the web and pull in citations ✅ Refine everything: drop links, add screenshots, and upload images ✅ Restyle instantly: change image styles, themes, and the entire look ✅ Get feedback: review your deck and get suggestions Agent is now live in Gamma for all users.
3:03

Introducing Gamma Agent: your AI design partner. Agent is an entirely new way to edit your gammas. We built Agent to think with you so you can bring your ideas to life. With Agent you can: ✅ Research anything: search the web and pull in citations ✅ Refine everything: drop links, add screenshots, and upload images ✅ Restyle instantly: change image styles, themes, and the entire look ✅ Get feedback: review your deck and get suggestions Agent is now live in Gamma for all users.

Gamma

12,554 views • 8 months ago

wtf is MCP? Paul Klein IV, CEO of explains "Model Context Protocol" (MCP) in plain terms: "There's this new way that people are exposing tools to AI & the 'Model Context Protocol' is one of those ways that you can standardize & give your AI a set of tools to call. BrowserBase has a way to expose the browser to your agent via MCP or MCP server. More & more developers are trying to find ways to integrate more functionalities to their AI agents & BrowserBase's browsers are one of those primitive functionalities, & the MCP is just one way to integrate it into your software." Paul Klein IV From 🅱️'s GitHub: Model Context Protocol (MCP) is an open protocol that enables seamless integration between LLM applications and external data sources and tools. Whether you’re building an AI-powered IDE, enhancing a chat interface, or creating custom AI workflows, MCP provides a standardized way to connect LLMs with the context they need. This server provides cloud browser automation capabilities using Browserbase and Stagehand. This server enables LLMs to interact with web pages, take screenshots, and execute JavaScript in a cloud browser environment.
0:40

wtf is MCP? Paul Klein IV, CEO of explains "Model Context Protocol" (MCP) in plain terms: "There's this new way that people are exposing tools to AI & the 'Model Context Protocol' is one of those ways that you can standardize & give your AI a set of tools to call. BrowserBase has a way to expose the browser to your agent via MCP or MCP server. More & more developers are trying to find ways to integrate more functionalities to their AI agents & BrowserBase's browsers are one of those primitive functionalities, & the MCP is just one way to integrate it into your software." Paul Klein IV From 🅱️'s GitHub: Model Context Protocol (MCP) is an open protocol that enables seamless integration between LLM applications and external data sources and tools. Whether you’re building an AI-powered IDE, enhancing a chat interface, or creating custom AI workflows, MCP provides a standardized way to connect LLMs with the context they need. This server provides cloud browser automation capabilities using Browserbase and Stagehand. This server enables LLMs to interact with web pages, take screenshots, and execute JavaScript in a cloud browser environment.

Molly O’Shea

20,408 views • 11 months ago

Genspark AI just released AI Browser. You can now have an AI agent in your browser to automate browsing, planning, and interacting with the web for you. 5 powerful use cases + how to try👇: 1. Download all papers talked in a YouTube video
0:22

Genspark AI just released AI Browser. You can now have an AI agent in your browser to automate browsing, planning, and interacting with the web for you. 5 powerful use cases + how to try👇: 1. Download all papers talked in a YouTube video

Alvaro Cintas

157,604 views • 1 year ago

Today we are launching something BIG! The most accurate and fastest web search APIs for AI agents Something which took us months to build Something so powerful that it lets your AI agent to go from "guessing" -> "doing" Combined with our powerful people and company APIs, your AI agent can now find actionable answer to any question and finally act with confidence Whether you are building an AI agent in sales, recruitment, investment, insurance or just adding small automation which needs access to web data in structured manner, this is for you. Live on Producthunt now! Do upvote and support (link in comments)
0:53

Today we are launching something BIG! The most accurate and fastest web search APIs for AI agents Something which took us months to build Something so powerful that it lets your AI agent to go from "guessing" -> "doing" Combined with our powerful people and company APIs, your AI agent can now find actionable answer to any question and finally act with confidence Whether you are building an AI agent in sales, recruitment, investment, insurance or just adding small automation which needs access to web data in structured manner, this is for you. Live on Producthunt now! Do upvote and support (link in comments)

Abhilash Chowdhary

30,146 views • 4 months ago

Today we're announcing Integrations, a new way to connect your apps and tools to Claude. We're also expanding Claude's Research capabilities with an advanced mode that searches the web, your Google Workspace, and now your Integrations too.
0:37

Today we're announcing Integrations, a new way to connect your apps and tools to Claude. We're also expanding Claude's Research capabilities with an advanced mode that searches the web, your Google Workspace, and now your Integrations too.

Anthropic

1,187,186 views • 1 year ago

Introducing developer mode for browser use in Chrome and the Codex in-app browser. Codex can use the Chrome DevTools Protocol (CDP) to debug browser issues by profiling JavaScript performance and inspecting console output, network traffic, and page state.
1:27

Introducing developer mode for browser use in Chrome and the Codex in-app browser. Codex can use the Chrome DevTools Protocol (CDP) to debug browser issues by profiling JavaScript performance and inspecting console output, network traffic, and page state.

OpenAI Developers

264,883 views • 21 hours ago

INTRODUCING Notte Building the agentic internet with the strongest web browser for LLM agents. We transform ANY webpage into structured text, enabling better web understanding and navigation. Plug any LLM to to build your own AI agent
0:39

INTRODUCING Notte Building the agentic internet with the strongest web browser for LLM agents. We transform ANY webpage into structured text, enabling better web understanding and navigation. Plug any LLM to to build your own AI agent

Notte

225,195 views • 1 year ago

Ship anything with Agent 4 - Build web & mobile apps, slides, animations - Chat with connected services (Notion, Google Apps etc) to optimize your workflow - Build data apps or chat with your data to analyze
0:30

Ship anything with Agent 4 - Build web & mobile apps, slides, animations - Chat with connected services (Notion, Google Apps etc) to optimize your workflow - Build data apps or chat with your data to analyze

Replit ⠕

28,145 views • 3 months ago

Type AI Web is HERE! 🌟 After rigorous testing in beta, Type AI Web is officially launching to the public on January 13, 2025! 🗓️ All features over telegram bot, now on a sleek web interface: ⚡️ Analyze your portfolio 📈 View real-time charts 🔄 Swap tokens with ease 🌉 Bridge assets across chains 💸 Invest in trending projects 🔗 Transfer assets securely 🔍 Fetch detailed token insights ✅ Audit your projects 💵 On/Off Ramp with ease and a lot more... 🌐 Expanding Access: Type AI Web opens the doors to a broader audience, empowering everyone to interact seamlessly with crypto ecosystem. 💰 More Revenue Streams: With new advertising spaces, Type AI continues to create value for $TYPE holders while diversifying revenue streams. 🔒 Connect your existing wallet securely on Type AI Web without even sharing your private keys (advantage over telegram bot) #TypeAI #ETH
1:00

Type AI Web is HERE! 🌟 After rigorous testing in beta, Type AI Web is officially launching to the public on January 13, 2025! 🗓️ All features over telegram bot, now on a sleek web interface: ⚡️ Analyze your portfolio 📈 View real-time charts 🔄 Swap tokens with ease 🌉 Bridge assets across chains 💸 Invest in trending projects 🔗 Transfer assets securely 🔍 Fetch detailed token insights ✅ Audit your projects 💵 On/Off Ramp with ease and a lot more... 🌐 Expanding Access: Type AI Web opens the doors to a broader audience, empowering everyone to interact seamlessly with crypto ecosystem. 💰 More Revenue Streams: With new advertising spaces, Type AI continues to create value for $TYPE holders while diversifying revenue streams. 🔒 Connect your existing wallet securely on Type AI Web without even sharing your private keys (advantage over telegram bot) #TypeAI #ETH

Type AI

34,520 views • 1 year ago

Cline now uses Anthropic's new "Computer Use" feature to launch a browser, click, type, and scroll. This gives him more autonomy in runtime debugging, end-to-end testing, and even general web use!
2:53

Cline now uses Anthropic's new "Computer Use" feature to launch a browser, click, type, and scroll. This gives him more autonomy in runtime debugging, end-to-end testing, and even general web use!

Saoud Rizwan

66,260 views • 1 year ago