Has anybody been able to integrate chaGPT into a wix website eg when a text is created in wix website it is sent to chatGPT and chatGPT responds with an answer back to the wix website which can be displayed.
1 Like
id like to know too
Your first steps…
One possible solution…
-
Point-ZERO —> Frontend-Request.
All your actions starts on your page → FRONT-END.
You have an input-field, where you put in your requested word or sentence,
for example a question.
By a click onto your SUBMIT-BUTTON you send your request over to
BACKEND. -
Install AXIOS.
You can use the axios library to send a prompt to the ChatGPT API and
receive the generated text response. axios is a popular JavaScript library
that allows you to make HTTP requests from a browser or a Node.js
environment.There are 2-ways of how to communicate with CHAT-GPT, direct and indirect
using —> lambda function.You surely can do this also without using AXIOS .
-
Get an OPEN-AI API-KEY for CHAT-GPT.
First, you would need to choose a service that provides access to ChatGPT
through an API. One option is the OpenAI API, which allows you to send text
prompts to GPT-3 and receive generated text in response. -
Generate BACKEND-CODE (using AXIOS)…
export function chatGPT(parameter1, parameter2) {
const axios = require('axios');
exports.handler = async (event) => {
const requestBody = JSON.parse(event.body);
const message = requestBody.message;
const response = await axios.post('https://api.openai.com/v1/engines/davinci-codex/completions', {
prompt: message,
max_tokens: 50,
temperature: 0.7,
n: 1,
stop: '\n'
}, {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`
}
});
const completion = response.data.choices[0].text;
return {
statusCode: 200,
body: JSON.stringify({ message: completion })
};
};
}
Continue....
//more code...
//more code ...
- Sending data back to FRONTEND.
- Read here —> OpenAI Platform
How to use CHAT-GPT on local maschine, using → http://forum.wixstudio.com
Surely you will find tons of more information in the web.
Start your coding-adventure!
This is just a part of the code you will need. Just some kind of starting sequence.
You will have to expand and modify this, to get your wished results.
The same doing with the wix-fetch-API…
import { fetch } from 'wix-fetch';
// Replace YOUR_API_KEY with your OpenAI API key
const headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_API_KEY'
};
// Replace YOUR_PROMPT with the text prompt you want to send to ChatGPT
const data = {
prompt: 'YOUR_PROMPT',
temperature: 0.5,
max_tokens: 50
};
// Send the request to the OpenAI API
fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
method: 'POST',
headers,
body: JSON.stringify(data)
})
.then(response => {
// Get the generated text response from the API
return response.json();
})
.then(data => {
const generatedText = data.choices[0].text;
console.log(generatedText);
})
.catch(error => {
console.error(error);
});
Additional notes:
- never store API-Keys on —> FRONT-END (use wix-secrets)
-this code-example is for advanced developer and programmers only!
-any warranties to a 100% functionaly code, because just an example of a function-flow.
Good luck!
!!! Good luck and happy coding !!!
3 Likes
Please always try to reply to the right section of post!
And no double postings, thanks!
Thanks for the response, I already have all my code in the frontend html embed, how do I hide the api key in the frontend or do only the api request in the backend then push the rest of the code back to the html.
I was thinking at the point in which the the api key is added to the frontend html it would be a function call that will call a code that sends a post message to my parent page, onMessage on my parent page the api key will be retreived from a database or backend or wix secrets then sent back to the calling code in the html. Can it still be seen then? Can information in wix secrets be gotten from frontend code?
import { fetch } from ‘wix-fetch’;
import { getSecret } from ‘wix-secrets-backend’;
let chatArray=;
export const aiCompletion = async (chatArray) => {
chatArray = chatArray || ;
const url = “https://api.openai.com/v1/chat/completions”;
const APIKEY = await getSecret(“OPENAI_API_KEY3”); \ getting key from wixbackend secrets
chatArray.push({ “role”: “system”, “content”: "First task is to reset the context. You are a multi-lingual assistant for clients in an international travel and tourism company based in Europe, but you have vacation offers for all countries, where your main task is to recommend vacation destinations to your customers with a maximum of 150 words as enumeration. " });
const messages = chatArray;
const body = {
“model”: “gpt-3.5-turbo”,
“messages”: messages,
“max_tokens”: 200,
“temperature”: 0.10,
};
const options = {
method: “POST”,
headers: {
‘Content-Type’: “application/json”,
‘Authorization’: Bearer ${APIKEY}
},
body: JSON.stringify(body),
};
const response = await fetch(url, options);
const data = await response.json();
return data.choices[0].message.content;
};
Hmm, I have been unable to get this code to work, I’m getting a “Unexpected end of JSON input” error. Any tips?
1 Like
Yes, it is possible to integrate OpenAI’s chatGPT into a Wix website to create interactive chatbot-like functionality. By leveraging the capabilities of chatGPT, you can allow users to input text on your Wix website and receive responses generated by the chatbot model.
You don’t need to have the API key on the front end. It’s better to make a call from the front end to a function in the backend, which will make the request and send the response back to the front end. There, in the backend, you can use Wix secrets without any problem.
Hello, I’m sharing a video on how to integrate Chat GPT with Wix. Video Explanation; https://youtu.be/Zj3P7oScdVg?si=y-E8dAFcMj1vlhLt If you have any questions, feel free to contact me. Hola les comparto un video de como se hace la integración de Chat GPT con Wix. Explicacion en video: https://youtu.be/Zj3P7oScdVg?si=y-E8dAFcMj1vlhLt Cualquier duda contáctenme