RorkアプリでGroq APIを使って効率的にAI応答を実現する方法

// .env ファイル（.gitignoreに必ず追加）
EXPO_PUBLIC_GROQ_API_KEY=YOUR_GROQ_API_KEY

// src/lib/groq.js
import OpenAI from 'openai';
 
// Groq APIはOpenAI互換インターフェースを提供している
const groq = new OpenAI({
  apiKey: process.env.EXPO_PUBLIC_GROQ_API_KEY,
  baseURL: 'https://api.groq.com/openai/v1',
  dangerouslyAllowBrowser: true, // Expoクライアントからの呼び出し用
});
 
export async function askGroq(messages) {
  try {
    const response = await groq.chat.completions.create({
      model: 'llama3-8b-8192', // 高速なLlama 3 8Bモデル
      messages,
      max_tokens: 1024,
      temperature: 0.7,
    });
 
    // 応答テキストを返す
    return response.choices[0]?.message?.content ?? '応答を取得できませんでした';
  } catch (error) {
    // エラーの種類に応じて分岐
    if (error.status === 429) {
      throw new Error('リクエスト数の上限に達しました。少し時間をおいてから再試行してください。');
    }
    if (error.status === 401) {
      throw new Error('APIキーが無効です。設定を確認してください。');
    }
    throw new Error(`Groq APIエラー: ${error.message}`);
  }
}

// src/components/ChatScreen.jsx
import React, { useState, useRef } from 'react';
import { View, Text, TextInput, TouchableOpacity, ScrollView, StyleSheet } from 'react-native';
import OpenAI from 'openai';
 
const groq = new OpenAI({
  apiKey: process.env.EXPO_PUBLIC_GROQ_API_KEY,
  baseURL: 'https://api.groq.com/openai/v1',
  dangerouslyAllowBrowser: true,
});
 
export default function ChatScreen() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [isStreaming, setIsStreaming] = useState(false);
  const scrollRef = useRef(null);
 
  const sendMessage = async () => {
    if (\!input.trim() || isStreaming) return;
 
    const userMessage = { role: 'user', content: input };
    const newMessages = [...messages, userMessage];
 
    // ユーザーメッセージをすぐに表示
    setMessages(newMessages);
    setInput('');
    setIsStreaming(true);
 
    // アシスタントの応答枠を先に追加（空文字で初期化）
    setMessages(prev => [...prev, { role: 'assistant', content: '' }]);
 
    try {
      const stream = await groq.chat.completions.create({
        model: 'llama3-8b-8192',
        messages: newMessages,
        stream: true, // ストリーミングを有効化
        max_tokens: 1024,
      });
 
      // チャンクが届くたびに最後のメッセージを更新
      for await (const chunk of stream) {
        const delta = chunk.choices[0]?.delta?.content ?? '';
        if (delta) {
          setMessages(prev => {
            const updated = [...prev];
            updated[updated.length - 1] = {
              role: 'assistant',
              content: updated[updated.length - 1].content + delta,
            };
            return updated;
          });
          // スクロールを自動追従
          scrollRef.current?.scrollToEnd({ animated: false });
        }
      }
    } catch (error) {
      setMessages(prev => {
        const updated = [...prev];
        updated[updated.length - 1] = {
          role: 'assistant',
          content: `エラーが発生しました: ${error.message}`,
        };
        return updated;
      });
    } finally {
      setIsStreaming(false);
    }
  };
 
  return (
    <View style={styles.container}>
      <ScrollView ref={scrollRef} style={styles.chatArea}>
        {messages.map((msg, i) => (
          <View key={i} style={[styles.bubble, msg.role === 'user' ? styles.user : styles.assistant]}>
            <Text style={styles.text}>{msg.content}</Text>
          </View>
        ))}
      </ScrollView>
      <View style={styles.inputRow}>
        <TextInput
          style={styles.input}
          value={input}
          onChangeText={setInput}
          placeholder="メッセージを入力..."
          editable={\!isStreaming}
          multiline
        />
        <TouchableOpacity
          style={[styles.sendButton, isStreaming && styles.disabled]}
          onPress={sendMessage}
          disabled={isStreaming}
        >
          <Text style={styles.sendText}>{isStreaming ? '...' : '送信'}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#f5f5f5' },
  chatArea: { flex: 1, padding: 12 },
  bubble: { maxWidth: '80%', borderRadius: 12, padding: 10, marginBottom: 8 },
  user: { backgroundColor: '#007AFF', alignSelf: 'flex-end' },
  assistant: { backgroundColor: '#fff', alignSelf: 'flex-start' },
  text: { color: '#333', fontSize: 15, lineHeight: 22 },
  inputRow: { flexDirection: 'row', padding: 8, backgroundColor: '#fff', borderTopWidth: 1, borderTopColor: '#eee' },
  input: { flex: 1, borderWidth: 1, borderColor: '#ddd', borderRadius: 8, padding: 8, marginRight: 8, maxHeight: 100 },
  sendButton: { backgroundColor: '#007AFF', borderRadius: 8, paddingHorizontal: 16, justifyContent: 'center' },
  disabled: { backgroundColor: '#aaa' },
  sendText: { color: '#fff', fontWeight: 'bold' },
});

// 指数バックオフを使ったリトライ実装
async function askGroqWithRetry(messages, maxRetries = 3) {
  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      return await askGroq(messages);
    } catch (error) {
      const isRateLimit = error.message.includes('上限に達しました');
 
      if (isRateLimit && attempt < maxRetries - 1) {
        // 1秒、2秒、4秒と待機時間を倍増する（指数バックオフ）
        const waitTime = Math.pow(2, attempt) * 1000;
        console.log(`Rate Limit — ${waitTime / 1000}秒後にリトライ (${attempt + 1}/${maxRetries})`);
        await new Promise(resolve => setTimeout(resolve, waitTime));
        continue;
      }
 
      throw error; // リトライ上限に達したら例外を再スロー
    }
  }
}