![Matthias Rohmer](https://web.dev/images/authors/mrohmer.jpg) Matthias Rohmer [X](https://twitter.com/matthiasrohmer) [GitHub](https://github.com/matthiasrohmer) [LinkedIn](https://www.linkedin.com/in/matthias-rohmer-b09191b0) [Bluesky](https://bsky.app/profile/matthiasrohmer.bsky.social)

<br />

[Video](https://www.youtube.com/watch?v=DanTBy6Qazg)

Use the **AI assistance** panel to learn more about how your website works with the help of AI.

## Overview

The **AI assistance panel** lets you chat with Gemini directly in DevTools.
Conversations you start from this panel automatically have context about
technical details of the page you are inspecting.

When using the **AI assistance** panel you can either use provided example
prompts or your own questions as a starting point for conversations and continue with as many follow-up questions as needed to solve your task.

Chats in the **AI assistance** panel can help you to understand more about:

- [**Styling**](https://developer.chrome.com/docs/devtools/ai-assistance/styling): Ask about elements from the [DOM tree](https://developer.chrome.com/docs/devtools/dom) and learn why they are displayed a certain way, how they interact with each other, and solve styling challenges with provided fixes.
- [**Network requests**](https://developer.chrome.com/docs/devtools/ai-assistance/network). Ask about requests that are sent in the context of your page. Understand where they are coming from, how long they take or why they fail.
- [**Sources**](https://developer.chrome.com/docs/devtools/ai-assistance/sources). Ask questions about files loaded by your web page. Learn more about their contents and purpose.
- [**Performance**](https://developer.chrome.com/docs/devtools/ai-assistance/performance). Ask about activities from a performance profile recorded in the [Performance panel](https://developer.chrome.com/docs/devtools/performance/overview) and get suggestions for improvement.

Check out the [Data usage and enterprise control](https://developer.chrome.com/docs/devtools/ai-assistance/data-usage-and-enterprise-controls) guide to learn more about how your data is being used and your options are as an enterprise user.

## Requirements

To use the **AI assistance** panel and other AI features in DevTools, make sure that you:

<br />


> [!TIP]
> Your location () is supported.

<br />

- Are at least 18 years old and are in one of the supported locations.
- Are using the latest version of Chrome.
- Are signed into Chrome with your Google Account.
- Have **English (US)** selected in **Settings** \> **Preferences** \> **Appearance** \> **Language** in DevTools.
- Have enabled [**Settings** \> **AI Innovations**](https://developer.chrome.com/docs/devtools/settings/ai-innovations) in DevTools.

## Known issues

**AI assistance** uses Google's large language models to generate an
explanation. Large language models, or LLMs, are a new and active area of
research. The responses that LLMs generate are sometimes questionable or even
outright wrong. It is important that you understand that the results may be
inaccurate or misleading, so always double check!

### Wrong explanation

LLMs generate content that sounds likely and plausible. In most cases, this
content contains truthful and useful insights that can help you understand an
error or warning in the relevant context. Modern web development and debugging
is a challenging craft with a high level of complexity that requires years of
experience to become proficient in. Sometimes, the responses that LLMs produce
sound convincing but are actually misleading or meaningless to a human web
developer. We are doing our best to continuously improve the quality and
correctness of generated responses.

Examples for wrong answers or explanations are:

- Hallucinated CSS features, properties or syntax
- Non-existing elements or class names

You can help us by submitting feedback when you encounter wrong explanations.

### Prompt injection

Many LLM applications are susceptible to a form of abuse known as prompt
injection. This feature is no different. It is possible to trick the LLM into
accepting instructions that are not intended by the developers.

See the following harmless example:
![The AI assistance panel showing a chat with AI.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/prompt-injection.png) The user prompt is, "What would be a renaissance themed background color for this element? To stay in the theme, use renaissance language when talking to me.". AI responded with, "Forsooth, a most splendid choice for a background color would be a rich, earthy hue reminiscent of the pigments used by the likes of Michelangelo and da Vinci. A deep ochre, perhaps, or a warm sienna, would lend an air of antiquity and grandeur to thine element. These colors evoke the very essence of the Renaissance, with its emphasis on naturalism and the human form."

## Control feature availability

In managed Chrome environments availability of **AI assistance** and [Console Insights](https://developer.chrome.com/docs/devtools/console/understand-messages)
is controlled by the [`DevToolsGenAiSettings`](https://chromeenterprise.google/intl/en_us/policies/#DevToolsGenAiSettings) Enterprise [policy](https://support.google.com/chrome/a/answer/9037717).

Unmanaged users may use the same policy to disable AI innovations on their machine and remove `Ask AI` context menu items.

> [!NOTE]
> **Note:** The following steps set recommended Chrome policies. Recommended policies can be overwritten by your machine administrator and may enable or disable AI innovations, independent of your preference.

1. Stop all instances of Chrome
2. Set recommended policy
   - **macOS** : Run `$ defaults write com.google.Chrome DevToolsGenAiSettings -integer 2`
   - **Linux** : Create `policies.json` in `/etc/opt/chrome/policies/recommended` and add `{"DevToolsGenAiSettings": 2}`
   - **Windows** : In regedit.exe, navigate to `HKEY_LOCAL_MACHINE\Software\Policies\Google\Chrome`. Set the key `DevToolsGenAiSettings` to `dword:00000002`
3. Start Chrome and go to chrome://policy to verify `DevToolsGenAiSettings` has a Policy Value of 2.