DEV Community: Tencent_RTC

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

LunarDrift — Thu, 19 Mar 2026 07:16:34 +0000

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:

Run the script → it breaks
Copy the logs and describe what happened: "Text duplicated twice, Send button never clicked"
OpenClaw analyzes → rewrites the code → restart
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

Install the knocket-inbox-agent skill from GitHub
Tell OpenClaw: "I want to set up auto-reply for Knocket Inbox"
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?

5 Real-Time Tools & Projects Redefining Developer Workflows in 2025

LunarDrift — Tue, 19 Aug 2025 13:41:02 +0000

Tired of juggling Jira tickets, Slack threads, and Zoom links? We all are.

Studies show that a single context switch can cost a developer up to 15 minutes of focus. Imagine how much more efficient we could be if explaining a complex UI bug meant a 5-minute live pair programming session instead of a long thread of text and screenshots.

That's why developers are increasingly shifting towards synchronous, real-time collaboration, embedding communication directly into their workflows.

Here are 5 top-tier tools and open-source projects that will completely change how you think about teamwork.

The Evolution of Collaboration: From Asynchronous to Synchronous

In the past, we relied on async tools like Jira and Trello, which are great for tracking tasks. But when it comes to complex problems and brainstorming, the inefficiencies and delays of async communication become a bottleneck.

The future of collaboration requires a balance between the structure of async and the immediacy of sync, defined by these key traits:

Contextual Integration: Collaboration features should be embedded in your dev environment, not as separate apps.
Low-Latency Interaction: Syncing audio, video, cursors, and whiteboards must be seamless and instant, as if you're in the same room.
Developer-First Design: Tools must respect developer habits and minimize interruptions.
Security & Reliability: Code and conversations must be secure during transit.

5 Tools & Projects Leading the Change

1. VS Code Live Share - The IDE-Integrated Pair Programming Standard

Almost every developer has used or heard of Live Share. It's the perfect example of "contextual integration." Without leaving your familiar VS Code environment, you can share your code, terminal, and even debugging sessions with your team.

Why it matters: Live Share has proven the immense value of real-time collaborative coding. It has set the gold standard for any team looking to improve their code review and remote pair programming efficiency.

2. Replit - The Multiplayer Cloud Development Environment

Replit moved the entire development environment to the cloud and natively supports a "multiplayer" mode. Team members can write, run, and debug code in the same project simultaneously, just like in Google Docs. This is incredibly valuable for rapid prototyping and team learning.

Why it matters: Replit represents the future of development—cloud-based environments with native collaboration. It eliminates discrepancies in local setups and ensures the entire team starts on the same page.

3. tldraw - The Minimalist & Powerful Open-Source Whiteboard

Complex architectural designs and UI/UX brainstorming sessions need a good whiteboard. tldraw is a popular open-source project that offers an infinite canvas for real-time, multiplayer drawing, diagramming, and interaction. It can also be easily embedded into any web app.

Why it matters: tldraw proves that real-time collaboration extends beyond just code. Visual communication is just as critical, and its open-source nature makes it a go-to choice for integrating an interactive whiteboard into internal tools or ed-tech platforms.

4. LiveKit - Open-Source RTC Infrastructure

For teams that want to control their RTC (Real-Time Communication) stack from the ground up, LiveKit provides a complete, open-source infrastructure. It allows you to self-host the service and offers flexible APIs for building highly customized real-time applications.

Why it matters: With a very active open-source community, LiveKit is an excellent resource for learning how RTC technology works. It empowers developers to dive deep into the mechanics of real-time communication.

5. Tencent RTC - The Real-Time Engine for Next-Gen Collaboration Tools

Ever wonder what technology powers the silky-smooth real-time sync in tools like VS Code Live Share or Figma? The answer is RTC. Tencent Real-Time Communication (RTC) is a leader in this field. It isn't a standalone app but a powerful engine that enables developers to build their own real-time collaboration tools.

Key Features:
- Cross-Platform SDKs: Provides SDKs for Web, iOS, Android, Desktop, and Electron, allowing you to easily integrate real-time audio and video into any application.
- Ultra-Low Latency: Achieves an end-to-end latency of under 300ms globally, thanks to Tencent's worldwide edge nodes, making interactions feel truly in-person.
- High Packet Loss Resistance: Maintains smooth audio and video communication even with up to 70% packet loss, gracefully handling poor network conditions.
- Rich Functionality: Goes beyond audio/video to offer real-time data synchronization, interactive whiteboards, and cloud recording to support complex collaborative scenarios.

Many top-tier internal DevOps platforms and developer tools choose Tencent RTC to provide their users with stable, high-quality real-time features, allowing them to focus entirely on their core business logic.

How to Build an Effective Real-Time Collaboration Culture

Great tools are just the beginning; you also need the right strategies:

Set Clear Boundaries: Define when to use async (e.g., daily updates) versus when to jump into a sync session (e.g., urgent bugs, architectural reviews) to avoid "real-time fatigue."
Embrace Pair Programming: Make it a regular practice, especially for complex modules or onboarding new members. It drastically improves code quality and knowledge sharing.
Record and Review: Use cloud recording to capture important technical discussions or debugging sessions, turning them into a valuable knowledge base for the team.

How Tencent RTC Can Empower Your Workflow

Integrating Tencent RTC's capabilities into your workflow means you can:

Eliminate App Switching: Launch HD audio/video calls directly from your CI/CD platform, project management tool, or internal documentation without jumping to a third-party app.
Build Custom Tools: Create a private, self-hosted pair programming or code review tool that perfectly fits your team's habits and keeps your code and conversations secure.
Improve Incident Response: When a production incident occurs, stakeholders can instantly join a "war room" embedded directly in your monitoring dashboard, syncing information in real-time and drastically reducing Mean Time to Resolution (MTTR).

Teams that adopt Tencent RTC typically report a 50% reduction in context switching and a 35% decrease in the time it takes to solve complex problems.

Conclusion: The Future of Collaboration is Seamless Integration

In 2025, the core of developer productivity is no longer just about optimizing individual coding speed but about elevating the entire team's collaborative efficiency.

The most successful teams will be those that seamlessly integrate real-time collaboration into their culture and toolchain—whether by adopting finished tools like VS Code Live Share or by using a powerful engine like Tencent RTC to build their own unique, customized platforms.

Ready to transform your development workflow? Explore how Tencent RTC can bring a smooth, in-person collaborative experience to your team, minimizing communication overhead and giving you more time to create. Your path to enhanced productivity starts here.