How to Integrate ChatGPT into a Mobile App

// /api/chat/route.ts
import OpenAI from 'openai'
import { NextResponse } from 'next/server'

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})

export async function POST(req: Request) {
  try {
    const { messages, model = 'gpt-4-turbo' } = await req.json()

    // Validate request
    if (!messages || messages.length === 0) {
      return NextResponse.json(
        { error: 'Messages required' },
        { status: 400 }
      )
    }

    // Call OpenAI
    const completion = await openai.chat.completions.create({
      model,
      messages,
      temperature: 0.7,
      stream: false,
    })

    return NextResponse.json({
      message: completion.choices[0].message.content,
      usage: completion.usage,
    })
  } catch (error) {
    console.error('OpenAI API error:', error)
    return NextResponse.json(
      { error: 'Failed to process request' },
      { status: 500 }
    )
  }
}

import React, { useState } from 'react'
import { View, TextInput, FlatList, Text, ActivityIndicator } from 'react-native'

interface Message {
  role: 'user' | 'assistant'
  content: string
}

export function ChatGPTIntegration() {
  const [messages, setMessages] = useState<Message[]>([])
  const [input, setInput] = useState('')
  const [loading, setLoading] = useState(false)

  const sendMessage = async () => {
    if (!input.trim()) return

    const userMessage: Message = { role: 'user', content: input }
    setMessages((prev) => [...prev, userMessage])
    setInput('')
    setLoading(true)

    try {
      const response = await fetch('https://your-api.com/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          messages: [...messages, userMessage],
          model: 'gpt-4-turbo',
        }),
      })

      const data = await response.json()

      if (data.error) throw new Error(data.error)

      setMessages((prev) => [
        ...prev,
        { role: 'assistant', content: data.message },
      ])
    } catch (error) {
      console.error('Chat error:', error)
    } finally {
      setLoading(false)
    }
  }

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={messages}
        renderItem={({ item }) => (
          <View style={{ padding: 10 }}>
            <Text style={{ fontWeight: 'bold' }}>
              {item.role === 'user' ? 'You' : 'AI'}:
            </Text>
            <Text>{item.content}</Text>
          </View>
        )}
      />
      {loading && <ActivityIndicator />}
      <TextInput
        value={input}
        onChangeText={setInput}
        onSubmitEditing={sendMessage}
        placeholder="Type a message..."
      />
    </View>
  )
}