What problem does it solve?
This Skill resolves the issue where AI-generated images fail to appear in a WhatsApp-style chatbot frontend even when the backend SSE stream is confirmed to be sending valid image data, eliminating hours of manual cross-layer debugging across backend services, frontend code, and infrastructure.
Core Features & Use Cases
- Backend Stream Validation: Checks backend logs for common issues like undersized express.json payload limits and incorrect image data path parsing in SSE chunks.
- Frontend Stream Consumption Debugging: Identifies duplicate getReader() calls that consume the SSE stream before image data can be processed and rendered to the DOM.
- Infrastructure & Auth Bug Resolution: Covers fixes for nginx routing misconfigurations, missing Vite proxy routes for image assets, missing Authorization headers in chat API requests, and critical cross-account data leakage caused by duplicate backend processes.
- Use Case: For example, if your WhatsApp-style chatbot shows no AI-generated images despite backend curl tests confirming valid base64 image SSE streams, this Skill walks you through checking frontend DOM state, fixing stream reader duplication, and adjusting body-parser limits to resolve the issue.
Quick Start
Use the whatsapp-chatbot-debug skill to resolve missing AI-generated images in your WhatsApp-style chatbot frontend when backend SSE streams are confirmed to be working correctly.