WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2026 Europe • Jul 10, 2026 • Session details

Prompt, Render, Debug: AI-Powered React Development with Chrome DevTools

Suchitra Swain

Is manual debugging slowing down your AI-assisted React workflow? Learn how DevTools MCP gives AI agents live browser access to instantly test, trace, and troubleshoot the active DOM.

Pause
Mute Enter Fullscreen
#1 about 2 min

The debugging gap in AI-generated code

Generating front-end code with AI is fast, but debugging it efficiently remains a major bottleneck.

#2 about 3 min

Introduction to DevTools MCP and features

DevTools MCP is an open-source tool that allows AI agents to directly access and inspect runtime browsers.

#3 about 2 min

Connecting DevTools MCP to Chrome for remote debugging

Enable remote debugging in Chrome and configure a JSON file to grant local browser access to an agent.

#4 about 1 min

Configuring live browser and WebSocket connection endpoints

Use autoconnect configurations to instantly attach AI agents to live pages and WebSocket endpoints.

#5 about 2 min

Automating web form inputs and validation with AI agents

Prompt an AI agent to fill and validate registration forms in real-time without relying on mock data.

#6 about 4 min

Testing localization using geolocation and sensor emulators

Configure browser sensor emulators to test localization features like currencies without altering operating system preferences.

#7 about 2 min

Running responsive audits across device viewports

Command an agent to automatically check UI component layouts and navigational states across mobile and desktop breakpoints.

#8 about 3 min

Generating real-time website performance traces with AI

Analyze runtime metrics by instructing an AI agent to run and summarize a performance trace from within the IDE.

#9 about 2 min

Running Lighthouse audits for SEO and accessibility

Execute complete Lighthouse audits through conversational commands to generate actionable suggestions for accessibility and visibility.

#10 about 4 min

Debugging runtime errors with beta Web MCP

Enable the experimental Web MCP standard in Chrome to analyze API failures and console errors interactively.

#11 about 4 min

Audience Q&A on browser support and token consumption

The audience questions cover Chromium plugin compatibility, token consumption levels, and using MCP as a Playwright replacement.

Matching moments

3:31 min

Recreating React components using AI and dev tools

Chris Heilmann +2 · LIVE

1:46 min

Debugging WebMCP implementations using the tool inspector extension

Andre Cipriani Bandarra +1 · Coffee With Developers

4:20 min

Automating tasks securely through agentic browser protocols

Christian Liebel Christian Liebel · WWC Europe 2026

3:46 min

Integrating AI into web performance engineering workflows

Perf + AI

57 sec

Mastering advanced browser developer tools for deeper JavaScript debugging

Chris Heilmann +2 · LIVE

2:49 min

Introduction to the model context protocol and WebMCP

Andre Cipriani Bandarra +1 · Coffee With Developers

More from World Congress 2026 Europe

Building the Nervous System of AI - Michael Kagan (NVIDIA) thumbnail
29:17
about 1 month ago

Building the Nervous System of AI - Michael Kagan (NVIDIA)

Michael Kagan, Sead Ahmetović

Five Things in Tech that Matter Now - WeAreDevelopers World Congress 2026 Closing Keynote thumbnail
19:41
about 1 month ago

Five Things in Tech that Matter Now - WeAreDevelopers World Congress 2026 Closing Keynote

Christian Heilmann

The Sound of Your Secrets: Teaching Your Model to Spy, So You Can Learn to Defend thumbnail
32:06
about 1 month ago

The Sound of Your Secrets: Teaching Your Model to Spy, So You Can Learn to Defend

David vonThenen

Super scaling for the Super Bowl: How to survive 30 million users hitting your backend in 30 minutes thumbnail
35:13
about 1 month ago

Super scaling for the Super Bowl: How to survive 30 million users hitting your backend in 30 minutes

Irina Branovic

Running Secure Life Science Research at Scale using Hybrid GPU HPC and Kubernetes 🧬 thumbnail
24:23
about 1 month ago

Running Secure Life Science Research at Scale using Hybrid GPU HPC and Kubernetes 🧬

Jeremy Murray

Angstfreude - AI and Corporate Culture - The Thrill and the Threat thumbnail
30:26
about 1 month ago

Angstfreude - AI and Corporate Culture - The Thrill and the Threat

Axel Ebert, Karin Krobath

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Reinventing Incident Response with AI Agents and MCP

Jayant Tyagi

Lead Member of Technical Staff @ Salesforce

Jayant Tyagi
Open session

World Congress 2026 North America

Ship 10x Faster: AI-Powered Development with Claude Code and MCP Tools

Viktoria Semaan

Principal Technical Evangelist at Databricks

Viktoria Semaan
Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

Making (and Breaking) Agents by Adding 1,000 MCP Tools

Guillaume Lebedel

Stackone, CTO & Co-Founder

Guillaume Lebedel
Open session

World Congress 2026 North America

AI-Powered Incident Triage: How We Built GenAI Agents with MCPs to Automate On-Call Workflows

Prakshal Doshi

Site Reliability Engineer

Prakshal Doshi
Open session

World Congress 2026 North America

The MCP haters are half right

Vojta Kopal

Head of Data at Apify

Vojta Kopal

Related videos

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
LIVE • 26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

WebMCP - Making Agents a First-Class Citizen of the Web - Andre Cipriani Bandarra & François Beaufort thumbnail
30:42
Coffee With Developers • 6 months ago

WebMCP - Making Agents a First-Class Citizen of the Web - Andre Cipriani Bandarra & François Beaufort

Andre Cipriani Bandarra, François Beaufort

AI in Your Browser: Exploring Chrome's Built-In LLM thumbnail
29:59
WWC Europe 2026 • about 1 month ago

AI in Your Browser: Exploring Chrome's Built-In LLM

Daniel Ostrovsky

API, MCP or MCP App? Choosing the right surface for AI agents thumbnail
29:59
WWC Europe 2026 • about 1 month ago

API, MCP or MCP App? Choosing the right surface for AI agents

Rishabh Budhiraja, Rishi Deorukhkar

From Zero to MCP UI Hero: Building Context-Aware AI Apps That Actually Work thumbnail
20:59
Europe 2026 Virtual • about 1 month ago

From Zero to MCP UI Hero: Building Context-Aware AI Apps That Actually Work

Vishal Dodiya

MCP Mashups: How AI Agents are Reviving the Programmable Web thumbnail
23:17
WWC 2025 • 12 months ago

MCP Mashups: How AI Agents are Reviving the Programmable Web

Angie Jones

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.