ガイド

アプリにAI機能を追加する方法

アプリにAI機能を追加するには、サーバーから大規模言語モデル(LLM)のAPIを呼び出します。明確な指示と関連データを送り、返ってきた結果を使います。よく使われる機能は、要約、チャット、構造化データの抽出、分類の4つのパターンのどれかに当てはまり、それぞれ数十行程度のコードで実装できます。AIビルダーに書いてもらうこともできます。機能の良し悪しを決めるのは、呼び出しの周辺の作業です。APIキーをサーバーに置くこと、ユーザーごとのコストを管理すること、結果を信頼する前に確認することです。

ほとんどのAI機能の土台となる4つのパターン

パターン役割機能の例典型的な出力
要約長い文章を短くまとめる会議メモのダイジェスト、チケットの要約、文書の「何が変わったか」段落や箇条書き
チャット会話の中で質問に答える。多くの場合あなたのデータについてヘルプアシスタント、「ドキュメントに質問」、オンボーディングガイドストリーミングされるテキスト
抽出雑多なテキストや画像から、構造化された項目を取り出すPDFから請求書の情報、メール署名から連絡先、求人票から職務データスキーマに合ったJSON
分類決まったラベルの中から選ぶサポートチケットの振り分け、フィードバックのトピック別タグ付け、緊急メッセージの検出、言語判定ラベル1つ(必要に応じて確信度の注記)

抽出と分類は、もっとも価値が高いのに目立ちにくい機能です。レコードひとつごとに数分の手間を静かに省いてくれ、出力の形式が決まっているので自動で検証できます。チャットはもっとも目立ちますが、正しく作るのがいちばん難しく、専用のガイドがあります:AIチャットボットアプリの作り方。

アプリへの組み込み方

どのパターンも、同じ形をしています。

  1. ユーザーが操作する。 「要約」をクリックする、ファイルをアップロードする、メッセージを送る。
  2. フロントエンドは、AIプロバイダーではなく自分のサーバーを呼び出す。
  3. サーバーがリクエストを組み立てる。 システム指示、ユーザーの入力、モデルに必要なデータベース上のデータ。ただし、そのユーザーが見てよいデータに限る。
  4. サーバーがLLM APIを呼び出す。 キーは環境変数に保存されたものを使う。
  5. サーバーが応答を検証する。 有効なJSONか、既知のラベルか、適切な長さかを確かめてから、保存または返却する。
  6. フロントエンドが表示する。 長い回答は、届いた順にテキストをストリーミング表示する。

キーは手順4のとおりサーバーに置かれ、ブラウザには決して届きません。APIという概念が新しい場合は、APIとはが短い入門になります。トークン、モデル、キーについてより詳しく知りたい場合は、LLM APIの使い方を参照してください。

プロバイダーとモデルの選び方

OpenAI、Anthropic、Googleなどの主要なプロバイダーはいずれも、似た形のテキストAPIを提供しています。選ぶときの確認ポイントは次のとおりです。

  • 自分の作業での品質。 アプリの実際の例を2〜3種類のモデルで試してください。違いは、一般的なベンチマークより自分のデータの方がはっきり分かることが多いです。
  • 規模とコストのバランス。 プロバイダーは、より高性能な大型モデルと、安くて速い小型モデルの両方を用意しています。分類や単純な抽出は小型モデルでうまくいくことが多く、長い推論や繊細な文章作成には大型モデルが必要かもしれません。
  • 構造化出力。 抽出や分類では、自由形式のテキストを解析するのではなく、指定したスキーマに合うJSONを返させるAPIの機能を使ってください。
  • データの扱い。 API入力が保存されるか、学習に使われるかどうかをプロバイダーの規約で確認し、ユーザーから預かるデータに合うかを判断してください。
  • 上限。 新しいアカウントは、レート制限が低く設定されていることがよくあります。公開前に確認しておいてください。

モデル名や価格は頻繁に変わります。そのため、コードではモデル名を多くの場所にベタ書きせず、設定から読み込むようにしてください。

機能を1つずつ追加する

具体例で考えましょう。各連絡先に長いメモの履歴がある、小さなCRMです。

1. キーを保存する。 プロバイダーのダッシュボードでキーを作成し、サーバー側のシークレットとして保存します(例:OPENAI_API_KEYやANTHROPIC_API_KEY)。

2. 範囲の狭い機能を1つ依頼する:

連絡先ページに「要約」ボタンを追加して。サーバー側で、連絡先の直近20件のメモを、シークレット[ENV_NAME]を使って[PROVIDER]に送り、3つの箇条書きで現在の状況、未解決の質問、次のステップを書いてもらって。ログイン中のユーザーが見られるメモだけを含めて。読み込み中の表示を出し、要約をタイムスタンプ付きで保存し、失敗したら「今は要約できませんでした」と表示して。キーをブラウザに絶対に送らないで。

3. 入力の手間が省ける場所で抽出を追加する:

ユーザーが「クイック追加」欄にメール署名を貼り付けたら、サーバーで[PROVIDER]を呼び出し、プロバイダーの構造化出力機能を使って、名前、会社名、役職、メール、電話番号を含むJSONを返して。サーバーでJSONを検証し、新規連絡先フォームに事前入力し、保存前にユーザーが編集できるようにして。推測せず、分からない項目は空欄にして。

「保存前にユーザーが編集できる」という点が重要です。モデルが提案し、判断するのは人です。

4. バックグラウンドで分類する:

新しいサポートチケットが届いたら、次の5つのうち1つだけに分類して:請求、不具合、機能要望、アカウントへのアクセス、その他。低コストの小型モデルを使って。応答がこれらのラベルのいずれでもなければ、「その他」を保存して。ラベルは編集可能なタグとして表示して。

5. 実際の雑多なデータでテストする。 長いメモ、空のメモ、他の言語、電話番号のない署名などで試し、公開前に出力を20件並べて確認してください。

効果のある指示の書き方

すべてのリクエストに付ける指示(システムプロンプトと呼ばれることが多い)が、品質を左右します。

  • 誰のためで、何が良い結果かを書く。 「要約は、営業担当者が通話の前に10秒で読む」と書けば、モデルに目標ができます。
  • 形式を固定する。 箇条書きの数、文字数の上限、項目、ラベルを正確に指定します。
  • 分からないときの対応を書く。 「メモに次のステップがない場合は『次のステップは記録されていません』と書く」。これで、作り話の回答が減ります。
  • 抽出と分類では、良い入力と出力の例を2〜3個示す。
  • 指示とユーザーの内容を分け、ユーザーの内容には明確なラベルを付けて、モデルが両者を区別できるようにする。

プロンプトはコードベースのファイルに保存し、他のコードと同じようにバージョン管理し、レビューできるようにしてください。

コストを抑える

LLM APIは、送信した分と返ってきた分の両方を、トークン(小さなテキストの単位)で課金します。コストは、1回のリクエストの文脈量に、実行回数を掛けたもので増えていきます。実践的な管理方法は次のとおりです。

  • 必要なものだけを送る。 全履歴ではなく直近の20件のメモだけを送ります。長い文書は切り詰めるか、分割してください。
  • 目的を果たす最小のモデルを使う。 最大のモデルをデフォルトにする前に、まず試してください。
  • 出力の長さを、APIの最大トークン設定で制限する。
  • 結果をキャッシュする。 要約を保存し、元データが変わったときだけ再生成します。ページを表示するたびに生成し直さないでください。
  • ユーザーごとに上限を設ける。 アカウントごと、またはプランごとの1日あたりの上限を設けて、1人のヘビーユーザーや1つのスクリプトが請求額を押し上げるのを防ぎます。
  • エンドポイントにもレート制限をかける。 他の高コストなルートと同じように扱ってください。
  • プロバイダーのダッシュボードで予算または通知を設定する。 公開後は週に1回、利用量を確認してください。
  • 機能ごとのトークン使用量を記録する。 どの機能にどれだけコストがかかっているかが分かります。

AI機能がプロダクトの中心であれば、その運用コストを価格設定に織り込み、負担として吸収し続けないようにしてください。

安全性と信頼性

AIの出力は確率的です。自信ありげに間違えることがありますし、読み込んだテキストによって誘導されることもあります。それを前提に作ってください。

  • 出力を信頼できない入力として扱う。 構造を検証し、HTMLとして描画する前にエスケープし、コードやデータベースのクエリとして実行しないでください。
  • 影響のある操作には人間を介在させる。 メールの送信、レコードの変更、返金などです。モデルが下書きし、人が確定します。
  • プロンプトインジェクションを防ぐ。 文書やメッセージに「指示を無視して」といった文言が含まれることがあります。モデルが見られる範囲を、現在のユーザーが見てよい範囲に限定し、重要な操作を行えるツールを、コードが権限を確認する前に渡さないでください。
  • AIが生成したコンテンツにはラベルを付ける。 要約や提案が生成されたものであり、ユーザーが確認できることを分かるようにします。
  • 失敗を適切に扱う。 プロバイダーには障害やレート制限があります。タイムアウトを設定し、分かりやすいメッセージを表示し、アプリの他の部分は動き続けるようにしてください。
  • ユーザーの入力内容に注意する。 自由入力の欄では、モデレーションのステップを検討し、コンテンツが第三者のAIプロバイダーによって処理されることをプライバシーポリシーで明記してください。

より広範なチェック項目は、AIで作られたアプリのセキュリティチェックリストにあります。

よくあるミス

  • 汎用チャットボットから始めてしまう。 「要約」や「分類」の1つのボタンの方が、多くの人の役に立つことがよくあります。
  • キーをフロントエンドのコードや公開リポジトリに置く。
  • データベース全体を文脈として送ってしまう。 遅く、高くつき、他のユーザーのデータを漏らす危険もあります。
  • 自由形式の出力を信頼してしまう。 スキーマや固定ラベルを使えば、検証できるようになります。
  • ユーザーごとの上限がない。 最初の請求書が届いてから気付きます。

MythexでのAI機能の追加

Mythexでは、自分のプロバイダーのキーを使い、アプリ内にAIを組み込むことをチャットで依頼します。キーはプロジェクトのシークレットとして保存してください。エージェントが必要とするとき、Mythexはチャット内にシークレットのカードを表示するので、キーをチャットに貼り付ける必要はありません。その後、エージェントがサーバールート、プロンプト、インターフェースを作ります。アプリのAI利用料金は、プロバイダーから請求されます。これは、アプリ作成に使うMythexのクレジットとは別です。開始用のプロンプトは、ドキュメントの独自のAPIキーでAI機能を追加するにあります。

よくある質問

既存のアプリにAIを追加するにはどうすればいいですか?

LLMプロバイダーのAPIキーを取得し、サーバー側のシークレットとして保存したうえで、プロンプトと関連データをプロバイダーに送り、結果をフロントエンドに返すサーバールートを追加します。いきなり汎用チャットを作るのではなく、まずはレコードの要約のような、範囲の狭い機能から始めてください。

AI機能の運用にはどのくらいコストがかかりますか?

LLM APIは、送受信するテキストのおおよそ単位であるトークン数で課金され、料金はモデルによって大きく異なります。コストは、1回のリクエストで送るテキストの量と、実行の頻度で決まります。自分の利用状況から見積もり、プロバイダーのダッシュボードで上限を設定し、アプリ側でユーザーごとの利用量にも上限をかけてください。

OpenAIやAnthropicのキーをフロントエンドに入れてもいいですか?

いいえ。フロントエンドのコードは、ページを開けば誰でも読めます。キーが漏れると、見知らぬ人に請求額を増やされてしまいます。プロバイダーへの呼び出しはサーバーから行い、キーは環境変数に保管してください。

プロンプトインジェクションとは何ですか?

モデルが読むテキスト(ユーザーのメッセージ、アップロードされた文書、Webページなど)に、あなたの指示を上書きしようとする命令が含まれることです。モデルの出力は信頼できないものとして扱い、確認なしに重要な操作を実行させず、モデルが見られるデータはそのユーザーが見てよい範囲に限定してください。

Mythex · Pricing · AIでなんでも作ろう · ウェブサイト・アプリのテンプレート · Mythexを比較 · AIアプリ開発用語集 · AIアプリ開発の無料ツール · English

English አማርኛ العربية Български বাংলা Bosanski Català Čeština Dansk Deutsch Ελληνικά Español Español (España) Eesti فارسی Suomi Français Français (Canada) ગુજરાતી हिन्दी Hrvatski Magyar Հայերեն Bahasa Indonesia Íslenska Italiano ქართული Қазақ тілі ಕನ್ನಡ 한국어 Lietuvių Latviešu Македонски മലയാളം Монгол मराठी Bahasa Melayu မြန်မာ Norsk bokmål Nederlands ਪੰਜਾਬੀ Polski Português (Brasil) Português (Portugal) Română Русский Slovenčina Slovenščina Soomaali Shqip Srpski Svenska Kiswahili தமிழ் తెలుగు ไทย Tagalog Türkçe Українська اردو Tiếng Việt 简体中文 繁體中文(香港) 繁體中文(台灣)