![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) ![Sofia Emelianova](https://web.dev/images/authors/sofiayem.jpg) Sofia Emelianova [GitHub](https://github.com/sofiayem)

<br />

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

DevTools provides an **AI assistance** panel that helps you understand your website and fix issues by chatting with a built-in AI agent.

The **AI assistance** panel is powered by Gemini and does the following:

- Specializes in web development.
- Can answer general questions about the whole web page as well as provide specific insights about a variety of topics, including but not limited to styling, networking, performance, and more.
- Autonomously narrows down and selects specific context for you to chat about, such as DOM elements, network requests, performance trace events, and more.
- Can perform autonomous actions such as run audits and record performance traces.
- Provides a step-by-step walkthrough of its actions and reasoning and links to relevant parts of DevTools, so you can inspect them with a click.
- Can suggest code changes and generate a prompt with its insights for *your* coding agent to execute.

> [!NOTE]
> **Note:** The autonomous actions, step-by-step walkthrough, and prompt generation features are available in Chrome version 149 and later.

With **AI assistance**, you can debug styling, networking, performance, sources of your website, and more.

To chat with Gemini in the **AI assistance** panel effectively, learn how to open the panel, [prompt](https://developer.chrome.com/docs/devtools/ai-assistance/chat#prompting), and control the [conversation flow](https://developer.chrome.com/docs/devtools/ai-assistance/chat#conversation_flow).

## Open the AI assistance panel

The **AI assistance** panel opens [in the drawer](https://developer.chrome.com/docs/devtools/console/reference#drawer) by default.

To open the panel, click the **AI assistance** button located at the global entry point on the right of the main toolbar at the top.

![The AI assistance button on the top right of the DevTools toolbar.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/open-ai-assistance.png)

### From the panels

You can open the panel, with conversation context selected, directly from the **Elements** , **Network** , **Sources** , or **Performance** panels in two ways:

- Click the ![AI assistance icon](https://developer.chrome.com/static/docs/devtools/ai-assistance/smart_assistant.svg) **Debug with AI** button next to an element, network request, source file, or an expanded performance insight.

  ![The 'Debug with AI' button next to an element.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/debug-with-ai.png)
- Right-click an element, request, file, or trace entry and select one of the common prompt options from the **Debug with AI** context menu.

  ![The 'Debug with AI' options in the context menu of an element.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/debug-with-ai-menu.png)

### From the command menu

To open **AI assistance** from the command menu, type `AI` and then run the
**Show AI assistance** command, which has the **Drawer** badge next to it.

![The opened command menu with 'Show AI assistance' highlighted.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/open-command-menu.png)

### From the 'More tools' menu

Alternatively, in the top right corner, select **More options** \> **More tools** \> **AI assistance**.

![The opened more tools menu.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/open-more-tools.png)

## Prompting

When starting a new conversation, **AI assistance** offers example prompts to help you get started quickly.

![Common prompts in the AI assistance panel.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/common-prompts.png)

Click any of the prompts to prefill the prompt input field at the bottom of the panel.

Alternatively, type your own prompt or question into the input field.

To send a prompt, either press `Enter` or click the arrow on the right hand side of the input field.

### Open-ended prompts without context

With the free-form chat box, you can ask higher-level open-ended questions without prior context. For example:

- `How to use DevTools to debug accessibility?`

  **AI assistance** will first run a Lighthouse audit for accessibility to better answer your prompt.
- `What are the slowest network requests on this page?`

  **AI assistance** will provide a list of suspect requests and links to them in the **Network** panel, so you can select a request as conversation context with a click.
- `What performance issues exist on the page?`

  **AI assistance** will automatically record a performance trace with your selected settings to answer this prompt.
- Prompts like `How do I use the Animation panel?` or `Where is the high contrast setting in DevTools?` will provide direct help with DevTools itself.

Once you start the chat, **AI assistance** will intelligently update the context based on your actions when the chat is empty, while respecting your manual selections when you make them.

### Prompts with context

When you open **AI assistance** [from a panel](https://developer.chrome.com/docs/devtools/ai-assistance/chat#open-from-panel), the corresponding conversation context is selected in the chat box, so you can chat specifically about what you selected.

![Conversation context selected.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/context.png)

At any time, you can manually change the context by selecting an element in **Elements** , request in **Network** , trace entry in **Performance** , or file in **Sources**.

You can also copy parts of a file from, for example, the **Sources** panel and paste it into the chat to ask what it does.

Next, learn more about conversation flow in **AI assistance**.

## Conversation flow

Sending a prompt starts the conversation with the agent. To get the
information required to answer your prompt best, the agent generates and
executes JavaScript that calls web APIs.

Agent progress is shown in steps. The initial step status is `Investigating...`.

![The AI assistance panel after a conversation started.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/investigating.png)

The initial step label updates as the agent executes more specific actions to answer your prompt.

Depending on what you are debugging, the agent may also execute actions in DevTools such as record a performance trace or run Lighthouse audits.

![The AI assistance panel records a performance trace.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/record-trace.png)

### Agent walkthrough

Once the agent generates an answer to your prompt, the initial step label changes to **Show agent walkthrough** or **Show thinking**, which you can expand to see the steps taken by the agent to analyze data in a side panel on the right.

![The AI assistance panel with an agent walkthrough opened.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/agent-walkthrough.png)

The steps include:

![An expanded step of the agent walkthrough.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/walkthrough-step.png)

- Expandable code snippets the agent executed together with the returned data. You can copy the code and execute it in the [Console](https://developer.chrome.com/docs/devtools/console).
- Widgets that present findings in a more human-readable format.

![Examples of human-readable widgets in agent walkthrough.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/widgets.png)

The widgets have a **Reveal** button in the top right corner that takes you to the relevant part of DevTools.

### Follow-up prompts

Once the agent comes to a final answer it may suggest follow-up prompts. Click any to continue the conversation.

![The follow-up prompts below the answer.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/follow-up-prompts.png)

### Generate a prompt for your coding agent

To generate a prompt for *your* coding agent, click **Copy to coding agent**.

![The 'Copy to coding agent' option.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/copy-to-coding-agent.png)

The agent will summarize its findings and insights and provide an actionable prompt, in a minimized form or in human-readable Markdown format, which you can copy to clipboard and continue coding with an AI agent of your choice.

### Paused conversations

**AI assistance** might generate code with side effects. When that happens, the
conversation is paused before the code is executed.

![The AI assistance panel with a paused conversation.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/styling/flow-paused.png)

When the conversation pauses, review the code proposed by the agent. Click
**Continue** to proceed or **Cancel** to prevent execution.

> [!NOTE]
> **Note:** While the conversation is paused, prompt input is disabled.

You can inspect suggested code changes in the [**Changes** panel](https://developer.chrome.com/docs/devtools/changes).

![Code changes generated by the agent in the Changes panel.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/suggested-changes.png)

The agent applies the changes inside DevTools, but you can configure your workspace to let DevTools save changes to your sources.

### Save changes to your workspace

With a [connected workspace folder](https://developer.chrome.com/docs/devtools/workspaces), you can save style changes suggested by **AI assistance** back to CSS source files on your computer.

To do this:

1. First, [generate a metadata file](https://developer.chrome.com/docs/devtools/workspaces#generate-json) and [connect a workspace folder](https://developer.chrome.com/docs/devtools/workspaces#connect).

   Alternatively, you can [add a folder manually](https://developer.chrome.com/docs/devtools/workspaces#manual-connection).
2. Start a chat [from the Elements panel](https://developer.chrome.com/docs/devtools/ai-assistance/styling#from_the_elements_panel).

3. Prompt **AI assistance** to modify your CSS.

4. **AI assistance** may generate code and [pause execution](https://developer.chrome.com/docs/devtools/ai-assistance/styling#paused_conversations). Review the code and click **Continue** to test changes live.

5. Expand the **Unsaved changes** section and click **Apply to workspace**.

   > [!NOTE]
   > **Note:** If you don't have a connected workspace folder, at this step, the **AI assistance** panel will ask you to manually add it.

6. Review the changes in a `diff` and click **Save all**.

To learn this workflow, see:

### No answer given

**AI assistance** might not provide answers due to various reasons.

![The AI assistance panel with a refused conversation.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/answer-refused.png)

If you think your prompt is something **AI assistance** should be able to
discuss, [file a bug](https://goo.gle/devtools-bug).

### Conversation history

Once you start a conversation, every next answer is based on your previous
interactions between you and the AI.

AI assistance saves your conversation history between sessions, so you can access your previous chats even after DevTools or Chrome reload.

Use the controls in the top-left corner of the panel to control your conversation
history.

![The AI assistance panel with the history controls highlighted.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/history.png)

#### Start new

To start a new conversation with the currently selected
conversation context, click the button.

#### Continue

To continue a past conversation, click the button and select it from the context menu.

> [!NOTE]
> **Note:** [Conversation context](https://developer.chrome.com/docs/devtools/ai-assistance/chat#conversation_context) is not automatically updated as it might have vanished since the conversation stopped.

#### Delete

To delete a conversation from history, click the button.

## Rate answers and provide feedback

**AI assistance** is an experimental feature. Therefore we are actively looking
for your feedback to learn how we can improve answer quality and the overall
experience.

![The AI assistance panel with rating controls highlighted.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/rate-answers.png)

### Vote answers

Rate an answer using the
**Thumbs up** and
**Thumbs down** buttons below the answer.

### Report answers

To report inappropriate content, click the button next to the voting buttons.