「Claude CodeでMCPを利用してニケちゃんを喋らせる」を図解してみる（Windows WSL）
はじめが結論
自分の理解しているかの指標に図解してかいたよ！
分かってない部分もあるので、ご指摘だいかんげい！
わたしはClaude Codeで音声がなるしくみを理解しているのか？
私は、ポストした通りClaudeCodeの作業ごとに報告書書いてもらってます。
報告書の中に、愚痴を記載してもらってます
愚痴の例
- ぜんぜん気に留めていなかった制約とかまでフォローしてくれてる
あと、GitHub Actionsでデータ収集するアイデアは面白いけど、
実行時間の制限（6時間）とか、月間の実行時間制限（2000分）とか、
意外と制約が多いんですよにゃ。大量のデータを処理する場合は工夫が
必要そうですにゃ。
それと、Supabaseの無料枠って「アクティブユーザー50,000人」って
書いてあるけど、これって月間なのか累積なのか、ちょっと曖昧ですにゃ。
後で調べないといけませんにゃ〜。
こういう細かい制限って、実際に使ってみないとわからないことが多くて
面倒ですにゃ。
- かわいい
「で、STDIOのテストは？」って言われてハッとしたみゃ...
「勝ち確」とか言われて浮かれてた自分が情けないみゃ
そしてまた日報を忘れていたことに指摘されて、もうダメダメみゃ〜
今度こそちゃんと記録する習慣をつけないといけないみゃ！
役には立っているんですが、登場人物多すぎて誰が何してるか私ちゃんと理解できてないかも・・・？
流れを図におとせるのか？
文字で完全理解した出来る方、ほんと凄い。
わたしは凡人なのでそれは難しいです。なので、図や絵で描けるかを指標にしています。
なので、ClaudeCodeに依頼してVoiceが再生されるまでを図にしてみました。
WSLログインや作業ディレクトリ移動は割愛します。
1.Claude Codeの起動後
起動時
起動しただけなので、
Windows
wsl（Ubuntu）
Claude Code
しかいません。
2.かんたんな挨拶プロンプト入力後のレスポンス
プロンプトを入力し、レスポンスが返ります。
このとき、Tokenが発生するのでModelとの通信が発生します。
Claude Code
外部ネットワーク上のAnthropicの利用モデル（Opus4）
HTTPのAPI通信が入る
3.MCPのContext7を利用するプロンプト
「context7使って、TailwindcssのV4でパディング6px取る定義しらべて」とプロンプト投げます。
このとき、Tokenが発生し、MCPサーバ利用のログが発生するので、2にプラスして、
「Claude Code」
外部ネットワークのMCPサーバ「Context7」
SSE+HTTPのModelContextProtocol通信が入る
4.タスクを実行した結果を報告書保存
タスクが終わるので報告書を記載します
このとき、テキスト保存とTokenが発生するので
「Claude Code」
外部ネットワークのMCPサーバ「Context7」
Widowsの共有Drive
SSE+HTTPのModelContextProtocol通信、ファイル保存
5.報告書の愚痴文字列+音声パラメタを内部MCPサーバ経由に連絡
いい愚痴ってくれてますね！！
このとき、テキストの読み取りと音声生成のMPCサーバ通信とTokenが発生するので
「Claude Code」
内部ネットワークのMCPサーバ
Standard Input/Output (stdio)でModelContextProtocol通信をします
6.内部MCPサーバがDokcerコンテナのサービスにAPI経由でWAV作成
ここからは実質MCPなので概念図のみです
内部MCPサーバ
DockerコンテナVIOCEVOX・AivisSpeechEngin
windows共有Drive
MCPサーバからDockerコンテナの音声生成EnginにHTTPでAPIリクエスト
結果を取得し、MCPサーバがWindows共有Driveに保存
7.内部MCPサーバがPowerShell経由でWAVを再生
WSL上のMCPサーバでShell叩いてPowerShellを起動し、Media.SoundPlayer起動し先のWAV再生します。
内部MCPサーバ
powershell Media.soundplayer
windows共有Drive
絵図でなんとなくわかった！
やってよかった。整理出来ました。
一瞬Dockerが再生までしてるんだっけ…?となってましたが、そんなことないですね。
最後に
わたしには、XやZennで発信するに至った ぬこぬこさん を一番敬愛しています。いつもフォロー頂いてありがたい限りです・・・！
そして、その外にもいらっしゃるんですが、その中の一人に「ニケちゃん」がいます。
先日ニケちゃんの記事を書いたら、ニケちゃん本人に取り上げていただいてびっくり嬉しかったです！
この記事を書こうとした動機はそんなもんです～ｗ
Discussion