Rxjs Mcp Server

RxJS MCP Server

日本語版 README はこちら

⚠️ これは非公式のコミュニティプロジェクトであり、RxJS チームとは関係ありません。

Claude などの AI アシスタントから、RxJS ストリームを直接実行、デバッグ、可視化できます。

機能

🚀 ストリームの実行

• RxJS コードを実行して、発行された値を取得します
• タイムスタンプ付きのタイムライン可視化
• メモリ使用量の追跡
• 主要な RxJS オペレーターすべてに対応

📊 マーブルダイアグラム

• ASCII マーブルダイアグラムを生成します
• 時間経過に伴うストリームの動作を可視化します
• パターンを自動検出します
• わかりやすい凡例と説明

🔍 オペレーターの分析

• オペレーターチェーンのパフォーマンスを分析します
• 潜在的な問題やボトルネックを検出します
• 代替アプローチを提案します
• 機能別にオペレーターを分類します

🛡️ メモリリークの検出

• 購読解除されていないサブスクリプションを特定します
• クリーンアップパターンの不足を検出します
• フレームワーク固有の推奨事項を提示します（Angular、React、Vue）
• 適切なクリーンアップの例を提供します

💡 パターンの提案

• 実績のある RxJS パターンを取得できます
• フレームワーク固有の実装
• 一般的なユースケースに対応：
  • バックオフ付き HTTP リトライ
  • 検索サジェスト
  • WebSocket の再接続
  • フォームのバリデーション
  • 状態管理
  • その他多数…

インストール

要件

• Node.js >= 22（engines.node）。このサーバーの基盤となる MCP TypeScript SDK v2 は Node.js >= 20 を必要とします。このパッケージでは、メンテナンスが継続されている LTS 系列を使用できるよう、より高い最低バージョンを設定しています。

# 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"]
    }
  }
}

Continue/Copilot を使用する VS Code

.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 - 更新戦略を備えたキャッシュ
• その他...

lint_rxjs

よくある問題やベストプラクティスに照らして、RxJS コードスニペットをリントします。eslint-plugin-rxjs-x のルールに基づいています。

// Parameters:
{
  code: string;           // RxJS code to lint
  config?: 'recommended' | 'strict';  // Rule set (default: recommended)
  framework?: 'angular' | 'react' | 'vue' | 'none'; // Framework context
  rules?: string[];       // Specific rules to check (overrides config)
}

設定レベル：

• recommended — よくある問題をカバーする 20 個のルール
• strict — eslint-plugin-rxjs-x の strict に含まれる 28 個のルール（no-exposed-subjects、no-misused-observables、no-unnecessary-collection など）

finnish はプラグインと同様、どちらの設定にも含まれず、名前を指定した場合にのみ実行されます。 rules: ["finnish"]。フレームワーク固有のチェックは、どちらのレベルにも追加されます。

フレームワーク固有のチェック：

• Angular — コンポーネントで takeUntilDestroyed() または takeUntil(destroy$) が不足している場合に検出します
• React — useEffect のクリーンアップなしで subscribe() が使われている場合に検出します
• Vue — onUnmounted のクリーンアップなしで subscribe() が使われている場合に検出します

使用例

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 のプロベナンス証明が付与されます。ワークフロー全体（および 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│
│ • lint_rxjs      │
└─────────────────┘

このサーバーは MCP TypeScript SDK v2 （@modelcontextprotocol/server@^2.0.0、プロトコルリビジョン 2026-07-28）を基盤としています。stdio のみで通信します。src/index.ts は src/server.ts の createServer() ファクトリーを serveStdio() に渡し、2025 年のプロトコルリビジョンを引き続き使用するクライアントにも対応します。

ドキュメント参照システム

v0.3.0 以降、analyze_operators は各オペレーターと生成関数について、3 階層のドキュメントリンクを出力します。

階層	ソース	目的	AI が読み取り可能？
公式	rxjs.dev	人間向けの信頼できる API リファレンス	❌ (SPA)
ソース	GitHub (tag 7.8.2)	JSDoc と実装 — AI にとって最も豊富なコンテキスト	✅
ガイド	RxJS-with-TypeScript	実用的な例を含む日英バイリンガルの解説	✅

公式ドキュメントとコミュニティガイドを併記する理由

1. rxjs.dev はクライアント側でレンダリングされる SPA です。 AI アシスタントはそのコンテンツを取得できません。HTTP リクエストでは、JavaScript ローダーを含む空のシェルが返されます。そのため、公式サイトは「人間に渡すリンク」であり、AI が読み取れるソースではありません。

2. GitHub のソースが実際の情報を提供します。 RxJS のソースコード（タグ 7.8.2 に固定）には、JSDoc、型シグネチャ、実装の詳細が含まれています。AI アシスタントにとって、これが主要な参照先です。

3. バイリンガルガイドは学習の文脈を補います。 演算子を（アルファベット順ではなく）ユースケース別に整理し、実行可能な例を示し、日本語訳を提供しています。日本語を話すユーザーや学習者にとって、これは rxjs.dev もソースコードも対応していない部分を補います。

優先順位

MCP サーバーが参照先を出力する際は、次の優先順位に従います。

1. officialUrl — 常に表示されます（権威性があり、人が読みやすい）
2. sourceUrl — 利用可能な場合に表示されます（AI はこちらを読むべきです）
3. guideUrl — ページが存在する場合に表示されます（補足情報）

演算子のガイドページがまだ存在しない場合、そのフィールドは省略されます（リンク切れは発生しません）。対応状況は URL 検証 CI で追跡されています。

ガイドへの参照を無効にできますか？

現在、出力から guideUrl を除外する実行時オプションはありません。公式情報のみを参照したい場合は、このサーバーをフォークするか、機能リクエストを送信してください。将来のバージョンでは、--references=official,source フラグがサポートされる可能性があります。

貢献

貢献を歓迎します！お気軽に PR を送信してください。

ライセンス

MIT

作者

Shuji Bonji

リンク

• GitHub リポジトリ
• RxJS ドキュメント
• Model Context Protocol