Use Gemini to generate code in the [Console](https://developer.chrome.com/docs/devtools/console) and [Sources](https://developer.chrome.com/docs/devtools/sources) panels.

> [!NOTE]
> **Note:** Additionally, the **Elements** \> **Styles** panel supports [code completion for CSS](https://developer.chrome.com/docs/devtools/css/reference#css-code-completion).

From Chrome 147, this feature is available for all text-based resources for a web page. The priority language for code generation is JavaScript.

![Code generation feature in the Console and Sources panels.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/code-suggestions.png)

## Availability

To use any of the available [AI features](https://developer.chrome.com/docs/devtools/ai-assistance/get-started) 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.

## Enable code generation

To enable code generation specifically, go to **DevTools** \> **Settings** \> **AI innovations** and turn on **Code suggestions**.

![Code suggestion feature toggle in Settings - AI innovations.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/code-suggestions-toggle.png)

To enable code generation right from the **Console** or **Sources** panel:

1. While editing source files or typing in the **Console** , press <kbd>Command</kbd> + <kbd>i</kbd> on Mac or <kbd>Control</kbd> + <kbd>i</kbd>. In this shortcut, <kbd>i</kbd> is lowercase.

   ![Turning on code suggestions in Sources and Console with a shortcut.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/code-suggestions-shortcut.png)
2. Read through **Things to consider** in the dialog window and click **Got it**.

   !['Things to consider' dialog window.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/ai-settings-dialog.png)

### Generate code

To generate code in the **Console** or **Sources** panel:

1. In a code comment, type your prompt, for example: `// Loop to check all img elements for valid alt attributes`.

   ![A prompt for code generation in a JavaScript comment.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/commented-prompt.png)
2. To start generating, press <kbd>Command</kbd> + <kbd>i</kbd> on Mac or <kbd>Control</kbd> + <kbd>i</kbd>. In this shortcut, <kbd>i</kbd> is lowercase.

3. Wait for code generation to finish. It may take a few seconds.

4. Press <kbd>Tab</kbd> or <kbd>Enter</kbd> to accept or <kbd>Esc</kbd> to reject the generated code block.

   ![Accepting or rejecting a generated code block.](https://developer.chrome.com/static/docs/devtools/ai-assistance/images/accept-code.png)

## See also

- [AI innovations](https://developer.chrome.com/docs/devtools/settings/ai-innovations)
- [Get started with AI assistance](https://developer.chrome.com/docs/devtools/ai-assistance/quickstart)