Claude Codeからの応答をデスクトップマスコットに喋らせる

概要

Claude Codeのログをリアルタイム監視し、VRMモデルと音声合成を用いてデスクトップマスコットに喋らせるElectronアプリの実装解説。

詳細内容

この記事では、AIコーディングエージェント「Claude Code」の応答を視覚的・聴覚的に演出するためのデスクトップマスコット開発手法を解説しています。技術スタックにはElectron、React、Three.js（@pixiv/three-vrm）を採用。`chokidar`を用いて`~/.claude/projects/`配下のJSONLログを監視し、差分を抽出してAivisSpeechやVOICEVOXで音声合成を行います。テキスト解析による感情推論に基づいた表情制御、VRMAによるアニメーション、音量に連動したリップシンク、さらにはClaude CodeのSkill（プラグイン）を利用したセッション制御など、実用的な実装の詳細がまとめられています。

元記事を読む他のサマリーを見る