AI Embeds in Web Dev: Agents, DevTools, Native APIs

Skills Turn Coding Agents into Repeatable Workflow Machines

The shift from 'can AI code?' to 'how to optimize AI coding?' hinges on skills—lightweight, text-based plugins following an open spec, supported by most agents. They inject domain expertise, custom capabilities, and workflows into agents, loaded on-demand via descriptive metadata.

In a demo on the 'Sen' e-commerce site (product pages, reviews), Yohan Lasorsa prompts: 'Implement the first open issue.' The agent uses GitHub CLI skill to fetch the 'add contact page' issue, then builds it. Key skills include:

GitHub CLI: Describes commands/examples for repo access.
Playwright: Records videos of changes.
Custom 'public-tunnel': Creates local tunnel, sends URL via Telegram skill for mobile testing.

An agents.md file orchestrates: After changes, run dev server, tunnel, video record, Telegram notify, hold GitHub issue close until confirmation. Result: Contact page built, video/preview sent to phone in ~minutes, testable remotely. Tradeoff: Agents occasionally fail (e.g., token issues), requiring retries; skills mitigate by standardizing tools over ad-hoc prompts.

"The truth is that today it's mainly a matter of skills but don't get me wrong it's the one that you install and use with your favorite code agent." — Yohan Lasorsa, emphasizing skills as the skill gap for effective agent use.

MCP Servers and DevTools AI Automate Browser Debugging

Manual DevTools workflows (console, network, performance) are now agent-controllable via MCP (Model Control Protocol) servers—tool-hosting endpoints callable by agents from any IDE/CLI. Olivier Leplus demos Chrome DevTools MCP (GitHub repo install via mcp.json):

Tools exposed: click, fill forms, console logs, network requests, Lighthouse audits, navigate, screenshots, resize, throttling.

Prompt: 'Run app, test main page in Chrome.' Agent starts dev server (npm start), launches Chrome (visible automation), screenshots, lists elements. Advanced: Throttle to 2G/3G/fast 3G, trace performance (LCP, CLS, TBT), analyze images/CSS/JS. Outputs report: 'Headphone image too big (preload, high priority), CSS render-blocking, JS preload JSON.' No manual intervention; runs in background.

Built-in Chrome DevTools AI (enable in settings > AI Innovation tab) adds on-device insights:

Console errors: Click icon for CORS explanation/fix.
Network 400s: Chat analyzes request context ('endpoint missing').
Performance traces: LCP breakdown hints ('render-blocking CSS').
Elements: Live CSS tweaks (e.g., gradient H1 matching CSS vars), 'Apply to Workspace' persists to source files (map workspace folder).

Tradeoffs: AI verbosity varies; DevTools changes ephemeral without workspace mapping. Reduces copy-paste friction vs. external chats.

"What would be amazing if an MCP existed for that like an agent can call it that's what exactly what the Chrome MCP does." — Olivier Leplus, on bridging manual DevTools to agent automation.

Browser-Native Web AI APIs Enable On-Device Features

Cloud AI APIs (tokens, latency, costs) yield to Web AI APIs (W3C draft)—on-device models (~4GB download, cached, auto-evicted on low storage). Demos on Sen reviews:

if ('Summarizer' in window) {
  const summarizer = await Summarizer.create({
    type: 'key-points', // tl;dr, teaser, headline options; size: words/sentences
    inputLang: 'en',
    outputLang: ['en'],
    context: 'Reviews for headphones. JSON stringify summary of opinions.'
  });
  monitorDownload((progress) => console.log(progress));
  const response = await summarizer.summarize(reviews);
  return response;
}

Click 'Summarize': Downloads model once (0-100% instant on cache), outputs: 'Customers praise headphones for sound...'. Similar for Translator, Prompt APIs. Runs locally, no net/costs. Tradeoff: Browser support nascent (Chrome flags); large initial download.

Future: Browsers ship built-in MCP servers; standards like LLMs.txt/WebMCP feed agents docs.

"AI builds the web. The web feeds AI. And now, AI lives inside the browser itself." — Talk intro, framing symbiotic web-AI evolution.

Upgrading Apps for Human + Agent Cohabitation

Agents now 'use' web apps alongside humans, requiring adaptations (teased, demo implied via Sen site). Full cycle: Code/debug/tune with AI, embed native APIs, expose via MCP/standards for agent consumption. No Python monopoly—web democratizes AI.

Key Takeaways

Install skills (e.g., GitHub CLI, Playwright) in agent/skills/ with descriptive skill.md; orchestrate in agents.md for workflows like auto-tunnel/video/notify.
Add Chrome DevTools MCP to mcp.json for agent DevTools control: throttling, traces, audits yield actionable reports (e.g., image preloads).
Enable DevTools AI for instant error chats, live CSS/JS tweaks, 'Apply to Workspace' for source persistence.
Use Web AI APIs (Summarizer.create) for local summaries/translations; monitor downloads, specify type/context for precision.
Test agent failures early (tokens, sticks); skills standardize over raw prompts.
Map workspaces in DevTools to avoid ephemeral changes.
Cache models persist across sites; evict on storage pressure.
Build for agents: LLMs.txt, WebMCP for doc feeding.

"You've all been through that... you do a lot of changes on the Chrome dev tools and then you don't remember which line you have to copy paste." — Olivier Leplus & Yohan Lasorsa, on CSS tweak pain solved by DevTools AI persistence.