Rork × Vercel AI SDK：ストリーミング・ツール呼び出し・構造化出力を型安全に実装する

# バックエンドプロジェクトに追加
npm install ai @ai-sdk/openai hono zod

// src/index.ts（Cloudflare Worker + Hono）
import { Hono } from 'hono'
import { cors } from 'hono/cors'
import { streamText } from 'ai'
import { openai } from '@ai-sdk/openai'
 
const app = new Hono<{ Bindings: { OPENAI_API_KEY: string } }>()
 
app.use('/*', cors())
 
app.post('/api/chat', async (c) => {
  const { messages } = await c.req.json()
 
  // streamText がSSEのデルタ送信をすべて管理する
  const result = streamText({
    model: openai('gpt-4o-mini'),
    system: 'あなたは親切なアシスタントです。',
    messages,
    // コスト管理のため上限を必ず設定する
    maxTokens: 1000,
  })
 
  // toDataStreamResponse() でRork側のuseChat()と自動同期できる
  return result.toDataStreamResponse()
})
 
export default app

npm install ai

// screens/ChatScreen.tsx
import { useChat } from 'ai/react'
import {
  View, TextInput, FlatList, Text,
  TouchableOpacity, StyleSheet, KeyboardAvoidingView, Platform
} from 'react-native'
 
const API_URL = 'https://your-worker.workers.dev/api/chat'
 
export default function ChatScreen() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: API_URL,
    onError: (error) => {
      // エラー時はユーザーに通知する（自動リトライは避ける）
      console.error('Chat error:', error.message)
    },
  })
 
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <FlatList
        data={messages}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={[
            styles.bubble,
            item.role === 'user' ? styles.userBubble : styles.aiBubble,
          ]}>
            {/* ストリーミング中もリアルタイムでテキストが更新される */}
            <Text style={styles.messageText}>{item.content}</Text>
          </View>
        )}
      />
 
      <View style={styles.inputRow}>
        <TextInput
          style={styles.input}
          value={input}
          // React Native の onChangeText は string を返す。
          // useChat の handleInputChange は Web の onChange を想定しているため
          // { target: { value: text } } でラップして橋渡しする。
          onChangeText={(text) =>
            handleInputChange({ target: { value: text } } as any)
          }
          placeholder="メッセージを入力..."
          editable={\!isLoading}
          multiline
        />
        <TouchableOpacity
          style={[styles.sendButton, isLoading && styles.disabled]}
          onPress={() => handleSubmit()}
          disabled={isLoading}
        >
          <Text style={styles.sendLabel}>{isLoading ? '…' : '送信'}</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  )
}
 
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
  bubble: { margin: 8, padding: 12, borderRadius: 16, maxWidth: '80%' },
  userBubble: { alignSelf: 'flex-end', backgroundColor: '#007AFF' },
  aiBubble: { alignSelf: 'flex-start', backgroundColor: '#F2F2F7' },
  messageText: { fontSize: 15, color: '#000' },
  inputRow: {
    flexDirection: 'row', padding: 8,
    borderTopWidth: 1, borderColor: '#E5E5EA'
  },
  input: {
    flex: 1, borderWidth: 1, borderColor: '#C7C7CC',
    borderRadius: 20, paddingHorizontal: 16, paddingVertical: 8, marginRight: 8
  },
  sendButton: {
    backgroundColor: '#007AFF', borderRadius: 20,
    paddingHorizontal: 20, justifyContent: 'center'
  },
  disabled: { opacity: 0.5 },
  sendLabel: { color: '#fff', fontWeight: '600' },
})

// src/index.ts に追記
import { streamText, tool } from 'ai'
import { z } from 'zod'
 
app.post('/api/chat-with-tools', async (c) => {
  const { messages } = await c.req.json()
 
  const result = streamText({
    model: openai('gpt-4o'),
    messages,
    tools: {
      getWeather: tool({
        description: '指定した都市の現在の天気情報を取得する',
        // Zodでパラメータを定義するとAIが不正な型の引数を渡すのを防げる
        parameters: z.object({
          city: z.string().describe('都市名（例: 東京、大阪）'),
        }),
        execute: async ({ city }) => {
          // 本番では実際のAPIに置き換える
          // const res = await fetch(`https://api.openweathermap.org/...`)
          return { city, temperature: 22, condition: '晴れ', humidity: 55 }
        },
      }),
    },
    // ツール呼び出し→結果解釈→回答生成の多段階推論を許可する
    // 設定しないとツールの結果がユーザーに返らず応答が途切れる
    maxSteps: 3,
  })
 
  return result.toDataStreamResponse()
})

// src/index.ts
import { generateObject } from 'ai'
 
app.post('/api/analyze-review', async (c) => {
  const { reviewText } = await c.req.json()
 
  const { object } = await generateObject({
    model: openai('gpt-4o-mini'),
    schema: z.object({
      sentiment: z.enum(['positive', 'neutral', 'negative']),
      score: z.number().min(1).max(5).describe('1〜5の評価スコア'),
      summary: z.string().max(50).describe('50文字以内の要約'),
      keywords: z.array(z.string()).max(3).describe('主要キーワード（最大3件）'),
    }),
    prompt: `以下のレビューを分析してください：\n\n${reviewText}`,
  })
 
  // object は Zod スキーマから完全に型推論される
  // object.sentiment は 'positive' | 'neutral' | 'negative' 型
  return c.json(object)
})