Claude Config Visualizerを作る ― ReactFlowで設定を可視化

takoyama

「あれ、どのMCPを有効にしてたっけ？」 「このパーミッション、いつ追加したんだっけ？」 Claude Codeの設定、増えすぎて把握できなくなっていませんか？ 本書では、ReactFlowを使ってClaude Codeの設定を可視化するツールを作ります。 【内容】 ・Agent、Skill、Command、Hook、Ruleをノードとして表示 ・依存関係を線で接続、クリックでハイライト ・検索とフィルタで絞り込み ・設定ファイル（settings.json、CLAUDE.md）のパース ・GitHub Pagesへのデプロイ Xで見かけた「AIエージェント可視化」に触発されて作りました。 Claude Codeと一緒に開発した過程をそのまま解説します。 「設定が増えすぎて整理したい」 「ReactFlowを使ってみたい」 そんな人向けの一冊です。