FlutterFlow × Anthropic API完全実装ガイド

FlutterFlow × Anthropic API（Claude Sonnet 4.5）完全実装ガイド

本記事では、FlutterFlowアプリから Claude Sonnet 4.5 を本格的に活用するための実装方法を解説します。

単なるAPI呼び出しに留まらず、以下をすべて含みます。

• ストリーミングレスポンス対応
• 会話履歴（Conversation Memory）管理
• Firebase Firestore連携
• プロンプトテンプレート管理

---

全体アーキテクチャ

FlutterFlow
↓ (HTTPS / Stream)
Firebase Cloud Functions
↓
Firestore（会話・テンプレ管理）
↓
Anthropic API（Claude Sonnet 4.5）

---

ストリーミングレスポンス対応

なぜストリーミングが必要か

• 長文生成時のUX向上
• チャットUIとの相性が良い
• レスポンス待ち時間の体感削減

Cloud Functions（HTTP onRequest）例

※ Callable Functions はストリーミング非対応のためHTTPS onRequest を使用します。

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

export const anthropicStream = functions.https.onRequest(async (req, res) => {
  const anthropic = new Anthropic({
    apiKey: functions.config().anthropic.api_key,
  });

  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');

  const stream = await anthropic.messages.stream({
    model: 'claude-3-5-sonnet-latest',
    max_tokens: 500,
    messages: [{ role: 'user', content: req.body.prompt }],
  });

  for await (const event of stream) {
    if (event.type === 'content_block_delta') {
      res.write(event.delta.text);
    }
  }

  res.end();
});

FlutterFlow側の対応
• API Call（HTTP）
• レスポンスを逐次UIに反映
• Chat Bubble表示に最適

---

会話履歴（Conversation Memory）管理

Firestore設計例

users/{userId}/conversations/{conversationId}
  - createdAt
  - updatedAt

users/{userId}/conversations/{conversationId}/messages
  - role: "user" | "assistant"
  - content
  - createdAt

会話履歴を含めたAPIリクエスト

const messages = history.map(m => ({
  role: m.role,
  content: m.content,
}));

messages.push({
  role: 'user',
  content: data.prompt,
});

ポイント
• 最大メッセージ数を制限（例：直近10件）
• トークン上限を超えないよう制御

---

Firebase Firestore連携

ユーザー発言を保存

await admin.firestore()
  .collection('users')
  .doc(userId)
  .collection('conversations')
  .doc(conversationId)
  .collection('messages')
  .add({
    role: 'user',
    content: prompt,
    createdAt: admin.firestore.FieldValue.serverTimestamp(),
  });

Claude応答を保存

await messagesRef.add({
  role: 'assistant',
  content: responseText,
  createdAt: admin.firestore.FieldValue.serverTimestamp(),
});

利点
• 会話の永続化
• 再開可能なチャット
• 分析・改善に活用可能

---

プロンプトテンプレート管理

Firestoreでのテンプレ管理

prompt_templates/{templateId}
  - name
  - systemPrompt
  - description
  - createdAt

テンプレ取得例

const templateSnap = await admin.firestore()
  .collection('prompt_templates')
  .doc(templateId)
  .get();

const systemPrompt = templateSnap.data()?.systemPrompt;

Claudeへの送信構成

messages: [
  { role: 'system', content: systemPrompt },
  ...conversationMessages,
  { role: 'user', content: data.prompt }
]

活用例
• カスタマーサポート用
• 学習支援用
• FAQ自動応答
• 文章校正・要約

---

セキュリティと運用ベストプラクティス

•	Firebase Authentication必須  
•	ユーザー単位でレート制限  
•	Firestore Rulesでアクセス制御  
•	トークン消費量ログ監視

---

まとめ

本構成により、FlutterFlowで以下が実現できます。
• Claude Sonnet 4.5のリアルタイム体験
• 会話を覚えるチャットAI
• プロンプト管理による品質統制
• Firebaseを活かした安全設計

FlutterFlow × Anthropic × Firebase は、
ノーコード × 高度AI を実現する最強構成です。

---