Rork × Claude claude-sonnet-4-6でAIアシスタントアプリを作る：最新モデルで変わる会話体験

// services/claude.ts
// Claude claude-sonnet-4-6 API呼び出しサービス
 
const CLAUDE_API_URL = 'https://api.anthropic.com/v1/messages';
 
// メッセージの型定義
export interface Message {
  role: 'user' | 'assistant';
  content: string;
}
 
// Claude に送るリクエストの型
interface ClaudeRequest {
  model: string;
  max_tokens: number;
  messages: Message[];
  system?: string;
}
 
/**
 * Claude API を呼び出してレスポンスを返す
 * @param messages 会話履歴（ユーザーとアシスタントのメッセージ配列）
 * @param systemPrompt AIの役割・振る舞いを定義するシステムプロンプト
 */
export async function callClaude(
  messages: Message[],
  systemPrompt?: string
): Promise<string> {
  const apiKey = process.env.EXPO_PUBLIC_ANTHROPIC_API_KEY;
  
  if (!apiKey) {
    throw new Error('Anthropic API key is not configured');
  }
 
  const requestBody: ClaudeRequest = {
    model: 'claude-sonnet-4-6',  // 最新のclaude-sonnet-4-6を使用
    max_tokens: 1024,
    messages,
    system: systemPrompt,
  };
 
  const response = await fetch(CLAUDE_API_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': apiKey,
      'anthropic-version': '2023-06-01',
    },
    body: JSON.stringify(requestBody),
  });
 
  if (!response.ok) {
    const error = await response.json();
    throw new Error(`Claude API error: ${error.error?.message || 'Unknown error'}`);
  }
 
  const data = await response.json();
  
  // レスポンスからテキストを取得
  return data.content[0]?.text ?? '';
}

// hooks/useChat.ts
// 会話管理カスタムフック
 
import { useState, useCallback } from 'react';
import { callClaude, Message } from '../services/claude';
 
const SYSTEM_PROMPT = `あなたは親切なパーソナルアシスタントです。
ユーザーのメモや考えを整理するお手伝いをしてください。
返答は簡潔に、かつ温かみのある日本語で行ってください。`;
 
// トークン消費を抑えるため、直近10件のメッセージのみ送信する
const MAX_HISTORY = 10;
 
export function useChat() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
 
  const sendMessage = useCallback(async (userText: string) => {
    if (!userText.trim() || isLoading) return;
 
    // ユーザーメッセージを追加
    const userMessage: Message = { role: 'user', content: userText };
    const updatedMessages = [...messages, userMessage];
    setMessages(updatedMessages);
    setIsLoading(true);
    setError(null);
 
    try {
      // 直近MAX_HISTORY件のみAPIに送信（コスト最適化）
      const recentMessages = updatedMessages.slice(-MAX_HISTORY);
      
      const assistantText = await callClaude(recentMessages, SYSTEM_PROMPT);
      
      // アシスタントの返答を追加
      const assistantMessage: Message = {
        role: 'assistant',
        content: assistantText,
      };
      setMessages(prev => [...prev, assistantMessage]);
      
    } catch (err) {
      const errorMessage = err instanceof Error 
        ? err.message 
        : 'メッセージの送信中にエラーが発生しました';
      setError(errorMessage);
      
      // エラー時はユーザーメッセージも削除して、再送できるようにする
      setMessages(messages);
    } finally {
      setIsLoading(false);
    }
  }, [messages, isLoading]);
 
  const clearHistory = useCallback(() => {
    setMessages([]);
    setError(null);
  }, []);
 
  return { messages, isLoading, error, sendMessage, clearHistory };
}

// services/claude.ts に追加
// ストリーミング版の Claude 呼び出し
 
export async function callClaudeStreaming(
  messages: Message[],
  onChunk: (text: string) => void,  // テキストの断片を受け取るコールバック
  onComplete: () => void,
  systemPrompt?: string
): Promise<void> {
  const apiKey = process.env.EXPO_PUBLIC_ANTHROPIC_API_KEY;
  
  if (!apiKey) {
    throw new Error('Anthropic API key is not configured');
  }
 
  const response = await fetch(CLAUDE_API_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': apiKey,
      'anthropic-version': '2023-06-01',
    },
    body: JSON.stringify({
      model: 'claude-sonnet-4-6',
      max_tokens: 1024,
      stream: true,  // ストリーミングを有効化
      messages,
      system: systemPrompt,
    }),
  });
 
  if (!response.ok) {
    throw new Error(`API error: ${response.status}`);
  }
 
  // ストリームのテキストを読み取る
  const reader = response.body?.getReader();
  const decoder = new TextDecoder();
  
  if (!reader) {
    throw new Error('Failed to get response stream reader');
  }
 
  let buffer = '';
  
  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      
      buffer += decoder.decode(value, { stream: true });
      const lines = buffer.split('\n');
      buffer = lines.pop() ?? '';
      
      for (const line of lines) {
        if (line.startsWith('data: ')) {
          const data = line.slice(6);
          if (data === '[DONE]') continue;
          
          try {
            const parsed = JSON.parse(data);
            const text = parsed.delta?.text ?? '';
            if (text) {
              onChunk(text);  // テキストの断片をUIに渡す
            }
          } catch {
            // JSONパース失敗は無視（不完全なチャンクの場合がある）
          }
        }
      }
    }
  } finally {
    reader.releaseLock();
    onComplete();
  }
}