How to Use Claude in WebStorm | JetBrains AI Setup Guide

AI Chat Article Summarypowered by Claude

How to Use Claude in WebStorm | JetBrains AI Setup Guide

"I'm not sure if Claude works in WebStorm, or how to set it up"——this article answers that question. The short answer: WebStorm has had official Claude integration since autumn 2025, and there are two ways to access it. This article is aimed at WebStorm users working primarily with JavaScript and TypeScript. We'll walk through both integration methods, setup steps, new features by version, and which route you should choose—all based on official information.


結論powered by Claude
![How to Use Claude in WebStorm | JetBrains AI Setup Guide](/assets/generated/placeholder-claude-webstorm-hero.jpg)
目次 (11)

Two Ways to Use Claude in WebStorm

There are two main ways to invoke Claude from WebStorm.

  1. Via JetBrains AI subscription (Claude is built in; no additional plugin required)
  2. Via Anthropic's official Claude Code plugin (installed from the JetBrains Marketplace)

Both work within WebStorm, but they differ in billing, required subscriptions, and the range of available features. Choosing the right route for your situation is the first decision to make.


Route 1: Using Claude via JetBrains AI Subscription

The "JetBrains AI" subscription offered by JetBrains has included Claude as a standard feature since September 2025. No additional plugin installation or separate Anthropic contract is required—if you have a JetBrains AI plan, you can start using it right away (blog.jetbrains.com).

Setup Steps

  1. Update WebStorm to the latest version (2025.3 or later)
  2. Go to "Help → Manage Licenses" and confirm your JetBrains AI subscription is active
  3. Open the "AI Chat" window from the right panel or menu
  4. Select "Claude Agent" from the model selection menu at the top of the chat
  5. On first selection, an automatic download and initialization will occur, after which it is immediately ready to use

That's all there is to the setup. No separate API key configuration or external service login is needed.


Key Features of Claude Within JetBrains AI

Claude accessed via JetBrains AI is deeply integrated with the IDE and offers more than simple chat assistance (blog.jetbrains.com).

Multi-file editing with diff preview When suggesting changes across multiple files, a diff-format preview is displayed directly in the editor. You can review the proposed changes before accepting or rejecting them, preventing unintended rewrites.

Approval-based operations A confirmation dialog always appears before file edits or terminal commands are executed. Enabling "Brave Mode" allows you to skip the confirmation step and have actions performed automatically.

Plan Mode Displays a step-by-step plan preview before implementation begins. You can review which files will be changed and in what order before any actual code editing takes place, making large-scale changes more manageable.

Context management You can add files, folders, and images as context in the chat. For example, you can attach a UI screenshot and ask Claude to "write a component that matches this design."


Route 2: Using Anthropic's Official Claude Code Plugin

This route uses the plugin officially provided by Anthropic on the JetBrains Marketplace. It supports major JetBrains IDEs including WebStorm, IntelliJ IDEA, and PyCharm.

Setup Steps

  1. Open "Settings → Plugins" in WebStorm
  2. Search for "Claude" or "Claude Code" in the search box to find the plugin
  3. Click the install button and restart the IDE
  4. Sign in with an Anthropic account (Pro, Max, or Team)
  5. After signing in, the Claude chat panel appears in the right panel of the code editor

This route requires an Anthropic subscription. If you already have a Claude.ai subscription (Pro or higher), you can use the same account for the IDE plugin as well.


WebStorm 2025.3 — Native Claude Integration

WebStorm 2025.3 is a milestone version for Claude integration. According to JetBrains' official blog, this release explicitly states that "Claude Agent is now available natively inside the JetBrains AI Assistant chat interface," granting full access to IDE features via the JetBrains MCP server (blog.jetbrains.com).

Additionally, you can now switch between Claude and Junie (JetBrains' own autonomous AI coding tool) within the same chat window. Being able to choose the right tool for each task opens up workflows such as "let Junie handle the overall architecture, then ask Claude about the specific logic."


WebStorm 2026.1 — Junie, Claude, and Codex in One Chat

WebStorm 2026.1 takes AI integration even further. With "Junie, Claude Agent, and Codex available directly in the AI chat," all three tools can now be switched directly within the chat interface (jetbrains.com).

Two additional noteworthy features were added in this release.

One-click installation via ACP Registry An "ACP Registry" has been added that lists tools supporting the Agent Client Protocol (ACP). ACP-compatible tools such as GitHub Copilot and Cursor can be installed with a single click, without manual configuration.

Next edit suggestions without consuming AI quota The "next edit suggestion" feature is now available without consuming quota for JetBrains AI Pro, Ultimate, and Enterprise subscribers. It automatically suggests related changes spanning the entire open file for JavaScript, TypeScript, Kotlin, Python, and more.


Differences Between JetBrains AI and the Anthropic Official Plugin

Both routes use Claude, but they differ significantly in character.

Item Via JetBrains AI Anthropic Official Plugin
Billing JetBrains Anthropic
Additional installation Not required Install from Marketplace
IDE integration depth Deep (full integration via MCP) Centered on chat and completion
Supported IDEs All JetBrains products JetBrains + VS Code, etc.
Best suited for Development teams centered on JetBrains Users who already have an Anthropic subscription

If you already have a JetBrains All Products Pack or JetBrains AI subscription, Route 1 is the easiest option with zero additional cost. On the other hand, if your team uses a mix of VS Code or you hold a personal Anthropic subscription, Route 2 may be simpler to manage.


Practical Use Cases for JavaScript / TypeScript Development

WebStorm was originally built as an IDE specialized for JS and TS. Here are some scenarios where combining it with Claude is particularly effective.

Instant resolution of type errors Simply pass a TypeScript error such as ts(2345) to Claude, and it will suggest multiple fixes for the type definition. You can review the diff preview before approving, so it's safe.

Automatic test code generation Select a function and type "write Jest tests for this function" in the chat, and it will generate a full test suite including edge cases in one go.

Refactoring suggestions Select code and instruct it to "split this component into smaller pieces," and it will present a breakdown proposal along with change diffs for each file. You can proceed while reviewing the impact on the entire project.

Code review assistance Paste a PR diff and ask it to "point out any potential issues," and it will generate review comments. Building a habit of pre-checking locally raises the quality of your PRs.


Summary: Steps to Get Started with WebStorm × Claude Right Now

Here is a checklist of what to confirm first when starting with Claude in WebStorm.

  1. Update WebStorm to 2025.3 or later
  2. If you already have JetBrains AI, select "Claude Agent" from the AI Chat and start immediately
  3. If you have an Anthropic subscription (Pro or higher), install the official plugin from the Marketplace
  4. If you're unsure which to choose, the JetBrains AI route has lower setup overhead
  5. Updating to WebStorm 2026.1 lets you manage additional tools in bulk from the ACP Registry

From WebStorm 2026.1 onward, Junie, Claude, and Codex are consolidated into a single chat interface, greatly reducing the effort of switching between tools. From resolving TypeScript errors to refactoring and test generation, integrating Claude into your IDE can meaningfully boost your day-to-day development speed.


References: JetBrains WebStorm 2026.1 What's New / Introducing Claude Agent in JetBrains IDEs / WebStorm Blog

参考になったら ♡
Clauder Navi 編集部
@clauder_navi

Anthropic の Claude / Claude Code を中心に、日本のエンジニア向けに最新動向と実務 を毎日発信。 運営方針 は メディアについて をご覧ください。