サーバーに何も送らないエレベーターピッチビルダーを Chrome Built-in AI で作る

· Google

新しいウェブアプリ Zero-Knowledge Pitch Builder をリリースしました。Chrome Built-in AI API を全面的に活用して作った、ブレインストーミングのアイデアをエレベーターピッチに仕立て上げてくれるアプリです。

ここでは、このアプリの紹介と使い方をしながら、僕がなぜ Chrome Built-in AI API にこだわって作ったのか、その背景にある考えについても書いてみたいと思います。

zero-knowledge-pitch-builder-1

サーバーに何も送らないエレベーターピッチビルダーを作りました

公開したアプリの URL は以下になります。実際に触っていただけます。

Zero-Knowledge Pitch Builder - zero-knowledge-pitch-builder.yoichiro.dev

なお、このアプリのソースコードは GitHub で公開しています。実際にコードを読んでもらえば、本当に外部へ何も送信していないことを確認していただけます。

zero-knowledge-pitch-builder - github.com/yoichiro

「Zero-Knowledge」というのは、このアプリがユーザーから受け取った情報を一切外部に送信しないことを意味しています。エレベーターピッチを作るためにアイデアを入れていただくわけですが、その処理は全部ブラウザの中で完結します。

つまり、サーバーは存在しません。API キーも要りません。リクエストもレスポンスも、ネットワークの上を一切流れません。皆さんが書いた未公開のビジネスアイデアや機密性の高い構想も、安心して投げ込んでもらえる、そういう作りになっています。

これは、Chrome Built-in AI API を全面的に採用したからこそ実現できた構成かなと思っています。

Zero-Knowledge Pitch Builder で何ができるか

このアプリの中心機能は、雑然としたアイデアメモを、エレベーターピッチを構成する以下の 6 つのトピックに分解することです。

  • Hook(聞き手の注意を引くつかみ)
  • Problem(解決すべき課題)
  • Solution(提供する解決策)
  • Value Proposition(価値提案)
  • Competitors(競合)
  • Differentiators(差別化要因)

入力に書かれていない項目があれば、AI が他の情報から推論して補ってくれます。これは、ブレインストーミングの段階で全部の要素が揃っていなくても、エレベーターピッチの形にまで一気に持っていける、ということを意味しています。

それから、できあがったエレベーターピッチに対して 3 種類の仮想ペルソナがコメントしてくれる機能があります。VC 投資家、企業のエグゼクティブ、そして一般消費者。それぞれが異なる視点からツッコミを入れ、改善提案までセットで返してくれます。

さらに、15 秒・30 秒・60 秒の 3 種類の時間制約に合わせたエレベーターピッチを生成する機能と、日本語と英語の双方向翻訳機能も載せています。入力言語は自動検出されるので、利用者は言語の指定すらしなくて構いません。

エレベーターピッチを作る、磨く、伝える、という一連の流れが、ブラウザ 1 つで完結する作りになっています。この一気通貫感は、自分で作っていても気持ち良いものに仕上がったかなと思っています。

zero-knowledge-pitch-builder-2

使い方を一通り見てみる

実際の利用フローは、とてもシンプルです。

まず、ブラウザでアプリを開きます。初回起動時に Chrome Built-in AI のモデル群(LanguageModel、LanguageDetector、Summarizer、Translator)をローカルにダウンロードする画面が出てきます。進捗はリアルタイムで表示されます。

ダウンロードが完了したら、画面左の Brain Dump エリアに、思いついたアイデアを箇条書きでも文章でも、何でも書きこんでみてください。例えば「犬の散歩中に困ること、雨の日にカッパが面倒、自動で乾燥するペット用ジャケット、価格は 1 万円以下」みたいな雑なメモでも大丈夫です。

「Analyze」ボタンを押すと、画面中央の Workspace に、入力されたアイデアが Hook、Problem、Solution、Value Proposition、Competitors、Differentiators の 6 つのトピックに分解されて、順番に展開されていきます。Hook が先に出てきて、続いて Problem、Solution、と一つずつカードが埋まっていく様子は、見ていてちょっと気持ち良いです。

ここで、各トピックのカードに手を入れて編集することができます。AI が出してきたものをそのまま使うのではなく、自分の言葉や追加情報で磨き込んでいけるステップです。

カードが整ったら、「Apply」ボタンを押します。すると、画面右の Output エリアで、時間制約に合わせたエレベーターピッチと、3 種類の仮想ペルソナによるレビューが生成されます。さらに、日本語と英語の翻訳をかけたいときも、その場で実行できます。

全部、ブラウザの中だけで完結します。文字通り「閉じた箱の中」で動いている感覚があって、これは触ってもらうと実感していただけるかなと思います。

zero-knowledge-pitch-builder-5

Chrome Built-in AI API でどう実装したか

Zero-Knowledge Pitch Builder では、Chrome Built-in AI が提供する 4 つの API を組み合わせて使っています。それぞれの役割と、コード例を紹介します。

まず、入力テキストの言語を判定するのが LanguageDetector API です。

const detector = await window.LanguageDetector.create();
const results = await detector.detect(text);
const topLanguage = results[0].detectedLanguage; // "ja" or "en"

たった数行で、入力されたテキストがどの言語なのかを判別できます。これは「ユーザーに言語を選ばせない」というシンプルな UX を実現するために使っています。

次に、エレベーターピッチの 6 つのトピックを生成する中核を担うのが Prompt API です。

const session = await window.LanguageModel.create({
  systemPrompt: "You are an excellent startup pitch consultant.",
});
const result = await session.prompt(
  `Please extract the 'hook' from the following idea memo. [Idea Memo] ${dump}`
);

systemPrompt でエージェントの人格を規定し、prompt で個別のタスクを投げる、という素直な API です。Zero-Knowledge Pitch Builder では、Hook、Problem、Solution、Value Proposition、Competitors、Differentiators それぞれに専用のセッションを用意して、6 つの推論を順次実行しています。

時間制約に合わせた要約を作るのには、Summarizer API が役立ちます。

const summarizer = await window.Summarizer.create({
  type: 'teaser',
  format: 'plain-text',
  length: 'short', // 'short' | 'medium' | 'long'
});
const teaser = await summarizer.summarize(fullPitchText);

length オプションで短・中・長を切り替えられるので、15 秒・30 秒・60 秒のエレベーターピッチへの振り分けがそのまま自然に書けます。

最後に、英日の翻訳を担当するのが Translator API です。

const translator = await window.Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'ja',
});
const translated = await translator.translate(text);

これも、シンプルすぎるくらいシンプルな API です。fetch でリクエストを組み立てる必要も、ヘッダに API キーを差し込む必要もありません。

ちなみに、これら全ては window.LanguageModel のようなグローバルオブジェクトとしてブラウザに最初から存在しています。つまり、ライブラリを npm install することすら不要です。この手軽さは、ウェブ開発者にとってかなり魅力的に映るのではないかなと思います。

Chrome Built-in AI API がもたらす大きな利点

ここまでで、Zero-Knowledge Pitch Builder の中身がだいたい伝わったかなと思います。改めて、なぜ僕がこのアプリを Chrome Built-in AI API で作ったのか、その理由を 3 つに整理しておきます。

  • 完全にセキュアであること
  • サーバーが一切要らないこと
  • ものすごく手軽に組み込めること

1 つ目の「完全にセキュア」は、Zero-Knowledge という名前そのものです。LLM への入力が外部に送信されない、ということは、機密情報や未公開のアイデアを安心して投げ込めるということです。これは、クラウド型 LLM サービスでは原理的に提供できない安心感かなと思っています。

2 つ目の「サーバーが一切要らない」は、開発者と運営者にとって大きな話です。LLM の推論コストもインフラコストも、API キーの管理も、レート制限の心配もありません。アプリ自体は静的ファイルとしてホスティングするだけで動きます。Zero-Knowledge Pitch Builder も、Firebase Hosting に静的ファイルを置いただけです。

3 つ目の「手軽に組み込める」は、コード例で見ていただいた通りです。window.LanguageModel.create() のような短いコードだけで、LLM の力をウェブアプリに取り込めます。これは、ウェブ開発における LLM 活用の敷居を一気に下げる話だなと思っています。

これらの利点を組み合わせると、「ウェブアプリが LLM を当たり前に使う未来」がぐっと現実味を帯びてきます。

ウェブブラウザは AI 時代の OS になっていくはず

さて、ここからが本題です。

僕は、ウェブブラウザを「今日の OS」だと考えています。多くのアプリケーションが、ネイティブアプリではなくウェブアプリとして動いている現状を見れば、これは事実上 OS と呼んで差し支えないのかなと思っています。

そして、今後のアプリケーションの形態は、これまでのような「CPU が駆動させる」ものから「LLM が駆動させる」ものへとシフトしていくのではないか、と僕は予想しています。ユーザーの入力に対して、決まったアルゴリズムが応答するのではなく、LLM が自律的に判断して応答する、そういうアプリが当たり前になっていく未来です。

そうなったとき、OS の役目も変わるはずです。これまでの OS は CPU との橋渡しが主な責務でしたが、これからの OS は LLM との橋渡しもしなければなりません。つまり、OS はネイティブで LLM を搭載し、アプリケーションから使えるようにする必要が出てきます。

これをウェブブラウザに当てはめると、ウェブブラウザも LLM をネイティブで搭載し、ウェブアプリから利用できる仕組みを提供しなければならない、という結論になります。Chrome Built-in AI API は、まさにこの方向性そのものを実現しようとしているものです。

つまり、これは「Google が便利な機能を追加した」という話ではなく、ウェブブラウザというプラットフォームが AI 時代に向けて進化するために必要不可欠な機能なのではないかなと、僕は思っています。

zero-knowledge-pitch-builder-3

Chrome Built-in AI API が標準になることを期待

Chrome Built-in AI API は、Google が他のブラウザベンダーにも搭載してもらえるよう、ウェブ標準化の努力を進めています。

ただ、現状では他のブラウザベンダーから interop(相互運用性)を理由に反対の声が上がっていると聞いています。「ブラウザごとに異なる LLM が搭載されたら、同じ入力に対して異なる応答が返ってきてしまう。そうなると、ウェブアプリの開発者はブラウザごとに異なるコードを書く必要が出てきてしまう」という懸念です。

確かに、これは聞いただけだと「もっともだな」と思える話です。しかし、本当にそうでしょうか。

例えば、Zero-Knowledge Pitch Builder のように「ユーザーから得た情報に対して何らかのアドバイスを生成する」というタイプのアプリでは、生成されたアドバイスの内容さえ一定の水準に達していれば、その文体や表現がブラウザごとに多少違っても、大きな問題にはなりません。むしろ、ブラウザベンダー各社が競って LLM の品質を高めようとするインセンティブが働くので、ユーザーにとっては嬉しい話なのではないかなと思います。

もし生成されたアドバイスの内容に問題があれば、それは搭載された LLM の品質に問題があるということになります。その「揺れ」をウェブアプリ開発者が責任を持って吸収するのは、本来の責務ではないはずです。これはむしろ、ウェブブラウザベンダーが背負うべき責務なのではないかなと思います。

そう考えると、interop の懸念は、ウェブブラウザベンダーが Chrome Built-in AI API のようなアイデアを否定する理由にはならない、と僕は感じています。

ウェブブラウザは AI 時代の OS であり、その OS が LLM をネイティブで持つことは避けて通れない問題です。であるならば、ウェブブラウザベンダーは Chrome Built-in AI API のようなアイデアを否定するのではなく、一緒になって「どうすればウェブブラウザを AI 時代の OS として進化させられるか」を議論していくべきなのかな、と思っています。

これは、Google だけが頑張る話ではなく、ブラウザを作っている全社が一緒に考えるべき大きなテーマだと、僕は感じています。

zero-knowledge-pitch-builder-4

まとめ

今回は、Zero-Knowledge Pitch Builder という新しいウェブアプリのリリースを起点に、Chrome Built-in AI API がもたらす利点と、それがウェブ標準になることへの僕の期待について書いてみました。

Zero-Knowledge Pitch Builder - zero-knowledge-pitch-builder.yoichiro.dev は、Chrome 148 以降のブラウザで実際に動かせます。お手元のアイデアメモを投げ込んで、エレベーターピッチに変わる様子を体験していただけると嬉しいです。

そして、Chrome Built-in AI API のような「生成 AI を完全にセキュアかつ手軽にウェブアプリに組み込めるしくみ」が、主要なウェブブラウザ全てで使えるようになる未来が、早く来てほしいなと思っています。