1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Claude Code に MCP でリアルタイム機能(WebSocket)を組み込ませる

1
Posted at

この記事は Hibira ブログの記事 を Qiita 向けにまとめ直したものです。Hibira を開発・運営しているチームが書いています。

アプリにリアルタイム機能を足す作業は、ほとんどが配線です。認証情報を作り、正しい env ファイルに書き、クライアントライブラリを設定し、プライベートチャンネルを認可して、最後にイベントが本当に届くか確かめる。AI コーディングエージェントが得意な種類の仕事ですが、エージェントがサービス側に手を伸ばせないと、最後の「本当に届いたか」が確かめられません。

この記事では、Pusher 互換の WebSocket サービス Hibira の MCP サーバーを Claude Code につないで、Laravel アプリにリアルタイム通知を組み込むところまでをエージェントに任せてみます。

MCP サーバーでできること

Model Context Protocol 経由で、エージェントは 9 つのツールを使えます。

ツール 内容
get_account プランと WebSocket ホストを読む
list_apps / get_app アプリの一覧と設定を読む
create_app / update_app アプリを作る・設定を変える(許可オリジン、クライアントイベントなど)
get_usage 1 日のメッセージ上限に対する使用量を読む
send_test_event サーバーと同じ経路でテストイベントを配信する
watch_debug_events デバッグコンソールを最大 30 秒見て、接続・購読・メッセージを報告する
get_integration_guide フレームワーク別の導入手順を、自分の App ID と key を埋めた状態で返す

アプリの削除と secret のローテーションはできず、既存アプリの secret をエージェントが見ることもありません。

ステップ 1:サーバーを追加する

プロジェクトのフォルダーで次を実行します。

claude mcp add --transport http hibira https://hibira.io/mcp

最初にツールを使うとき、ブラウザで Hibira の画面が開きます。サインインして 読み取りのみ か 読み書き を選んで承認します。開かない場合は Claude Code で /mcp を実行し、hibira サーバーの認証を選んでください。新しいアプリを作るには読み書きの権限が必要です。

ステップ 2:やりたいことを具体的に頼む

スタックと動かす場所を具体的に書くのがコツです。Vite フロントエンドの Laravel アプリなら:

Add Hibira realtime to this Laravel app. Create an app called "shop-dev" that allows http://localhost:5173, put the keys in .env, set up Laravel Echo, and broadcast OrderShipped on a private orders channel.

その後の流れはエージェント次第ですが、だいたい次のようになります。

  1. get_account でプランと WebSocket ホストを確認
  2. create_app で名前と許可オリジンを指定してアプリを作成。secret は一度だけ返り、git 管理外の .env に直接書くようツールが指示する
  3. get_integration_guide で laravel の手順を取得(Echo の設定、.env のキー、プライベートチャンネルの手順に自分の値が入った状態)
  4. .env、config/broadcasting.php、resources/js/echo.js、routes/channels.php の編集と、ブロードキャストイベントの追加

差分はふつうの Laravel のコードなので、いつものレビューと同じように見れば十分です。あとからエージェントに依存する部分は残りません。

ステップ 3:イベントが届くことを確かめる

ここが MCP を使ういちばんの理由です。私たちがこの MCP サーバーを作ったのも、この確認までをエージェントに任せたかったからです。

Open the app in the browser, then send a test OrderShipped event to private-orders.1 and tell me whether a subscriber received it.

エージェントは send_test_event で配信し、watch_debug_events でデバッグコンソールを見て、購読者に届いたかを報告します。購読者がいなければそれも見えるので、たいていは認証エンドポイントか許可オリジンの問題だと切り分けられます。

CI やリモートのエージェントでは PAT を使う

ブラウザを開けない環境では、ポータルの「AI エージェント」ページで個人アクセストークンを作り、ヘッダーで渡します。アプリ 1 つと有効期限に絞っておくのがおすすめです。

claude mcp add --transport http hibira https://hibira.io/mcp \
  --header "Authorization: Bearer hkb_pat_..."

同じページで、接続中のエージェントとトークンをいつでも取り消せます。

注意点

  • テストイベントも実際のメッセージとしてプランの 1 日上限に数えられます。
  • 普段の質問(「上限まであとどれくらい?」など)には読み取りのみの権限で十分です。
  • Cursor、VS Code でも同じように使えます。設定方法は MCP サーバーのページ にあります。
  • Claude や ChatGPT のチャット画面からは「カスタムコネクタ」として追加できます。スクリーンショット付きの手順を コネクタ設定ガイド にまとめました。

Hibira について

Hibira は私たちのチームが開発・運営している Pusher Channels プロトコル互換の WebSocket サービスで、Laravel Echo や pusher-js をそのまま使えます。サーバーは香港(AWS ap-east-1)にあり、アジアのユーザー向けに作っています。Laravel なら公式パッケージ composer require hibira-io/laravel と php artisan hibira:install で設定が終わります。

Free プランはカード登録不要で、同時接続 100、1 日 20 万メッセージ、アプリ 1 つ、同時チャンネル 200、メッセージ 4 KB まで、月 200 万回の配信、プッシュ購読 2,000 まで使えます(1 日の上限に数えるのは publish したメッセージだけです)。有料プランは米ドル建てで、Hobby $19、Starter $39、Pro $89、Advanced $169、Business $279、Scale $699(いずれも月額、年払いは 10 か月分)です。

動かなかった点や欲しい機能があれば、コメントで教えてください。チームで確認してお返事します。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?