flutter flowでfunctionsでclaude sonnet 3.7にリクエスト

Flutter Flow + Anthropic API リクエストガイド

前提条件

• Flutter Flowプロジェクト
• Firebaseプロジェクト
• Cloud Functions設定
• Anthropic APIキー

ステップ1: Cloud Functionsの設定

依存関係のインストール

Cloud Functions の package.json に以下を追加:

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

Anthropic関数の作成

const functions = require('firebase-functions');
const admin = require('firebase-admin');
const { Anthropic } = require('@anthropic-ai/sdk'); 

export const anthropicRequest = functions.https.onCall(async (data, context) => {
  const anthropic = new Anthropic({
    apiKey: functions.config().anthropic.api_key
  });

  try {
    const response = await anthropic.messages.create({
      model: 'claude-3-7-sonnet-20250219',
      max_tokens: 300,
      messages: [
        {
          role: 'user',
          content: data.prompt
        }
      ]
    });

    return {
      success: true,
      message: response.content[0].text
    };
  } catch (error) {
    console.error('claude API エラー:', error);
    return {
      success: false,
      error: error.message
    };
  }
});

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

 const apiKeyprocess.env["ANTHROPIC_API_KEY"]
 const anthropic = new Anthropic({
          apiKey: apiKeyprocess, 
});

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

firebase deploy --only functions

ステップ4: Flutter Flowでの設定

アクションの作成

1. Flutter Flowの「アクション」に移動
2. 「クラウド関数を呼び出す」を選択
3. anthropicRequest関数を選択
4. プロンプトパラメータを渡す

リクエストパラメータの例

{
  "prompt": "Flutter開発をわかりやすく説明してください"
}

セキュリティに関する注意点

• APIキーをクライアント側で公開しない
• Firebase Cloud Functionsをミドルウェアとして使用
• 適切な認証と承認を実装