はじめに
本記事は実用性よりもネタとしてお楽しみください。
Claude Codeを使っているとレートリミットが気になりますが、いちいちコマンドで確認するのも面倒です。
また、処理をお願いした後、プロンプト入力待ちになったタイミングで気づけずにいることもあります。
そこでClaude Codeの情報を手元のガジェットに出力することを試してみました。
以下の2つを実現します。
- トークン使用量やレート制限の情報をUSB LCDディスプレイに表示
- プロンプト入力待ちになった時に、M5Stack ATOM LITE製PATLITE互換ガジェットを点灯させて通知
今回作製したツールの完全なソースコードは以下にあります。
ClaudeStatDisplay : Reverse Proxy型USB LCD出力ツール
概要
YARPを使用してReverse Proxy型の.NETアプリケーションを作成し、Claude Codeからのリクエストを中継しつつ、Anthropic APIのレスポンスからトークン使用量やレート制限情報を抽出して、USB LCDディスプレイにリアルタイム表示するものを作りました。
使用するUSB LCDは以前の記事で紹介したThermalright Trofeo Vision LCDと同じものです。
LCD制御プロトコルの詳細や画像転送の仕組みについては以下の過去記事で解説していますので、そちらもあわせてご覧ください。
動作方式
Claude Codeのsettings.jsonに以下の設定を追加することで、Claude CodeのAPIアクセスをClaudeStatDisplayを経由させます。
"env": {
"ANTHROPIC_BASE_URL": "http://127.0.0.1:5080"
}
ClaudeStatDisplayはローカルで動く小さなリバースプロキシとして、Claude CodeからのリクエストをそのままAnthropicのAPIに転送しつつ、レスポンスを横取りして解析し、結果をLCDにダッシュボードとして描画します。
環境
| 項目 | 概要 |
|---|---|
| 言語/ランタイム | C#/.NET 10 |
| Reverse Proxy | YARP (Yet Another Reverse Proxy) |
| LCD描画 | SkiaSharp |
| LCDモニター | Thermalright Trofeo Vision LCD |
YARPパイプラインと情報キャプチャ
YARP(Yet Another Reverse Proxy)はMicrosoftが開発しているASP.NETベースのリバースプロキシライブラリです。
通常のASP.NET Coreのミドルウェアパイプラインと組み合わせて使えるため、今回はYARPのTransforとカスタムMiddlewareの2段構えでAPI情報をキャプチャしています。
- YARP Transform: レスポンスヘッダを横取りしてHttpContextに保存
- カスタムMiddleware: レスポンスボディをパススルーしつつメモリにコピーして解析
レート制限情報はレスポンスヘッダから取得できますが、モデル名やリクエストで使用したトークン情報はレスポンスボディ側に含まれているため、ヘッダだけでは取得できません。
そこで、カスタムMiddlewareでレスポンスボディをクライアントに流しながら、同時にメモリ上にコピーを保持する仕組みにして、Claude Code本体の動作に影響を与えずに中身を解析しています。
LCDへの描画
LCDに表示するダッシュボード画像はSkiaSharpを使って生成し、以下の情報を描画してUSB LCDへ画像データを送信しています。
- モデル名
- トークン使用量
- コンテキストウィンドウ使用率バー
- レート制限(5時間、7日)の使用率バーとリセット時刻
レート制限を常時LCDディスプレイに表示することで、利用状況がわかりやすくなりました。
M5Lite : PATLITE互換アプリケーション
概要
M5Liteは、M5Stack ATOM LITEを使用したのPATLITE互換プロトコルを実装するアプリケーションです。
PATLITEのプロトコルを実装することで、PATLITEのクライアントをそのまま使用できるようにしており、本物のPATLITEを制御するのと同じ形でM5Stack ATOM LITEに接続したRGB LEDを点灯できるようにしています。
本物のPATLITEは高価で、中古品をオークションで購入することはできますが、設置には場所も取ります。
対してM5Stack ATOM LITE + RGB LEDユニットなら手のひらサイズで、電源もUSB給電のみで済みます。
部品
使用している部品はM5Stack ATOM LITEとRGB LEDユニットの2点です。
| 部品 | リンク |
|---|---|
| M5Stack ATOM Lite | https://www.marutsu.co.jp/pc/i/1634275/ |
| M5Stack用RGB LEDユニット (SK6812) | https://www.marutsu.co.jp/pc/i/2177914/ |
2,500円くらいで作製できます(LEGO等は除く)。
環境
| 項目 | 概要 |
|---|---|
| マイコン | M5Stack ATOM Lite (ESP32) |
| 開発環境 | Arduino IDE |
| 通信 | Wi-Fi + UDP |
プログラム構成
M5Liteは以下の流れで動作するシンプルな実装です。
- 起動時にWi-Fiへ接続し、指定のUDPポートをLISTEN
- 受信パケットを解釈し、赤/黄/緑の点灯・点滅状態を更新
- 一定間隔で点滅フェーズをトグルし、LEDを再描画
- M5のボタン押下でLEDを全消灯(リセット)
PATLITEはTCPとUDPの両方に対応していますが、今回はUDPのほうを利用しています。
コマンド自体はTCPもUDPも同じで、制御には2バイト(コマンド1byte、パラメータ1byte)のデータを送信するだけです。
Patlite.Client : PATLITE用クライアントライブラリ/.NET Global Tools
概要
Claude CodeからM5Liteへのコマンド送信は、以前に作っていたPATLITE用のクライアントツールを使いました。
元々はCIビルドの通知用途に、オクで入手した本物のPATLITEを制御するために作ったものですが、M5LiteをPATLITE互換で作ることで、そのまま流用できる形になります。
インストール
Global Toolsとして以下のコマンドでインストールできます。
dotnet tool install -g PatliteTool
使い方
write コマンドで点灯状態を指定します。
# 赤を点滅
patlite write -h 192.168.100.132 -u -c r -b
# 緑を点灯
patlite write -h 192.168.100.132 -u -c g
# 緑/黄/赤を同時点灯
patlite write -h 192.168.100.132 -u -c gyr
主なオプションは以下のとおりです。
| オプション | 内容 |
|---|---|
-h |
接続先ホスト |
-u |
UDPを使用(省略時はTCP) |
-c |
色 (r/y/gの組み合わせ) |
-b |
点滅(Blink)モード |
hooksで通知させる
Claude Codeのhooksに上記patliteコマンドの呼び出しを仕込むことで、プロンプト入力待ちになった時にLEDを点滅させます。
settings.jsonに以下のようなhooksの設定をします。
"hooks": {
"PermissionRequest": [
{
"hooks": [
{
"type": "command",
"command": "C:/Usr/Bin/patlite-red.bat"
}
]
}
],
"PostToolUse": [
{
"hooks": [
{
"type": "command",
"command": "C:/Usr/Bin/patlite-off.bat"
}
]
}
]
}
バッチファイルの中身は単純にpatliteコマンドを呼び出すだけのものです。
REM 赤点滅
patlite write -h 192.168.100.132 -u -c r -b
REM 消灯
patlite clear -h 192.168.100.132 -u
PermissionRequestとPostToolUseのフックで、Claude Codeが入力待ちになると赤く点滅し、処理が再開すると消灯する動作の設定をしています。
ちなみに本物のPATLITEを使った場合の動作イメージはこんな感じです。
うさコメ
Claude Codeを使いながら、レートリミットがLCDで視覚的に確認できるのはいいですね( ˙ω˙)
本当は'/context'相当の表示なんかも見られるとよいですが、ヘッダやボディから直接取得できる情報ではないので、今回は見送っています。
M5Liteは本物のPATLITEに比べてかなりおもちゃ感がありますが、手のひらサイズで場所も取らず、USB給電だけで動くのでデスクに置きやすいです。
Claude Code以外のちょっとした通知用途に使うのも良いかもしれません。