7,305 文字
こんにちは、このビデオでは、カーソルでバイブコーディングを使ってカスタムAIエージェントを作成します。また、初めての試みとしてブラウザ使用、つまりAIによるブラウザ自動化も試してみます。最初にこれを始めたとき、Lang chainを組み込んでしまい、私はLang chainが好きではないのですが、それからブラウザ使用のための依存関係であることに気づいたので、残念ながらLang chainを使わざるを得ません。
私はすでにしばらくコーディングしています。最近Andre Karpathyのバイラルポストでこの用語が出てきたことは知っていますが、私には独自のバージョンがあります。バイブコーディングとは、エージェントを放置してループさせ続けることだと考える人もいますが、一般的にそれは非常に悪い考えで、解決するよりも多くの作業を生み出すと思います。少しでも望んでいるものからズレていたり、場合によっては奇妙なバグを生み出したりすると、ただループさせ続けるだけで、それが増幅され、より多くの作業を生み出します。
実際にここでやりたいのは、一度に少しずつ進めることです。これらのルールがどれだけうまく機能するかわかりませんが、いくつかのルールを作成しました。まずコーディングスタックのルールですが、これを取り出します。最初の数回実行したときに発見したのは、特定の場所をターゲットとする入力ファイルがあり、それを編集していました。「これはあなたが週末に行きたい場所です。追加の週末はこちらです」とか、特にターゲット場所については完全に上書きしていました。それは非常にランダムで、そうしてほしくなかったので、これが実際に役立ちました。
次にさらにルールがあります。コーディングスタイルの設定では、コメントを書いてほしくなく、一歩ずつ進めたいと思っています。また、ここのターミナル内で実行しようとするのも好きではなく、私のターミナルを別に実行したいと思っています。そのような変わり者ですが、それは私の個人的なスタイルです。そして、デバッグ用のプリント文を多用するのが好きなので、そのためのルールもあります。
実際に最初にやることの一つはデバッグ用のプリント文を書くことです。これ全体を読むつもりはありませんが、基本的には異なる領域を示すために大文字で目的を記述しています。これはフライトの良い取引を見つけるためのカスタムAIエージェントです。私はアメリカン航空のマイルをたくさん持っているので、それを使いたいと思っています。そして、現在の私のスケジュールに合った目標の場所と時間のリストがあります。
最終的にはこれを一日中定期的に実行して、その時間、日、マイル、場所などを記録し、ランダムに選んでいくつものものを選びます。そして毎週くらいに確認し、どのような取引が得られるかを見ていきます。私はそれらのマイルを最大限に活用し、節約的な旅行を見つけたいからです。
これがいろいろと指示しているものですが、多すぎないと思います。最初は多すぎるかもしれないので、ステップ1、ステップ2などと言うだけかもしれません。また、ファイルに名前を付けるよう指示することも役立つと思います。何度か実行したところ、ファイル作成において様々な場所に行ってしまうことがありました。メインを作成するのではなく、実際に何が起こっているのかを示すスクリプトの名前を作成し、それをそこに入れるように指示するのが好きです。utils.pyを作成してそれを別に入れることもありましたが、それも望んでいませんでした。多くの人々はファイルを小さく保つのが好きですが、それは私の好みではなく、おそらく古風なコーダーのせいです。
あと、いくつかの特定の要件があります。これらのいくつかはおそらく…実はこれを削除しようと思います。デバッグをするつもりなので、これが必要かどうかわかりません。自動的にやるかもしれないので、今は削除しておきます。
準備ができました。タイマーを用意しているので、これでどれだけできるか見てみましょう。@webを使ってブラウザ使用についてウェブ検索します。リンクと例のコードがここにあるからです。念のため時間範囲も使います。
実行を開始し、分かりやすくするために指示を書きます。このままでいいので、思考モデルとエディットを使います。エージェントではありません。エージェントはもっとループを繰り返します。思考モデルでもすでに多くのことを行います。では、実行しましょう。
停止しました。コードを実行するにはインストールが必要なようです。OpenAI APIキーは持っています。了解、提案されたコードは良さそうです。作成してください。
それは30秒もかかりませんでした。実際に作成されました。これを簡単に見てみましょう。まず、過去のように編集されていないことを確認しましょう。それは素晴らしいです。
プリント文が作成されました。デバッグ用にグローバル変数があり、日時のスタンプを印刷しているのは素晴らしいです。ターゲット時間範囲がクラスを作成しています。ターゲット場所も良いです。これを実行して何が起こるか見てみましょう。
これは非常に興味深いです。実際にExpediaにアクセスしています。少なくともブラウザ使用は機能しているようです。それは良い兆候です。すでにロボットだと思われているようです。おかしいですね。これをどう終了するかわかりません。もう一度試してみましょう。手伝えるかもしれません。猫の音はどのオプションですか？オプション1、オプション2、オプション3？オプション4？
今停止しようと思います。テンプレートメッセージを正しく設定していなかったようです。テンプレートメッセージがどこに置かれているか見てみましょう。ここにあります。「aa.comで最も安いノンストップのアメリカン航空便」。これは良いニュースです。ブラウザ使用は機能し、コードも動作しているようです。適切な使用方法を持っていなかっただけで、それは私のミスです。
もう一度実行してみましょう。これは良いです。aa.comに行きます。DFWを使っています。これは良いです。オーランドを選んでいます。いとこがオーランドに住んでいます。5月18日の正しい日付を選びました。時間範囲に戻りましょう。あれ、15日を選んで、また18日を選んだようです。モデルが指示を理解しなかったか、正しい指示が与えられなかったのかもしれません。
今度は出発と帰国を使う必要があるのかもしれません。空港は問題ではありません。これは興味深いです。バイブコーディングの観点から見れば、これは成功です。実際に動作しているという事実があります。私たちがする必要があるのは、ブラウザ使用に正確にどのようなプロンプトが送られているのかをよりよく理解することです。ブラウザ使用が失敗しているか、十分に明確な指示を与えていない可能性があります。
ここで停止しましょう。別のプロンプトを作成してみます。まず、「出発日と帰国日」という言語を合わせましょう。次に確認したいのは、エージェントをループさせると何が起きているのか正確にわからないかもしれないという点です。エージェントをオフにして、通常の3.7 Sonicを使います。これはかなり単純な指示だと思うからです。
レビューしやすいファイルシステムが欲しいです。何を送っているのか正確に知りたいです。コードを作成した後、AIがそれを変更したり修正したりして、あなたが知らないこともあるからです。テキストファイルで詳細に文書化することで、すべてが正しいことを確認しようと思います。これは多くの人が好む方法ではないかもしれませんが、これが私のやり方です。
それは約10秒しかかかりませんでした。だからこそ、特に単純なことにはいつも思考モードを使う必要はないと思います。チェックせずに受け入れます。13分経過して、すでにかなり近いものができているように感じます。もう一度実行して何が起こるか見てみましょう。
今のところ私はこれにかなり満足しています。バイブコーディングを通じてブラウザ使用を見つけることができました。以前使ったことがなかったのに実装できました。ブラウザ使用コードやプラグインがどのように機能するのか全く知りません。Lang chainを使うのは好きではないですが、使っています。デバッグのために役立つかもしれない多くのドキュメントがあります。
すでに再び混乱しています。ブラウザ使用の問題かもしれません。少なくとも何かが行われています。これは帰国日が入力された最初の時です。出発日を正しく取得するでしょうか？いいえ、残念ながらこれが最も基本的なことであれば…何をしているのか気になります。
実行中に、ここで開いてみましょう。これがブラウザ使用に送られたものです。「出発日が5月15日で帰国日が5月18日」。出発と帰国を同時に検索しているようです。それはちょっと脱線しているようです。記録から情報を得られるでしょうか。15日から始めたと思います。これはループで立ち往生しているようなので、中止しましょう。
ログを見て、ここでデバッグする必要があります。何をしているのかはっきりしていないようです。ここに5月15日があり、場所は正しいですが、出発時間を見失っています。ここで目標は正しく設定されています。日付に関する問題だと思っているようです。日付は正しく抽出されています。もっと詳細な指示を与えることができるかもしれません。
エラーを強制的に解決しようとします。何度も同じことを繰り返しているようなので、事前に診断してみましょう。「出発日が正しいことを二重確認してください。時々、出発日フィールドに帰国日を入力し、帰国日フィールドには何も入力しないことがあります」。これでもう少しうまく実行できるか見てみましょう。
バイブコーディングの観点からすれば、これは素晴らしいです。ブラウザ使用が今のところあまり良くないのかもしれません。まだ新しいですから。マイル交換をチェックしていないようです。そのために新しい行を作成しましょう。
何らかの理由でアメリカン航空がループに入っているようです。これはアンチボットの仕組みなのかもしれません。「ウェブサイトでの体験にどれくらい満足していますか？」と聞いています。ループに入ってしまいました。中止して再実行しましょう。
エージェントをただ進ませていたら、望まない道に進んでいたかもしれません。現時点では、ブラウザ使用がこれを信頼性を持って行うことができない可能性があります。これまで機能していませんが、プロンプトエンジニアリングなどで十分に機能させることができるか見てみましょう。
出発日は正しいです。デンバーに行きます。素晴らしい都市です。出発日は正しく取得していますが、マイル交換ボタンをチェックするでしょうか？後から追加したので、確認してみましょう。マイル交換ボタンをチェックしませんでした。しかし実際に検索は行われたので改善されています。マイル交換ボタンを最初に行うように設定する必要があるかもしれません。
何が起こったのでしょう？なぜリロードしているのでしょう？「正確に再入力して検索を確定する」。ロード中の画面を見て、エラーがあると思っているのかもしれません。正しく見つけました。またループに入っています。
これはブラウザ使用の問題かもしれません。ウェブサイトの仕組みによるものか、ブラウザ使用がまだ準備ができていないのかもしれません。バージョン0.xのようなかなり新しいバージョンです。ループを続けています。追加の指示を与えましょう。ループに入っています。
「マイル交換の観点から最も安い」というように、マイル交換を上部と下部に記載します。コードがこれ以上構築されなかったことは良かったです。APIを使う必要があるかもしれません。それが唯一の方法かもしれませんが、料金が違ってくることを受け入れなければならないかもしれません。ブラウザ使用がもっと良くなるのを待つ必要があるか、これをあきらめて、このエージェントは上手く機能しないと判断する必要があるかもしれません。
これはバイブコーディングとは関係なく、現在の技術で何ができて何ができないかに関係しています。日付は正しく取り込まれていて、場所の選択があります。「フライト詳細を入力し、マイル交換を選択し、出発地としてDFWを入力する」と指示しています。何でも選択できます。特定のものを選ぶ必要はありません。
出発、帰国…マイル交換を選択したかどうかは見えませんでした。たぶんしていないと思いますが、実際に機能するかどうか見てみましょう。待っていました。もう読み込んでいません。どのタイプを探しているのか指示する必要があるかもしれません。おそらく最も安いものを選ぶでしょう。
ここでプロンプトエンジニアリングによって進展があります。「DFWからボゴタへのノンストップフライト詳細をマイル交換で記録しました。10便中1便」。それをどこに置いたのでしょうか？完了させて記録して戻すことができるのかもしれません。
往復マイル交換…再びマイル交換をしていませんが、読み込みを待つことができるか見てみましょう。読み込みを待つように指示することで確かに役立ちました。同じものを見つけたのでしょうか？10個見つけるはずでした。エラーが発生しました。
出力がありますか？応答を記録していませんでした。これを簡単に確認してみましょう。「フライト取引の検索…ブラウザ使用を使用…応答を返す」。何がこれを呼び出しているのでしょうか？質問したいのですが、時々その回答を信頼できないので、応答を保存していないため、何が戻されているのか確かではありません。
これを修正してみましょう。それが気に入らなかったようなので、3.5 Sonicを使います。個人的には3.5 Sonicで十分だと思います。すべての変更を受け入れて、プロンプトに戻りましょう。これが機能するか見てみましょう。
現在35分経過していて、ほとんどの作業はプロンプトの改善に費やされてきました。一度でも機能させて、少なくとも1つの目標場所と日付範囲でマイル交換を記録できるようにしたいのですが、それができるかどうかは不明です。「マイル交換を使用したフライトを検索する」と指示しています。まだマイル交換を行っていません。日付を選択していますが、今回は日付を選択しませんでした。
このプロジェクトは中止しなければならないかもしれません。ブラウザ使用のせいです。バイブコーディングの観点からは成功だと思います。ブラウザ使用もテストする目的がありましたが、それは悲惨な失敗をしています。
次のバイブコーディングビデオではブラウザ使用を含まないものを作成し、より理解を深め、次のレベルに進めていきたいと思います。これは完全に書き直して、APIの観点から再構築する必要があると思います。APIを通じて価格を確認する必要がありますが、料金が異なる可能性があるので興味がありません。
アメリカン航空のAPIを使ったことがないので、それはおそらくこれよりもはるかに信頼性があるはずです。もう一度中止して、もう一度実行してみましょう。その間に、プロンプトをチェックしてみましょう。最新のものを見つけましょう。ノンストップも識別していません。もう一度チャンスを与えましょう。
マイル交換をチェックしていませんが、少なくとも検索はしています。読み込みを待っています。読み込みを待つことができました。フライトを抽出しています。価格は538ドルです。これが機能すると仮定できれば、価格が低ければマイルも低いと考えられますが、それがそのように機能するかどうかはわかりません。
ループに入ってしまっているようです。このブラウザ使用は成功しなかったと判断します。もう一度やるとしたら、最初から始めてブラウザ使用を排除し、アメリカン航空のAPIを通じて行い、そこから何が得られるか見てみようと思います。まだフライト情報を見つけるのに役立つ情報が得られるかもしれません。
バイブコーディングの観点からは成功ですが、ブラウザ使用の観点からはかなりの失敗です。これはそれほど複雑な状況でもないと思います。ログインしているわけでもなく、カートもありません。最初の画面、最初のステップですら失敗しています。マイル交換チェックボックスが識別されているにもかかわらず、自分の目標に従っていません。
これが面白いと思っていただければ幸いです。ブラウザ使用で成功した経験があれば教えてください。他のことでもテストするつもりですが、現時点ではとても印象的ではありません。バイブコーディングは本当にうまく機能しました。エージェントにループを実行させてコードをたくさん構築させるのを避けられて良かったです。特にブラウザ使用が鍵となるステップで機能しなかったので、その後に起こるはずだった多くのことは今はやらないことになります。このプロジェクトを捨てて、違う角度から始め直すつもりです。
このビデオが気に入ったらいいねとチャンネル登録をよろしくお願いします。もっと多くのバイブコーディングビデオを撮影する予定で、次のビデオはこれよりもずっと良くなると思います。バイブコーディング自体をかなり高いレベルでテストするだけで、これよりもずっと速い方法でそれができると思います。
約40分費やしましたが、バイブコーディングなしでこれをやらなければならなかったら、もっと時間がかかっていたでしょう。ブラウザ使用のドキュメントを読んで、それを理解するだけで40分かかっていたでしょう。その意味では素晴らしかったです。
良い一日を。視聴ありがとうございました。さようなら。
コメント