Features > ChatGPT Integration

OpenAI with ChatGPT integration comes with React Native Starter AI out of the box for you! We are using ChatGPT in AI Chatbot and Image to Text generation flows. You can check how it is being used in AI App Screens and AI Services docs. Here in this document, we are going to cover how you can change the integration code depending on your needs!

Chat Completion

ChatGPT chat completion features is widely used for in cases of chat bot creation. You just need to proceed to react-native-starter-backend/functions/src/prompts folder and change however you want your chatbot to behave. In the default setup, the chat assistant comes as an expert dietician with the prompt below:

react-native-starter-backend/functions/src/prompts

export const chatInitialSystemPrompt =
`You are an helpful and expert dietitian named Lisa. We have created an user profile based on
the user's body profile and dietary preferences and restrictions. Based on this profle, you will answer questions about the user's specific
diet, health information.`;

export const chatInitialPromptToCreateWelcome = (userProperties: JSON) => `
I want you to say a warm hello to the user by introducing yourself and also what type of questions you can answer for the user. The user's
profile information is given as a JSON as this: ${JSON.stringify(userProperties)}. Please be specific about the examples of the questions that
the user may ask. and also call the user as 'you'. And please also keep the word count under 150.
`;

As mentioned in AI Services docs, your OpenAI API Key is stored securely on the Firebase backend; so you don't need to worry about any security issues such as OpenAI API Key being exposed etc.

After you change the prompts, you chatbot will instanly start to be in the role of what you described in your prompts. The chat endpoints are ready to use like below:

react-native-starter-backend/functions/src/index.ts

const messages = [
  { role: "system", content: chatInitialSystemPrompt },
  { role: "user", content: chatInitialPromptToCreateWelcome(userInfo) },
];

react-native-starter-backend/functions/src/index.ts

  ....
  const body = JSON.stringify({
    model: "gpt-4", // gpt-4, gpt-3.5-turbo, etc
    messages, // array of message objects with role and content.
    max_tokens: max, // max tokens to generate in the response
    temperature: temp, // temperature of the response, higher is more random
    user: userId, // user id
  });

  const options = {
    headers: {
      Authorization:  `Bearer ${process.env.OPENAI_API_KEY}`, // place in your API key here or use environment variables
      "Content-Type": "application/json",
    },
  };

  try {
    // Custom retry delay
    axiosRetry(axios, {
      retryDelay: (retryCount) => {
        return retryCount * 1;
      },
      retries: 15,
    });

    const res = await axios.post(url, body, options);

    const answer = res.data.choices[0].message.content;
    const usage = res?.data?.usage;

    console.log(">>> " + answer);
    console.log(
      "TOKENS USED: " +
        usage?.total_tokens +
        " (prompt: " +
        usage?.prompt_tokens +
        " / response: " +
        usage?.completion_tokens +
        ")"
    );
    console.log("
");

    return answer;
  } catch (e) {
    console.error("GPT Error: " + e?.response?.status, e?.response?.data);
    return null;
  }
};

    

Getting JSON Output from ChatGpt

Getting JSON output from ChatGPT API can be needed in many scenarios such as React Native Starter AI's Image to Text AI Generation Flow. Here we are going to explain how you can achieve this result.

There are actually 2 ways of achieving JSON output from ChatGpt API. The first one is to write a prompt to force ChatGPT to give you JSON output and the second is to use function calling feature of ChatGPT. Both actually works but function calling feature is a better practice.

Using Prompt to get JSON output from ChatGPT

As you can imagine, we are (politely) asking ChatGPT to give us a JSON output by giving a JSON example that we wish for in the prompt like below:

react-native-starter-backend/functions/src/index.ts

[
  {
    role: "user",
    content: [
      {
        type: "text",
        text: `tell me the nutrition info in this food. The output should be as below strictly without any additional text:

            {
            "carbohydrates": "10",
            "calories": "100",
            "protein": "100",
            "fats": "100"
            }
            `,
      },
      {
        type: "image_url",
        image_url: {
          url: `data:image/png;base64,${inputImg}`,
        },
      },
    ],
  },
],

And right after that, we are checking if the output is a valid JSON and execute it again if it is not by the code below:

react-native-starter-backend/functions/src/index.ts

// Check if the returned object can be converted into JSON; if not retry the request again.
const hitGptForJson: () => any = async () => {
  const result = await axios.request(getOpenAIBodyConfig(aiRequestBody));
  try {
    const convertedJson = JSON.parse(
      result?.data?.choices?.[0]?.message?.content
    );
    return convertedJson;
  } catch (e) {
    return hitGptForJson();
  }
};

Using Function Calling of ChatGPT to get JSON Output

OpenAI announced a new feature called function calling to prevent the approach of trying to get JSON output by prompting. This can be explored further from the Official Docs of ChatGPT. Here in React Native Starter AI, we will also show how to use that function calling feature to get JSON outputs for your mobile application. It is pretty straightforward like below:

react-native-starter-backend/functions/src/prompts

  const tools = [  // List of available functions, called tools.
    {
      "type": "function",
      "function": {
        "name": "get_current_weather",
        "description": "Get the current weather in a given location",
        "parameters": {
          "type": "object",
          "properties": {
            "location": {
              "type": "string",
              "description": "The city and state, e.g. San Francisco, CA",
            },
            "unit": {"type": "string", "enum": ["celsius", "fahrenheit"]},
          },
          "required": ["location"],
        },
      }
    }
  ];

   const body = JSON.stringify({
    model: "gpt-3.5-turbo", // gpt-4, gpt-3.5-turbo, etc
    messages, // array of message objects with role and content. e.g. [{role: "user", content: "What's the weather in San Francisco?"}]
    max_tokens: max, // max tokens to generate in the response
    temperature: temp, // temperature of the response, higher is more random
    tools: tools, // array of available function objects
    tool_choice: "auto", // let ChatGPT decide when and which function to call
  });

  const options = {
    headers: {
      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, // place in your API key here or use environment variables
      "Content-Type": "application/json",
    },
  };

  try {
    // Custom retry delay
    axiosRetry(axios, {
      retryDelay: (retryCount) => {
        return retryCount * 1;
      },
      retries: 15,
    });

    const res = await axios.post(url, body, options);

    const toolCalls = res.data.choices[0].message.tool_calls;
    const usage = res?.data?.usage;

    console.log(
      "TOKENS USED: " +
        usage?.total_tokens +
        " (prompt: " +
        usage?.prompt_tokens +
        " / response: " +
        usage?.completion_tokens +
        ")"
    );

    return toolCalls;
  } catch (e) {
    console.error("GPT Error: " + e?.response?.status, e?.response?.data);
    return null;
  }
};