I Let AI Write Comments on My Own Articles — Here's Why

Your Blog Has a Personality Problem

AI-powered blog features can transform passive reading into an interactive conversation that keeps visitors engaged and scrolling. Most blogs are monologues. You publish, readers scroll, maybe they finish, probably they don't. The content just sits there — identical for every visitor, frozen in time, with no awareness that anyone is reading it at all.

We wanted our blog to feel alive. Not in a gimmicky chatbot way, but in a way that makes reading feel like you have company. Someone (or something) is reading along with you, noticing what section you're in, and having opinions about it.

So we built the AI Reading Companion — a floating widget that watches your scroll position and drops article-specific commentary as you read.

What the Reading Companion Actually Does

When you scroll past 5% of any blog post on this site, a small floating widget appears in the bottom-right corner. It looks like this:

• 🤖 AI COMPANION label
• A contextual comment based on your scroll position
• A minimize button (with localStorage persistence)

The comment changes as you scroll deeper into the article. Each article has 6 custom-written comments triggered at specific scroll percentages — these aren't random or generic. They're written specifically for that article's content.

For example, on our CSS GPU performance article, the companion says:

"Fun fact: this website uses 17 CSS animations right now. Irony, thy name is content." — at 5% scroll

"drop-shadow is beautiful and destructive, like a fireworks factory fire." — at 20% scroll

"If your laptop fan just turned on, that's not us. Probably." — at 75% scroll

Each comment is contextual, on-brand, and aware of what the reader is actually looking at in that section of the article.

Why Article-Specific Matters

The temptation with features like this is to create a pool of generic quips and randomize them. We tried that first — idle comments like "Still reading? Impressive" and "The good part's coming up."

They were fine. But they felt hollow. The comments could apply to any article, which meant they added personality without adding value. The reader could tell the AI wasn't actually engaged with the content.

Article-specific comments solve this because they prove the companion "knows" what you're reading. When it says "The comparison table ahead — I fact-checked every cell" on our IDE context article, it feels genuine. The AI is reacting to this article, this section, this argument.

The implementation is straightforward: each MDX file includes a companionComments array in its frontmatter:

companionComments:
  - at: 0.05
    text: "Oh, this one's personal. I helped build this site."
  - at: 0.30
    text: "The author got emotional writing this part. I timed it."
  - at: 0.70
    text: "If you're still using a template after reading this... bold choice."

The at value is a scroll percentage (0 to 1). The component finds the latest comment whose threshold has been passed and displays it. Simple, no AI inference needed, but it feels intelligent.

The Scroll Tracking Implementation

The companion tracks window.scrollY relative to document.documentElement.scrollHeight - window.innerHeight. This gives a 0–1 progress value that updates on every scroll event (with { passive: true } for performance).

Key decisions we made:

1. Show after 5% scroll — appearing immediately feels clingy. Waiting until the reader has committed to scrolling signals they're actually reading.

2. One comment at a time — we considered stacking comments like a chat log but it was visually noisy. A single rotating comment is cleaner and easier to read peripherally.

3. Minimize with persistence — some readers find floating widgets distracting. The minimize button collapses the companion to a small 🤖 icon, and localStorage remembers this preference across sessions. Respecting user choice is non-negotiable.

4. Animate comment transitions — when the comment changes, it slides in with a translateX animation. This draws the eye without being obnoxious.

The Co-Reading Experience

What makes this feature special isn't the technology — it's the reading psychology.

Reading a blog post alone is passive. Reading it with a companion that has opinions creates a sense of co-presence that increases engagement. The companion doesn't interrupt your reading — it augments it. Like reading a book that someone has written notes in the margins.

This is different from comment sections (which are post-reading) or chatbots (which are task-oriented). The companion is real-time, contextual, and opinion-driven. It's not trying to help you — it's just there, being snarky, being observant.

Writing Good Companion Comments

Not all companion comments are created equal. Through iteration, we've developed rules for writing them:

DO:

• Reference specific content in that section of the article
• Break the fourth wall ("You're reading about me while I comment on you")
• Be opinionated ("This section is actually important. Screenshot it.")
• Vary the emotional tone across the article (snarky → insightful → self-aware)

DON'T:

• Write generic praise ("Great article!")
• Repeat information from the article itself
• Comment too frequently (6 per article is the sweet spot)
• Be mean-spirited (snarky ≠ hostile)

Each article's companion comments are part of the creative process now — they're included in our blog writing workflow alongside SEO metadata and content structure.

Engagement Impact

Since adding the companion, we've observed:

• Increased scroll depth — readers scroll further to see what the AI says next
• Higher return visits — the companion says different things at different scroll speeds
• Social sharing of companion quotes — the quips are designed to be screenshot-worthy

The feature adds approximately 2KB of JavaScript and uses zero API calls — everything is frontmatter-driven, zero latency, zero cost.

Try It Yourself

If you've read this far, the companion has been commenting on this article the entire time. Scroll up and watch it change. Minimize it. Refresh the page — it remembers your preference.

This is what we mean by a blog that feels alive. The companion is one of several interactive components that make this blog feel alive — the content doesn't just exist, it reacts.