RxJS MCP Server

日本語版 README はこちら

npm version npm downloads license Node.js

Release Provenance Trusted Publisher

TypeScript RxJS MCP PRs welcome

⚠️ 이 프로젝트는 커뮤니티 프로젝트이며, RxJS 팀과는 관련이 없습니다.

Claude와 같은 AI 어시스턴트에서 직접 RxJS 스트림을 실행, 디버깅 및 시각화하세요.

기능

🚀 스트림 실행

RxJS 코드 실행 및 방출(emission) 캡처
타임스탬프가 포함된 타임라인 시각화
메모리 사용량 추적
모든 주요 RxJS 연산자 지원

📊 마블 다이어그램

이벤트 데이터로부터 ASCII 마블 다이어그램 생성
시간 경과에 따른 스트림 동작 시각화
자동 패턴 감지
명확한 범례 및 설명

🔍 연산자 분석

성능을 위한 연산자 체인 분석
잠재적인 문제 및 병목 현상 감지
대안 접근 방식 제안
기능별 연산자 분류

🛡️ 메모리 누수 감지

구독 해제되지 않은 구독 식별
누락된 정리(cleanup) 패턴 감지
프레임워크별 권장 사항 (Angular, React, Vue)
적절한 정리 예제 제공

💡 패턴 제안

검증된 RxJS 패턴 제공
프레임워크별 구현
주요 사용 사례:
- 백오프를 포함한 HTTP 재시도
- 검색 타입어헤드(Typeahead)
- WebSocket 재연결
- 폼 유효성 검사
- 상태 관리
- 기타 등등...

설치

# Install globally
npm install -g @shuji-bonji/rxjs-mcp

# Or use with npx
npx @shuji-bonji/rxjs-mcp

설정

Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json에 추가하세요:

{
  "mcpServers": {
    "rxjs": {
      "command": "npx",
      "args": ["@shuji-bonji/rxjs-mcp"]
    }
  }
}

VS Code (Continue/Copilot 사용 시)

.vscode/mcp.json에 추가하세요:

{
  "mcpServers": {
    "rxjs": {
      "command": "npx",
      "args": ["@shuji-bonji/rxjs-mcp"]
    }
  }
}

Cursor

~/.cursor/mcp.json에 추가하세요:

{
  "mcpServers": {
    "rxjs": {
      "command": "npx",
      "args": ["@shuji-bonji/rxjs-mcp"]
    }
  }
}

사용 가능한 도구

execute_stream

RxJS 코드를 실행하고 타임라인과 함께 스트림 방출을 캡처합니다.

이 도구는 Observable로 평가되는 표현식이나, 그러한 표현식으로 끝나는 코드 조각을 허용합니다. return은 선택 사항입니다.

// ✅ Trailing expression (v0.2.0+): the last expression is returned implicitly
interval(100).pipe(
  take(5),
  map((x) => x * 2),
);

// ✅ Declaration + trailing reference
const stream$ = interval(100).pipe(
  take(5),
  map((x) => x * 2),
);
stream$;

// ✅ Explicit return (always works)
return interval(100).pipe(
  take(5),
  map((x) => x * 2),
);

generate_marble

이벤트 데이터로부터 ASCII 마블 다이어그램을 생성합니다.

// Input: array of timed events
[
  { time: 0, value: 'A' },
  { time: 50, value: 'B' },
  { time: 100, value: 'C' },
];

// Output: A----B----C--|

analyze_operators

성능 및 모범 사례를 위해 RxJS 연산자 체인을 분석합니다.

// Analyzes chains like:
source$.pipe(
  map((x) => x * 2),
  filter((x) => x > 10),
  switchMap((x) => fetchData(x)),
  retry(3),
);

detect_memory_leak

잠재적인 메모리 누수 및 누락된 정리 작업을 감지합니다.

// Detects issues like:
- Missing unsubscribe
- No takeUntil operator
- Uncompleted Subjects
- Infinite intervals

suggest_pattern

일반적인 사용 사례에 대한 프로덕션 수준의 패턴을 가져옵니다.

사용 가능한 패턴:

http-retry - 재시도를 포함한 탄력적인 HTTP
search-typeahead - 디바운스된 검색
polling - 백오프를 포함한 스마트 폴링
websocket-reconnect - 자동 재연결 WebSocket
form-validation - 반응형 폼 유효성 검사
state-management - 간단한 상태 저장소
cache-refresh - 새로고침 전략이 포함된 캐시
기타 등등...

사용 예시

Claude와 함께 사용

User: "Execute this RxJS stream and show me the output"

Claude: I'll execute that RxJS stream for you.

[Uses execute_stream tool]

## Stream Execution Result
✅ Completed
Execution Time: 523ms
Values Emitted: 5

### Emitted Values
[0, 2, 4, 6, 8]

메모리 누수 디버깅

User: "Check this Angular component for memory leaks"

Claude: I'll analyze your component for potential memory leaks.

[Uses detect_memory_leak tool]

## Memory Leak Analysis
⚠️ Potential leaks detected

1. 🔴 subscription (high severity)
   - Found 3 subscribe() calls but only 1 unsubscribe()
   - Fix: Use takeUntil pattern with destroy$ subject

패턴 가져오기

User: "Show me how to implement search with RxJS"

Claude: I'll show you the search typeahead pattern.

[Uses suggest_pattern tool with useCase: 'search-typeahead']

## Search Typeahead with Debounce
[Full implementation with explanation]

보안

execute_stream 도구는 사용자 제공 코드를 **격리된 워커 스레드(Worker thread)**에서 실행하여 다음을 방지합니다:

메인 프로세스 오염
무한 루프나 타이머로 인한 리소스 누수
민감한 Node.js API(process, fs 등)에 대한 접근

설정된 타임아웃을 초과하면 실행이 강제로 종료됩니다.

개발

# Clone the repository
git clone https://github.com/shuji-bonji/rxjs-mcp-server
cd rxjs-mcp-server

# Install dependencies
npm install

# Build
npm run build

# Run tests
npm test              # Unit tests (vitest)
npm run test:mcp      # MCP integration test
npm run test:inspector # MCP Inspector (GUI)

# Run in development
npm run dev

릴리스

릴리스는 GitHub Actions를 통해 자동화되며, **Trusted Publisher (OIDC)**를 사용하여 npm에 게시됩니다. 정적 토큰은 사용되지 않으며, 모든 릴리스는 npm 출처 증명(provenance attestation)을 포함합니다. 전체 워크플로우(및 초기 npm 설정)는 RELEASING.md를 참조하세요.

다른 MCP 서버와의 통합

RxJS MCP Server는 다음 도구들과 함께 사용하면 좋습니다:

Angular MCP - Angular 프로젝트 스캐폴딩용
TypeScript MCP - 타입 검사용
ESLint MCP - 코드 품질용

향후 Meta-MCP 통합을 통해 이러한 도구들 간의 원활한 조정이 가능해질 것입니다.

아키텍처

┌─────────────────┐
│   AI Assistant  │
│   (Claude, etc) │
└────────┬────────┘
         │
    MCP Protocol
         │
┌────────┴────────┐
│  RxJS MCP Server│
├─────────────────┤
│ • execute_stream│
│ • generate_marble│
│ • analyze_operators│
│ • detect_memory_leak│
│ • suggest_pattern│
└─────────────────┘

기여

기여를 환영합니다! 자유롭게 PR을 제출해 주세요.

라이선스

MIT

작성자

Shuji Bonji

rxjs-mcp-server