Connecting Webflow Websites to OpenAI with Make Scenarios and JavaScript
Table of Contents
- Overview: Generating AI Content for Webflow Sites
- Project Steps
- Make Scenario for OpenAI API
- JavaScript Code to Connect Webflow and OpenAI
- Conclusion and Resources
Overview: Generating AI Content for Webflow Sites
In this blog post, we will explore how to connect a Webflow website to OpenAI's API in order to generate AI-powered content. As a demo, we will build a simple artist statement generator that prompts OpenAI to create an artist statement based on user input.
The project will involve four main steps: collecting user input through form fields, building an OpenAI prompt with the input data, calling OpenAI's API via a Make webhook, and displaying the AI-generated response back on the Webflow site.
Demo: Artist Statement Generator
The demo artist statement generator allows users to enter their name, location, artistic field, desired tone, and keywords. When they click generate, it will prompt OpenAI to create a custom artist statement incorporating their inputs. The result is displayed in an input field so users can tweak it before copying for use elsewhere.
Project Steps
There are four key steps involved in connecting the Webflow site to OpenAI:
Collecting User Input
First, form inputs are used to collect details from the user: their name, location, artistic field, desired tone of voice, and keywords to include. Each input is given a unique ID that will be referenced later when building the AI prompt.
Building the OpenAI Prompt
The second step is constructing the text prompt to send to OpenAI. The prompt incorporates the values from the form inputs using backtick literals. For example: 'Generate an artist statement of around 100 words for an artist named [name] who is based in [location] and works mostly with [field]. The statement should sound [tone] and include the following keywords: [keywords]'
Calling the OpenAI API via Make
We will use Make's workflow automation to call the OpenAI API rather than querying it directly from Webflow. This keeps our API keys secure. A Make webhook will act as a middleman - we send the prompt to Make, Make queries OpenAI, and the response gets sent back to our Webflow site through the webhook.
Displaying the AI Response
When the webhook response comes back from Make containing the AI-generated text, JavaScript will populate it into the input field on the Webflow page and hide the loading indicator. The input allows the user to tweak the statement before copying it elsewhere.
Make Scenario for OpenAI API
Within Make, we need to create a scenario involving three key steps:
Creating a Custom Webhook
First, a custom webhook module is added which will be the endpoint our Webflow site sends data to. The webhook URL is unique and handles incoming requests.
Connecting to the OpenAI Module
Next, the OpenAI module is connected to create a text completion job. The Davinci-003 model is selected and the prompt text incorporates dynamic webhook values like name and keywords using variables.
Sending the Response via Webhook
Finally, a webhook response module sends back the AI-generated text to our Webflow site, where the JavaScript displays it.
JavaScript Code to Connect Webflow and OpenAI
With the Make workflow set up, JavaScript code is needed to tie together the Webflow frontend and the OpenAI API:
First, DOM elements like the input fields and result container are stored in variables.
On form submit, values are collected into variables to build the prompt, display a loader, and post the data to Make via fetch().
The response text is inserted into the result input field to complete the process.
Conclusion and Resources
That wraps up a complete overview of connecting Webflow to AI through OpenAI! Check the links in the description for the full cloneable project and affiliate links.
Let me know in the comments if you have any other questions. Happy building!
FAQ
Q: What are the benefits of connecting Webflow to OpenAI?
A: It allows you to dynamically generate AI-powered content for your Webflow sites without a page refresh. This creates more engaging user experiences.
Q: Do I need coding skills to implement this?
A: Some basic JavaScript knowledge is required, but the process is straightforward with clear explanations in this guide.
Q: What OpenAI models can I use?
A: The text-davinci-003 model used here provides high-quality text generation similar to ChatGPT. You can experiment with other models too.
Q: Is there a limit to how much AI content I can generate?
A: OpenAI usage limits apply based on your account plan. The free plan allows up to 18,000 tokens per month.
Q: Can I customize the generated content?
A: Yes, displaying the AI response in an input field allows users to tweak it before copying for their needs.
Q: Do I need a Make account for this to work?
A: Make provides a secure way to hide your OpenAI API keys. But you can query the API directly if preferred.
Q: What other AI services could I connect to Webflow this way?
A: This JavaScript fetch approach would work for any external AI API. Anthropic, Cohere, and others could be integrated similarly.
Q: Where can I find the code and demo project?
A: The Webflow cloneable demo project and JavaScript code snippets are linked in the video description.
Q: What are some other Webflow+AI integrations I could build?
A: Endless possibilities! Product descriptions, testimonial generators, chatbots, search engines, and more.
Q: Can I use this for client websites or commercial use?
A: Yes, with appropriate OpenAI licensing. Integrate responsibly by clearly identifying AI-generated content.