Meet HLD Agent──Google Meetの設計会議からMermaid図を自動生成するAIエージェント

この記事ではAIエージェントに特化して解説します。AIエージェント全般は AIエージェントフレームワーク比較2026年版 をご覧ください。

設計会議のホワイトボード、全員が正しく描けているか

システム設計の会議で「APIゲートウェイの前にロードバランサーを置いて…」と口頭で説明しても、参加者全員が同じアーキテクチャ図を頭に描いているとは限らない。Meet HLD Agentは、Google Meet上の設計議論をリアルタイムで検知し、Mermaid.jsのアーキテクチャ図を自動生成するOSSツールだ。Chrome拡張でMeetの音声をキャプチャし、Gemini Live APIが文字起こしと設計検知を行い、Webダッシュボード上にライブで図を描画する。TypeScript製で、リポジトリのコード量はTypeScript約6.8万行、JavaScript約3万行。

OpenHandsのようなAIエージェントがコーディングを自律実行するように、Meet HLD Agentは「設計会議の可視化」をAIエージェントが自律的に行うアプローチだ。HLD（High-Level Design）とは、システム全体のコンポーネント構成・データフロー・インターフェースを俯瞰する高レベル設計を指す。クラウドアーキテクトやSREが採用面接や設計レビューで描くホワイトボード図そのものだと考えると分かりやすい。

従来、こうした図はMiroやdraw.io、excalidrawなどのツールで「誰かが手で描く」必要があった。会議の議論スピードに描画が追いつかず、結局「あとで議事録と一緒に送ります」というパターンが多発する。Meet HLD Agentは、議論とビジュアル化のタイムラグをゼロにすることを狙う。設計レビュー・アーキテクチャ合意形成・オンボーディングの場で、認識ズレを減らす効果が期待できる。

Chrome拡張からGemini APIまでの処理フロー

Meet HLD Agentのアーキテクチャは、Chrome拡張 → Cloud Runサーバー → Gemini API → Webダッシュボードの4層構成で動作する。

処理の流れは以下の通りだ。

1. Chrome拡張（Manifest V3）がGoogle Meetタブの音声をtabCaptureでキャプチャ
2. 音声データをWebSocketでCloud Runサーバーに送信（認証トークン付き）
3. サーバー側でffmpegがWebM/OpusをPCM 16kHz monoに変換
4. Gemini Live API（gemini-2.5-flash-native-audio）がリアルタイムで文字起こし
5. 設計議論の検知（キーワードヒューリスティック + AI [DESIGN]フラグ）
6. Gemini REST API（gemini-3.1-pro）がMermaid.js形式のアーキテクチャ図を生成
7. Socket.IOでダッシュボードにリアルタイムプッシュ

この4層構成の肝は「音声の前処理をサーバー側に寄せた」ことにある。Chrome拡張側はtabCaptureで取得した生の音声ストリーム（WebM/Opus）をそのまま送るだけで、サンプリングレート変換やモノラル化の負荷はCloud Runのffmpegが引き受ける。これにより拡張機能のバッテリー消費とメモリ使用量が抑えられ、長時間の会議でもタブクラッシュが起きにくい。

さらに、2つのGeminiモデルを役割分担している点も設計上のポイントだ。リアルタイム系はgemini-2.5-flash-native-audio（低レイテンシ）、図生成系はgemini-3.1-pro（高品質）を使い分けている。音声→文字起こしは速度優先、文字起こし→Mermaid図は品質優先というレイテンシと品質のトレードオフを明示的にモデル選択で解決する設計だ。

// src/config/index.ts（概念図）
export const MODELS = {
  transcription: 'gemini-2.5-flash-native-audio-latest', // ストリーミング
  diagramGen: 'gemini-3.1-pro-preview',                  // 構造化出力
};

Socket.IOを採用している理由も明確で、ブラウザ側（拡張 + ダッシュボード）とサーバー側の双方向通信を、再接続・フォールバック込みで実装できるためだ。WebSocketの生実装ではCloud Runのアイドルタイムアウトや瞬断への対応を自前で書く必要がある。Socket.IOはこれを吸収してくれる。

セットアップ手順──ローカル環境からCloud Runまで

前提条件

• Node.js 18以上
• ffmpegがインストール済み
• Google AI StudioからGemini APIキーを取得

ローカル環境での起動

# リポジトリのクローンと依存関係のインストール
git clone https://github.com/suryawork574/meet_hld_agent.git
cd meet_hld_agent
npm install

# 環境変数の設定
cp .env.example .env

.envファイルを編集する。

GEMINI_API_KEY=your_gemini_api_key_here
GCS_BUCKET_NAME=your-gcs-bucket-name
AUTH_TOKEN=your-secret-token
DASHBOARD_PORT=3000

# 開発サーバーの起動
npm run dev

起動後、Chromeでchrome://extensions/を開き、Developer modeを有効にしてchrome-extension/フォルダをLoad unpackedで読み込む。拡張アイコンからServer URLをhttp://localhost:3000に設定すれば準備完了だ。

Google Cloud Runへのデプロイ

本番運用にはCloud Runが推奨される。1コマンドでソースからデプロイできる。

gcloud run deploy meet-hld-agent \
  --source . \
  --region=asia-south1 \
  --allow-unauthenticated \
  --set-env-vars="GEMINI_API_KEY=your-key,GCS_BUCKET_NAME=your-bucket,AUTH_TOKEN=$(openssl rand -hex 16)"

デプロイ後はgcloud run services describeで発行されたURL（https://meet-hld-agent-xxxx-an.a.run.appのような形式）を取得し、Chrome拡張のオプション画面でServer URLをwss://に差し替える。AUTH_TOKENをopenssl rand -hex 16で生成しているのは、デフォルトの弱いトークンをそのまま本番で使わないための予防策だ。

リージョンをasia-south1（ムンバイ）にしているのはリポジトリ作者のデフォルトで、日本から使う場合はasia-northeast1（東京）に変更したほうがレイテンシが大幅に下がる。音声のストリーミング用途では片道50ms以内を目安にしたい。

# 東京リージョン + 常時起動でデプロイする場合
gcloud run deploy meet-hld-agent \
  --source . \
  --region=asia-northeast1 \
  --min-instances=1 \
  --max-instances=5 \
  --allow-unauthenticated \
  --set-env-vars="GEMINI_API_KEY=xxx,AUTH_TOKEN=xxx"

--min-instances=1を付けるとCold Start問題は解消するが、常時1インスタンスが起動するため月額の固定費（Cloud Runの最小構成で数ドル〜）が発生する。社内で常用するなら検討する価値はある。

音声コマンドでアーキテクチャ図をリアルタイム更新

Meet HLD Agentの特徴的な機能が音声コマンドだ。会議中に「Hey Sri」（Sree、Shri、Siri、Hey Agent、Hey HLDも可）と呼びかけた後に指示を出すと、AIがアーキテクチャ図をリアルタイムで更新する。

コマンド間には10秒のクールダウンがあり、指示は10文字以上が必要だ。Browser Useのようなブラウザ操作エージェントがUI操作を自動化するのと同様に、Meet HLD Agentは「声」というインターフェースでアーキテクチャ図の操作を自動化している。

このクールダウンと最短文字数のバリデーションは、誤検知対策として重要だ。会議中に雑談で「Shri」と似た音が混じるたびに図が更新されると集中できない。10秒のデバウンスと10文字以上の指示要件は、「明示的な操作意図」と「偶発的な言及」を切り分けるための閾値として機能する。

音声コマンドの裏側では、voice-command-detector.tsがウェイクワード（”Hey Sri”等の5パターン）を検出し、その後の発話をtranscript-buffer.tsのスライディングウィンドウから切り出してdiagram-generator.tsに渡す。生成される図は常に「前回の図をベースにしたdiff」で、完全な再生成ではない。これによりGeminiのコンテキスト消費を抑えつつ、人間の認知的な連続性（「さっきの図に追加された」という感覚）を保つ。

既存ツールとの比較──議事録ツールとは根本的に異なる

Meet HLD Agentは議事録生成ツールではない。設計議論の「可視化」に特化したツールだ。

LangChainのようなLLMフレームワークが汎用的なRAGパイプラインを構築するのに対し、Meet HLD Agentは「会議音声 → アーキテクチャ図」という特定のパイプラインに最適化されている点が明確な差別化ポイントだ。

議事録ツールとの最大の違いは「出力がテキストではなく構造化図」であること。Otter.aiやtl;dvは「誰が何を話したか」を時系列で残すが、設計会議で本当に欲しいのは「最終的にどういう構成で合意したか」の可視化だ。Meet HLD Agentは後者に特化している。逆に言えば、ブレインストーミングや1on1のような「図にならない会議」では価値が出ないため、用途の切り分けが重要になる。

コストモデルの違いも大きい。Otter.aiやtl;dvは月額定額制で、使わない月もコストが発生する。Meet HLD AgentはGemini APIの従量課金のみで、設計会議を月に数回しか行わないチームでは圧倒的に安く済む。一方、毎日長時間の設計会議を行う組織では、従量課金が定額制を上回る可能性もあるため、事前にAPIコストの試算を推奨する。

設定パラメータとプロジェクト構成

環境変数で細かい挙動を制御できる。

# 必須設定
GEMINI_API_KEY=your_gemini_api_key

# オプション設定
AUTH_TOKEN=secret-token           # WebSocket + ダッシュボード認証
GCS_BUCKET_NAME=my-bucket         # 会議データの永続化（GCS）
DASHBOARD_PORT=3000               # ダッシュボードポート（ローカル）
LOG_LEVEL=info                    # ログレベル（debug/info/warn/error）
AUDIO_CHUNK_MS=250                # 音声チャンクの長さ（ms）
DESIGN_DETECT_DEBOUNCE_MS=15000   # 図の生成間隔の最小値（ms）
DIAGRAM_UPDATE_INTERVAL_MS=30000  # 図の更新間隔（ms）

TypeScriptのプロジェクト構成は機能ごとにディレクトリが分かれている。

src/
├── index.ts                 # メインオーケストレーター
├── config/index.ts          # 環境設定 + モデル設定
├── meet/audio-capture.ts    # 永続WSS → ffmpeg → PCMチャンク
├── gemini/
│   ├── client.ts            # Gemini Live APIクライアント
│   ├── messages.ts          # セットアップ + 音声チャンクメッセージ
│   └── types.ts             # TypeScriptインターフェース
├── analysis/
│   ├── design-detector.ts   # キーワードベースの設計検知
│   ├── voice-command-detector.ts  # "Hey Sri" 音声コマンド認識
│   ├── transcript-buffer.ts # スライディングウィンドウ管理
│   └── diagram-generator.ts # Mermaid図 + 要約 + タスク生成
├── dashboard/
│   ├── server.ts            # Express + Socket.IO + 認証
│   └── public/              # ダッシュボードフロントエンド
└── storage/gcs.ts           # Google Cloud Storage連携

ForgeCodeのようなAIコーディングツールがコード生成を自動化するのと同様に、Meet HLD Agentは「設計図の生成」という反復作業をAIで自動化するアプローチを取っている。

設計上注目したいのはanalysis/ディレクトリの責務分離だ。design-detector.ts（設計議論の検知）、voice-command-detector.ts（音声コマンドの検知）、transcript-buffer.ts（文字起こしのバッファ管理）、diagram-generator.ts（図の生成）と、1ファイル1責務で分かれている。これによりテストやモデル差し替えがしやすい構造になっている。

例えば、Gemini以外のモデル（Claude 3.7 Sonnet、GPT-5等）でMermaid生成を試したい場合、diagram-generator.tsのみを置き換えれば他の層に影響を与えずに実験できる。OSSとしてフォークして自社用にチューニングする際の可搬性が高い。

// diagram-generator.ts を別モデルで差し替える例（概念）
export async function generateDiagram(transcript: string, prevDiagram: string) {
  // Gemini の代わりに任意のLLMを呼べる
  const response = await customLLM.chat({
    system: 'You output Mermaid diagrams only.',
    messages: [{ role: 'user', content: `Prev:\n${prevDiagram}\n\nNew:\n${transcript}` }],
  });
  return extractMermaid(response);
}

使用しているAIモデルと技術スタック

Meet HLD Agentは2つのGeminiモデルを使い分けている。

技術スタックの全体像は以下の通りだ。

• バックエンド: TypeScript + Express + Socket.IO（Cloud Run上で動作）
• 音声処理: ffmpeg（WebM/Opus → PCM 16kHz mono変換）
• AI: Gemini Live API（リアルタイム）+ Gemini REST API（分析）
• フロントエンド: HTML/CSS/JS（ダッシュボード）
• ブラウザ拡張: Chrome Extension Manifest V3（tabCapture API）
• ストレージ: Google Cloud Storage（会議データの永続化）
• 認証: Cookie-based session auth + WebSocket token認証

GCSに会議音声と図履歴を保存している点は、後から振り返り・監査に使える設計だ。アーキテクチャ決定の根拠（ADR: Architecture Decision Record）を残す場合、「この図はどの会議の、どの発言から生成されたか」をトレースできる。これはエンタープライズ用途で重要な観点になる。

導入前に把握すべき制約と注意点

• ffmpegが必須: 音声変換にffmpegを使用するため、サーバー環境にインストールが必要（DockerfileでCloud Runなら自動で含まれる）
• Gemini APIの従量課金: 会議の長さに比例してAPIコストが増加する。長時間の会議ではAUDIO_CHUNK_MSやDIAGRAM_UPDATE_INTERVAL_MSでコスト最適化が可能
• Cold Startの遅延: Cloud Runの場合、非アクティブ後の初回リクエストに3〜5秒かかる。頻繁に使うなら--min-instances=1で常時起動を検討（追加コストあり）
• 機密性: 会議音声がGemini APIに送信されるため、社内のデータ外部送信ポリシーの確認が必須
• Chrome限定: Chrome拡張（Manifest V3）を使用するため、Firefox等では動作しない

特に機密性の論点は導入前の合意形成が不可欠だ。顧客データを含む設計会議の音声がGoogle側のAPIに流れる点は、金融・医療・防衛などの規制業界では許容されないケースが多い。OSSであることを活かして、Gemini APIの代わりにオンプレLLM（vLLM + Qwen等）に差し替える改造も検討価値がある。

📌 まとめ

Meet HLD Agentは、Google Meet上の設計会議をリアルタイムで可視化する新しいアプローチのOSSだ。要点を整理する。

• コア機能: 音声キャプチャ → Gemini文字起こし → 設計検知 → Mermaid.js図の自動生成をライブで実施
• 音声コマンド: “Hey Sri”でアーキテクチャ図をリアルタイム更新できる
• 技術スタック: TypeScript + Chrome拡張（MV3）+ Cloud Run + Gemini（2.5 Flash / 3.1 Pro）
• 差別化: 議事録ツールとは異なり「構造化図」をリアルタイム出力する点が唯一
• コスト: Gemini APIの従量課金のみで、定額制ツールより柔軟
• 制約: Chrome限定・機密性・Cold Start・ffmpeg必須を導入前に確認

設計会議の認識ズレ、議事録の清書コスト、アーキテクチャ図の後追い作成といった「設計に関する地味な摩擦」を一気に解消する可能性を持つOSSだ。まずはローカル環境で小さな会議から試し、チーム内での価値を検証してから本番デプロイに進むアプローチが現実的だ。

設計会議で「今の構成、図に描いて」と言ったら、AIが自動で描いてくれる世界がOSSで手に入る。まずはリポジトリのREADMEを確認してほしい。

参照ソース

• suryawork574/meet_hld_agent - GitHub
• Gemini Live API ドキュメント - Google AI for Developers
• Mermaid.js 公式サイト
• Google Cloud Run ドキュメント