Mascot Generator

Generate on-the-fly variations of the Orient mascot (Ori the border collie with blue bandana).

Quick Start

Generate a mascot with transparent background (recommended for web/UI)

{
  "variation_type": "pose",
  "prompt": "friendly waving pose, clean cartoon style",
  "output_name": "waving",
  "transparent": true
}

Generate a mascot with background (faster, for non-web use)

{
  "variation_type": "seasonal",
  "prompt": "wearing a Santa hat with snowy background",
  "output_name": "winter-holiday"
}

Tool: `ai_first_generate_mascot`

Parameters

| Parameter | Required | Description | | ---------------- | -------- | -------------------------------------------------------------------------------------- | | variation_type | Yes | One of: pose, expression, background, seasonal, accessory, style, custom | | prompt | Yes | Detailed description of the desired variation | | output_name | No | Filename (without extension) for the generated image | | transparent | No | Set to true for transparent PNG (uses OpenAI, requires OPENAI_API_KEY) |

The `transparent` Parameter

IMPORTANT: This is the key parameter for web/UI mascots.

| transparent | Backend | Result | Use Case | | ----------------- | ------------------ | ------------------------- | -------------------------------------- | | true | OpenAI gpt-image-1 | PNG with alpha channel | Landing pages, UI components, overlays | | false (default) | Gemini Nano Banana | PNG with solid background | Marketing materials, social media |

Variation Types

pose - Different body positions

"sitting attentively", "waving hello", "running joyfully", "lying down relaxed"

expression - Facial expressions

"thinking deeply", "happy and excited", "surprised", "focused and determined"

background - Scene/environment changes (only when transparent: false)

"office setting with monitors", "outdoors in a park", "abstract geometric pattern"

seasonal - Holiday and seasonal themes

"wearing Santa hat with snow", "spring flowers blooming", "Halloween costume"

accessory - Add items to the mascot

"wearing sunglasses", "holding a coffee cup", "with a laptop", "wearing headphones"

style - Art style transformations

"pixel art 8-bit", "watercolor painting", "minimalist line art"

custom - Free-form variations

Any combination or creative prompt

Usage Examples

Mascot for landing page hero (transparent)

{
  "variation_type": "pose",
  "prompt": "full body sitting attentively, alert friendly expression, ready to help",
  "output_name": "hero-attentive",
  "transparent": true
}

Mascot for loading state (transparent)

{
  "variation_type": "expression",
  "prompt": "thinking pose with paw on chin, looking upward thoughtfully",
  "output_name": "loading",
  "transparent": true
}

Mascot for error page (transparent)

{
  "variation_type": "expression",
  "prompt": "apologetic expression, slightly worried but helpful look",
  "output_name": "error",
  "transparent": true
}

Mascot for celebration (transparent)

{
  "variation_type": "accessory",
  "prompt": "wearing a party hat, celebrating with happy expression",
  "output_name": "celebration",
  "transparent": true
}

Holiday mascot with background

{
  "variation_type": "seasonal",
  "prompt": "wearing cozy winter sweater and Santa hat, snowy festive background",
  "output_name": "winter-2026"
}

Output

The tool returns:

success - Whether generation succeeded
message - Success/error message
path - Relative URL (e.g., /mascot/variations/celebration.png)
fullPath - Absolute file path
variationType - The type used
prompt - The prompt used

Images are saved to packages/dashboard/frontend/public/mascot/variations/.

Requirements

| Feature | Required | | ----------------------- | ---------------------------------------------------- | | Basic generation | GEMINI_API_KEY | | Transparent backgrounds | OPENAI_API_KEY | | Base mascot | packages/dashboard/frontend/public/mascot/base.png |

Best Practices

Always use transparent: true for web/UI - Transparent backgrounds integrate better with any theme
Be specific in prompts - Include pose, expression, and accessories for best results
Use descriptive names - Name files by use case (e.g., loading, error, celebration)
Check existing variations - Before generating, check /mascot/variations/ for reusable images
Full body for heroes - Use "full body" in prompt for landing page mascots
Portrait for icons - Omit "full body" for smaller UI elements

Web Integration

// Transparent background mascot (recommended)
<img
  src="/mascot/variations/hero-attentive.png"
  alt="Ori mascot"
  className="w-64 h-auto object-contain"
/>

// Responsive sizing
<img
  src="/mascot/variations/loading.png"
  alt="Loading..."
  className="w-24 h-24 md:w-32 md:h-32 object-contain"
/>

Use object-contain to preserve aspect ratio
Generated images are 1024x1024 - use CSS for sizing
Always include descriptive alt text

Troubleshooting

Generated image has solid background

Cause: transparent parameter not set or set to false
Fix: Add "transparent": true to your request

"OPENAI_API_KEY not set" error

Cause: Trying to use transparent: true without API key
Fix: Add OPENAI_API_KEY=sk-... to your .env file

Image doesn't look like the mascot

Cause: Prompt too vague or too different from base style
Fix: Include "border collie dog with blue bandana, cartoon style" context

Generation is slow

OpenAI generation (transparent) takes 15-30 seconds
Gemini generation (non-transparent) takes 5-10 seconds

Cross-Platform Usage

This tool works from:

WhatsApp/Slack - "Generate a mascot waving with transparent background"
Cursor/Claude Code - Call ai_first_generate_mascot with transparent: true
Scripts - Use the MCP tool programmatically

Common Mascot Variations

| Use Case | Suggested Prompt | Transparent | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | Hero section | "full body sitting attentively, friendly expression" | Yes | | Loading state | "thinking with paw on chin, looking upward" | Yes | | Error page | "apologetic expression, slightly worried" | Yes | | Success | "celebrating with happy expression" | Yes | | Empty state | "curious and friendly, looking around" | Yes | | Welcome | "waving hello cheerfully" | Yes | | Working | "wearing headphones like tech support" | Yes | | Holiday | "wearing Santa hat, snowy background" | No | | Favicon/Tab icon | "simple minimalist favicon icon design, just the face/head tightly cropped, bold thick outlines, very simple shapes, high contrast, no fine fur details, focus on recognizable silhouette with bright blue bandana accent, designed to look great at 32x32 pixels, flat design, clean vector style" | No |

Favicon / Small Icon Best Practices

When generating mascots for favicons or small tab icons (16x16 to 32x32 pixels):

Use style variation type - This allows for icon-optimized styling
Request simplified design - Include phrases like "bold thick outlines", "simple shapes", "high contrast"
Tight crop on face - Specify "just the face/head tightly cropped"
Avoid fine details - Request "no fine fur details" to prevent muddy appearance
Emphasize silhouette - Request "focus on recognizable silhouette"
Don't use transparent - Favicons render better with solid backgrounds

Example Favicon Generation

{
  "variation_type": "style",
  "prompt": "simple minimalist favicon icon design, just the face/head tightly cropped, bold thick outlines, very simple shapes, high contrast, no fine fur details, focus on recognizable silhouette with bright blue bandana accent, designed to look great at 32x32 pixels, flat design, clean vector style",
  "output_name": "favicon"
}