Google Gemini APIを使って、MonacaアプリにAIを組み込む

AIや機械学習がトレンドとあって、各社からさまざまなサービスが登場しています。特に大規模言語モデル（LLM）はChatGPTの登場以降、どうビジネスやアプリの中で活かすかが議論されています。

今回はそんなLLMの一つ、GoogleからリリースされているGemini（旧Bard）のAPIを使って、Monacaアプリの中にチャット機能を実装してみます。

今回のサンプルプロジェクトは、Githubに公開しています。
プロジェクトのソースコードはこちらをご確認ください。

Gemini APIの利用登録とAPIキーの取得

Gemini APIを使うには、まずGoogleの開発者向けサービスで利用登録し、APIキーを取得する必要があります。手順は以下の通りです。

Build with the Gemini API | Google AI for Developersにアクセスし、Googleアカウントでログインします。※個人のGmailアカウントの方が適しています。
APIキーの発行ページ（Get API key | Google AI Studio）にアクセスします。
プロジェクトの選択画面が表示されるので、新しいGoogle Cloud Projectを作成するか、既存のプロジェクトを選択して紐付けます。
プロジェクトが選択できたら、APIキーの発行ボタンを押します。

これでAPIキーが発行されます。後ほどMonacaアプリに組み込むので、キーをコピーしてメモしておきましょう。

Get API key | Google AI Studio

Gemini APIの無料枠について

GeminiAPIの無料枠では、APIへのアクセス頻度に制限があります。具体的には、以下の3つの制限があります。

1分あたりのリクエスト数（RPM）：15回
1分あたりのトークン数（TPM）：100万
1日あたりのリクエスト数（RPD）：1,500回

1分間に15回までAPIにリクエストを送ることができ、
そのリクエストで使用するトークン数の合計が100万までに制限されています。
また、1日のリクエスト数は1,500回までです。

MonacaアプリにGemini APIを組み込む手順

手順1. Framework7テンプレートのMonacaアプリを新規作成

今回はMonacaのFramework7テンプレートを使ってアプリを作ります。Framework7には、チャットUIのコンポーネントが用意されているので、それを活用しましょう。

Messages | Framework7 Documentation

Monacaの新規プロジェクト作成画面で、「Framework7 Blank Template」を選択し、アプリを作成します。

手順2. `www/index.html`にGemini APIのライブラリを読み込む

Gemini APIを簡単に扱えるようにするライブラリを、JavaScriptモジュールとして読み込みます。

プロジェクトのwww/index.htmlを開き、以下のscriptタグを追加してください。

<script type="importmap">
    {
        "imports": {
            "@google/generative-ai": "https://esm.run/@google/generative-ai"
        }
    }
</script>
<script type="module" src="js/gemini.js"></script>

<!-- 以下は元々ある記述です -->
<!-- App routes -->
<script src="js/routes.js"></script>
<!-- App store -->
<script src="js/store.js"></script>
<!-- App scripts -->
<script src="js/app.js"></script>

1つ目のタグでは、Gemini APIライブラリのインポートマップを定義しています。2つ目のタグでは、次の手順で作成するjs/gemini.jsをモジュールとして読み込んでいます。

手順3. Gemini APIの初期化

プロジェクトのルートにjsフォルダを作成し、その中にgemini.jsファイルを新規作成します。このファイルにGemini APIの初期化コードを書いていきます。

以下のように記述します。 YOUR_GEMINI_API_KEY には先ほど取得したAPIキーを入れてください。最終的に geminiModel という変数にGeminiのモデルを格納します。

import { GoogleGenerativeAI } from "@google/generative-ai";
const API_KEY = "YOUR_GEMINI_API_KEY";
const genAI = new GoogleGenerativeAI(API_KEY);
window.geminiModel = genAI.getGenerativeModel({ model: "gemini-pro"});

YOUR_GEMINI_API_KEYの部分は、先ほど取得したAPIキーに置き換えてください。

ここでは、Gemini APIライブラリをインポートし、APIキーからGemini APIクライアントのインスタンスを生成しています。最後の行で、Geminiの言語モデル（ここではgemini-pro）を選択し、グローバル変数geminiModelに代入しています。

手順4. チャット画面用のルーティングを設定

今回は /chat/ というルーティングに対して www/pages/chat.html を読み込む指定をします。まず、 www/index.html の <body> タグ内に以下のように記述します。

<div id="app">
    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main view-init safe-areas" data-url="/chat/">
    </div>
</div>

そして www/js/routes.js に以下のように記述します。


var routes = [
  {
    path: "/",
    url: "./index.html",
  },
  {
    path: "/chat/",
    componentUrl: "./pages/chat.html",
  },
  // Default route (404 page). MUST BE THE LAST
  {
    path: "(.*)",
    url: "./pages/404.html",
  },
];

手順5. チャット画面のHTMLを作成

www/pages/chat.html を作成します。以下のように記述します。

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Geminiチャット</div><!-- タイトル -->
      </div>
    </div>
    <div class="toolbar messagebar">
      <div class="toolbar-inner">
        <div class="messagebar-area">
          <textarea class="resizable" placeholder="Message" id="message"></textarea> <!-- メッセージ入力エリア -->
        </div>
        <a class="link send-link" href="#" @click=${send}>Send</a> <!-- 送信ボタン -->
      </div>
    </div>
    <div class="page-content">
        <div class="page-content messages-content">
            <div class="messages">
                ${ messages.map(message => $h`
                    <div class="message message-${message.role === 'user' ? 'sent' : 'received'}">
                        <div class="message-content">
                        <!-- テキストの入ったUI -->
                        <div class="message-bubble">
                            <div class="message-text">${message.message}</div>
                        </div>
                        </div>
                    </div>
                `)}
            </div>
        </div>
    </div>
  </div>
</template>
<script>
export default function (props, {$f7, $on, $update, $onMounted }) {
    // この中にJavaScriptを記述する
  return $render;
}
</script>

変数の初期化

今回はチャットのメッセージを管理する messages という変数を初期化します。また、Geminiのチャットオブジェクト chat を作成します。以下のように記述します。

// 画面内で利用する変数を定義
// メッセージの履歴
const messages = [];
// Geminiのチャットオブジェクト
let chat;

チャットオブジェクトの作成

画面が読み込まれた際に、Geminiのチャットオブジェクトを作成します。以下のように記述します。

// チャットオブジェクトの作成
$onMounted(() => {
        chat = geminiModel.startChat({
                history: [],
                generationConfig: {
                        maxOutputTokens: 100,
                },
        });
});

メッセージの送信

チャットの問い合わせメッセージを入力して、送信ボタンを押した際に send イベントが実行されます。ここではGemini APIにリクエストして、そのレスポンスを messages に入れています。

// メッセージを送信する処理
const send = async (e) => {
        // 入力メッセージの組み立て
        const message = document.querySelector("#message");
        const text = message.value;
        if (text === "") return;
        messages.push({
                role: "user",
                message: text,
        });
        $update(); // 表示更新
        // Geminiのレスポンスを受け取る
        const response = await answer(text);
        messages.push({
                role: "system",
                message: response,
        });
        message.value = "";
        $update(); // 画面表示更新
};

Gemini APIへリクエストする処理

Gemini APIへリクエストし、その結果を取得する処理は以下のようになります。 chat オブジェクトを使っているので簡単です。

// メッセージを投げて、Geminiのレスポンスを受け取る処理
// https://ai.google.dev/tutorials/web_quickstart?hl=ja
const answer = async (text) => {
        const result = await chat.sendMessage(text);
        const response = await result.response;
        return response.text();
};

以下がチャットの例です。 it や、前のやり取りを受けた上での単位変更などができているのが分かります。