FlutterFlow + Anthropic API リクエストガイド

本記事では、FlutterFlowアプリからAnthropic API（Claude Sonnet 4.5）を安全に呼び出す方法 を解説します。

クライアント側にAPIキーを直接埋め込むのではなく、
Firebase Cloud Functionsをミドルウェアとして利用 することで、
セキュリティと拡張性を両立した構成を実現します。

---

前提条件

• FlutterFlow プロジェクト
• Firebase プロジェクト
• Firebase Cloud Functions（Node.js / TypeScript）
• Anthropic APIキー（Claude Sonnet 4.5）

---

全体構成

FlutterFlow
↓ (HTTPS Callable)
Firebase Cloud Functions
↓ (Anthropic SDK)
Anthropic API（Claude Sonnet 4.5）

---

ステップ1: Cloud Functionsの設定

依存関係のインストール

Cloud Functions の package.json に Anthropic SDK を追加します。

{
  "dependencies": {
    "@anthropic-ai/sdk": "^0.39.0"
  }
}

インストール後、npm install を実行してください。

---

Anthropic関数の作成（Callable Function）

FlutterFlowから安全に呼び出せるよう、
HTTPS Callable Function を利用します。

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
import { Anthropic } from '@anthropic-ai/sdk';

admin.initializeApp();

export const anthropicRequest = functions.https.onCall(
  async (data, context) => {

    // 認証チェック（推奨）
    if (!context.auth) {
      throw new functions.https.HttpsError(
        'unauthenticated',
        '認証が必要です'
      );
    }

    const anthropic = new Anthropic({
      apiKey: functions.config().anthropic.api_key,
    });

    try {
      const response = await anthropic.messages.create({
        model: 'claude-4-5-sonnet-latest', 
        max_tokens: 300,
        temperature: 0.7,
        messages: [
          {
            role: 'user',
            content: data.prompt,
          },
        ],
      });

      return {
        success: true,
        message: response.content[0].text,
      };

    } catch (error: any) {
      console.error('Anthropic API Error:', error);
      throw new functions.https.HttpsError(
        'internal',
        error.message
      );
    }
  }
);

補足（Sonnet 4.5向け）

• temperature を指定すると応答の創造性を調整可能
• max_tokens はFlutterアプリ向けに控えめ推奨
• モデル名は claude-4-5-sonnet-latest を使用すると自動追従

---

ステップ2: Firebaseの環境変数を設定

APIキーは 必ず環境変数として管理 します。

環境変数の設定

firebase functions:config:set anthropic.api_key="YOUR_API_KEY"

環境変数の参照方法

const anthropic = new Anthropic({
  apiKey: functions.config().anthropic.api_key,
});

※ process.env を直接使うより Firebase Config を推奨します。

---

ステップ3: Cloud Functionsをデプロイ

firebase deploy --only functions

デプロイ後、Firebaseコンソールから
anthropicRequest 関数が作成されていることを確認します。

---

ステップ4: FlutterFlowでの設定

アクションの作成手順

1. FlutterFlowの 「アクション」 を開く
2. 「Cloud Functionを呼び出す」 を選択
3. 関数名に anthropicRequest を指定
4. パラメータとして prompt を追加

---

リクエストパラメータ例

{
  "prompt": "Flutter開発を初心者向けにわかりやすく説明してください"
}

---

セキュリティに関する注意点（重要）

• ❌ APIキーをFlutterアプリに直接埋め込まない
• ✅ Cloud Functionsを必ず経由する
• ✅ Firebase Authenticationで認証チェックを行う
• ✅ リクエスト内容をサーバー側で検証する

---

Sonnet 4.5運用向けの追加ベストプラクティス

レート制限対策

• Firebase側でリクエスト回数を制限
• ユーザーID単位で回数管理

プロンプト長制御

• Flutter側で文字数制限
• Cloud Functions側で最大長チェック

ログ管理

• Cloud Loggingでレスポンス時間を監視
• エラー率をアラート化

---

まとめ

本構成を採用することで、

• FlutterFlowから安全にClaude Sonnet 4.5を利用
• APIキー漏洩リスクを回避
• スケーラブルなAI機能実装
• Firebaseを活用した認証・制御

が可能になります。

FlutterFlow × Anthropic API は、
チャット・要約・Q&A・文章生成機能 を高速に実装できる強力な組み合わせです。

---