Generative AI app

You can build a generative AI app quickly using Canva's Generative AI template, which is available through the @canva/create-app⁠(opens in a new tab or window) 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.

1. Use the following command to install and run @canva/create-app⁠(opens in a new tab or window):

   npx @canva/create-app@latest

   BASH

   Copy

2. Select Generative AI using your arrow keys, and press enter to confirm the selection.

3. Enter your app's name.

4. Choose whether to initialize a Git repository.

5. Choose whether to use npm to handle dependencies.

6. 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

   Copy

7. Change into your new app's directory, replacing example-gen-ai-app with your app's name:

   cd example-gen-ai-app

   BASH

   Copy

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

1. Change into your app directory.

2. Locate your app's .env file.

3. Open the .env file, and paste your app ID into the file:

   CANVA_APP_ID=<your App ID>

   BASH

   Copy

4. Navigate back to Your apps⁠(opens in a new tab or window), and click on your app name to open the configuration page.

5. Under Configure your app, go to App Origin, and copy the app origin value.

6. Include the app origin in your .env file:

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

   BASH

   Copy

7. 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

   Copy

8. Save the changes

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

1. In the root directory for your app, start the app preview with the following command:

   npm start

   BASH

   Copy

   After the app has started, the Development URL (Frontend) and Base URL (Backend) local addresses are shown in the output.

2. Navigate back to the Your apps tab⁠(opens in a new tab or window) and select your app.

3. 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.

4. 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.

5. Click Open if prompted. This message only appears when using an app for the first time.

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.

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

1. Open the src/app.messages.ts file.

2. 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

   Copy

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

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

1. Open the src/components/loading_results.tsx file.

2. Modify the interval duration values:

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

   TYPESCRIPT

   Copy

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

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

1. Open the src/components/prompt_input.tsx file.

2. 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

   Copy

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.

1. Open the backend/routers/image.ts file.

2. 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

   Copy

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.

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⁠(opens in a new tab or window) in the canva-apps-sdk-starter-kit repository.
• Manual: To configure your app to authenticate with a third-party platform, see Manual authentication .

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