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マーブルダイアグラムを生成
時間経過に伴うストリームの挙動を可視化
自動パターン検出
明確な凡例と解説

🔍 オペレーター分析

パフォーマンス向上のためのオペレーターチェーン分析
潜在的な問題やボトルネックの検出
代替アプローチの提案
機能ごとのオペレーター分類

🛡️ メモリリーク検出

未購読（unsubscribed）のサブスクリプションを特定
クリーンアップ漏れのパターンを検出
フレームワーク固有の推奨事項（Angular, React, Vue）
適切なクリーンアップ例の提供

💡 パターン提案

実戦で鍛えられたRxJSパターンを取得
フレームワーク固有の実装
一般的なユースケースを網羅:
- バックオフ付きHTTPリトライ
- 検索のタイプアヘッド
- 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スレッドで実行し、以下を防ぎます：

メインプロセスの汚染
無限ループやタイマーによるリソースリーク
機密性の高い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（来歴）証明が付与されます。完全なワークフロー（および初期の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を送信してください。

rxjs-mcp-server