Skip to main content
Glama
deenesjakoruzh
hansschenker

rxjs-spy-mcp

by hansschenker
OverviewSchemaRelated ServersScoreDiscussions
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 installed

F
license - not found
Not graded
quality - not tested
B
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

View all related MCP servers

Related MCP Connectors

  • sncro

    Live browser debugging for AI assistants — DOM, console, network via MCP.

  • chromedevtoolsmcp-mcp

    A paid remote MCP for AI agent browser DevTools MCP, built to return verdicts, receipts, usage logs,

  • agent-replay-debugger-mcp

    Agent Replay Debugger MCP — record every agent step + deterministic replay. Step-debugger for

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/hansschenker/rxjs-spy-mcp-old'

If you have feedback or need assistance with the MCP directory API, please join our Discord server