This guide will walk you through the process of building a Hybrid Webflow App which allows a user to generate images from a Designer Extension using OpenAI’s Dall-E service and add them to a site’s Assets. In this guide we'll cover:
To successfully follow along with this guide, please ensure your system meets the following requirements:
- Node.js 16.20 or later
- A Webflow site for development and testing
- Code Editor
- Single-Page Web Applications
- HTML, CSS
We're diving into the capabilities of a Webflow App with an example that showcases Designer Extensions and Data Clients.
You'll set up an app named "Devflow Party". Once installed, this app integrates a Designer Extension into the Webflow canvas, prompting users to generate images via OpenAI. Following this, it employs Webflow's REST APIs to automatically integrate the chosen images into a Webflow site.
While these two App building blocks work closely together, they are hosted and managed very differently in a Hybrid App.
Hybrid Apps are split into two different areas of functionality:
This example app is contained within two separate folders inside the Hybrid Example App repository
This example implements a lightweight API to pass data between the Designer Extension and Data Client. The Data Client makes API calls to the Webflow Data API and serves that data to your Extension.
While you can call third-party APIs directly from the Designer Extension, we’ve decided to call APIs from the Data Client, so that we're keeping all secrets contained on our backend.
First, install the dependency packages needed to run the Data Client code
Once the dependencies are loaded, you can run the Devflow Party code
npm run dev
Once the Devflow Party code is running, its HTTP server will be available at http://localhost:3001. This is where the Designer Extension will submit requests. See the Data Clients guide for more information.
Similarly to the Data Client setup process in the previous step, first you will need to install the node dependencies
Once the dependencies are loaded, you can run the Designer Extension
npm run dev
The Designer Extension will start up another HTTP server at http://localhost:1337. The Webflow Designer will load this path into the Designer Extension iframe.
To see your Designer Extension in Webflow, open your test site in the Webflow designer, click on the puzzle icon in the left panel. Click on your App’s name, then click on “Run development app.” See the Designer ExtensionsOverview guide for more information.
Generating Images from OpenAI
This example app allows users to fill out a prompt and generate images via OpenAI’s Image Generation API. For more information on using those APIs, see OpenAI's documentation.
We've built the business logic for generating images within the Devflow Party Data Client. The Designer Extension passes the request from the user to the Data Client, which then calls OpenAI’s API and returns the generated images.
We chose this model because it allows us to make significant changes to the image generation logic, including changing the provider, without needing to make changes to the Designer Extension code.
Adding Images to a Site's Assets
Once a user generates the desired images in our Designer Extension, our Data Client will need to add them to the Site’s Assets. The user will select the images they wish to add, and the Devflow Extension will send a request to the Devflow service, telling the service to upload the assets via Webflow's Data APIs.
Once the service receives an upload request, it will temporarily cache the image to disk, then upload the image to S3 and apply it to the site’s Assets list. Note: Webflow doesn’t currently automatically refresh the assets panel, so you will need to manually refresh the designer in order to see the newly uploaded assets.
Updated 12 days ago