[Error: Invalid URL (POST /v1/chat/completions/)]: React Native/ChatGPT API in Android problem

I’m building a simple ChatGPT API connection on React Native using Expo, and when i run the app in web browser there’s no problem, problem comes when i run it on Android via Expo Go, i got this error:
[Error: Invalid URL (POST /v1/chat/completions/)]

Error at running React Native App in Android with Expo Go

App running on Web

I don’t know if this is related but i got this error when running on web (it’s still working)

Error when running App on Web Browser

This is the source code of the connection:

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet, Alert } from 'react-native';
import OpenAI from "openai";
import theme from '../theme';

const ChatGPT = () => {

    const openai = new OpenAI({
        apiKey: (here goes my api key),
        dangerouslyAllowBrowser: true
    });
    
    
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);

  const sendMessage = async () => {
    if (!input) return;
  
    // Send the user's message to the ChatGPT API
    try {
      const response = await openai.chat.completions.create({
        model: "gpt-3.5-turbo",
        messages: [
          {
            "role": "user",
            "content": input
          },
        ],
        temperature: 1,
        max_tokens: 256,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0,
      });
      console.log(response);
      setMessages([...messages, { text: input, user: true }, { text: response.choices[0].message.content, user: false }]);
      setInput('');
    } catch (error) {
      console.log(error)
    }
    
    
    // Add the user's message and the AI's response to the chat
    
  };

  return (
    <View style={{marginTop: 40}}>
      <View>
        {
          //Adds the message
        messages.map((message, index) => (
          <View style>
            <Text key={index} style={styles.chatContainer}>
              {message.text}
            </Text>
          </View>
          
        ))}
      </View>
      <View>
        <TextInput
          value={input}
          onChangeText={setInput}
          placeholder="Escriba su consulta..."
        />
        <Button title="Send" onPress={sendMessage} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
    chatContainer: {
      flex: 1,
      backgroundColor: theme.colors.backgroundPrimary,
      alignItems: 'center',
      justifyContent: 'center',
      color: theme.colors.textPrimary
    },
    text: {
        color: "#fff"
    }
  });

export default ChatGPT;

and if needed, this is my package.json:

{
  "name": "pisapp-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^19.0.0",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@react-navigation/stack": "^6.3.17",
    "@types/react": "~18.2.14",
    "axios": "^1.5.0",
    "dotenv": "^16.3.1",
    "expo": "~49.0.8",
    "expo-status-bar": "~1.6.0",
    "firebase": "^10.4.0",
    "openai": "^4.4.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.4",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-web": "~0.19.6",
    "typescript": "^5.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/plugin-transform-export-namespace-from": "^7.22.11",
    "babel-eslint": "^10.1.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-config-standard-jsx": "^11.0.0",
    "eslint-config-standard-react": "^13.0.0",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.33.2"
  },
  "private": true,
  "eslintConfig": {
    "parser": "babel-eslint",
    "extends": [
      "standard",
      "standard-jsx",
      "standard-react"
    ]
  }
}

I tried clearing cache, even changing the chatGPT API model, but with no results.

Leave a Comment