Jetbrains Webstorm과 Claude MCP 연동 삽질기

요즘 MCP가 인기가 많아서 나도 사용해 보려고 Claude 유료 결제를 했다!

두근거리는 마음을 갖고 연동을 시도했다. 사실 연동 자체는 별거 없다. 하지만 왜인지 되지가 않았다...!

그렇게 하루를 잡아먹었다. 지금부터 삽질한 것들을 기록하고자 한다.

MCP가 뭔지는 검색해 보면 잘 나오니 참고하는 게 좋겠다!

Claude

Claude 프로그램 설치

Claude와 MCP를 연동하려면 Claude 프로그램을 반드시! 설치해야 한다.

나는 맥북이라 homebrew로 다운로드하였다.

 

-homebrew(맥북)

brew install --cask claude

 

-윈도우

https://claude.ai/download

윈도우는 이 사이트에서 받으면 된다!

물론 맥도 받을 수 있다.

MCP 연결

JetBrains MCP Proxy Server 이 MCP 서버를 Claude와 연동을 해야 한다.

 

-JetBrains MCP Proxy Server 공식 사이트

https://github.com/JetBrains/mcp-jetbrains

GitHub - JetBrains/mcp-jetbrains: A model context protocol server to work with JetBrains IDEs: IntelliJ, PyCharm, WebStorm, etc.

"설정" => "개발자" 탭 => "설정 편집"을 누르면 "claude_desktop_config.json" 파일 위치가 나온다.

{
  "mcpServers": {
    "jetbrains": {
      "command": "npx",
      "args": ["-y", "@jetbrains/mcp-proxy"]
    }
  }
}

공식 사이트에서는 이거를 claude_desktop_config.json에 넣으면 된다고 했다.

 

하지만 저 코드만 넣으면 WebStrom은 연결이 안 된다!!!

여기서 하루를 날렸다...

Calude, WebStrom, Jetbrains Tool Box를 모두 삭제하고 다시 설치도 해봤는데, 되질 않았다...

 

그러던 도중!

https://github.com/JetBrains/mcp-jetbrains/issues/22

MCP Server Proxy unable to detect Node.js installed via nvm · Issue #22 · JetBrains/mcp-jetbrains

이 글을 발견하고

이 분 덕분에 해결을 했다!!

(역시 공식 깃헙은 신이다)

{
  "mcpServers": {
    "jetbrains": {
      "args": [
        "-y",
        "@jetbrains/mcp-proxy"
      ],
      "command": "/Users/{user}/.nvm/versions/node/v22.14.0/bin/npx",
      "env": {
        "LOG_ENABLED": "true",
        "NODE_PATH": "/Users/{user}/.nvm/versions/node/v22.14.0/lib/node_modules",
        "PATH": "/Users/{user}/.nvm/versions/node/v22.14.0/bin:/usr/local/bin:/usr/bin:/bin"
      }
    }
  }
}

command, NODE_PATH, PATH에서 {user} 이 부분만 본인 경로로 바꿔주면 된다!!

그리고 아마 node 버전 18 이상부터 지원을 하는 것으로 알고 있다. 나는 node 22 버전으로 설치하고 진행했다.

 

-에러 로그

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@modelcontextprotocol/sdk@1.7.0',
npm WARN EBADENGINE   required: { node: '>=18' },
npm WARN EBADENGINE   current: { node: 'v16.15.1', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'eventsource@3.0.6',
npm WARN EBADENGINE   required: { node: '>=18.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.15.1', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'express@5.1.0',
npm WARN EBADENGINE   required: { node: '>= 18' },
npm WARN EBADENGINE   current: { node: 'v16.15.1', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'pkce-challenge@4.1.0',
npm WARN EBADENGINE   required: { node: '>=16.20.0' },
npm WARN EBADENGINE   current: { node: 'v16.15.1', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'eventsource-parser@3.0.1',
npm WARN EBADENGINE   required: { node: '>=18.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.15.1', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'body-parser@2.2.0',
npm WARN EBADENGINE   required: { node: '>=18' },
npm WARN EBADENGINE   current: { node: 'v16.15.1', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'merge-descriptors@2.0.0',
npm WARN EBADENGINE   required: { node: '>=18' },
npm WARN EBADENGINE   current: { node: 'v16.15.1', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'router@2.2.0',
npm WARN EBADENGINE   required: { node: '>= 18' },
npm WARN EBADENGINE   current: { node: 'v16.15.1', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'send@1.2.0',
npm WARN EBADENGINE   required: { node: '>= 18' },
npm WARN EBADENGINE   current: { node: 'v16.15.1', npm: '8.11.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'serve-static@2.2.0',
npm WARN EBADENGINE   required: { node: '>= 18' },
npm WARN EBADENGINE   current: { node: 'v16.15.1', npm: '8.11.0' }
npm WARN EBADENGINE }

에러 로그를 보면 node 18 버전부터 지원을 하는 게 맞아 보인다.

claude_desktop_config.json에 node 경로를 직접 입력해야 node를 인식하는 것 같다.

 

위처럼 설정을 마치고 Claude를 재시작하면!

연결이 잘 된 것을 볼 수 있다!!!

WebStrom

이제 WebStrom에서 플러그인 설치만 해주면 끝이다.

"WebStrom" => "설정"

"플러그인" => "MCP Server" 설치

 

이러면 WebStrom에서는 끝이다!

최종 연결 확인

Claude에서 확인하면 연결이 잘 된 것을 볼 수 있다!!

앞으로 MCP를 활용해서 더 많은 것들을 할 수 있을 것 같다. 잘 활용해서 AI도 잘 다룰 줄 아는 개발자가 되고 싶다!

출처

https://www.threads.net/@stock_simulation/post/DE-PhtPyZmp?hl=ko

https://github.com/JetBrains/mcp-jetbrains/issues/22

MCP Server Proxy unable to detect Node.js installed via nvm · Issue #22 · JetBrains/mcp-jetbrains