Couldn't bring the ai model on to a website

Gemini API
1

so basically i have tried to import the ai model into my laptop and i have added some information in it (i have trained it ) when i try to bring up to the website it gets
{
“error”: {
“code”: 403,
“message”: “Method doesn’t allow unregistered callers (callers without established identity). Please use API Key or other form of API consumer identity to call this API.”,
“status”: “PERMISSION_DENIED”
}
}
I am using this as my apiURL and im not sure if its correct " https://generativelanguage.googleapis.com/v1beta/models/gemini-pro "
What is the problem here and is there any solution for this ?
I hope someone could help me out with this. Thanks

2

Welcome to the community!

The error you’re getting seems to suggest that you forgot to include your API key in the request.

If you’re still having trouble I highly recommend that you just post your code here, it makes it a lot easier for us to help you :laughing:
(Don’t post your API key though)

how do I post my code?

It’s really simple, all you need to do is copy & paste your code between triple back ticks, like this:
```
Your code
```

3

Not sure if i include it .
This is my Code

const apiKey = "My_API"; // Replace with your actual API key

async function callAI() {
    const userInput = document.getElementById('userInput').value.trim();

    if (userInput === '') {
        alert('Please enter a question.');
        return;
    }

    const apiUrl = "https://generativelanguage.googleapis.com/v1beta/models/gemini-pro";
    const headers = {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${apiKey}`
    };
    const data = {
        "input": userInput
    };

    try {
        const response = await fetch(apiUrl, {
            method: 'POST',
            headers: headers,
            body: JSON.stringify(data)
        });

        if (!response.ok) {
            throw new Error(`HTTP error: ${response.status} ${response.statusText}`);
        }

        const responseData = await response.json();

        if (!responseData || !responseData.output) {
            throw new Error("Invalid response data.");
        }

        document.getElementById('response').innerHTML = responseData.output;
    } catch (error) {
        console.error('Error fetching data from AI model:', error);
        alert('An error occurred while communicating with the AI model. Please try again later.');
    }
}

document.getElementById('button').addEventListener('click', callAI);
4

403 error has to do with an authentication error. Check your ApiKey or generate a new one and retry

5

My guy, the first line of your code says to “replace with your actual API Key” :slight_smile:

To get a Gemini API key, follow these steps:

  1. Visit makersuite.google.com/app/apikey and sign in with your Google account.
  2. Under API keys, click the “Create API key in new project” button.
  3. [Copy the API key and keep it private]
6

Hi @Cheng_Derrick :wave:

Welcome to the Google AI Forum.

Here’s the proper cURL call that you can follow to correct your code:

curl https://generativelanguage.googleapis.com/v1/models/gemini-pro:generateContent?key=$API_KEY \
    -H 'Content-Type: application/json' \
    -X POST \
    -d '{ "contents":[
      { "parts":[{"text": "Write a story about a magic backpack"}]}
    ]
}'```

UPDATE:

The following code should work on your machine.

const apiKey = "My_API"; // Replace with your actual API key

async function callAI() {
    const userInput = document.getElementById('userInput').value.trim();

    if (userInput === '') {
        alert('Please enter a question.');
        return;
    }

    // Include the API key as a query parameter in the URL
    const apiUrl = `https://generativelanguage.googleapis.com/v1/models/gemini-pro:generateContent?key=${apiKey}`;
    const headers = {
        "Content-Type": "application/json"
    };

    // Adjust the data structure to match the one used in the cURL example
    const data = {
        "contents": [
            { "parts": [{"text": userInput}] }
        ]
    };

    try {
        const response = await fetch(apiUrl, {
            method: 'POST',
            headers: headers,
            body: JSON.stringify(data)
        });

        if (!response.ok) {
            throw new Error(`HTTP error: ${response.status} ${response.statusText}`);
        }

        const responseData = await response.json();

        // Check for output in the proper location based on the actual response structure you expect
        if (!responseData || !responseData.output) {
            throw new Error("Invalid response data.");
        }

        // Update DOM element with expected response property
        document.getElementById('response').innerHTML = responseData.output;
    } catch (error) {
        console.error('Error fetching data from AI model:', error);
        alert('An error occurred while communicating with the AI model. Please try again later.');
    }
}

document.getElementById('button').addEventListener('click', callAI);
1 Like