How I Added AI Auto-Reply to a Free Website Chat Widget in OpenClaw

I'm a non-technical product person. Our team built Knocket, a 100% free website contact widget. It works great for live chat, but it had no AI features. I wanted to add smart auto-reply — so I used OpenClaw and vibe coding to build it myself. This is the full story: what I did, what broke, and what I shipped.

What Is Knocket?

Knocket is a free-forever website contact widget that combines live chat, offline forms, social links, and meeting scheduling in one embed. You paste one line of code before your </body> tag and your site gets a branded chat bubble in the bottom-right corner.

• 1-minute deploy — copy one <script> tag, paste it into your HTML, done
• Live chat — visitors message you on your site, you reply from the Inbox dashboard
• Offline forms — automatically collect visitor contact info when you're away
• Social link aggregation — WhatsApp, Instagram, Telegram in one tap
• Zero-code customization — colors, icons, greetings, all configurable from the dashboard

It's built on Tencent Cloud IM infrastructure. Our engineering team built the console, SDK, and frontend widget from scratch. And it's completely free — no $39/month Intercom bill, no $20/month LiveChat subscription.

→ Try Knocket for free

What Was Missing? I Wanted AI Auto-Reply

After launch, customers started embedding Knocket on their websites and using the Inbox to handle visitor messages. But there was a problem: Knocket has no AI features. It's a pure communication tool — when a customer sends a message, you have to be watching the dashboard to reply.

Even with working hours configured, no one sits in front of the Inbox console all day.

As a non-technical product person, I thought: can I add an AI customer service agent to my own product?

Mature customer service platforms offer this — for $30–100/month. Building it as a proper feature would take significant engineering time. But what if I could use OpenClaw to control the browser and do it for me?

The goal:

Customer sends a message → AI detects it → auto-replies (or notifies me first so I can decide)

So I started building. Here's what actually happened.

Phase 1: Browser Automation — Quick and Dirty (v1)

The Idea

I used OpenClaw, an AI coding assistant with a browser automation skill that could control Chrome via command line — execute JavaScript, fill forms, click buttons.

The initial approach was straightforward:

Every 60 seconds → read the Inbox conversation list
→ Detect new message → AI generates reply
→ Fill the textarea → click Send
→ Notify me via Telegram

The AI assistant wrote a ~300-line shell script. It used browser eval to read page data and browser fill to type the reply.

It Worked! ...For About 5 Minutes

The AI could read messages and generate replies. I was excited for approximately 5 minutes.

Then everything broke.

The browser automation's fill and click commands weren't compatible with Knocket Inbox's React single-page app. The worst incident: I meant to reply to 1 customer, but the same reply got sent to all 3 active conversations.

On top of that, every browser operation stole window focus. I couldn't use my browser for anything else while the script was running.

Lesson learned: CLI-wrapped browser automation isn't precise enough for complex SPAs. You can't control the timing of each step.

Phase 2: Raw CDP + Background Execution (v2)

Complete Architecture Rewrite

I threw out the browser automation approach entirely. The new plan: use OpenClaw to connect directly to Chrome DevTools Protocol (CDP) using Python's websockets library.

Why CDP was better:

• Runs completely in the background — no popups, no focus stealing, no interference
• Every step returns a precise JSON response — you know if it succeeded or failed
• Full control over reconnection, retries, and timeouts

The new flow:

Customer sends message → script detects it in background
→ AI auto-replies → CDP sends it silently → Telegram notifies you

Stable, But I Wanted More

No more accidental cross-sends. Silent background operation. But I realized pure auto-reply wasn't enough.

For important customers or complex questions, I still wanted to review before responding.

A one-way webhook (notify me what happened) wasn't enough. I needed two-way communication: the bot tells me what's happening, I tell the bot how to respond.

Lesson learned: One-way notifications work for monitoring, not for decision-making. "Human-first, AI-fallback" requires a bidirectional bot.

Phase 3: Telegram Bot + Human-in-the-Loop (v3)

Why Telegram?

• Bot API is completely free and full-featured
• Bidirectional: bot notifies me, I reply to the bot, bot forwards to the customer
• Works on mobile — respond from anywhere
• No admin approval needed — unlike enterprise messaging platforms

The v3 Flow

Customer sends message
  → Script detects it in background
  → Telegram notifies you: what the customer said + conversation context
  → You reply on your phone (e.g., "Tell them we ship in 3 days")
    → Script sends your reply to the customer → Telegram confirms "✅ Sent"
  → 5 minutes with no reply from you?
    → AI auto-replies as fallback → Telegram tells you "🤖 AI auto-replied"

Human-in-the-loop. Important conversations get my attention. Everything else gets handled by AI.

And Then... It Broke Again at the Last Step

Telegram notifications worked perfectly. AI reply generation worked perfectly. The failure point: actually sending the reply into Knocket Inbox.

It looks like three simple steps: switch to the right conversation → type the reply → click Send. In practice, I hit every possible wall.

The Most Painful Part: CDP vs React — A Horror Story

Problem 1: Background Tab Can't Focus

Chrome has security restrictions on background tabs. JavaScript el.focus() silently fails — the textarea never gets focus, so you can't type into it.

Fix: Use CDP protocol-level DOM.focus command to bypass the JS security sandbox.

Problem 2: React Controlled Components Ignore CDP Input

Input.insertText writes text that's visible on screen, but JavaScript el.value returns empty. React's internal _valueTracker mechanism doesn't detect CDP-level input.

Fix: Stop relying on .value for verification. If focus succeeded and insertText didn't error, treat it as successful.

Problem 3: Text Duplicated Multiple Times

I built 4 different input methods as fallbacks. Method 1 actually worked, but since .value returned empty, the script thought it failed and ran methods 2, 3, and 4 — each writing the text again.

Fix: Use only one method. No fallbacks. The write probably succeeded — you just can't read it back.

Problem 4: Send Button Permanently Disabled

React didn't know the textarea had content, so the Send button stayed disabled.

Fix: Press Enter instead. If the textarea has focus, Enter sends the message.

Problem 5: Conversation Index Shifted

During the 5-minute human reply window, other conversations got added or removed. The original list index no longer pointed to the right conversation.

Fix: Look up conversations by name instead of index. Re-search before every send.

How Did I Solve All This?

Honestly — by talking to OpenClaw, round after round. My workflow:

1. Run the script → it breaks
2. Copy the logs and describe what happened: "Text duplicated twice, Send button never clicked"
3. OpenClaw analyzes → rewrites the code → restart
4. Run again → maybe breaks again → repeat

The core skill for non-technical vibe coding isn't reading code. It's describing problems accurately. "The text duplicated twice and the send button stayed disabled" is 100x more useful than "it doesn't work."

After about 15 iterations, the entire pipeline finally worked end to end.

What I Shipped: A Reusable AI Agent Skill

After surviving all the bugs, I packaged the solution into a reusable skill — knocket-inbox-agent.

What's in the Package

knocket-inbox-agent/
├── SKILL.md                  # Skill description (AI reads this to help you set up)
├── scripts/
│   ├── auto_reply.py         # Mode A: full auto-reply + Telegram notification
│   ├── telegram_human.py     # Mode B: Telegram human-first (recommended)
│   └── setup.sh              # One-click initialization
├── assets/
│   └── config.template.toml  # Configuration template
└── references/
    ├── usage-guide.md         # Beginner-friendly setup guide
    └── customization.md       # AI reply style customization

Two Modes

	Mode A: Full Auto	Mode B: Human-First (Recommended)
Flow	Customer message → AI replies immediately → Telegram notifies you	Customer message → Telegram notifies you → you reply or don't → AI fallback
Best for	High volume, standardized inquiries	Important customers, situations needing human judgment

How to Use It

1. Install the knocket-inbox-agent skill from GitHub
2. Tell OpenClaw: "I want to set up auto-reply for Knocket Inbox"
3. OpenClaw reads the skill and walks you through: pick a mode, configure environment, start monitoring

You don't need to write any code. OpenClaw handles everything based on the skill instructions.

What I Learned

On Vibe Coding

• It's not magic. Don't expect "describe a feature and get perfect code." It's more like having a super-patient collaborator — OpenClaw lets you describe what's wrong, and it fixes it.
• Non-technical people can absolutely do this. I don't understand CDP protocol or React internals. But I can describe problems clearly and identify key information in error logs.
• Debugging is inevitable. But with OpenClaw's help, the cost of debugging drops from "stuck for days" to "iterate for a few rounds."

On Adding AI to Your Own Product

Knocket is a pure communication tool with zero AI features. But with this skill added, it becomes:

• You're online → you make the calls, AI assists
• You're asleep → AI handles everything, Telegram notifies you on your phone
• No extra server needed. No paid SaaS subscription.
• One laptop + Chrome + one Python script. That's the entire stack.

If you've built your own product or tool, ask yourself: what feature is it missing? Can vibe coding help you add it?