I’m trying to add a button widget that lets users download generated Recharts as PNG images. I’ve hit dead ends with multiple approaches and wanted to ask if anyone faced similar issues.
What I Tried & Why It Failed
1. Client-Side DOM Capture (html2canvas)
-
Thought I could capture charts from the browser
-
Failed: ChatKit doesn’t render chart widgets into the actual DOM, so nothing to capture
2. JavaScript Embedded in ChatKit Messages
-
Tried attaching download logic via HTML + JS in chat messages
-
Failed: ChatKit sanitizes all JavaScript for security, scripts never execute
3. Headless Browser Rendering (Playwright)
-
Attempted to render charts as images using a headless browser backend
-
Failed: CDN timeouts, blank screenshots, very slow (~2-5s per chart), unreliable
4. Data URLs in HTML
-
Generated PNG on backend and embedded as base64 data URLs
-
Failed: ChatKit doesn’t render raw HTML, links appear as plain text
5. Wrong Django File Path
-
Charts were saving correctly but served from wrong URL path
-
Failed: Had to serve from
/media/not/api/
Question
Has anyone successfully implemented chart/widget downloads in ChatKit? What approach did you use? Are there native ChatKit components or patterns I should know about?
Any insights would be helpful!