How to Integrate OpenAI with Wix

Prerequisites

• Ensure you have a Wix account and an existing site you want to enhance with OpenAI functionalities.

 

• Sign up and obtain an API key from OpenAI to interact with their APIs.

Familiarize with Wix Velo

• Understand Wix Velo development tools. Wix Velo allows you to code and modify the behavior of your Wix site.

 

• Get comfortable with the Velo editor by exploring existing tutorials or documentation on implementing custom code in Wix.

Set Up Server-Side Function

• In your Wix site, access the Velo Code panel and navigate to the 'backend' section to create a new web module. This will be used to call the OpenAI API.

 

• Save the file as 'openai.jsw' and start by importing necessary modules.

// openai.jsw
import { fetch } from 'wix-fetch';

export async function callOpenAI(apiKey, prompt) {
    const response = await fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify({
            prompt: prompt,
            max_tokens: 100
        })
    });
    
    if (!response.ok) {
        throw new Error('OpenAI API request failed');
    }
    
    const data = await response.json();
    return data.choices[0].text;
}

Create a User Interface

• Add input elements to your Wix site, such as text boxes or buttons, where users can enter prompts or trigger OpenAI interactions.

 

• Make sure to give your UI elements relevant IDs to interact with them in your code. E.g., a button with the ID 'sendButton'.

Link UI Elements with Backend

• Switch to the site code panel to write the front-end logic, linking your elements to the backend function you created.

 

• Asynchronously call the server-side function when a user interacts with your UI.

// Script.js in the Site Code panel

import { callOpenAI } from 'backend/openai';

$w.onReady(function () {
    $w("#sendButton").onClick(async () => {
        const userInput = $w("#inputBox").value;
        try {
            const openAIResponse = await callOpenAI('your-api-key', userInput);
            $w("#outputBox").text = openAIResponse;
        } catch (error) {
            console.error('Error:', error);
            $w("#outputBox").text = 'Failed to fetch data from OpenAI';
        }
    });
});

Test and Debug

• Run your Wix site in Preview mode to test the OpenAI integration. Check if the inputs and outputs work as expected.

 

• Use browser tools to console log and inspect any issues, making sure API requests and responses are correctly handled.

Publish and Refine

• Once satisfied, publish your site to make the functionality live for all users to access.

 

• Consider refining the user interface, improving responses, or adding more features based on user feedback.