Introduction
This is based on a YouTube tutorial by JavaScript Mastery that explains how to build a JS frontend and node.js backend application connected to GPT-3.
JavaScript Mastery has also made the code available, making the task much easier.
This great cloneable by Daniel D. serves as the basis for the design.
Feel free to try the application here:
This should work fine (as long as I haven’t run out of credits for the Open AI API 😳) Please note that I run the backend on a free instance that goes to sleep when inactive; i.e. the first request takes longer.
Here are the step by step instructions to set this up:
Clone Webflow site
- Log into your Webflow account and open the cloneable. https://webflow.com/made-in-webflow/website/robocoach
- Click the “Settings” tab in the top right corner of the page.
- Select “Clone Project” from the drop-down menu.
- Enter a name for your cloned project and click “Clone Project” to confirm.
Get an Open AI API key
The Open AI API is free to try. There is $18 of free credit available to use during your first 3 months of using the API.
- Create a free account at https://beta.openai.com/signup using your Google or Microsoft account (or an email/password combination)
- Provide a valid mobile number for verification purposes
- Visit your OpenAI key page at https://beta.openai.com/account/api-keys
- Click the "Create new secret key" button to generate a new key for your applications
Get the backend code
The backend application is needed to connect to the Open AI API, and provide the infrastructure to securely store and manage your token.
- Log into https://www.github.com (or get a free account if you don’t have one yet)
- Go to the GitHub repository of the backend code for the application https://github.com/adrianhajdin/project_openai_codex
- Click the "Fork" button at the top right of the page.
- You will now have a copy of the repository in your GitHub account.
Deploy backend code to render.com
Render helps you build and run all your apps and websites with free security, fast delivery, protection from cyber attacks, private networks, and automatic updates from Git. It offers a generous free tier and is simple to use.
- Get a free Render account. https://render.com/ and log in
- Click on the New + button and then the “Webservice” menu item.
- Copy the url of your github repository
Proceed to the next screen
Enter fields
- Name: pick any
- Region: Pick any
- Root directory: server
- Start command: npm run server
- Choose the free option
- Click "create Web Service"
- Go to “Environment” and enter your Open AI API key
This will trigger another build. When the build is done go to the url of your backend in your browser.
If you have difficulties or need more context, this is really well described in the deployment chapter of the video:
Build and Deploy Your Own ChatGPT AI App in JavaScript | OpenAI, Machine Learning
Connect webflow frontend and backend
Finally in webflow you need to change one line of text in "Custom JS code"
- In the 3rd line of the file you need to replace the url with your own render url
- Publish your webflow page and go to the published page
- Enter any any prompt and click on “Let’s chat”
- You should get a response from GPT-3 🎉
What to check if there are problems
- Make sure your backend can connect to the Open AI API. Is the key in the environment variables on render? Is the key correct? You can also try to generate a new key.
- Make sure your webflow frontend can connect to the backend. Is the render application up and running? Is the url the file “Custom JS code” in Webflow correct?
- Have a look at the video to get more context.
How to adapt for your own purposes
It should not be too hard to adapt the chat window for your own purposes, i.e. apply your own design. All of the magic happens in 2 embedded files.
- 'form-container': This is the html form with a little bit of css styling
- 'Custom JS Code': This is the logic that makes the reqest to the backend and renders the response.
You can take the two files and drop them into your own site.
I hope this was useful. Follow me on Twitter if you are interested in updates.
