QuickStickers

QuickStickers is a Canva AI Agent app that generates four custom PNG stickers based on user input. This prototype app is built by modifying the Canva Generative AI template to replace placeholder images with real sticker generation powered by Gemini and background removal.

Features

• Generates four custom PNG stickers with transparent backgrounds based on user input
• Powered by Gemini AI
• Automatic background removal using @imgly/background-removal-node
• Canva integration so that users can drag and drop

Notice

Currently this app is a prototype and runs locally only.

Requirements

• Node.js v18 or v20.10.0
• npm v9 or v10

Note: To make sure you're running the correct version of Node.js, we recommend using a version manager, such as nvm. The .nvmrc file in the root directory of this repo will ensure the correct version is used once you run nvm install.

Setup Instructions

Run in the project folder:

npm install

Step 1: Start the local development server

To start the boilerplate's development server, run the following command:

npm start

The server becomes available at http://localhost:8080.

The app's source code is in the src/app.tsx file.

Step 2: Preview the app

The local development server only exposes a JavaScript bundle, so you can't preview an app by visiting http://localhost:8080. You can only preview an app via the Canva editor.

To preview an app:

1. Create an app via the Developer Portal.
2. Select App source > Development URL.
3. In the Development URL field, enter the URL of the development server.
4. Click Preview. This opens the Canva editor (and the app) in a new tab.
5. Click Open. (This screen only appears when using an app for the first time.)

The app will appear in the side panel.

Previewing apps in Safari

By default, the development server is not HTTPS-enabled. This is convenient, as there's no need for a security certificate, but it prevents apps from being previewed in Safari.

Why Safari requires the development server to be HTTPS-enabled?

Canva itself is served via HTTPS and most browsers prevent HTTPS pages from loading scripts via non-HTTPS connections. Chrome and Firefox make exceptions for local servers, such as localhost, but Safari does not, so if you're using Safari, the development server must be HTTPS-enabled.

To learn more, see Loading mixed-content resources.

To preview apps in Safari:

1. Start the development server with HTTPS enabled:

npm start --use-https

2. Navigate to https://localhost:8080.
3. Bypass the invalid security certificate warning:
   1. Click Show details.
   2. Click Visit website.
4. In the Developer Portal, set the app's Development URL to https://localhost:8080.
5. Click preview (or refresh your app if it's already open).

You need to bypass the invalid security certificate warning every time you start the local server. A similar warning will appear in other browsers (and will need to be bypassed) whenever HTTPS is enabled.

Running the app's backend

The backend is defined in backend/server.ts and automatically starts when you run npm start. It becomes available at http://localhost:3001.

To configure the backend:

1. Navigate to the Your apps page.

2. Copy the ID of an app from the App ID column.

3. In the create an .env file, set CANVA_APP_ID to the ID of the app.

4. Obtain your Gemini API key from Google AI Studio and add it to your .env file

   For example:

   CANVA_APP_ID=AABBccddeeff
   CANVA_APP_ORIGIN=#
   CANVA_BACKEND_PORT=3001
   CANVA_FRONTEND_PORT=8080
   CANVA_BACKEND_HOST=http://localhost:3001
   CANVA_HMR_ENABLED=FALSE
   GEMINI_API_KEY=AIfoplsthidcjrzipvgjkseb

5. Start the app:

   npm start

The ID of the app must be explicitly defined because it's required to send and verify HTTP requests. If you don't set up the ID in the .env file, an error will be thrown when attempting to run the example.