誰でもできる！Cline で AI エージェントにコーディングを任せながらコマンドラインでかっこよくピザを頼もう！
AI エージェントがタスクをこなしてくれる時代に…
Devin などのAI エージェントによって、「ソファーに座りながら Slack で指示を出してソフトウェア開発」なんてこともできる時代になってきました。
任せられるのはコーディングだけじゃない。ということで、 AI エージェントにピザの注文をお願いできるようにしたいと思います。
🍕ピザにはエンジニアの夢が詰まっている
なぜピザか？アメリカなど、海外ではドミノ・ピザの公式 API や有志によるライブラリやラッパーが存在するようです！ピザの注文をハックするのは海外らしくて面白いですね！
日本ではドミノ・ピザのこうした API やライブラリはありませんが、技術的には注文画面の Web UI の自動操作によって注文を進めることができます。
クールにピザを頼んでみましょう！
🙆♂️つくったもの
Cline で「ピザを注文したい」と打ち込むとブラウザを操作してピザを頼んでくれます。
Cline での制作の雰囲気はこんな感じです。
ゲットしました。
ドミノ・ピザ届きました。格別の味でした。
👨💻実装
1. Cline を準備
Cline は、自然言語でコマンドライン操作ができるAIエージェントです。名称は、「CLI aNd Editor」から由来します。AIチャットボットとエディターが一緒になったようなもので、ターミナルやブラウザを操作することができます。
VSC (Visual Studio Code) や Cursor の拡張として Cline をインストールします。 VSCなどエディターの拡張機能、もしくはマーケットプレイスからインストールできます。
インストール後の準備はこちら
インストールするとエディターの左側のサイドバーに Cline が出てきます。無料で始めるか、他の生成 AI の API を連携させるかして利用することができます。
Cline のボトムバーで権限の設定ができます。ブラウザの利用を許可しておきます。
これで準備が整いました。
2. Cline でピザを注文できるようにするには
やりたいことは、
Cline で「ピザを注文したい」と打ち込めば、好みなど注文内容について数回やり取りして注文を確定させる
というものです。
しかしながら、前述した通り、日本ではウェブサイトを自動操作して注文をする必要があります。
そこで、Cline でピザを注文できるスクリプトを制作し、「ピザを注文したい」と言えば、いつでもそのスクリプトファイルを参照しながら注文できるようにして行きます。
まずは雑に Cline に指示を出してみた
手始めに「ピザを注文したい」と伝えてみます。海外用のライブラリを参照しないように日本にいることも補足しました。
Cline のブラウザツールでドミノ・ピザのオンライン注文ページを開いているようです。
しかし、タイムアウトのエラーが出ました。途中で詰まったようです。
指示に関してはもう少しを情報を与えた方が良さそうです。
AI チャットボット風にやり取りする部分と決まった動きをする部分を分ける
ピザを注文するためには入力のステップがいくつかあります。
その中でも、最寄りの店舗や注文者の連絡先などは事前につくったファイルを参照させます。そして、味については新作も試せるようにチャットベースで好みを入れると選択肢を出してくれるようなつくりにします。
まずは、次のような指示を出しました。
更によりスムーズに操作できるように注文までの流れを再現できるような指示を出しました。
3. シミュレーションを行う
いきなり注文リクエストを行うと注文に失敗し、お店に迷惑をかける可能性もあるので、シミュレーションを行います。
ピザを選択する部分の応答です。
4. 本番
Pythonスクリプトを参照しながら、Cline のブラウザツールで注文画面を更新していきます。
生成された Python スクリプトのサンプルはこちら
🤔ピザ注文は意外と複雑
Cline で一発で開発成功、という訳にはいかず、ある程度先回りしてドミノ・ピザの注文に必要な情報を整理しプロンプトに含める必要がありました。
例えば、ピザのクーポンまわりに特徴がありました。「2つ目は無料！」のような場合は、商品と同様にカート内にクーポンを追加するという動きが必要で、エージェントが停滞してしまいます。
注意点は以下の通りです。
ピザ関連
- クーポンや2枚目無料などのお得な買い方がある
- 味やサイズ、生地の種類、ハーフ&ハーフなどの組み合わせのような様々な変数がある
注文関連
- 住所から近くの店舗が見つからないことがある(市をまたぐ)
- 支払い方法が多い→決済情報を入力するのを避けたかったので現金にしました
🎁おまけ
今回の注文と開発でかかった費用は…
$9.4USDでした。日本円で1,500円くらい。高い…Sサイズのピザより高い...。
ブラウザ操作にめちゃくちゃ時間がかかりました。正確にはわかりませんが、開発段階では$4USDくらいでしたので、純粋な注文で$5USDくらいかかっていることになります。
Cline のブラウザツールを使うのは見直した方が良いかもしれませんね😅
色々な開発方法があります
Cline で「ピザを注文したい」と入力
↓
Cline が VSC で Python ファイルを実行
↓
Selenium でブラウザ操作
など、こんな流れで実行することもできますし、当然フロントエンドをつくることも可能です。今回は Cline で会話風に注文する体験をしたくてこのような構成にしました。
