MetaNotes は、Google Meet、Microsoft Teams、Zoom の通話に参加し、文字起こし、アクションアイテム、会話の要約を生成する AI 会議アシスタントです。社外向けの製品として提供され、社内では Fireflies と tl;dv を置き換えました。どちらも機能が上位プランに制限されており、録画ストレージのコストも膨らんでいて、チームのニーズに合わなくなっていたためです。私はこのプロジェクトの唯一のフロントエンドエンジニアとして、機能スコープ、デプロイ、プロダクトの意思決定を約5か月間の開発を通じて最初から最後まで担当しました。
作ったもの
- 文字起こしインターフェース: タイムスタンプと同期したハイライト表示付きの文字起こしビューアを構築。アクティブな行が動画の再生位置に追従し、行をクリックするとその瞬間まで再生位置が移動します。
- 会議インテリジェンスダッシュボード: AI 要約、アクションアイテムのトラッキング、感情分析、トピックタグのためのインタラクティブなビューを開発しました。
- フロントエンドアーキテクチャ: 立ち上げから本番まで、このプロジェクトの唯一のフロントエンドエンジニアでした。機能スコープ、コンポーネント設計、状態管理、デプロイはすべて自分の責任範囲でした。バックエンドのパイプラインは非同期で、Webhook とスケジュール実行の cron ジョブで動いており、文字起こしと要約は処理が完了した時点でまとめて取得され、ライブ配信はされません。
なぜ意味があったか
MetaNotes は社外向けの SaaS 製品としてリリースされ、社内では 200 人以上の Testlify 社員 が会議録画やクライアント通話のために利用し、Fireflies と tl;dv を置き換えました。これにより、それらのベンダーに支払っていた 年間 24,000 ドルの運用コスト がなくなりました。
プロジェクトを主導し、最初から最後までオーナーシップを持った
MetaNotes ではフロントエンドエンジニアとしてプロジェクトを主導し、その責任は UI だけにとどまりませんでした。機能スコープ、デプロイ、日々のプロダクトの意思決定も自分の役割でした。最初のコミットから社内リリースまで、約5か月かかりました。
なぜ文字起こしは会議中でなく会議後に表示されるのか
MetaNotes は通話中に文字起こしテキストをストリーミングしません。録画中の UI には「Capturing / Paused」というステータスバッジと、一時停止・再開・停止のコントロールが表示されるだけです。取り込み処理は Attendee の Webhook（通話に参加してメディアをキャプチャする会議ボット API）と、スケジュール実行される複数の cron ジョブを経由します。文字起こしと OpenAI による要約は通話終了後に非同期で行われ、フロントエンドは完成した文字起こし、要約、アクションアイテムを 1 回のサーバーアクション呼び出しでまとめて取得します。
機能スコープ、デプロイ、プロダクトの意思決定まで抱えた5か月のスケジュールを考えると、ライブ配信はコストに見合いませんでした。WebSocket 接続の管理、部分的な文字起こしの整合性処理、再接続処理まで必要になり、それだけの手間をかけても得られるのは「文字起こしがリアルタイムで組み上がっていく様子を見る」という、ユーザーが本当に必要としていない機能でした。通話終了後の非同期取り込みなら、同じ文字起こし・要約・アクションアイテムを、はるかに少ない可動部分で提供できます。だからこの形でリリースしました。
タイムスタンプ同期の文字起こしハイライト
動画プレーヤーと文字起こしリストの単純な双方向バインディングです。timeupdate リスナーが再生位置を追跡し、文字起こし配列をスキャンして現在アクティブな行を見つけてハイライトし、行をクリックするとその行のタイムスタンプまでプレーヤーがシークします。一般的な会議の長さであれば、仮想化されたリストや専用の同期ライブラリは必要ありません。どちらかを導入するのは、データがまだ抱えていない問題を解決しようとするようなものです。
データモデルとスケール
- 文字起こしは会話ごとに単一の JSON ブロブとして保存され、データベース側でチャンク分割やページネーションはしていません。
- 会話一覧とカレンダー一覧は 1 ページあたり 10〜20 件でページネーションしています。
- OpenAI への要約リクエストは、1 回あたり最大 800 出力トークンに制限しています。
これらは現在の会議の量と長さであれば問題なく機能しています。どちらかが一桁増えた場合、真っ先に見直すのは単一ブロブの文字起こしカラムと、線形スキャンによるハイライト検索の 2 つです。分かっているトレードオフであって、気づいていない弱点ではありません。
内製か外部ツールか
Testlify は Fireflies と tl;dv に料金を払っていましたが、どちらも主要機能を上位プランに制限しており、録画ストレージが増えるほど費用もかさんでいました。内製化によってこの 2 つの制約がなくなり、200 人以上の社員が会議録画やクライアント通話で使うようになったことで、それらのベンダーに払っていた年間 24,000 ドルを削減できました。
技術スタック
Next.js 16 / React 19 App Router、TypeScript、クライアント状態管理に Zustand（localStorage による永続化付き）、認証に Clerk、UI に Radix と Tailwind、録画プレーヤーに Vidstack、Zoom / Meet / Teams のキャプチャ用の会議ボット API として Attendee。