myaidev-method 0.2.12 → 0.2.16

package/src/templates/claude/commands/myai-generate-visual.md

@@ -0,0 +1,318 @@
+---
+name: myai-generate-visual
+description: Generate images or videos for content using AI
+platforms: claude-code
+---
+
+# Generate Visual Content
+
+Generate images or videos using AI generation APIs (Google Gemini Flash, Imagen 3, DALL-E 3, Veo 2).
+
+## Usage
+
+```bash
+/myai-generate-visual "prompt" [options]
+```
+
+## Options
+
+- `--type <type>` - Content type: hero, illustration, diagram, screenshot, video (default: hero)
+- `--service <service>` - Service: gemini, imagen, dalle, veo (default: auto-select)
+- `--size <size>` - Image size: 1024x1024, 1792x1024, 1024x1792 (default: 1024x1024)
+- `--quality <quality>` - Quality: standard, hd (default: standard)
+- `--description <desc>` - Filename description (default: derived from prompt)
+
+## Examples
+
+### Generate Hero Image (Auto-Select Service)
+```bash
+/myai-generate-visual "Modern developer workspace with AI coding assistant"
+```
+
+### Generate Diagram with Specific Service
+```bash
+/myai-generate-visual "Microservices architecture diagram" --type diagram --service gemini
+```
+
+### Generate High-Quality Illustration
+```bash
+/myai-generate-visual "AI brain network visualization" --type illustration --service dalle --quality hd
+```
+
+### Generate Video
+```bash
+/myai-generate-visual "Product demo: authentication flow" --type video --service veo
+```
+
+### Generate with Custom Description
+```bash
+/myai-generate-visual "Team collaboration workspace" --type hero --description "team-workspace"
+```
+
+## Prerequisites
+
+Configure at least one API key:
+
+```bash
+/myai-configure visual
+```
+
+Or manually add to `.env`:
+
+```bash
+# Google AI (for Gemini, Imagen, Veo)
+GOOGLE_API_KEY=your_key_here
+
+# OpenAI (for DALL-E)
+OPENAI_API_KEY=your_key_here
+```
+
+Get API keys:
+- **Google AI**: https://ai.google.dev/
+- **OpenAI**: https://platform.openai.com/api-keys
+
+## Available Services
+
+| Service | Speed | Cost | Quality | Best For |
+|---------|-------|------|---------|----------|
+| Gemini Flash | ⚡⚡⚡ Fast | $0.02 | Good | Quick hero images, high volume |
+| Imagen 3 | ⚡⚡ Medium | $0.03 | Excellent | Premium hero images, photorealistic |
+| DALL-E 3 | ⚡⚡ Medium | $0.04-0.12 | Excellent | Creative illustrations, concept art |
+| Veo 2 | ⚡ Slow | $0.10 (est.) | Good | Product demos, animated diagrams |
+
+## How It Works
+
+1. **Check Configuration**: Validates API keys are configured
+2. **Gather Requirements**: Analyzes prompt, type, and service preferences
+3. **Estimate Cost**: Shows cost estimate and current budget usage
+4. **Generate**: Calls appropriate AI service to generate content
+5. **Save**: Stores in organized directory (`content-assets/images/YYYY-MM-DD/`)
+6. **Return Markdown**: Provides ready-to-use markdown embed code
+
+## Output
+
+The command outputs:
+
+```
+🎨 Generating hero image using gemini...
+✅ Image generated successfully!
+
+📸 Details:
+   Service: Gemini 2.5 Flash Image
+   Type: Hero Image
+   Cost: $0.02
+   File: ./content-assets/images/2025-11-19/hero-developer-workspace-123456.png
+   Size: 342.5 KB
+
+💰 Budget Status:
+   Today: $0.24 / $5.00 (5%)
+   Month: $3.67 / $50.00 (7%)
+
+📋 Markdown Reference:
+![Modern developer workspace](./content-assets/images/2025-11-19/hero-developer-workspace-123456.png)
+
+Copy and paste into your content ↑
+```
+
+## File Organization
+
+Generated files are automatically organized by date:
+
+```
+content-assets/
+├── images/
+│   ├── 2025-11-19/
+│   │   ├── hero-developer-workspace-123456.png
+│   │   ├── illustration-ai-concept-234567.png
+│   │   └── diagram-architecture-345678.png
+│   └── 2025-11-20/
+│       └── ...
+└── videos/
+    └── 2025-11-19/
+        └── video-product-demo-456789.mp4
+```
+
+## Budget Management
+
+Default budget limits (configurable in `.env`):
+
+- **Daily Budget**: $5.00 USD
+- **Monthly Budget**: $50.00 USD
+- **Warning Threshold**: 80%
+
+The command will:
+- Show cost estimate before generating
+- Display current budget usage
+- Warn when approaching limits
+- Prevent exceeding daily/monthly budgets
+
+To adjust limits, add to `.env`:
+
+```bash
+VISUAL_DAILY_BUDGET=10.00
+VISUAL_MONTHLY_BUDGET=100.00
+```
+
+## Error Handling
+
+### No API Keys Configured
+```
+⚠️ Visual content generation not configured
+
+To enable image/video generation:
+1. Run: /myai-configure visual
+2. Or add to .env: GOOGLE_API_KEY=xxx or OPENAI_API_KEY=xxx
+
+Get API keys:
+• Google: https://ai.google.dev/
+• OpenAI: https://platform.openai.com/api-keys
+```
+
+### Budget Exceeded
+```
+⚠️ Daily budget limit reached ($5.00)
+
+Current usage: $5.02
+Daily limit: $5.00
+
+Options:
+1. Increase limit in .env: VISUAL_DAILY_BUDGET=10.00
+2. Wait until tomorrow (resets at midnight)
+3. Continue anyway (requires confirmation)
+```
+
+### Rate Limited
+```
+⚠️ Rate limited by API
+
+Options:
+1. Wait 60 seconds and retry automatically
+2. Switch to different service (DALL-E has separate limits)
+3. Cancel operation
+```
+
+## Instructions for Agent
+
+When this command is invoked, you should:
+
+1. **Load Utilities**
+   ```javascript
+   const { hasAnyAPIKeys, getConfigStatusMessage, validateVisualConfig } =
+     require('./src/lib/visual-config-utils.js');
+   const { generateImage } = require('./src/lib/visual-generation-utils.js');
+   const { saveImage, saveVideo, generateMarkdownReference } =
+     require('./src/lib/asset-management.js');
+   ```
+
+2. **Check Configuration**
+   ```javascript
+   if (!hasAnyAPIKeys()) {
+     console.log(getConfigStatusMessage());
+     return;
+   }
+   ```
+
+3. **Parse Arguments**
+   - Extract prompt from command
+   - Parse --type, --service, --size, --quality, --description options
+   - Set defaults if not provided
+
+4. **Estimate Cost and Check Budget**
+   ```javascript
+   const { estimateCost } = require('./src/lib/visual-generation-utils.js');
+   const { checkBudgetLimit } = require('./src/lib/asset-management.js');
+
+   const cost = estimateCost(service, { quality, size });
+   const budget = await checkBudgetLimit(cost);
+
+   if (!budget.canProceed) {
+     // Show budget error and options
+   }
+   ```
+
+5. **Generate Visual Content**
+   ```javascript
+   const result = await generateImage(prompt, {
+     preferredService: service,
+     type: type,
+     quality: quality,
+     size: size
+   });
+   ```
+
+6. **Save to Assets**
+   ```javascript
+   const saved = await saveImage(result.buffer, {
+     type: type,
+     description: description || 'generated-image',
+     service: result.service,
+     cost: result.cost,
+     prompt: result.prompt
+   });
+   ```
+
+7. **Display Results**
+   - Show success message
+   - Show file details (path, size, cost)
+   - Show budget status
+   - Display markdown reference for easy copying
+
+## Integration with Content Creation
+
+This command can be used standalone or integrated with `/myai-content-writer`:
+
+```bash
+# Standalone: Generate images separately
+/myai-generate-visual "Article hero image" --type hero
+
+# Integrated: Generate article with images
+/myai-content-writer "Article Title" --with-images
+```
+
+## Best Practices
+
+### Prompt Quality
+- **Be specific**: "Professional developer workspace with dual monitors, VS Code, and coffee" vs "workspace"
+- **Include style**: "Modern tech aesthetic, clean, high quality"
+- **Specify mood**: "Professional, innovative, welcoming"
+
+### Service Selection
+- **Gemini Flash**: Fast iterations, drafts, high volume
+- **Imagen 3**: Final hero images, photorealistic content
+- **DALL-E 3**: Creative illustrations, unique concepts
+- **Veo 2**: Product demos, feature walkthroughs
+
+### Cost Optimization
+- Use Gemini Flash for drafts and iterations ($0.02)
+- Use Imagen/DALL-E for final versions ($0.03-0.04)
+- Generate multiple variations with cheap service first
+- Upgrade to premium service for selected images
+
+## Related Commands
+
+- `/myai-content-writer --with-images` - Generate article with images
+- `/myai-configure visual` - Configure API keys and preferences
+- `/myai-configure` - General configuration wizard
+
+## Troubleshooting
+
+### Images not generating?
+1. Check API keys: `cat .env | grep API_KEY`
+2. Verify configuration: `/myai-configure visual`
+3. Check budget limits: Look for budget warnings in output
+
+### Poor image quality?
+1. Try different service: `--service imagen` or `--service dalle`
+2. Use HD quality: `--quality hd` (DALL-E only)
+3. Improve prompt: Add more specific details and style guidance
+
+### Wrong image content?
+1. Refine prompt: Be more specific about desired content
+2. Try different service: Each AI has different strengths
+3. Enhance prompt: Add style, mood, technical requirements
+
+## See Also
+
+- [VISUAL_CONTENT_GENERATION_GUIDE.md](../../../VISUAL_CONTENT_GENERATION_GUIDE.md) - Complete visual generation guide
+- [CONTENT_CREATION_GUIDE.md](../../../CONTENT_CREATION_GUIDE.md) - Content marketing workflow
+- [USER_GUIDE.md](../../../USER_GUIDE.md) - General usage guide

package/src/templates/codex/commands/myai-generate-visual.md

@@ -0,0 +1,307 @@
+---
+name: myai-generate-visual
+description: Generate images or videos for content using AI
+platforms: codex-cli
+---
+
+# Generate Visual Content (Codex CLI)
+
+Generate images or videos using AI generation APIs via Node.js script execution.
+
+## Usage
+
+```bash
+myai-generate-visual "prompt" [--type=TYPE] [--service=SERVICE] [--size=SIZE] [--quality=QUALITY]
+```
+
+## Execute via Node.js
+
+For Codex CLI (Cursor), execute the generation script directly:
+
+```bash
+node node_modules/myaidev-method/src/scripts/generate-visual-cli.js "Modern developer workspace" --type=hero --service=gemini
+```
+
+Or add to your `package.json` scripts:
+
+```json
+{
+  "scripts": {
+    "generate-visual": "node node_modules/myaidev-method/src/scripts/generate-visual-cli.js"
+  }
+}
+```
+
+Then use:
+
+```bash
+npm run generate-visual "Your prompt here" -- --type=hero --service=gemini
+```
+
+## Options
+
+- `--type=<type>` - Content type: hero, illustration, diagram, screenshot, video (default: hero)
+- `--service=<service>` - Service: gemini, imagen, dalle, veo (default: auto-select)
+- `--size=<size>` - Image size: 1024x1024, 1792x1024, 1024x1792 (default: 1024x1024)
+- `--quality=<quality>` - Quality: standard, hd (default: standard)
+- `--description=<desc>` - Filename description (default: derived from prompt)
+
+## Prerequisites
+
+1. **Install MyAIDev Method**:
+   ```bash
+   npm install myaidev-method
+   ```
+
+2. **Configure API Keys**:
+
+   Option A: Use configuration script
+   ```bash
+   node node_modules/myaidev-method/src/scripts/configure-visual-apis.js
+   ```
+
+   Option B: Manual `.env` setup
+   ```bash
+   # Create/edit .env file
+   GOOGLE_API_KEY=your_google_api_key_here
+   OPENAI_API_KEY=your_openai_api_key_here
+   ```
+
+3. **Get API Keys**:
+   - **Google AI**: https://ai.google.dev/
+   - **OpenAI**: https://platform.openai.com/api-keys
+
+## Examples
+
+### Generate Hero Image
+```bash
+npm run generate-visual "Modern AI development workspace" -- --type=hero
+```
+
+### Generate Diagram
+```bash
+npm run generate-visual "System architecture diagram showing microservices" -- --type=diagram --service=gemini
+```
+
+### Generate Creative Illustration with DALL-E
+```bash
+npm run generate-visual "Futuristic AI assistant helping developer code" -- --type=illustration --service=dalle --quality=hd
+```
+
+### Generate Product Demo Video
+```bash
+npm run generate-visual "User authentication flow demonstration" -- --type=video --service=veo
+```
+
+## Available Services
+
+| Service | Speed | Cost | Quality | Best For |
+|---------|-------|------|---------|----------|
+| Gemini Flash | ⚡⚡⚡ | $0.02 | Good | Fast iterations, diagrams |
+| Imagen 3 | ⚡⚡ | $0.03 | Excellent | Hero images, photorealistic |
+| DALL-E 3 | ⚡⚡ | $0.04-0.12 | Excellent | Creative concepts, illustrations |
+| Veo 2 | ⚡ | $0.10 (est.) | Good | Product demos, animations |
+
+## Output
+
+Generated files are saved to:
+
+```
+content-assets/
+├── images/
+│   └── 2025-11-19/
+│       ├── hero-developer-workspace-123456.png
+│       ├── illustration-ai-assistant-234567.png
+│       └── diagram-architecture-345678.png
+└── videos/
+    └── 2025-11-19/
+        └── video-auth-demo-456789.mp4
+```
+
+The script provides markdown reference for embedding:
+
+```markdown
+![Modern developer workspace](./content-assets/images/2025-11-19/hero-developer-workspace-123456.png)
+```
+
+## Budget Management
+
+Set budget limits in `.env`:
+
+```bash
+VISUAL_DAILY_BUDGET=5.00      # Max $5 per day
+VISUAL_MONTHLY_BUDGET=50.00   # Max $50 per month
+VISUAL_WARN_THRESHOLD=0.80    # Warn at 80%
+```
+
+The script automatically:
+- Estimates costs before generation
+- Tracks daily and monthly spending
+- Warns when approaching limits
+- Prevents budget overruns
+
+## Error Handling
+
+### Missing Configuration
+```
+⚠️ No API keys configured
+
+To enable visual generation:
+1. Add to .env:
+   GOOGLE_API_KEY=your_key_here
+   OPENAI_API_KEY=your_key_here
+
+2. Or run configuration:
+   node node_modules/myaidev-method/src/scripts/configure-visual-apis.js
+```
+
+### Budget Exceeded
+```
+⚠️ Daily budget exceeded
+
+Current: $5.12
+Limit: $5.00
+
+Options:
+1. Increase VISUAL_DAILY_BUDGET in .env
+2. Wait until tomorrow (resets at midnight UTC)
+```
+
+### API Rate Limits
+```
+⚠️ Rate limited by API
+
+Retrying in 60 seconds...
+Or switch to different service: --service=dalle
+```
+
+## Integration with Cursor/Codex
+
+The visual generation integrates with Cursor by:
+
+1. **CLI-Friendly**: Execute via standard npm scripts
+2. **File Organization**: Outputs to standard `content-assets/` directory
+3. **Markdown Output**: Ready-to-paste markdown references
+4. **Budget Control**: Automatic cost tracking and limits
+
+## Cursor Rules Integration
+
+Add to your `.cursorrules` file:
+
+```
+# Visual Content Generation
+
+When generating images or videos for documentation or content:
+
+1. Use the myaidev-method visual generation:
+   npm run generate-visual "description" -- --type=hero --service=gemini
+
+2. Available types: hero, illustration, diagram, screenshot, video
+
+3. Available services:
+   - gemini (fast, $0.02)
+   - imagen (quality, $0.03)
+   - dalle (creative, $0.04-0.12)
+   - veo (video, $0.10)
+
+4. Always check budget limits before bulk generation
+
+5. Use markdown output in documentation:
+   ![Alt text](./content-assets/images/YYYY-MM-DD/filename.png)
+```
+
+## Programmatic Usage
+
+Use directly in your Node.js scripts:
+
+```javascript
+import { generateImage } from 'myaidev-method/src/lib/visual-generation-utils.js';
+import { saveImage } from 'myaidev-method/src/lib/asset-management.js';
+
+// Generate and save
+const result = await generateImage("Modern workspace", {
+  preferredService: 'gemini',
+  type: 'hero'
+});
+
+const saved = await saveImage(result.buffer, {
+  type: 'hero',
+  description: 'workspace',
+  service: result.service,
+  cost: result.cost,
+  prompt: result.prompt
+});
+
+console.log(`Saved to: ${saved.relativePath}`);
+```
+
+## Best Practices for Cursor
+
+### 1. Add to package.json
+```json
+{
+  "scripts": {
+    "visual": "node node_modules/myaidev-method/src/scripts/generate-visual-cli.js",
+    "visual:hero": "npm run visual -- --type=hero",
+    "visual:diagram": "npm run visual -- --type=diagram --service=gemini"
+  }
+}
+```
+
+### 2. Quick Generation
+```bash
+# Hero images (use Imagen for quality)
+npm run visual:hero "Article about AI" -- --service=imagen
+
+# Diagrams (use Gemini for speed)
+npm run visual:diagram "System architecture"
+```
+
+### 3. Batch Generation
+Create a script for multiple images:
+
+```javascript
+// scripts/generate-images.js
+const images = [
+  { prompt: "Hero: AI Development", type: "hero" },
+  { prompt: "Diagram: Architecture", type: "diagram" },
+  { prompt: "Illustration: Workflow", type: "illustration" }
+];
+
+for (const img of images) {
+  await generateAndSave(img.prompt, img.type);
+}
+```
+
+## Troubleshooting
+
+### Script not found?
+```bash
+# Verify installation
+npm list myaidev-method
+
+# Reinstall if needed
+npm install myaidev-method
+```
+
+### Images not generating?
+```bash
+# Check API keys
+cat .env | grep API_KEY
+
+# Verify configuration
+node node_modules/myaidev-method/src/scripts/configure-visual-apis.js
+```
+
+### Wrong file paths?
+Ensure you're using relative paths from project root:
+```markdown
+✅ ![Image](./content-assets/images/2025-11-19/hero.png)
+❌ ![Image](content-assets/images/2025-11-19/hero.png)
+```
+
+## See Also
+
+- [VISUAL_CONTENT_GENERATION_GUIDE.md](../../../VISUAL_CONTENT_GENERATION_GUIDE.md) - Complete guide
+- [CONTENT_CREATION_GUIDE.md](../../../CONTENT_CREATION_GUIDE.md) - Content workflow
+- [Cursor Documentation](https://cursor.sh/docs) - Cursor-specific features