Rork × Gemini 2.5 Flash 実装ガイド — 超高速・低コストAI推論でレスポンシブなアプリを作る

# Rork MaxプロジェクトのルートディレクトリでSDKをインストール
npm install @google/generative-ai

// lib/gemini.ts — Gemini 2.5 Flash クライアントの初期化
 
import { GoogleGenerativeAI } from "@google/generative-ai";
 
// 環境変数からAPIキーを読み込む（ハードコード厳禁）
const API_KEY = process.env.EXPO_PUBLIC_GEMINI_API_KEY || "";
 
const genAI = new GoogleGenerativeAI(API_KEY);
 
/**
 * Gemini 2.5 Flash モデルを取得するヘルパー関数
 * thinkingBudget を指定すると Thinking モードが有効になる
 */
export function getFlashModel(thinkingBudget?: number) {
  return genAI.getGenerativeModel({
    model: "gemini-2.5-flash-preview-04-17",
    generationConfig: thinkingBudget
      ? {
          thinkingConfig: {
            thinkingBudget, // 0 = 無効, 1024〜8192 = Thinking有効（トークン予算）
          },
        }
      : undefined,
  });
}
 
// 期待する出力: GoogleGenerativeAIのモデルインスタンス

// screens/AIChatScreen.tsx の一部
 
import { getFlashModel } from "../lib/gemini";
import { useState } from "react";
import { View, TextInput, Button, Text, ScrollView } from "react-native";
 
export default function AIChatScreen() {
  const [input, setInput] = useState("");
  const [response, setResponse] = useState("");
  const [loading, setLoading] = useState(false);
 
  async function handleSend() {
    if (!input.trim()) return;
    setLoading(true);
    setResponse("");
 
    try {
      // Thinking不使用（高速レスポンス優先）
      const model = getFlashModel();
      const result = await model.generateContent(input);
      const text = result.response.text();
      setResponse(text);
    } catch (error) {
      console.error("Gemini API error:", error);
      setResponse("エラーが発生しました。しばらく経ってから再試行してください。");
    } finally {
      setLoading(false);
    }
  }
 
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <ScrollView style={{ flex: 1 }}>
        <Text style={{ fontSize: 16 }}>{response}</Text>
      </ScrollView>
      <TextInput
        value={input}
        onChangeText={setInput}
        placeholder="質問を入力..."
        style={{ borderWidth: 1, borderRadius: 8, padding: 12, marginBottom: 8 }}
      />
      <Button
        title={loading ? "生成中..." : "送信"}
        onPress={handleSend}
        disabled={loading}
      />
    </View>
  );
}
 
// 期待する出力: テキスト入力→AIレスポンス表示が動作するシンプルなチャット画面

// ストリーミングを使った実装例
 
async function generateWithStreaming(prompt: string, onChunk: (text: string) => void) {
  const model = getFlashModel();
 
  // generateContentStream を使うとトークンを逐次受け取れる
  const stream = await model.generateContentStream(prompt);
 
  for await (const chunk of stream.stream) {
    const chunkText = chunk.text();
    if (chunkText) {
      onChunk(chunkText); // 受け取ったテキストをコールバックで渡す
    }
  }
}
 
// 使い方
await generateWithStreaming("React Nativeのパフォーマンス最適化のコツを教えて", (chunk) => {
  setResponse((prev) => prev + chunk); // 逐次 state を更新
});
 
// 期待する出力: テキストが1文字ずつではなく段落単位で流れるように表示される

// Thinkingモードを有効にした実装例
 
async function generateWithThinking(prompt: string): Promise<string> {
  // thinkingBudget: 使用するThinkingトークンの上限
  // 1024 = 軽めの推論, 8192 = 深い推論（応答時間増加・コスト増）
  const model = getFlashModel(2048);
 
  const result = await model.generateContent({
    contents: [{ role: "user", parts: [{ text: prompt }] }],
  });
 
  return result.response.text();
}
 
// 使い方（コードレビュー・バグ解析などに適している）
const analysis = await generateWithThinking(
  "このReact Nativeコンポーネントのパフォーマンス問題を分析して改善案を提案してください:\n\n" +
    "..." // ユーザーのコードを挿入
);
 
// 期待する出力: 単純な回答より詳細で構造化された分析結果が返る

// 画像解析の実装例
 
import * as ImagePicker from "expo-image-picker";
import * as FileSystem from "expo-file-system";
 
async function analyzeImage(imageUri: string, prompt: string): Promise<string> {
  const model = getFlashModel();
 
  // 画像をBase64に変換
  const base64 = await FileSystem.readAsStringAsync(imageUri, {
    encoding: FileSystem.EncodingType.Base64,
  });
 
  const result = await model.generateContent([
    {
      inlineData: {
        mimeType: "image/jpeg",
        data: base64,
      },
    },
    { text: prompt },
  ]);
 
  return result.response.text();
}
 
// 使い方
const result = await analyzeImage(
  photoUri,
  "この画像の食品の推定カロリーと主要栄養素を教えてください"
);
 
// 期待する出力: 「このメニューには約500kcal含まれており、タンパク質30g...」のような回答