ai-image-display-handling

What problem does it solve?

When AI image generation models such as Gemini Flash or Stable Diffusion return results as base64 data URLs embedded directly in the message text field rather than the standard attachments array, chat user interfaces render these as long, unreadable raw strings instead of visible images, breaking the end-user experience for AI chatbot applications.

Core Features & Use Cases

• Frontend rendering detection: Adds regex-based validation for anchored base64 data URL patterns in message text to render proper <img> elements for AI-generated content, while preserving separate handling for user-uploaded attachments.
• Backend streaming fix for OpenRouter Gemini models: Handles the non-standard reasoning_details path used by Gemini image models to return raw base64 image data, and suppresses subsequent text chunks to prevent invalid data URL formation from stream concatenation.
• Visual styling and troubleshooting: Includes scoped CSS for inline AI-generated images and a troubleshooting guide for common issues like broken image sources, invisible images on dark backgrounds, and regex detection failures. Use case: A development team building a React-based AI chatbot that integrates with OpenRouter's Gemini image generation models can use this skill to ensure generated images display correctly for end users without manual string parsing or custom workarounds.

Quick Start

Apply this skill to your React chatbot's MessageBubble component and backend SSE streaming handler to automatically detect, prefix, and render AI-generated base64 images from message text fields as proper visual content instead of raw unreadable strings.