Skip to main content
Glama
deenesjakoruzh
hansschenker

rxjs-spy-mcp

by hansschenker
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

rxjs-spy-mcp

Chrome DevTools MCP 向けの実験的な RxJS ランタイムデバッグ プロトタイプです。

このリポジトリは、Nicholas Jamieson の rxjs-spy の背後にあるアイデアを、AI 支援デバッグワークフロー向けに近代化したものです: RxJS のランタイムイベントは、構造化されたヒープレジストリに取り込まれ、小さなデバッグ API を通じて公開され、Chrome DevTools MCP エージェントが読み取れるようになります。

主な貢献者について

このプロジェクトの主な貢献者は ChatGPT です。

アーキテクチャ、TypeScript スターター実装、RxJS カスタムデバッグ演算子、MVU デモ、タイムトラベルヒープレジストリ、Chrome DevTools MCP ブリッジは、ユーザーの RxJS デバッグ要件に基づいて ChatGPT によって生成・改良されました。

Related MCP server: Kaboom Browser AI Devtools MCP

プロジェクトの目標

rxjs-spy を完全に置き換えることは、まだ目標ではありません。これは MCP フレンドリーな RxJS デバッグモデルの最初の実験的実装です。

現在のプロトタイプは以下に焦点を当てています:

  • 型付き RxJS デバッグ演算子

  • Elm 風の MVU デモ

  • タイムトラベル状態履歴

  • 受動的なヒープベースの検査

  • 安全なスナップショット化と秘匿化

  • Chrome DevTools サードパーティツールの検出

  • AI が読み取り可能なデバッグフレーム

長期的な方向性は、以下を検査できる近代的な rxjs-spy-mcp ランタイムです:

  • タグ付きストリーム

  • 通知: next、error、complete

  • サブスクリプションとサブスクリプション解除

  • MVU 遷移: Msg -> Model

  • switchMap、mergeMap、concatMap、exhaustMap による内部サブスクリプションの動作

  • スケジューラを考慮したタイミングトレース

メンタルモデル

Observable      = static dataflow description
Subscription    = runtime execution
Notification    = runtime event: next | error | complete
Scheduler       = runtime time policy
Heap registry   = durable debug memory
Chrome MCP      = AI-readable inspection bridge

デバッガは、高速な非同期 RxJS イベントを永続的なデバッグフレームに変換します:

Msg / next / error / complete / unsubscribe
        ↓
spyOnHeap / spyOnMvuLoop
        ↓
window.__RXJS_SPY_MCP__
        ↓
Chrome DevTools MCP / console / debug panel

インストール

npm install

デモを実行する

npm run dev

ターミナルに表示されるローカル Vite URL を開きます。通常は次のとおりです:

http://127.0.0.1:5173

サンプル: デバッグ機能を手動で使用する

  1. npm run dev でアプリを起動します。

  2. ブラウザの DevTools コンソールを開きます。

  3. アプリはすでに初期 INIT 遷移を記録しているはずです。

  4. 追跡中のストリームを検査します:

window.__RXJS_SPY_MCP__.listStreams()

  1. メインの MVU 状態ストリームを検査します:

window.__RXJS_SPY_MCP__.inspectStream('main-app-state')

  1. タイムラインフレームのみを読み取ります:

window.__RXJS_SPY_MCP__.getTimeline('main-app-state', 10)

  1. コンパクトなランタイムストーリーを読み取ります:

window.__RXJS_SPY_MCP__.story('main-app-state', 20)

表として:

console.table(window.__RXJS_SPY_MCP__.story('main-app-state', 20))

ストーリー出力は、生のデバッグフレームを次のような行に変換します:

INIT -> query="", active="", loading=false, results=0
SET_QUERY -> query="rxjs", active="", loading=false, results=0
START_SEARCH -> query="rxjs", active="rxjs", loading=true, results=0
SEARCH_SUCCESS -> query="rxjs", active="rxjs", loading=false, results=3

  1. 検索クエリ (例: rxjs) を入力し、Search を押します。

  2. 次のように入力して、失敗する非同期エフェクトをシミュレートします:

error

次に Search を押します。

  1. ストーリーを再度検査します:

console.table(window.__RXJS_SPY_MCP__.story('main-app-state', 20))

次のようなシーケンスが表示されるはずです:

INIT
SET_QUERY
START_SEARCH
SEARCH_FAILURE

各 mvu-transition フレームには以下が格納されます:

{
  action: Msg,
  resultingState: Model
}

これにより、読み取り可能なランタイムストーリーが得られます:

The user changed the query.
A search request started.
The async effect failed.
The model moved into an error state.
The view rendered the error.

getTimeline('main-app-state', 20) が [] を返す場合

最初にこれを実行します:

window.__RXJS_SPY_MCP__.diagnose()

次にこれを実行します:

window.__RXJS_SPY_MCP__.listStreams()

ページの新規読み込み後に期待される結果:

streamCount >= 1
streamTags includes "main-app-state"
mainStateHistorySize >= 1

また、RXJS_SPY_MCP の前後にアンダースコアが 2 つ付いた正確なグローバル名を使用していることを確認してください:

window.__RXJS_SPY_MCP__

次のようにしないでください:

window._RXJS_SPY_MCP_

それでもタイムラインが空の場合は:

git pull
npm install
npm run dev

ブラウザタブをハードリフレッシュして、次を実行します:

window.__RXJS_SPY_MCP__.diagnose()
window.__RXJS_SPY_MCP__.getTimeline('main-app-state', 20)

現在の実装では、MVU メッセージソースにシード付き BehaviorSubject<Msg> を使用しているため、main.ts で runtime.appState$ がサブスクライブされると、INIT 遷移がすぐに記録されるはずです。

サンプル: ビジュアルタイムトラベル

右側のデバッグパネルにヒープタイムラインが表示されます。

任意のフレームをクリックすると、そのフレームに格納されている resultingState に UI が視覚的に巻き戻ります。

DevTools コンソールからジャンプすることもできます:

window.jumpToStep(2)

重要: これは現在 視覚的な巻き戻し であり、完全なリプレイベースの状態復元ではありません。内部の scan アキュムレータは巻き戻されません。将来のバージョンでは、真のイベントリプレイを追加できます。

サンプル: カスタム演算子の使用

汎用ストリーム検査

import { interval, map, take } from 'rxjs';
import { spyOnHeap } from './debug/operators';

const counter$ = interval(1000).pipe(
  take(5),
  map(n => ({ count: n })),
  spyOnHeap('counter-stream', { maxFrames: 10 })
);

counter$.subscribe();

次に、コンソールでそれを検査します:

window.__RXJS_SPY_MCP__.inspectStream('counter-stream')

MVU 遷移の検査

const msg$ = new BehaviorSubject<Msg>({ type: 'INIT' });

const transition$ = msg$.pipe(
  scan(
    (acc, msg) => ({ msg, model: update(acc.model, msg) }),
    { msg: { type: 'INIT' }, model: initialModel }
  ),
  spyOnMvuLoop('main-app-state', { maxFrames: 80 })
);

これは主要な教育/デバッグのユースケースです:

Msg flows in over time.
update calculates the next Model.
spyOnMvuLoop stores Msg + Model as a debug frame.

サンプル: Chrome DevTools MCP ワークフロー

このプロジェクトは、ページレベルの devtoolstooldiscovery イベントを通じて、Chrome DevTools サードパーティ開発者ツールブリッジを登録します。

Chrome DevTools MCP が実験的なサードパーティツールカテゴリを有効にして接続されている場合、AI エージェントは次のようなツールを検出できます:

rxjs_list_streams
rxjs_inspect_stream
rxjs_get_timeline
rxjs_story

典型的な AI エージェントのプロンプト:

Inspect the active browser tab with Chrome DevTools MCP. Use the rxjs-spy-mcp tools to list RxJS streams, read the main-app-state story, and explain why the latest search failed.

期待されるエージェントの動作:

1. list_3p_developer_tools
2. execute_3p_developer_tool: rxjs_list_streams
3. execute_3p_developer_tool: rxjs_story { tag: 'main-app-state', limit: 20 }
4. Explain the Msg -> Model transition that caused the bad state.

フォールバックとなる MCP アプローチは、スクリプト評価です:

() => globalThis.__RXJS_SPY_MCP__.story('main-app-state', 20)

元のプロトタイプに適用された修正

区分

適用された修正

コンセプト

MCP を RxJS ランタイム計測の置き換えではなく、検査ブリッジとして再定義。

MVU タイムトラベルの教育価値

明示的な Msg -> Model 遷移追跡とビジュアルタイムラインパネルを追加。

TypeScript の正確性

アプリとデバッグの型を分割し、無効なインポートを修正し、any ベースの INITIALIZE を削除し、厳密な型付き演算子を追加。

Chrome MCP API の正確性

考案された navigator.developerTools.registerTool のアイデアを、Chrome DevTools サードパーティツール用の devtoolstooldiscovery ブリッジに置き換え。

rxjs-spy 置き換えの完全性

タグ付きストリーム、通知フレーム、サブスクリプション ID、ティアダウン追跡、ストリームサマリーの基盤を追加。依然として完全な rxjs-spy の置き換えではありません。

AI エージェントの使いやすさ

JSON フレンドリーな diagnose、listStreams、inspectStream、getTimeline、story メソッドを追加。

本番安全性

開発時のみのインストール、シークレット風キーの秘匿化、安全なスナップショットシリアライゼーション、循環値への耐性、サイズ制限付きスナップショット。

現在の制限事項

これは実験的なプロトタイプです。完全な rxjs-spy の動作はまだ実装されていません。

欠落している、または将来の作業:

  • rxjs-spy タグに匹敵するモンキーパッチ不要のタグ付け API

  • グローバルな Observable サブスクリプショングラフ

  • 親/子サブスクリプショングラフ

  • 高階演算子の可視化

  • switchMap、mergeMap、concatMap、exhaustMap 専用のデバッグ演算子

  • asyncScheduler、animationFrameScheduler、仮想時間、ドリフトに対応したスケジューラ対応トレース

  • 真のリプレイベースのタイムトラベル

  • テスト

  • パッケージ公開

安全性に関する注意事項

デバッグレジストリは、開発モードで window.__RXJS_SPY_MCP__ にランタイム状態を公開します。機密性の高い本番データをデバッグストリームを通じて公開しないでください。

スナップショットレイヤーは、一般的なシークレット風キーを秘匿化し、シリアライズされるペイロードサイズを制限しますが、これは完全なセキュリティ境界ではありません。

ライセンス

MIT

This server cannot be deployed

Shareable, User-Owned Context BackendPeople, applications, and agents read, write, and coordinate together in one context lake. Reach it over MCP, a CLI, a Python SDK, or REST.fulcradynamics.comAd

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers