Getting Started

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:

Prerequisites

A Hybrid App uses the capabilities of both a Data Client and a Designer Extension. Please read through our documentation to familiarize yourself with these concepts.

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

Tools:

  • Terminal
  • Code Editor
  • Browser

Knowledge of:

  • Single-Page Web Applications
  • HTML, CSS

What we're building

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.

App Structure

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

  • designer-extension
  • data-client

Communicating between Designer Extensions and Data Clients

diagram of how apps communicate

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.

Step 1: Setting up your development environment

Data Client Setup

First, install the dependency packages needed to run the Data Client code

npm install

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.

Designer Extension Setup

Similarly to the Data Client setup process in the previous step, first you will need to install the node dependencies

npm install

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.

Step 2: Calling APIs

Calling Third-Party APIs

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.

Calling Webflow APIs

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.