App templates

Generative AI app

Create a generative AI app on Canva with a focus on user experience

You can build a generative AI app quickly using Canva's Generative AI template, which is available through the @canva/create-app command-line interface (CLI).

The Generative AI template is a starting point for building an AI app, and helps you get started with setting up a user interface (UI). The template doesn't connect to an AI service, but provides an image generation mock-up UI, which lets you explore the UI without a potentially lengthy AI integration step.

This article shows you how to install the Generative AI template, run it locally, and customize it.

Step 1: Install the Generative AI template

Use the following command to install and run @canva/create-app:
```
npx @canva/create-app@latest
```
bash
Select Generative AI using your arrow keys, and press enter to confirm the selection.
Enter your app's name.
Choose whether to initialize a Git repository.
Choose whether to use npm to handle dependencies.

Confirm you've received the following output, which indicates the Canva app creator has finished the installation:

Canva App Creator

🎉 Your app example-gen-ai-app was successfully created 🎉

You should now run the following commands:
cd example-gen-ai-app
npm start

bash

Change into your new app's directory, replacing example-gen-ai-app with your app's name:
```
cd example-gen-ai-app
```
bash

Step 2: Create a new Canva app

Create a new Canva app in the Developer Portal. For more information, see Creating apps. Once you've created an app, under the Your apps tab, copy your app ID listed under the APP ID column.

Step 3: Configure the environment file

Change into your app directory.
Locate your app's .env file.
Open the .env file, and paste your app ID into the file:
```
CANVA_APP_ID=<your App ID>
```
bash
Navigate back to Your apps, and click on your app name to open the configuration page.
Under Configure your app, go to App Origin, and copy the app origin value.

Include the app origin in your .env file:

CANVA_APP_ID=<your App ID>
CANVA_APP_ORIGIN=<your App Origin>

bash

Set CANVA_HMR_ENABLED=TRUE in your .env file to enable Hot Module Replacement (HMR):
```
CANVA_APP_ID=<your App ID>
CANVA_APP_ORIGIN=<your App Origin>
CANVA_HMR_ENABLED=TRUE
```
bash
Save the changes

Step 4: Preview your app

You can now start the app preview to explore the UI.

In the root directory for your app, start the app preview with the following command:
```
npm start
```
bash
After the app has started, the Development URL (Frontend) and Base URL (Backend) local addresses are shown in the output.
Navigate back to the Your apps tab and select your app.
Under Configure your app, go to App source, and confirm that the Development URL (Frontend) address matches the address shown in the Development URL field.
Locate the Preview button in the top right of the page, and click it to open a new tab that loads the Canva editor with a preview of your app.
Click Open if prompted. This message only appears when using an app for the first time.

Step 5: Understand the AI user experience

With the example Generative AI app running locally, you can explore the overall user experience. The following list explains some of the essential user experience features and components that you can build on:

Word filtering: An obscenity filter provides basic restrictions against potentially offensive or harmful inputs.
Loading states: Since generating AI assets and media can take some time to load, providing placeholders, waiting time messages, and a progress bar communicates the request status to users.
Thumbnails previews: Providing thumbnails means your app gives faster visual feedback, and contributes to reducing load time.
A credit system: The demo credit system allows for users to make some free requests before they need to log in and purchase more credits to continue generating assets.
State management: React Context manages state changes for the example app user experience. For apps that need more complex state management, a more comprehensive library is recommended.
Routing: React Router provides routing and navigation for the example app.

Test out the Generative AI app by entering a prompt, pressing the Generate image button, and observing how the user experience essentials work together.

Step 6: Customize your app

Change the displayed text

This procedure explains how to change the text displayed in the app's FormField component:

Open the src/app.messages.ts file.

Change the contents of AppMessages, adjusting the text strings:

export const AppMessages = {
  .../* Some lines omitted */
  /** Messages related to prompts and user input validation. */
  promptInspireMe: () => "Try some image inspiration prompts",
  promptTryAnother: () => "Try another",
  promptLabel: () => "Describe the image you want to create",
  promptPlaceholder: () => "Enter at least five words to describe your image.",
  promptMissingErrorMessage: () => "Please describe what you want to create",
  promptNoCreditsRemaining: () => "No credits remaining .",
  promptObscenityErrorMessage: () =>
    "Something you typed may result in content that doesn’t meet our policies.",

typescript

At the top of the app panel, click ↻ to reload the app.

Modify the loading state time

This procedure explains how to adjust the timing and loading state set with the app Progress Bar component.

Open the src/components/loading_results.tsx file.

Modify the interval duration values:

const INTERVAL_DURATION_IN_MS = 500;
const TOTAL_PROGRESS_PERCENTAGE = 100;
const LOADING_THRESHOLD_IN_SECONDS = 1;

typescript

At the top of the app panel, click ↻ to reload the app.

Adjust the default inspiration prompts

This procedure explains how to adjust the default set of inspiration prompts:

Open the src/components/prompt_input.tsx file.

Adjust the examplePrompts strings:

/* Some lines omitted */
const examplePrompts: string[] = [
  "Cats ruling a parallel universe",
  "Futuristic city with friendly robots",
  "Magical forest with unicorns and dragons",
  "Underwater kingdom with colorful fish and mermaids",

typescript

Modify the image generation mock-up

The image generation mock-up works by returning the same image set in response to each prompt. This procedure explains how to modify the app's image set. Note that to set up an AI integration and connect to an API, you can modify backend/routers/image.ts as a starting point.

Open the backend/routers/image.ts file.

Modify the imageUrls list values:

/* Some lines omitted */
// In a real-world scenario, these URLs would point to dynamically generated images.
const imageUrls: ImageResponse[] = [
  {
    fullsize: {
      width: 1280,
      height: 853,
      url: "https://cdn.pixabay.com/photo/2023/02/03/05/11/youtube-background-7764170_1280.jpg",
    },
    thumbnail: {
      width: 640,
      height: 427,
      url: "https://cdn.pixabay.com/photo/2023/02/03/05/11/youtube-background-7764170_640.jpg",
    },
  },

typescript

Step 7: Connect to a backend

Since the Generative AI template uses an Express server as a sample backend, when moving to production, it's recommended to change the Express server to a higher capacity production backend. See Using a backend for more information.

Step 8: Add user authentication

To add user authentication, you can use frictionless or manual authentication methods:

Frictionless: Add App ID and JWT verification middleware to your app. This approach uses the auth.getCanvaUserToken() method to receive a JWT. For more information, see JSON Web Tokens. For an example, see the authentication demo in the canva-apps-sdk-starter-kit repository.
Manual: To configure your app to authenticate with a third-party platform, see Manual authentication .

Next steps

Once your app is ready, you can submit it for review through the Developer Portal. For more information, see the guide on submitting apps.