debug-ai-image-generation

What problem does it solve?

AI-generated images from multimodal LLMs accessed via OpenRouter fail to display in chat user interfaces because the backend does not correctly parse the valid image data paths in Server-Sent Event (SSE) responses.

Core Features & Use Cases

• Structured diagnostic workflow: Guides developers to test the OpenRouter API directly to identify the correct image data field in SSE chunks.
• Corrected backend implementation: Provides working code snippets to fix the SSE handler, extracting usable base64 image data from the delta.images field instead of non-usable encrypted binary from reasoning_details.
• Verification steps: Includes backend restart and browser console tests to confirm images render correctly after fixes.
• Use case: For developers building chat applications that integrate OpenRouter's multimodal models, this skill cuts down image display debugging time from hours to minutes by eliminating guesswork around response structure.

Quick Start

Use the debug-ai-image-generation skill to resolve missing AI-generated image display in your OpenRouter/Gemini chat application by updating your backend SSE handler to parse the correct image data field.