WebStorm
 
2023.2
Shortcuts: Windows
Get WebStorm
You are viewing the documentation for an earlier version of WebStorm.
  1. Write and edit source code
  2. AI Assistant

AI Assistant

Last modified: 05 September 2023

Install the AI Assistant plugin

This functionality relies on the AI Assistant plugin, which you need to install and enable.

  1. Press CtrlAlt0S to open the IDE settings and then select Plugins.

  2. Open the Marketplace tab, find the AI Assistant plugin, and click Install (restart the IDE if prompted).

AI Assistant can explain code, answer questions about code fragments, commit messages, and much more.

note

Please note that we are performing a gradual rollout of AI Assistant, and it is not currently available to all users. As capacity permits, we will be adding folks from the waitlist.

Access to the AI service is currently restricted to the territories where the OpenAI service is available.

Log in

To start working with AI Assistant, you need to log in first.

tip

If you were granted access, you should have received an invitation to the email associated with your JetBrains Account.

You can change your account on the Tools | AI Assistant page of the IDE settings CtrlAlt0S.

AI Assistant settings

Chat with AI

Use the AI Assistant tool window to have a conversation with the LLM (Large Language Model), ask questions about programming-related topics, or iterate on a task. The AI Assistant takes into consideration the language and technologies used in your project.

AI Assistant keeps the chats during one IDE session. You can find the saved chats in the All Chats list.

All Chats list

Names of the chats are generated automatically and contain the summary of the initial query.

Use prompts to explain and refactor your code

Use pre-written prompts to explain code, find potential problems, and refactor your code. WebStorm provides project-specific context, such as the languages and technologies used in your project.

You can also define your own custom prompts and add them to the AI Actions menu.

Explain code

  1. Select a code fragment and right-click it to open the context menu.

    Alternatively, select a code fragment and press AltEnter.

  2. Select AI actions and then Explain code.

    AI Assistant actions - Explain Code

    The AI Assistant tool window will open to provide you with an explanation.

    WebStorm AI Assistant explains code

    Besides JavaScript or TypeScript code, AI Assistant can detect and explain injected language fragments like RegExp, SQL, or cron expressions. The detected fragment type is indicated in the context menu option (Explain JSRegExp fragment for regular expressions and so on).

    Explain RegExp option in the context menu

Suggest refactoring

  1. Select a code fragment and right-click it to open the context menu.

    Alternatively, select a code fragment and press AltEnter.

  2. Select AI actions and then Suggest refactoring.

    AI Assistant suggests refactoring, context menu

    The AI chat will open to offer you refactoring suggestions.

    WebStorm: AI Assistant suggests refactoring

  3. If you like the result, click Insert Snippet at Caret in the field with the refactored code to put the AI-generated code into the editor and replace the originally selected code fragment.

Find potential problems

  1. Select a code fragment and right-click it to open the context menu.

    Alternatively, select a code fragment and press AltEnter.

  2. Select AI actions and then Find potential problems.

    AI Assistant finds potential problems, context menu

    The AI chat will open to show the potential issues you may want to look into.

    WebStorm: AI Assistant finds potential problems in the selected code

Add your own prompts to prompts library

You can add your own prompts to the prompts library and use them via AI Actions menu.

  1. Press CtrlAlt0S to open the IDE settings and then select Tools | AI Assistant | User Prompts Library.

  2. Click App client expui general add to create a new prompt.

    WebStorm: User prompts library settings

  3. In the text field, write the prompt. If needed, use the following variables:

    • $SELECTION: a Markdown-formatted code block with current code selection and language name.

    • $SELECTION_RAW: selected code fragment.

    • $SELECTION_LANG: the language of the currently selected code fragment.

    • $PRODUCT_NAME: the name of the product that is currently launched, for example, WebStorm.

  4. In the advanced options, edit the new prompt name.

    Select the first checkbox if you want AI Assistant to wait for you to make additional input in the chat after invoking the prompt.

    Keep the second checkbox if you want your new prompt to be listed in the AI Actions menu.

    WebStorm: Custom prompt parameters

  5. Click Apply.

After you created a prompt, you can always edit or delete it.

note

To access the prompts library settings, you can also press AltEnter and select Edit User Prompts

If you wrote a prompt while using AI Assistant chat, you can save current prompt by clicking App expui general save in the chat.

Work with commits

AI Assistant can send your diffs to the LLM, which will generate a commit message describing your changes.

Generate commit messages

  1. Press Alt00 to open the Commit tool window.

  2. Click the Generate Commit Message with AI Assistant icon.

    WebStorm: AI Assistant generates commit messages

  3. Edit the message if necessary.

    WebStorm: AI-generated commit message

Explain commits

AI Assistant can summarize the changes made in one or several commits.

note

This option is only available if you are using Git or Mercurial for version control.

  1. Click App expui toolwindow vcs in the bottom-left corner or press Alt09 to open the version control tool window.

  2. In the commits pane, select the commit or several commits you want to summarize, right-click them and select Explain Commit with AI Assistant in the context menu.

    Explain Commit with AI Assistant option in VCS log

    AI Assistant provides the summary of the selected commits.

    AI Assistant explains commit

Generate documentation

With AI Assistant, you can generate documentation for a declaration using the LLM.

Use AI in the editor

When you rename (ShiftF6) a Java or Kotlin declaration symbol, AI Assistant suggests name options for the declaration based on its contents.

This feature is enabled by default. To switch it on and off, check the AI Assistant settings.

Enable name suggestions

  1. Press CtrlAlt0S to open the IDE settings and then select Tools | AI Assistant.

  2. Select the Provide AI-generated name suggestions checkbox.

    AI Assistant settings: suggest name

How we handle your code and data

When you use AI features, WebStorm needs to send your requests and pieces of your code to the LLM (Large Language Model) provider. Besides the prompts you type, it may send additional details, such as file types, frameworks used, and any other information that may be necessary for providing context to the LLM.

In addition, WebStorm builds with the AI Assistant plugin perform opt-in collection of detailed data about the usage of AI features, including the full communication between you and the LLM (both text and code fragments). This data is kept strictly confidential and is used by JetBrains for product improvement purposes only. It is never shared with any external parties, and it will not be used for training any ML models that generate code or text, or revealed in any form to any other users. The option that controlls detailed data collection can be found in the IDE Settings under Tools | AI Assistant | Data Sharing | Send AI Assistant usage statistics.

For more information about our data collection policies, refer to Data Collection and Use Policy.