Mascot Generator

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

The transparent Parameter

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

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

Best Practices

1. Always use transparent: true for web/UI - Transparent backgrounds integrate better with any theme
2. Be specific in prompts - Include pose, expression, and accessories for best results
3. Use descriptive names - Name files by use case (e.g., loading, error, celebration)
4. Check existing variations - Before generating, check /mascot/variations/ for reusable images
5. Full body for heroes - Use "full body" in prompt for landing page mascots
6. 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

Favicon / Small Icon Best Practices

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

1. Use style variation type - This allows for icon-optimized styling
2. Request simplified design - Include phrases like "bold thick outlines", "simple shapes", "high contrast"
3. Tight crop on face - Specify "just the face/head tightly cropped"
4. Avoid fine details - Request "no fine fur details" to prevent muddy appearance
5. Emphasize silhouette - Request "focus on recognizable silhouette"
6. 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"
}