Example
Neon Renegades: An AI-Powered Band Experience
Thank you Jodi, that means a lot coming from you! Your entries always raise the bar for all of us.
Happy to share how I built it! Here is the quick version:
1. I used Claude to generate the chatbot as a complete HTML file. I just described the look and feel I wanted and it wrote the code.
2. Next, I set up a free Cloudflare Worker account which acts as a secure middleman between the HTML and the AI API.
3. I got an API key from an AI provider (you can try OpenAI, Claude or any AI provider) to power the live responses.
4. Then plugged the API key into the Cloudflare Worker and deployed it to get a free live URL.
5. Then updated the HTML file with that Worker URL so the chatbot knows where to send requests.
6. Finally dropped the HTML file into Storyline as a Web Object, sized it to fit my slide and published.
The part that made the biggest difference was the system prompt inside the HTML. That is what gives the AI its personality and keeps it in character no matter what the learner asks.
If you want to try it over your week off I am happy to answer any questions along the way. It is more doable than it looks!
So - how would this run within a secure LMS like SAP's SuccessFactors - or would it always have to "exit" the system and open as an HTML/Webpage on an external server?
I'm guessing it couldn't be self-contained?
And I'm guessing the video is just a loop that you also generated using an AI of some sort?
Hi, Nick! The Cloudflare Worker acts as a proxy outside the LMS. Storyline calls it via JavaScript’s fetch(), so the chatbot runs right inside the course with no redirecting needed. The only thing to check is whether your org’s firewall blocks outbound calls to external URLs. If so, just whitelist the Worker URL and you’re set. Its fully self-contained in the SCORM package!
And yes, the looping AI-generated video is made with Pika.
Getting Started with the E-Learning Challenges
Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.