正在加载视频...

视频加载失败

返回首页

Don't let a broken form frustrate users 😠 Here's how to use Chrome DevTools MCP to let your coding agent solve the problem → ➡️Let it use your local dev server ✍️Auto test w/ dummy data 🖥️cRead the console output & network log to find the server error

ChromiumDev's profile picture

Chrome for Developers

418,355 subscribers

17,813 次观看 • 9 个月前 •via X (Twitter)

教育科学技术
LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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 次观看 • 10 个月前

🔧 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,705 次观看 • 9 个月前

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 次观看 • 7 个月前

Tell your agent to use the Expo MCP Server. It will make your dev experience more smooth and your apps will improve.
0:42

Tell your agent to use the Expo MCP Server. It will make your dev experience more smooth and your apps will improve.

Expo

21,375 次观看 • 19 天前

Introducing the new dev-browser cli. The fastest way for an agent to use a browser is to let it write code. Just `npm i -g dev-browser` and tell your agent to "use dev-browser"
0:30

Introducing the new dev-browser cli. The fastest way for an agent to use a browser is to let it write code. Just `npm i -g dev-browser` and tell your agent to "use dev-browser"

Sawyer Hood

869,079 次观看 • 4 个月前

Those MCP totally 10x my Cursor workflow… - It reads my browser console / network log - It use Replicate to generate UI assets - It reads my supabase & figma ... Here I shared some of my fav MCP & how to install them, As well as the EASIST way to create your own MCP (Thanks to Cloudflare 's MCP-worker) 0:00 Cursor MCP overview 2:35 How to install common MCP 5:49 Let cursor read console/network log 7:24 Build yoru own MCP If you want to learn more about advanced AI coding workflow, join my community where I post tips weekly:
13:16

Those MCP totally 10x my Cursor workflow… - It reads my browser console / network log - It use Replicate to generate UI assets - It reads my supabase & figma ... Here I shared some of my fav MCP & how to install them, As well as the EASIST way to create your own MCP (Thanks to Cloudflare 's MCP-worker) 0:00 Cursor MCP overview 2:35 How to install common MCP 5:49 Let cursor read console/network log 7:24 Build yoru own MCP If you want to learn more about advanced AI coding workflow, join my community where I post tips weekly:

Jason Zhou

287,888 次观看 • 1 年前

Today we're launching the PlanetScale hosted MCP server. Use your favorite AI agent to explore your data, identify slow queries, and improve database performance.
5:55

Today we're launching the PlanetScale hosted MCP server. Use your favorite AI agent to explore your data, identify slow queries, and improve database performance.

PlanetScale

29,423 次观看 • 6 个月前

You can now clone any website just by writing a prompt. Simply add the Firecrawl MCP server to your favorite AI coding tool for improved web data extraction, and let Claude code it for you. Here’s how:
0:22

You can now clone any website just by writing a prompt. Simply add the Firecrawl MCP server to your favorite AI coding tool for improved web data extraction, and let Claude code it for you. Here’s how:

Alvaro Cintas

83,031 次观看 • 1 年前

You can now clone any website just by writing a prompt. Simply add the new Firecrawl MCP server to your favorite AI coding tool for improved web data extraction, and let Claude code it for you. Here’s how:
0:24

You can now clone any website just by writing a prompt. Simply add the new Firecrawl MCP server to your favorite AI coding tool for improved web data extraction, and let Claude code it for you. Here’s how:

Alvaro Cintas

540,189 次观看 • 1 年前

Here is how to use Claude Code with Unity 6! 🤝 Unity has a native MCP server to let AI handle the boilerplate code while you focus on your game! 🤩 ➡️ Read more at: #unitytips #gamedev #unity3d #unity6 #ai
0:59

Here is how to use Claude Code with Unity 6! 🤝 Unity has a native MCP server to let AI handle the boilerplate code while you focus on your game! 🤩 ➡️ Read more at: #unitytips #gamedev #unity3d #unity6 #ai

Sunny Valley Studio

35,517 次观看 • 4 个月前

You can connect your Supabase database via MCP server to Cursor! The Cursor agent can get the schema and any data from your database through the official Postgres MCP server! This helps Cursor understand your database better when it needs to modify it to add a new feature!
0:45

You can connect your Supabase database via MCP server to Cursor! The Cursor agent can get the schema and any data from your database through the official Postgres MCP server! This helps Cursor understand your database better when it needs to modify it to add a new feature!

Tyler Shukert

203,451 次观看 • 1 年前

😂 How It use To Be When Your Girl Use To Let You Use Her Car Back In The Day. 😂🚗
1:29

😂 How It use To Be When Your Girl Use To Let You Use Her Car Back In The Day. 😂🚗

Desi Banks

1,961,490 次观看 • 2 年前

Select. Ask. Solve ✅ Your coding agent can now connect directly to your active browser session. Whether it's a wonky div in the Elements panel or a failed API call, just select it and let the agent get to work →
0:23

Select. Ask. Solve ✅ Your coding agent can now connect directly to your active browser session. Whether it's a wonky div in the Elements panel or a failed API call, just select it and let the agent get to work →

Chrome for Developers

35,410 次观看 • 7 个月前

⚡day 5 of launch week: from (zero) MCP server to ChatGPT app this is peak developer experience 🤌🏼 1. define your UI in a single react file. 2. test it instantly with hot reload in the built-in Inspector 3. deploy it in one click on mcp-use Cloud 4. ship it directly to ChatGPT with: npx create-mcp-use-app@latest my-server --template apps-sdk you can go from zero to a deployed mcp server with apps sdk widgets in just 5 minutes here's how 🧵
2:50

⚡day 5 of launch week: from (zero) MCP server to ChatGPT app this is peak developer experience 🤌🏼 1. define your UI in a single react file. 2. test it instantly with hot reload in the built-in Inspector 3. deploy it in one click on mcp-use Cloud 4. ship it directly to ChatGPT with: npx create-mcp-use-app@latest my-server --template apps-sdk you can go from zero to a deployed mcp server with apps sdk widgets in just 5 minutes here's how 🧵

pederzh

22,647 次观看 • 9 个月前

Here's how to deploy your own MCP server in 30 seconds: 1. Remix the Replit template 2. Prompt Agent "create a server that does xyz" 3. Select "Publish" Voila - a streamable HTTP server deployed with API key auth Connect to your sever in your client of choice
4:49

Here's how to deploy your own MCP server in 30 seconds: 1. Remix the Replit template 2. Prompt Agent "create a server that does xyz" 3. Select "Publish" Voila - a streamable HTTP server deployed with API key auth Connect to your sever in your client of choice

matt palmer

80,137 次观看 • 9 个月前

Your ChatGPT Work agent can now use websites that require you to sign in. Take over the cloud browser to log in, then let your agent continue the task. Your login persists across sessions, so you only have to sign in once.
0:44

Your ChatGPT Work agent can now use websites that require you to sign in. Take over the cloud browser to log in, then let your agent continue the task. Your login persists across sessions, so you only have to sign in once.

OpenAI Developers

1,079,254 次观看 • 17 天前

This is extremely promising and the best use case of Operator so far! OpenAI ChatGPT Operator is great for testing my local dev environment to see if my feature is working! Tunnel Operator to your local dev env and let it test your feature. Waiting for an API and Cursor to integrate it.
4:33

This is extremely promising and the best use case of Operator so far! OpenAI ChatGPT Operator is great for testing my local dev environment to see if my feature is working! Tunnel Operator to your local dev env and let it test your feature. Waiting for an API and Cursor to integrate it.

Kieran Klaassen

299,218 次观看 • 1 年前

Coding agents suck at using a browser. Playwright MCP burns through your context window before you even send your first prompt. That is why I built Dev Browser, a Claude Skill to let your agent close the loop without eating up tokens.
0:45

Coding agents suck at using a browser. Playwright MCP burns through your context window before you even send your first prompt. That is why I built Dev Browser, a Claude Skill to let your agent close the loop without eating up tokens.

Sawyer Hood

312,803 次观看 • 8 个月前

New course: MCP: Build Rich-Context AI Apps with Anthropic. Learn to build AI apps that access tools, data, and prompts using the Model Context Protocol in this short course, created in partnership with Anthropic Anthropic and taught by Elie Schoppik Elie Schoppik, its Head of Technical Education. Connecting AI applications to external systems that bring rich context to LLM-based applications has often meant writing custom integrations for each use case. MCP is an open protocol that standardizes how LLMs access tools, data, and prompts from external sources, and simplifies how you provide context to your LLM-based applications. For example, you can provide context via third-party tools that let your LLM make API calls to search the web, access data from local docs, retrieve code from a GitHub repo, and so on. MCP, developed by Anthropic, is based on a client-server architecture that defines the communication details between an MCP client, hosted inside the AI application, and an MCP server that exposes tools, resources, and prompt templates. The server can be a subprocess launched by the client that runs locally or an independent process running remotely. In this hands-on course, you'll learn the core architecture behind MCP. You’ll create an MCP-compatible chatbot, build and deploy an MCP server, and connect the chatbot to your MCP server and other open-source servers. Here’s what you’ll do: - Understand why MCP makes AI development less fragmented and standardizes connections between AI applications and external data sources - Learn the core components of the client-server architecture of MCP and the underlying communication mechanism - Build a chatbot with custom tools for searching academic papers, and transform it into an MCP-compatible application - Build a local MCP server that exposes tools, resources, and prompt templates using FastMCP, and test it using MCP Inspector - Create an MCP client inside your chatbot to dynamically connect to your server - Connect your chatbot to reference servers built by Anthropic’s MCP team, such as filesystem, which implements filesystem operations, and fetch, which extracts contents from the web as markdown - Configure Claude Desktop to connect to your server and others, and explore how it abstracts away the low-level logic of MCP clients - Deploy your MCP server remotely and test it with the Inspector or other MCP-compatible applications - Learn about the roadmap for future MCP development, such as multi-agent architecture, MCP registry API, server discovery, authorization, and authentication MCP is an exciting and important technology that lets you build rich-context AI applications that connect to a growing ecosystem of MCP servers, with minimal integration work. Please sign up here!
2:43

New course: MCP: Build Rich-Context AI Apps with Anthropic. Learn to build AI apps that access tools, data, and prompts using the Model Context Protocol in this short course, created in partnership with Anthropic Anthropic and taught by Elie Schoppik Elie Schoppik, its Head of Technical Education. Connecting AI applications to external systems that bring rich context to LLM-based applications has often meant writing custom integrations for each use case. MCP is an open protocol that standardizes how LLMs access tools, data, and prompts from external sources, and simplifies how you provide context to your LLM-based applications. For example, you can provide context via third-party tools that let your LLM make API calls to search the web, access data from local docs, retrieve code from a GitHub repo, and so on. MCP, developed by Anthropic, is based on a client-server architecture that defines the communication details between an MCP client, hosted inside the AI application, and an MCP server that exposes tools, resources, and prompt templates. The server can be a subprocess launched by the client that runs locally or an independent process running remotely. In this hands-on course, you'll learn the core architecture behind MCP. You’ll create an MCP-compatible chatbot, build and deploy an MCP server, and connect the chatbot to your MCP server and other open-source servers. Here’s what you’ll do: - Understand why MCP makes AI development less fragmented and standardizes connections between AI applications and external data sources - Learn the core components of the client-server architecture of MCP and the underlying communication mechanism - Build a chatbot with custom tools for searching academic papers, and transform it into an MCP-compatible application - Build a local MCP server that exposes tools, resources, and prompt templates using FastMCP, and test it using MCP Inspector - Create an MCP client inside your chatbot to dynamically connect to your server - Connect your chatbot to reference servers built by Anthropic’s MCP team, such as filesystem, which implements filesystem operations, and fetch, which extracts contents from the web as markdown - Configure Claude Desktop to connect to your server and others, and explore how it abstracts away the low-level logic of MCP clients - Deploy your MCP server remotely and test it with the Inspector or other MCP-compatible applications - Learn about the roadmap for future MCP development, such as multi-agent architecture, MCP registry API, server discovery, authorization, and authentication MCP is an exciting and important technology that lets you build rich-context AI applications that connect to a growing ecosystem of MCP servers, with minimal integration work. Please sign up here!

Andrew Ng

142,010 次观看 • 1 年前