How to handle a openAI API method POST correctly with react native?

API
,
1

here’s my react native code

import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';

const App = () => {
  const [inputText, setInputText] = useState('');
  const [responseText, setResponseText] = useState('');
  const YOUR_CHAT_GPT_API_KEY = 'myApi';

  const handleSendRequest = async () => {
    try {
      const response = await fetch('https://api.openai.com/v1/chat/completions', {
        method: "POST",
  headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${YOUR_CHAT_GPT_API_KEY}`
    },
    body: JSON.stringify({
      "model": "gpt-4",
      "prompt": `if the text is Indonesia, translate to japanese, and vice versa: ${inputText}`,
      "temperature": 0,
      "max_tokens": 100,
      "top_p": 1,
      "frequency_penalty": 0.0,
      "presence_penalty": 0.0,
      "stop": ["\n"]
        }),
      });

      const jsonResponse = await response.json();

      // Log the response for debugging
      console.log('Response:', jsonResponse);
      setResponseText(jsonResponse.choices[0].message.content);
    } catch (error) {
      console.error('Error:', error);
      setResponseText('Error fetching response');
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text  style={{
                    fontSize: 21,
                    fontWeight: 'bold', marginBottom: 40
                }}>Indonesia - Japanese Live Translation</Text>
      <TextInput
        style={{ borderWidth: 1, width: '80%', padding: 10, marginBottom: 10 }}
        placeholder="Enter text to translate"
        value={inputText}
        onChangeText={setInputText}
      />
      <Button title="Send" onPress={handleSendRequest} />
      <Text style={{ marginTop: 20, borderWidth: 1, width: '80%', padding: 10, marginBottom: 10, height:'30%' }}
      placeholder="Response result is here">{responseText}</Text>
      <Button title="Record Sound" onPress={handleSendRequest} />
    </View>
  );
}

export default App;

it returns a log:

 LOG  Response: {"error": {"code": null, "message": "'messages' is a required property", "param": null, "type": "invalid_request_error"}}

and an error:

Error: [TypeError: Cannot convert undefined value to object]

I’m searching up internet about the parameters but didn’t find one

2

Chat completion is expecting a messages attribute, not “prompt”

https://platform.openai.com/docs/api-reference/making-requests

https://platform.openai.com/docs/api-reference/chat/create

1 Like
3

OMG you actually save me, thanks a lot!

1 Like
4

I ran into this problem too! For anyone else who ends up here like I did, I created an npm package called openai-react-native that handles file uploads with the Expo file system and chat completion streaming using React Native SSE, all while using the official SDK types and API wherever possible