The MiddleHuman Blog

Tales from the frontlines of helping humans wrangle AI technology

The Great Butterfly Saga: When AI Meets Decorative Chaos

Sometimes the simplest ideas turn into the most entertaining challenges. Let me tell you about our recent adventure with butterflies. Yes, butterflies. On a website. It's exactly as chaotic as it sounds.

How It Started: A Simple Idea

We wanted to add a little whimsy to our website. You know, make it feel friendly and approachable. "Let's add some floating butterflies!" someone said. "It'll be fun!" they said. "How hard could it be?" they asked.

Famous last words.

The initial implementation was straightforward enough. We created a cute little JavaScript function that would spawn random butterflies across the page every few seconds. They'd float around gracefully, fade in and out, and generally bring some life to the page.

The Vision: Delightful butterflies appearing occasionally, adding charm without being distracting.

The Reality: An unstoppable butterfly apocalypse that refused to die.

Plot Twist: The Chatbot Wants Control

Here's where things got interesting. We have an AI chatbot on the site (because of course we do - we're MiddleHuman after all). And someone had a brilliant idea: "What if the chatbot could turn off the butterflies when talking to users?"

But not just automatically - that would be boring. No, the chatbot should discuss it with users first. Have a conversation. Build consensus. Make it feel like a real interaction.

This meant the AI needed to:

  • Understand when users wanted the butterflies controlled
  • Have natural conversations about it
  • Send special commands to the browser
  • Actually make the butterflies stop (the hard part, as we'd soon discover)

The Implementation: Three Moving Parts

Part 1: Teaching the AI About Butterflies

We updated the chatbot's system prompt to let it know it had butterfly powers. It could include special commands like [BUTTERFLIES_OFF] or [BUTTERFLIES_ON] in its responses. These would be invisible to users but would trigger actions in the browser.

For example, if you said "turn off the butterflies," the AI might respond: "Of course! I'll turn off the butterflies for you now." And hidden in that response would be the magic command.

Part 2: The Backend Command Parser

On the backend, we built a system to:

  • Scan AI responses for butterfly commands
  • Strip them out before showing the message to users
  • Package them as "actions" in the API response

This way, the frontend JavaScript would receive both the clean message and a list of actions to perform.

Part 3: The Butterfly Control System

We created a global window.ButterflyControl object with methods to start and stop the butterflies. Simple enough, right?

WRONG.

The Problem: They. Kept. Coming.

When we first tested the "stop" command, something peculiar happened. The existing butterflies would fade away beautifully. But then... new ones would appear. And more. And more.

It was like a horror movie, but with adorable insects.

User: "Can you turn off the butterflies?"

Chatbot: "Done! The butterflies are now off."

Butterflies: *continue spawning relentlessly*

Everyone: *confused screaming*

The Investigation: Following the Butterfly Trail

Time to dig into the code. Here's what we discovered:

The butterfly generator worked in two parts:

  1. createRandomButterfly() - Makes individual butterflies
  2. scheduleNextButterfly() - Recursively calls itself every 5-15 seconds

We had added a check to createRandomButterfly() to see if butterflies were enabled. Great! But the scheduler? It just kept chugging along, calling the creation function over and over, completely oblivious to whether butterflies were supposed to exist or not.

It was like telling a factory to stop making cars, but forgetting to turn off the assembly line. The workers kept showing up for their shifts, checking the "make cars?" sign, seeing "no," and going home. But they'd be back in 5-15 seconds to check again. Forever.

The Fix: Breaking the Loop

We needed to make the scheduler itself check if butterflies were still enabled:

function scheduleNextButterfly() {
    // Only schedule if butterflies are still enabled
    if (!window.ButterflyControl || !window.ButterflyControl.isEnabled) {
        console.log('Butterfly scheduler stopped');
        return;  // Break the recursive loop!
    }

    const delay = Math.random() * 10000 + 5000;
    setTimeout(() => {
        createRandomButterfly();
        scheduleNextButterfly();
    }, delay);
}

That simple return statement? That's what finally stopped the butterfly invasion. When butterflies get disabled, the next time the scheduler checks in, it sees the flag is off and just... stops. No more recursion. The loop is broken.

The Restart Problem: Round Two

Of course, stopping the butterflies was only half the battle. We also needed to be able to turn them back ON.

But how do you restart a recursive function that's already stopped? We solved this by saving a reference to the scheduler function in the control object:

// Save the scheduler function for restart capability
if (window.ButterflyControl) {
    window.ButterflyControl.schedulerFunction = scheduleNextButterfly;
}

// Later, when starting butterflies again:
start: function() {
    this.isEnabled = true;
    if (this.schedulerFunction) {
        this.schedulerFunction();  // Restart the loop!
    }
}

Lessons Learned

What did we learn from the Great Butterfly Saga of 2025?

  • Recursion is powerful but needs escape hatches: Any self-calling function needs a clear way to stop.
  • Test the edge cases: It's not enough for features to start working - they need to stop working too.
  • Simple features can have complex implementations: "Add butterflies" turned into a full control system with AI integration.
  • Debugging is a journey: From "they won't stop" to understanding schedulers to implementing proper controls - each step taught us something.
  • Have fun with it: Yes, this was frustrating at times, but it was also hilarious. An unstoppable butterfly invasion is the kind of bug that makes for great stories.

Try It Yourself!

If you're on our site right now, you can try the butterfly controls yourself! Just click the chat button and ask the AI to turn the butterflies on or off. It'll have a little conversation with you about it, and then actually control them.

And yes, they actually stop now. We promise. We tested it extensively.

(If they don't stop, please don't tell us. We need a break.)

Final Status: Butterflies are now fully under our control. They spawn when they should, stop when they should, and restart when they should. It only took several iterations, some confused debugging, and one very patient AI chatbot.

Butterfly Compliance Level: 100%

Our Sanity Level: Recovering

The End... Or Is It?

Who knows what other adventures await us in the world of human-AI collaboration? Maybe next time we'll add bees. Or dragons. Or sentient butterflies that refuse to be controlled by mere mortals.

Actually, let's not give the butterflies any ideas.

Until next time, this has been the MiddleHuman team, reminding you that sometimes the bugs are actual bugs, and sometimes they're just butterflies that won't listen.

Back to Home