私は非エンジニアのプロダクト担当です。チームで Knocket という完全無料のWebサイト用チャットウィジェットを開発しました。ライブチャットとしては優秀ですが、AI機能がありませんでした。そこで OpenClaw と Vibe Coding を使い、自分でAI自動返信を実装しました。この記事は、何をやったか、何が壊れたか、最終的に何をリリースしたかの全記録です。
Knocket とは？
Knocket は、ライブチャット・オフラインフォーム・SNSリンク・会議予約を1つのウィジェットに統合した、完全無料のWebサイト用コンタクトウィジェットです。</body> タグの前に1行のコードを貼り付けるだけで、サイトの右下にブランドカラーのチャットバブルが表示されます。
-
1分でデプロイ ―
<script>タグを1つコピーしてHTMLに貼るだけ - ライブチャット ― 訪問者がサイト上でメッセージを送信、あなたは Inbox ダッシュボードから返信
- オフラインフォーム ― 不在時も訪問者の連絡先を自動収集
- SNSリンク集約 ― WhatsApp、Instagram、Telegram をワンタップで表示
- ノーコードカスタマイズ ― カラー、アイコン、挨拶文をダッシュボードから設定
Tencent Cloud IM 基盤で構築されており、コンソール・SDK・フロントエンドウィジェットはすべてエンジニアチームがゼロから開発しました。そして完全無料です ― Intercom の月額39ドルも、LiveChat の月額20ドルも不要です。
足りなかったもの：AI自動返信が欲しかった
リリース後、お客様が自分のWebサイトに Knocket を埋め込み、Inbox でメッセージのやり取りを始めました。しかし問題がありました。Knocket にはAI機能がありません。 純粋なコミュニケーションツールなので、お客様からメッセージが来たら、自分でダッシュボードを見て返信する必要があります。
営業時間を設定しても、一日中 Inbox コンソールに張り付いている人はいません。
非エンジニアのプロダクト担当として、こう考えました：自分のプロダクトにAIカスタマーサービスを追加できないか？
成熟したカスタマーサポートプラットフォームならこの機能がありますが、月額30〜100ドルかかります。正式な機能として開発するにはエンジニアリングリソースが必要です。でも OpenClaw にブラウザを操作させれば実現できるのでは？
目標：
お客様がメッセージ送信 → AIが検知 → 自動返信（または先に通知して私が判断）
やってみることにしました。以下はその実際の経緯です。
フェーズ1：ブラウザ自動化 ― とりあえず動かす（v1）
アイデア
OpenClaw を使いました。コマンドラインから Chrome を操作できるブラウザ自動化スキルを持つAIコーディングアシスタントで、JavaScript実行・フォーム入力・ボタンクリックが可能です。
最初のアプローチはシンプルでした：
60秒ごと → Inbox の会話リストを読み取り
→ 新着メッセージ検知 → AIが返信を生成
→ textarea に入力 → Send をクリック
→ Telegram で通知
AIアシスタントが約300行のシェルスクリプトを書いてくれました。browser eval でページデータを読み取り、browser fill で返信を入力する仕組みです。
動いた！……5分間だけ
AIがメッセージを読み取り、返信を生成できました。約5分間は興奮しました。
そして全部壊れました。
ブラウザ自動化の fill と click コマンドは、Knocket Inbox の React SPA と相性が悪かったのです。最悪の事故：1人のお客様にだけ返信するつもりが、同じ返信がアクティブな3人全員に送られてしまいました。
さらに、ブラウザ操作のたびにウィンドウフォーカスを奪われ、スクリプト実行中は他の作業ができませんでした。
教訓： CLI経由のブラウザ自動化は複雑なSPAには精度が足りない。各ステップのタイミングを制御できない。
フェーズ2：生CDP + バックグラウンド実行（v2）
アーキテクチャ全面刷新
ブラウザ自動化のアプローチを完全に捨てました。新しいプラン：OpenClaw を使い、Python の websockets ライブラリで Chrome DevTools Protocol（CDP）に直接接続する方式です。
CDPが優れていた理由：
- 完全にバックグラウンドで動作 ― ポップアップなし、フォーカス奪取なし、干渉なし
- 各ステップで正確なJSONレスポンスを取得 ― 成功・失敗が確実にわかる
- 再接続・リトライ・タイムアウトを完全制御
新しいフロー：
お客様がメッセージ送信 → スクリプトがバックグラウンドで検知
→ AIが自動返信 → CDPがサイレントに送信 → Telegram で通知
安定したが、もっと欲しくなった
誤送信はなくなり、サイレントにバックグラウンドで動作。しかし、純粋な自動返信だけでは不十分だと気づきました。
重要なお客様や複雑な質問には、返信前に自分で確認したい。
一方通行の Webhook（何が起きたかを通知するだけ）では足りません。双方向通信が必要でした：Bot が状況を教えてくれて、私が Bot に返信方法を指示する。
教訓： 一方通行の通知はモニタリングには使えるが、意思決定には使えない。「人間優先、AIフォールバック」には双方向 Bot が必要。
フェーズ3：Telegram Bot + Human-in-the-Loop（v3）
なぜ Telegram か？
- Bot API が完全無料で高機能
- 双方向通信： Bot が通知 → 私が Bot に返信 → Bot がお客様に転送
- モバイル対応 ― いつでもどこでも返信可能
- 管理者承認不要 ― エンタープライズメッセージングプラットフォームと違い手軽
v3 のフロー
お客様がメッセージ送信
→ スクリプトがバックグラウンドで検知
→ Telegram で通知：お客様の発言内容 + 会話コンテキスト
→ スマホで返信（例：「3日以内に発送すると伝えて」）
→ スクリプトがお客様に返信 → Telegram で確認 "✅ 送信完了"
→ 5分間返信なし？
→ AIがフォールバックとして自動返信 → Telegram で通知 "🤖 AI自動返信済み"
Human-in-the-loop。 重要な会話は私が対応。それ以外はAIが処理。
そして……最後のステップでまた壊れた
Telegram 通知は完璧に動作。AI返信生成も完璧。失敗したのは：返信を Knocket Inbox に実際に送信する部分。
一見3ステップ：会話を切り替え → 返信を入力 → Send をクリック。実際にはあらゆる壁にぶつかりました。
最も苦しかったパート：CDP vs React ― 血と涙の記録
問題1：バックグラウンドタブでフォーカスできない
Chrome はバックグラウンドタブにセキュリティ制限をかけています。JavaScript の el.focus() がサイレントに失敗 ― textarea がフォーカスを取得できず、文字を入力できない。
解決策： CDP プロトコルレベルの DOM.focus コマンドを使い、JSセキュリティサンドボックスをバイパス。
問題2：React の制御コンポーネントが CDP 入力を無視
Input.insertText で書き込んだテキストは画面上では見えるが、JavaScript の el.value は空を返す。React 内部の _valueTracker メカニズムが CDP レベルの入力を検知しない。
解決策： .value での検証をやめる。focus 成功 + insertText がエラーなし = 成功とみなす。
問題3：テキストが複数回重複
4種類の入力方法をフォールバックとして実装。方法1は実際には成功していたが、.value が空を返したため失敗と判断し、方法2・3・4も実行 ― それぞれがテキストを再入力。
解決策： 1つの方法だけを使う。フォールバックなし。書き込みはおそらく成功している ― 読み返せないだけ。
問題4：Send ボタンが常に disabled
React が textarea にコンテンツがあることを認識せず、Send ボタンがロック解除されない。
解決策： Enter キーで代替。textarea にフォーカスがあれば Enter で送信可能。
問題5：会話のインデックスがずれる
人間の返信を待つ5分間に、他の会話が追加・削除され、元のリストインデックスが正しい会話を指さなくなる。
解決策： インデックスではなく会話名で検索。送信のたびに再検索する。
これらの問題をどう解決したか？
正直に言うと ― OpenClaw と何度もやり取りして解決しました。ワークフローはこうです：
- スクリプトを実行 → 壊れる
- ログと現象をコピーして説明：「テキストが2回重複、Send ボタンがクリックされなかった」
- OpenClaw が分析 → コード書き直し → 再起動
- 再実行 → また壊れるかも → 繰り返し
非エンジニアの Vibe Coding で最も重要なスキルはコードを読むことではなく、問題を正確に説明すること。「テキストが2回重複して、Send ボタンが disabled のままだった」は「動かない」の100倍有用です。
約15回のイテレーションを経て、パイプライン全体がついにエンドツーエンドで動きました。
リリースしたもの：再利用可能なAIエージェント Skill
すべてのバグを乗り越えた後、このソリューションを再利用可能な Skill としてパッケージ化しました ― knocket-inbox-agent。
パッケージの内容
knocket-inbox-agent/
├── SKILL.md # Skill 説明（AIがこれを読んでセットアップを支援）
├── scripts/
│ ├── auto_reply.py # モードA：全自動返信 + Telegram 通知
│ ├── telegram_human.py # モードB：Telegram 人間優先（推奨）
│ └── setup.sh # ワンクリック初期化
├── assets/
│ └── config.template.toml # 設定テンプレート
└── references/
├── usage-guide.md # 初心者向けセットアップガイド
└── customization.md # AI返信スタイルのカスタマイズ
2つのモード
| モードA：全自動 | モードB：人間優先（推奨） | |
|---|---|---|
| フロー | お客様メッセージ → AI即時返信 → Telegram で通知 | お客様メッセージ → Telegram で通知 → あなたが返信 or しない → AIフォールバック |
| 適している場面 | 大量の定型問い合わせ | 重要なお客様、人間の判断が必要な場面 |
使い方
- GitHub から knocket-inbox-agent skill をインストール
- OpenClaw に伝える：「Knocket Inbox の自動返信を設定したい」
- OpenClaw が Skill を読み込み、ガイドしてくれる：モード選択 → 環境設定 → 監視開始
コードを書く必要はありません。 OpenClaw が Skill の指示に基づいてすべてを処理します。
学んだこと
Vibe Coding について
- 魔法ではない。「要件を一言言えば完璧なコードが出る」とは思わないこと。超忍耐強い共同作業者のようなもの ― OpenClaw に何が問題かを説明すれば、修正してくれる。
- 非エンジニアでも完全にできる。 私は CDP プロトコルも React の内部メカニズムも理解していません。でも問題を正確に説明し、エラーログの重要な情報を見つけることはできます。
- デバッグは避けられない。 でも OpenClaw の助けがあれば、デバッグのコストは「数日間スタック」から「数ラウンドのイテレーション」に下がります。
自分のプロダクトにAIを追加することについて
Knocket はAI機能ゼロの純粋なコミュニケーションツールです。しかしこの Skill を追加すると：
- オンライン時 → あなたが判断、AIがアシスト
- 就寝中 → AIがすべて対応、Telegram でスマホに通知
- 追加サーバー不要。 有料SaaSの契約も不要。
- ノートPC1台 + Chrome + Python スクリプト1つ。 これだけで完結。
自分でプロダクトやツールを作ったなら、こう自問してみてください：何の機能が足りない？ Vibe Coding で追加できないか？