Claude Codeの設定を可視化するローカルダッシュボードを自作してみた

こんにちは、こーへいです。

早速ですが、Claude Codeには Skills・Plugins・MCP連携・Hooks・権限設定・CLAUDE.md など、便利な機能がたくさん用意されています。

一見どれも活用すればするほど得をする機能ですが、実際に使いこなせているかというと話は別で、私自身「機能はあるのに全然使えていないな」と感じることが多くありました。

というのも、これらの設定は /permissions や /config などのスラッシュコマンドでその都度CLIから確認するしかなく、パッと全体像を見返す手段がなかったからです。ですが確認が面倒なものは自然と見なくなり、見なくなると何を設定したか忘れ、忘れるとSkillsやMCPを活用せず毎回プロンプトで同じ指示を書く、という悪循環にはまっていました。

「だったら設定を可視化して、パッと見返せるようにすれば良いのでは」という仮説から作り始めたのが、今回紹介するダッシュボードです。

4つのタブ

トップ画面には4つのタブがあり、それぞれ「思い出したいこと」に合わせて分けています。1つずつ、こだわったポイントとあわせて紹介します。

Skills / Plugins

一番こだわったのは、パッと見でどんなSkillsを使っていたのか思い出せることです。

組み込み・自分で追加したもの・プラグイン経由のものが混ざってくると、設定した当時は覚えていても数週間経つと確実に忘れます。一覧をタブ1つで開けるようにしたことで、「あ、このSkillあったな」と思い出し、実際に使う頻度が上がりました。

MCP連携

考え方はSkillsタブと同じで、どんなMCPサーバーを登録していて、ちゃんと接続できているかをパッと見で思い出せることにこだわりました。

登録したこと自体を忘れてしまったり、いつの間にか「要認証」の状態で放置していたりということが実際によくあったので、一覧して状態がひと目でわかるようにしています。

設定・Hooks・権限

このタブで特に欲しかったのは、Effortレベル・デフォルトの権限モード・CLAUDE.md の3つです。

どれも「設定した記憶はあるけど、今どうなっているか」を忘れがちな項目でした。Effortレベルやデフォルト権限モードは変更してもすぐには挙動に現れないことがあり、CLAUDE.mdに至っては書いた内容そのものを忘れることもしばしばです。このタブを見れば、この3つを含む今の設定状態がすぐに確認できます。

利用状況・アカウント

このタブは、サクッとコストを確認することと、使用モデルがOpusやFable 5など高いモデルのまま残っていないかを確認することの2つの用途で日常的に使っています。

作業内容によってはSonnetで十分なのに、前の作業でOpusに切り替えたまま忘れている、ということがよくあります。直近の使用モデルが一目でわかるので、「あ、Opusのままだ」と気づいてすぐ戻せるのがこのタブの一番のこだわりポイントです。

運用イメージ

今は特別な操作をせず、ローカルで node server.js を起動したままブラウザタブを1つ開いておくだけの運用にしています。作業の合間にふと確認したくなったら、そのタブを見るだけです。

• 「このSkill、最近使ってなかったな」と気づいて使うようになる
• 「MCPの接続が切れてる」とすぐ気づける
• 「今日はこんなにトークン使ってたのか」とキャッシュ効率を意識するようになる

「見えている」というだけで記憶に残りやすくなり、結果的にClaude Codeを使いこなせるようになった、というのが一番の実感です。地味ですが、これが最初の仮説（「見えないから忘れる、忘れるから使わない」）への一番効いた答えだったと思います。

※筆者はより使いやすいようにmacアプリ化しています
※画像用に縮小して横に並べていますが流石にそこまでずっとべったり横に表示させていません

Kiro CLIへの対応

Claude Code以外にも複数のエージェントCLIを併用するようになったことで、「設定確認の入口が増えるとまた同じ問題が起きる」と気づき、Kiro CLIにも対応しました。

これらをClaude Codeと同じUIの中でタブを切り替えて確認できるようにしています。今後も、複数のエージェントCLIを横断して「今の自分の設定」を一箇所で把握できる状態を保てるよう、対応を広げていきたいと考えています。

ツールまとめ

改めてまとめると、このツールは以下のような特徴を持つ、ローカルで動くダッシュボードです。

• Node.js標準モジュールのみで動く、依存ライブラリゼロのローカルサーバー
• 設定ファイルには一切書き込みません（読み取り専用）。127.0.0.1 のみにバインドし、外部からはアクセス不可
• APIキーやトークンなど機密性の高い値は自動でマスクして表示
• Claude Code / Kiro CLI 両方のSkills・MCP連携・設定・利用状況をワンストップで確認可能

試す場合はリポジトリをcloneして起動するだけです。

git clone https://github.com/dorapyon/agent-cli-dashboard.git
cd agent-cli-dashboard
node server.js

これで http://127.0.0.1:4317 が開き、自分のClaude Code / Kiro CLIの設定を一目で確認できます。

まとめ

「機能はあるのに使いこなせていない」という悩みは、多くの場合「見えていないから忘れる」というシンプルな理由から来ているのかもしれません。このツールは特別なことをしているわけではなく、ただ「今の設定・状態」を可視化しているだけですが、それだけで自分のClaude Codeの使い方はかなり変わりました。

同じようにClaude Codeの機能を持て余している方がいれば、ぜひ触ってみてください。カスタマイズもご自由にいただいて大丈夫です。それでは。

参考

• Agent CLI Dashboard (GitHub)

※ 本記事は個人用ローカルツールの開発記録であり、類似ツールとの機能比較・優劣評価を目的としたものではありません。
※ 掲載しているスクリーンショット・機能内容は執筆時点（2026年7月）のものです。今後のアップデートで表示内容が変わる場合があります。