バイブコーディング
無料のWebチャットウィジェットにAI自動返信を追加した話 ― コードは1行も書いていません
Zenn AI公開: 2026年3月19日
出典：Zenn AI
この記事のポイント
- 1非エンジニアがOpenClawとAIを活用し、Webチャットの自動返信機能をノーコードで自作
- 2ブラウザ自動化（CLI）の限界を突破し、CDP接続による高度で安定したバックグラウンド実行を実現
- 3既存の有料AIサービスを使わず、自前の環境でカスタマーサポートの自動化を低コストで構築
要約
非エンジニアのプロダクト担当者が、自社開発の無料チャットウィジェット「Knocket」に、AIによる自動返信機能を「1行もコードを書かずに」実装した実践記録です。当初はブラウザ自動化ツール「OpenClaw」を用いてシェルスクリプトでの自動化を試みましたが、SPA（シングルページアプリケーション）特有の挙動により失敗。そこで方針を転換し、OpenClawを介してPythonでChrome DevTools Protocol（CDP）に直接接続する手法を採用しました。これにより、ブラウザのフォーカスを奪わずにバックグラウンドで安定した自動返信システムを構築することに成功。記事では、エンジニアリングリソースを使わずにAIエージェントを活用して「理想の機能」を自作するプロセスが具体的に解説されています。最終的に、OpenAIのAPIを利用し、訪問者の問い合わせに対して24時間体制でAIが応答する仕組みを、非エンジニアが独力で完成させた点が非常に画期的です。
出典：Zenn AI の情報をもとにAIが要約
当サイトの考察
“
ヒナキラです！この記事、まさに私が提唱している「バイブコーディング（AI主導開発）」の最高のお手本ですね！先週「Claude Codeで月商300万のSaaSを運用する」という衝撃的な話を紹介しましたが、今回の記事は「非エンジニアがOpenClawを使いこなして実務をハックした」という点で、より多くの人に勇気を与えてくれます。注目すべきは、一度失敗した（v1）後に、AIと相談してより高度な『CDP接続』という解決策（v2）に辿り着いたプロセスです。これは、AIを単なる「コード生成機」としてではなく「技術的なコンサルタント」として扱っている素晴らしい例です。副業家やマーケターの皆さんも、自分のWebサイトやツールに「あと一歩、この機能があれば……」と思うことがありますよね。これまでは高額なツールを買うか諦めるしかありませんでしたが、OpenClawのような自律型エージェントを使えば、数日、あるいは数時間で「自分だけの最強ツール」が作れる時代になったんです。2026年は、スキルがなくても『バイブス』で実装をねじ伏せる時代ですよ！
よくある質問
Q本当にコードを1行も書かずに済むのですか？
A
AI（OpenClaw）がコードをすべて生成するため、人間は「何をしたいか」を指示するだけで済みます。ただし、エラーが出た際の調整などはAIとの対話が必要です。
QOpenClawとは何ですか？
A
PCのブラウザやファイルを自律的に操作できるAIエージェントです。ユーザーの指示を受けて、必要なプログラムを書き、それを実行してタスクを完遂します。
Qこの手法は他のWebサイトでも使えますか？
A
はい。ブラウザ経由でログインできるサービスであれば、同様の手法で管理画面の操作を自動化したり、データを取得したりすることが可能です。
用語解説
Vibe Coding
詳細な設計図なしに、AIとの対話と雰囲気（バイブス）でプログラムを組み上げていく新しい開発スタイル。
CDP (Chrome DevTools Protocol)
ブラウザ（Chrome）をプログラムから直接、高度に制御・監視するための通信規格。通常の自動化より安定性が高いです。
SPA (Single Page Application)
ページ遷移なしで中身が切り替わるWebアプリのこと。従来の単純なブラウザ自動化では操作が難しい場合があります。
※ この記事の要約・考察・FAQ・用語解説はAIによって生成されています。正確な情報は元記事をご確認ください。
ヒナキラ
Hinakira AI News 編集長
AIツール・LLM・プロンプト活用術を中心に、個人クリエイター・副業者向けのAI最新情報を毎日お届けしています。AI歴3年以上、いろんな用途に実際に使って試してきた知見をもとに、読者が「自分ごと」として活用できる考察を心がけています。