DEV Community

Cover image for Butu 🧸: a friendly browser companion that gets lonely when you leave your work
Rupam Das
Rupam Das

Posted on AI-assisted

Butu 🧸: a friendly browser companion that gets lonely when you leave your work

Hacktoberfest Open-Source AI Challenge: Ghost in the Machine Submission 👻🌼

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine.

What I Built

You open a tutorial for your assignment. Then another tab. Then a video that has absolutely nothing to do with the assignment.

Somewhere in the browser, a little teddy bear is still waiting for you.

Butu is a focus companion for Chrome and Firefox that slowly haunts the pages you get distracted by. You tell him what you're working on, choose a time, and press “Let's do it together!” A small open-weight model runs inside the browser to work out whether the page you're reading belongs to that task.

While you stay on task, Butu leaves you alone.

Butu's handwritten session form with a waving teddy bear and a DBMS task.

One task, a little time, and someone to sit beside you

Wander off, and he starts drawing in the margins of the page you're reading. At first, it feels like company. Stay away longer, and the headings begin speaking for him.

That’s my take on Week 4’s Ghost in the Machine: a page you opened to escape your work slowly becoming haunted by the companion you left behind.

At first, it's sweet. A few crayon stars in the margins. A little music box. Nothing that couldn't belong in a child's scrapbook.

A Minecraft page with small pastel crayon drawings at its edges.

Fifteen seconds away. He starts drawing

Stay away longer and the page starts to feel wrong. A heading has become:

Just one more page? Okay. That's what we called the last one.

The music is slower now. A small voice says:

Our work is still waiting.

Butu replaces headings on the Minecraft page with a handwritten reminder.

Forty-five seconds. Even the headings question your next page

At ninety seconds, the friendly drawings are scribbled over. The smiling face has crossed-out eyes, the heart is scratched through, and wavering crayon lines spread over the article. The tune slips out of key. Butu whispers:

It gets very quiet when you leave.

Crayon scribbles spread across the Minecraft article as Butu's expression changes

Ninety seconds. The tune is slipping

At three minutes, the music box winds down and stops. Frantic crayon fills the page. A handwritten line appears through the scribbles:

The song stopped. I'm still here with DBMS assignment on normalization.

Then one last whisper:

Your chair is still here.

Frantic crayon covers the Minecraft page around a handwritten line naming the unfinished task.

Three minutes. The music stops. He's still there

Go back to your work and the page returns to normal. A happy little chime plays. The drawings disappear, the original headings come back, and Butu lets you get on with it.

The distraction has become a haunted page: its headings speak for Butu, its margins spill over with scribbles, and his voice follows the music into silence. Returning to your work ends the haunting.

A scrapbook of the time you spent together

At the end of a session, “Open our diary” takes you to a handwritten scrapbook: your task, how long the session lasted, how many times you wandered, and the “Places you left me for.”

Butu draws himself differently depending on how much of the session he spent waiting. A happy bear on a good day. An uneasy one after more wandering. Something a little wrong after a long absence.

One of the diary captions reads:

I tried to draw us smiling.

The diary stays on your device. So does the list of places you visited.

Butu's local scrapbook with the DBMS session, a teddy-bear drawing and the distracting domain.

He kept a page for the time you spent together

Demo

YouTube Video Coming Soon

Code

GitHub logo ru-das / butu

🧸 A sweet teddy bear focus companion for Chrome and Firefox.

Butu

Butu is a little hand-drawn teddy bear who keeps you company while you work Wander onto an off-task page and Butu gets lonely: cheerful crayon doodles gradually turn strange, headings whisper about your task, and a music box slows down and slips out of tune. Return to work and the page is restored No gore, jump scares or screaming.

A desktop browser extension for Chrome and Firefox (Manifest V3), built with plain JavaScript, HTML and CSS. A small embedding model runs inside the browser to compare pages with your task. Character text uses authored templates.

Install

Download or clone this repository and open a terminal in its root directory:

./build.sh
Enter fullscreen mode Exit fullscreen mode

The build needs a POSIX shell and standard file utilities. It copies the source, vendored runtime and bundled assets into dist/chrome/ and dist/firefox/. There is no npm install, bundler, server, account or API key to configure.

Chrome

  1. Open…

Plain JavaScript, HTML and CSS. One source tree for both browsers. No framework, bundler, local server or API key.

Run ./build.sh, then load dist/chrome/ through Chrome's Load unpacked, or dist/firefox/manifest.json through Firefox's Load Temporary Add-on. The README has the complete instructions.

How I Built It

A tutorial is work. A different video isn't.

A domain blocker can't make that distinction: both videos live on YouTube.

Butu uses Xenova/paraphrase-MiniLM-L3-v2, an open-weight embedding model running locally through Transformers.js. It compares your task with the page title, description and a short excerpt of visible text.

The quantized weights are about 17.5 MB. They're downloaded once from Hugging Face and cached. After that, detection works offline. The model runs in a dedicated worker that is released when idle or when the session ends.

It isn't perfect. On the twenty pages used to tune the threshold for one DBMS task, it kept all ten relevant pages and caught six of the ten unrelated ones. Audio normalization fooled it: similar words, different subject. That's why domain overrides are part of the product.

But it did distinguish a useful database tutorial from an unrelated music video. You can do your assignment on YouTube without declaring the whole site forbidden.

My laptop made me cut a model

I built this on a machine with 4 GB of RAM. The original plan had a second model writing Butu's reminders.

The experiments made that a poor trade. SmolLM2 sometimes echoed the prompt or lost the task. FLAN-T5 gave a DBMS reminder this contribution:

a teddy bear is a teddy bear

Fair. Not helpful.

I cut runtime text generation and wrote Butu's lines instead. The embedding model handles relevance; the character's words come from authored templates, filled with the task locally.

That also let me spend more care on the writing. Butu can sound hurt without becoming cruel. The teddy bear, the crayon and the sweetness stay recognisable even as everything goes wrong.

Giving the bear a voice

The direction for Butu was a sweet, small, fictional teddy-bear companion. A voice that sounds pleased to sit beside you, then increasingly unsure whether you're coming back.

I created the custom voice through the ElevenLabs website and exported fifteen short lines. The delivery notes were as important as the sentences: gentle, hesitant, a sigh, a whisper. “Your chair is still here” needs very few words.

Custom Voice in ElevenLabs

Custom "Butu" voice made in ElevenLabs

Butu on ElevenLabs | ElevenLabs

Your chair is still here.

elevenlabs.io
Listen to the whisper

The extension bundles those recordings. Three of them carry the escalation: the gentle reminder, the lonely observation, the final whisper. They play once per page visit, so Butu doesn't repeat the same sentence over your shoulder.

ElevenLabs also generated the crayon-scribbling sound and the happy return chime. I composed the music box locally: one original melody in four states, from in tune to winding down. The transitions crossfade so the sound changes with the page.

Everything you hear during a session is bundled. No live synthesis, no key to enter, no task text sent out to become speech. The written reminders can name your assignment; the recorded voice stays generic. It keeps working with the internet disconnected.

Butu settings with volume, mute, a bundled voice-test button and ElevenLabs credits.

His voice comes with him. No key to enter

The haunting has to undo itself

The extension changes real pages, so restoration mattered from the beginning.

It saves the originals before changing headings, avoids editable fields, and pauses the haunting while a form field is focused. Hidden tabs don't accumulate off-task time. Reduced-motion preferences keep the drawings static.

The recorded Chrome and Firefox runs walked through all four stages at their real timings, then checked the restored document and its original heading nodes. They also covered the return audio, session expiry and diary. Butu can make a page look abandoned; he shouldn't damage the work sitting inside it.

Why Does Open Innovation Matter?

A tool that checks what you're reading needs a reason to be trusted.

For Butu, that starts with keeping the checking inside the browser. Your task, page excerpts, URLs and diary never go to a hosted inference service. The network audit in both browsers found only the model-file downloads on the exercised extension paths; cached detection and bundled sound worked with external connectivity blocked.

The embedding model gives the haunting its trigger: whether this page belongs to the task you set. Open weights let that decision happen inside the browser, without a separate AI server or a bill for checking another tab. Once the model is cached, the page can become haunted with the internet disconnected.

They also made experimentation affordable. I could compare the small models on my own hardware, keep the useful one and remove the one that made the experience worse.

ElevenLabs supplies the character voice and generated effects; the music and visual assets are local. That boundary lets Butu have a carefully voiced personality without sending someone's browsing context to a voice service.

What it can't do right now

  • It can mistake similar words for relevant work. The twenty-page test covered one DBMS task, not every subject or browsing habit. It missed four of the ten unrelated pages. Domain overrides help when its judgment is wrong.
  • It only sees a small part of the page. Detection uses the title, description and a short text sample. It doesn't watch a video's contents or understand everything happening inside an interactive app.
  • It stays inside the browser. Butu can't follow you into another desktop app or onto your phone, and browser-protected pages are outside his reach.
  • His spoken lines are recordings. Written reminders can include your task; the voice can't say your assignment aloud or hold a conversation. The model also needs an internet connection for its first download.

The Future of Butu

The first thing I'd like to improve is his judgment. I'd test more tasks and subjects, especially pages that share words with an assignment but mean something completely different. Butu should know when a tutorial is helping you, even if it's on the same site as your distractions.

I'd also like to make him easier to install. Right now, trying Butu means building and loading the extension yourself. A packaged release would make it easier for people to try him and tell me where he gets things wrong.

After that, I'd like to give him more little drawings and recorded lines, so spending time with him feels less repetitive. I'd keep the same approach: a small local model, bundled sound, and a diary that stays on your device.

The Spirit of It

Dolls and toys can be some of the scariest, most disturbing things in horror. I'm sure you know a few of those. I wanted to bring a little of that feeling into something useful. Then I thought: oh, I know! A focus tool. A teddy bear who keeps you company while you work. What could go wrong?

That's how Butu fits Ghost in the Machine. You welcome him into your browser, tell him your task, and settle down together. When you wander off, he starts drawing in the margins. It's sweet until the drawings get scratched over and the page's own headings start speaking for him.

My favourite detail is the music box. The cheerful little tune slowly slips out of key, winds down, and stops. By then, frantic crayon covers the article you were reading, and Butu whispers, “Your chair is still here.”

He's still the same bear who waved at you at the beginning. His voice stays soft, even as he takes over the page. I wanted that familiar horror feeling of looking at an innocent toy and suddenly wishing you hadn't left it alone.

Prize Categories

Best Use of ElevenLabs — the custom companion voice and generated crayon/return effects are part of the haunting itself: a gentle reminder, a lonely whisper, and a welcome back. Stage-driven playback, music transitions and bundled recordings keep that presence available offline.


Voice and sound effects generated with ElevenLabs — elevenlabs.io. Free-plan audio is for noncommercial use, with attribution. The music-box composition was created with AI assistance and synthesized locally.

Top comments (0)