Maye Edwin

Maye Edwin

Google Developer Expert

2 min read

AI in Chrome: Built-in APIs, DevTools Assistance & MCP Server

Chrome ships with client-side AI APIs using expert models for translation, summarization, and writing, plus AI-powered DevTools and an MCP server for editor-based debugging.

AI in Chrome

Google Chrome has some cool AI features built into its DevTools, built-in AI APIs powered by expert models, gemini nano and a whole MCP server for folks that do not want to leave their fav code editor

Expert models focus on a specific use case for example, a model that’s focused on translating content to new languages. As a plus, they have low hardware requirements

By the way - this is an excerpt from my Talk series - AI in Chrome

Built-in AI APIs

This is basically made of smaller models built into the browser, so, for e.g, gemini nano and other expert models in Google Chrome. It’s a form of Client-side AI. Some of the cool things you can do with these APIs are;

  • translate user-generated and dynamic content on request (Translator API)
  • identify the language used in any given text (Language Detector API)
  • generate different types of summaries in varied lengths and formats, such as sentences (Summarizer API)
  • create new content that conforms to a specified writing task (Writer API)
  • revise and restructure text (Rewriter API)
  • send natural language requests to Gemini Nano in Chrome (Prompt API)
  • provide interactive proofreading for your users in your web application or Chrome Extension (Proofreader API)

AI Assistance in Devtools

This is powerful, with a quick toggle you can easily understand;

  • a website’s overall layout, specific element styles and to get AI generated fixes for CSS bugs
  • requests sent by your website
  • source files loaded and used by your website
  • and investigate page performance

MCP Server for Chrome DevTools

If you are a nerd and devoted to your fav code editor, or just want to go limitless as you build powerful web apps, the Chrome’s DevTools MCP server brings the power of Chrome DevTools to coding agents.

  • verify your UI fixes in realtime, could be AI assisted code or both
  • diagnose network and console errors, fix them on the go, get a deeper understanding
  • simulate user behaviour with things like forms, click events, test complex user flows all in realtime and fix issues on the go
  • fix styling and layout issues, quickly experiment new ones as you code
  • check performance in realtime, identify and fix issues without leaving your editor

Jump in!