← ブログ

Claude Code で 10 分でリアルタイム WebSocket を追加する

· Hibira

Hibira MCP サーバーに Claude Code をつなぎ、アプリの作成、.env の設定、pusher-js の接続、最初のイベントが届くことの確認までを任せます。

アプリにリアルタイム機能を加える作業は、ほとんどが配線です。認証情報を作り、正しい env ファイルに入れ、クライアントライブラリを設定し、プライベートチャンネルを認可して、最後にイベントが本当に届くかを確かめる。サービスにさえ手が届けば、これは AI コーディングエージェントが得意とする仕事です。Hibira の MCP サーバーが、その手を届かせます。

この記事では Claude Code を使います。Cursor、VS Code、Claude、ChatGPT でも手順は同じで、それぞれの設定は MCP サーバーのページにあります。

エージェントにできること

Hibira は Model Context Protocol で 9 つのツールを提供しています。エージェントはプランとアプリの読み取り、アプリの作成と更新、使用量の確認、テストイベントの送信、デバッグコンソールの確認ができ、使っているフレームワークの導入ガイドを、アプリの ID とキーを埋め込んだ状態で取得できます。アプリの削除やシークレットのローテーションはできず、既存アプリのシークレットを見ることもありません。

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

Hibira のアカウントが必要です。Free プランで十分です。プロジェクトのフォルダで次を実行します。

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

Claude Code が初めてこのサーバーを使うとき、ブラウザで Hibira のページが開きます。サインインして読み取り専用か読み書きを選び、承認してください。自動で開かない場合は、Claude Code で /mcp を実行し、hibira サーバーの認証を選びます。新しいアプリを作るには書き込み権限が必要です。

ステップ 2：やりたいことを伝える

技術スタックと実行環境を具体的に伝えましょう。Vite フロントエンドの Laravel アプリなら、たとえば次のようにします。

この Laravel アプリに Hibira のリアルタイム機能を追加して。http://localhost:5173 を許可する "shop-dev" というアプリを作り、キーを .env に入れ、Laravel Echo を設定し、プライベートの orders チャンネルで OrderShipped をブロードキャストして。

この先はエージェント自身の計画次第ですが、たいていは次の流れになります。

  1. get_account でプランと WebSocket ホストを確認する。
  2. create_app で、指定した名前と許可するオリジンのアプリを作る。シークレットは一度だけ返され、ツールは git で無視される .env に直接書き込むようエージェントに指示します。
  3. get_integration_guide で laravel のガイドを取得する。Echo の設定、.env のキー、プライベートチャンネルの手順が、あなたの値を埋め込んだ状態で返ります。
  4. .env、config/broadcasting.php、resources/js/echo.js、routes/channels.php を編集し、ブロードキャストイベントを新しく作る。

ほかの変更と同じように差分をレビューしてください。編集内容はふつうの Laravel のコードで、あとからエージェントに依存する部分はありません。

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

ここでデバッグコンソールが役に立ちます。次のように頼みます。

ブラウザでアプリを開いて、private-orders.1 にテストの OrderShipped イベントを送り、購読者が受け取ったか教えて。

エージェントは send_test_event を呼んでサーバーと同じように配信し、watch_debug_events でアプリのデバッグコンソールを最大 30 秒監視して、接続、購読、メッセージを報告します。誰も購読していなければそれもわかり、たいていは認証エンドポイントか許可するオリジンが原因です。

Free プランのデバッグコンソールには接続、購読、配信したメッセージが表示されます。有料プランではクライアントイベント、Webhook、エラーも表示されます。

日々の質問にも

接続しておけば、セットアップ以外にも役立ちます。

  • 「アプリは 1 日のメッセージ上限まであとどれくらい？」には get_usage を使います。
  • 「staging.example.com のブラウザが拒否されるのはなぜ？」には get_app で許可するオリジンを読み、あなたが同意すれば update_app で直します。
  • 「入力中表示が動くように shop-dev のクライアントイベントをオンにして」は update_app 1 回で済みます。

安全に使うために

  • できるだけ読み取り専用で。 セットアップ中は読み書き、ふだんの質問には読み取り専用を許可しましょう。
  • ブラウザのないエージェントにはトークンを。 CI ジョブやリモートのエージェントは、サインインの代わりに個人アクセストークンを使えます。「AI エージェント」ページで作成し、1 つのアプリに限定して有効期限を付けてください。
claude mcp add --transport http hibira https://hibira.io/mcp \
  --header "Authorization: Bearer hkb_pat_..."
  • いつでも取り消せます。 「AI エージェント」ページに接続中のエージェントとトークンがすべて表示され、取り消しはすぐに反映されます。
  • テストイベントも本物のメッセージです。 ほかの配信と同じくプランの 1 日の上限に数えられ、送信できるのはアカウントあたり毎秒数件までです。

試してみる

Free プランに登録してサーバーを追加し、使っているフレームワークの接続をエージェントに頼んでみてください。行き詰まったときは、導入ガイドに同じ設定の手作業版があります。