Use AI prompts to explain and refactor your code

Use pre-written prompts to explain code, refactor, and find problems in 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

Select a code fragment and right-click it to open the context menu.
Select AI Actions and then Explain Code.
The AI Assistant tool window will open to provide you with an explanation.
Click Attached elements to see the list of files that provided the necessary context for generating the answer.
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).

Suggest refactoring

Select a code fragment and right-click it to open the context menu.
Select AI Actions and then Suggest Refactoring.
The AI chat will open to offer you refactoring suggestions.
In the field with the refactored code, click Show Diff to open the diff viewer. To skip the diff viewing step, expand the list next to Show Diff and select Apply Immediately.
In the diff viewer, use Unified or Two-Side view to review the suggested changes.
If you like the result, click Accept in the gutter to move the selected AI-generated code snippets to the source file, or click Accept all to fully replace the originally selected code fragment. Otherwise, close the diff viewer to skip the suggested refactoring.

Find problems

Select a code fragment and right-click it to open the context menu.
Select AI Actions and then Find Problems.
The AI chat will open to show the potential issues you may want to look into.

Explain runtime error

WebStorm lets you get AI explanations for errors that occurred during running tests, scripts, or commands.

Select the error to clarify and then select Explain error message with AI from the context menu.
The AI Assistant tool window will open to give you an explanation of the error and suggest a fix.
If you want to use the suggested fix, click in the field with the refactored code to put the AI-generated code into the editor.

Add your own prompts to prompts library

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

Do one of the following:
- Right-click anywhere in the editor to open the context menu, then go to AI Actions | Add Your Prompts.
- Press Ctrl+Alt+S to open settings and then select Tools | AI Assistant | Prompt Library.
Click to create a new prompt.
In the text field, write the prompt.
If needed, click the $SELECTION variable to add a Markdown-formatted code block with current code selection and language name to the new prompt.
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.
Click Apply.

Once you create a prompt, you can edit or delete it at any time.

You can also select a prompt from the list and move it up or down to change the order in which the prompts are displayed.

Last modified: 11 October 2024