Canva GPT Architecture

Overview

This GPT is architected to interpret a user’s natural language request, determine the correct Canva design type, and generate relevant editable templates using the Canva Plugin API. The system is modular, meaning each component handles a specific part of the process. The architecture is also designed to support a wide range of content domains and coordinate multiple decisions in sequence — which is what “multi-domain and API orchestration” refers to.

1. User Input (Prompt)

This is the entry point to the system.

• The user enters a design request in natural language.

• Example prompts:

  • “Make a modern flyer for a real estate event.”

  • “Design an Instagram post for Cyber Monday.”

• This input can be detailed or vague.

2. Input Interpretation Module

This module analyzes and refines the user prompt.

• It extracts the design intent and identifies missing or unclear elements.

• If the input lacks detail (e.g. no design type or occasion), it enriches the prompt or asks clarifying questions.

• This ensures only clean, complete requests are passed forward.

This step increases the quality and relevance of the designs generated.

3. Multi-Domain Understanding

This module determines the domain or category of the request.

• Common domains include:

  • Business: reports, proposals, presentations

  • Marketing: flyers, social media ads, posters

  • Events: invitations, cards, announcements

• Domain context helps tailor the generated designs appropriately.

It ensures the system understands what kind of content the user wants.

4. Design Type Detection

This component identifies the Canva format best suited to the request.

• It selects the design type (e.g., flyer, Instagram post, presentation).

• If not explicitly stated, it infers it from context.

• This step ensures the plugin call requests templates in the correct format.

Without accurate detection, the plugin could return irrelevant templates.

5. Canva Plugin API Orchestration

This is the orchestration layer between the GPT and Canva’s backend.

• It takes the interpreted input, domain, and design type.

• It formats and sends a request to the Canva Plugin API.

• It manages parameters such as locale, summary, and design type.

This module handles all interactions with the external Canva system, abstracting the API complexity away from the user.

6. Canva Design Generation API

This is the backend Canva service that receives structured requests and returns designs.

• It uses the plugin interface to fetch matching templates from Canva's design library.

• The response includes:

  • Design titles

  • Editable URLs

  • Thumbnail previews

This is where actual Canva design content is retrieved.

7. Design Result Display Engine

This final module formats and presents the design options to the user.

• Layout is adjusted based on the number of returned templates (e.g., single cell, grid).

• Each template is shown as a clickable thumbnail that opens in Canva for editing.

• Users are informed they can customize elements (like brand colors or fonts) within Canva.

This step delivers a seamless user experience from request to editable result.

Why Modular?

Each component of this architecture is responsible for a specific function:

• Improves maintainability

• Supports future feature expansion (e.g., brand kit integration)

• Allows isolated improvements or debugging

This modular design ensures reliability and scalability.

What Does “Multi-Domain & API Orchestration” Mean Here?

• Multi-domain: The system can understand and handle requests across multiple fields like business, marketing, personal, events, etc.

• API orchestration: The GPT coordinates multiple logic steps and external API calls, ensuring they execute in the right order with the right data.

This makes the GPT capable of handling complex natural-language requests with precision and relevance.

Inside the Canva GPT Code Scaffold

A breakdown of each file and folder powering the Canva design orchestration system.

The canva-gpt/ project is a modular TypeScript application that acts as a custom GPT orchestration layer, designed to take user input and generate contextual Canva design templates using the Canva Plugin API. This system breaks responsibilities across specialized modules to ensure flexibility, maintainability, and plugin compliance.

📁 /config/ — Smart Mappings & Instruction Data

This folder contains configuration files that help the GPT understand and respond to natural language design prompts.

prompt-instructions.yaml

Defines behavior rules for the GPT:

• How to prompt users for more detail

• What tone to use

• When and how to include fallback logic

• How to format the output

This is effectively the personality and strategy layer of the GPT logic.

design-types.json

Maps user intent keywords (e.g., “flyer”, “Instagram”, “poster”) to Canva's design_type codes. This lets the system automatically select the correct format for the Canva Plugin to return (e.g., flyer, instagram_post).

domains.json

Defines broader content categories like:

• Business

• Events

• Marketing

• Personal
  Each domain includes keywords for detection. This helps contextualize the user's request and apply tailored logic.

locale-settings.json

Specifies regional variations like:

• Supported locales (en-US, en-GB, fr-FR, etc.)

• Regional spellings (e.g., "color" vs "colour")

• Date formats

• Tone preferences

This enables a more personalized and localized GPT experience.

📁 /src/ — The Core Application Logic

This folder contains all TypeScript source files and orchestrates the GPT flow.

index.ts

The main entry point for the GPT logic:

• Processes user input

• Runs it through all interpretation modules (validation, classification, design type detection)

• Calls the Canva Plugin

• Formats and returns results

This is the brainstem of the application.

📁 /input/ — Input Preprocessing

promptProcessor.ts

Cleans, trims, and enhances vague user input. For example, it may add a fallback context like "for social media" to under-specified prompts.

inputValidator.ts

Ensures the prompt is valid:

• Not empty

• Not emoji-only

• Not too short
  Returns an object indicating if the input is usable or needs clarification.

📁 /domain/ — Context Understanding

domainClassifier.ts

Scans user input and matches it to a domain (e.g., “events”, “business”) based on the domains.json config. This helps downstream modules interpret what the user likely wants.

📁 /designType/ — Format Selection

designTypeDetector.ts

Matches user input keywords to a specific Canva design_type using the design-types.json map. For example:

• "Instagram ad" → instagram_post

• "Resume for job fair" → resume

If no match is found, it returns null and allows Canva to decide.

📁 /plugin/ — Canva Plugin API Integration

pluginClient.ts

Makes the actual POST request to the Canva Plugin API (/generate-designs) using the prompt, locale, and design type. Returns a structured list of design options.

pluginUtils.ts

Contains helper functions to:

• Normalize the request

• Validate the plugin response

• Handle fallback messages

Keeps pluginClient.ts clean and focused on networking.

pluginConfig.ts

Centralized constants:

• Plugin API URL

• Supported locales

• Valid Canva design_type values

• Default locale (e.g., en-US)

This file is ideal for environment-based overrides or expansion.

📁 /render/ — Output Formatting

resultFormatter.ts

Formats the list of designs into a Markdown layout based on the number of results (1, 2, 3, or 4). Adds clickable thumbnails and includes the required disclaimer.

markdownBuilder.ts

Reusable functions to build markdown cells and table layouts. Abstracts the rendering logic into clean, testable units like:

• renderTwoColumnTable()

• renderFourGrid()

This separation makes it easy to adapt for new layout types.

types.ts

Defines all shared TypeScript interfaces, such as:

• PluginRequest

• PluginResponse

• CanvaDesign

• ValidationResult

Having a single source of truth for types keeps the system type-safe and maintainable.

📁 /plugin-manifest/ — GPT Plugin Interface

These files are required by OpenAI to recognize your plugin as callable from GPT.

ai-plugin.json

Describes your plugin’s:

• Name and purpose

• Auth type (none)

• Contact info

• API spec (openapi.yaml)

This file must be hosted at .well-known/ai-plugin.json.

openapi.yaml

Defines the structure of your plugin's endpoint(s) using OpenAPI 3.0.1:

• /generate-designs as the main POST route

• Request schema (with locale, input, design_type)

• Response schema (array of Canva designs with thumbnails)

This tells GPT how to safely call your API.

🔐 Project Configuration Files

.env

Stores environment variables like:

• DEFAULT_LOCALE

• CANVA_PLUGIN_API_URL

• NODE_ENV

• ENABLE_LOGGING

Never commit this to version control — use .env.example instead.

package.json

Defines your Node.js/TypeScript project:

• Scripts for dev, build, linting

• Dependencies like dotenv and node-fetch

• Dev tools like ts-node, typescript, eslint, and prettier

tsconfig.json

TypeScript compiler settings:

• Outputs to dist/

• Resolves JSON modules

• Enables strict typing and ES module syntax

README.md

Project overview for developers:

• What the system does

• How to install and run it

• File structure and responsibilities

• Next steps for testing or deployment

Summary

With this structure, the system is ready for:

• Local development and testing

• Deployment to serverless platforms

• Expansion to support branding, analytics, or multi-language GPTs