traintocode

Make fetch request

The last thing your frontend needs to do is actually call off to OpenAI to get the response to the user's message. You cannot call the OpenAI API directly from your front end web app, so you will be creating a cloud function in the next exercise to make the API call. The cloud function will be deployed to AWS Lambda where it is given a unique function URL.

The last step in your front end is to call this function URL using fetch() inside the submit handler of your form.

For the next exercise you can assume the function URL will be:

const functionUrl = 'https://xxxxxxxxx.lambda-url.eu-west-2.on.aws/';
Exercise
1. Remove the test messages and initialize the messages array as an empty array.

2. After adding the user's message to the state, make a call to your functionUrl function using the Fetch API.

3. Take the response from the function and append this to the messages array, with the sender fiel set to "ai".

If you need help making a POST request using fetch() ask below, or anything else you are stuck with.

    You cannot do the coding exercises on this device, visit this page on a larger screen.
    App.tsx
    Loading...