どんなプロジェクトも、いずれは Web サイトから何かを取ってくる必要があります。決済プロバイダーの API キー。Webhook のシークレット。ダッシュボードの 3 階層下にあるクライアントトークン。エージェントは連携コードを数分で書き上げますが、そこで手を止めて「ダッシュボードはご自身で操作してください」と言います。その部分はブラウザの中、あなたのログインの向こう側で起きるからです。
ガイド付きセットアップは、SuperDevSpace がこの隙間を埋める方法です。エージェントはアプリ内蔵のブラウザでサイトを開き、許された範囲のクリックを自分でこなし、次の手順があなたの番になったちょうどそのときに、指し示す印と一文を添えてページをあなたに渡します。
「全部エージェントに任せればいい」が間違いである理由
この機能のいちばん簡単な作り方は、ブラウザをまるごとエージェントに渡すことです。すべての項目を読み、すべての欄に入力し、すべてのボタンを押す。速いでしょうが、よくない考えです。セットアップの流れには、エージェントが決して触れるべきでないものがあふれています。
- パスワードと、スマートフォンに届くワンタイムコード
- カード番号、銀行口座の情報、本人確認書類
- あなたが同意する規約と、あなたが承認する支払い
そこで設計は反対側から始めています。エージェントは定型作業を担当します。移動し、正しいページを見つけ、プロジェクト名を入力し、作成 を押す。個人的なことや、拘束力のあることはすべてあなたの手元に残ります。
| セットアップの手順 | エージェント | あなた |
|---|---|---|
| ダッシュボードを開き、正しいページを見つける | ✓ | |
| プロジェクト名、URL、リストの選択肢を入力する | ✓ | |
| パスワードやスマートフォンのコードを入力する | ✗ | ✓ |
| カード、銀行、本人確認の情報を入力する | ✗ | ✓ |
| 規約にチェックを入れ、「支払う」「注文する」を押す | ✗ | ✓ |
新しい API キーを読み取り、.env に保存する | ✓ |
ガイド付きセットアップの流れ
流れはどのサイトでも同じです。誰も手順を書いていないサイトでも変わりません。
- ページを開く。 エージェントがアプリ内でブラウザのタブを開きます。このブラウザのログイン状態は再起動しても保持されるので、すでにログイン済みかもしれません。
- 動く前に見る。 エージェントはページの概要を取得します。見出し、ボタン、リンク、入力欄、フレームごとに 1 行です。機密性の高い欄は種類（パスワード、カード、銀行、ワンタイムコード、本人確認）と「入力済み」か「空」かだけが示され、値は決して表示されません。
- 自分の分をこなす。 クリックし、普通の入力欄を埋め、テキストを読みます。ページが変わる操作のあとは、必ずページを読み直します。
- あなたの分を渡す。 次の手順があなたの番になると、エージェントはページ上にガイドカードを表示します。短いタイトル、具体的な指示を 1 つ、そして対象の入力欄やボタンのハイライトです。あなたがその手順を終えて 完了して渡す を押します。行き詰まったら 助けが必要 を押して見えているものを書けば、エージェントがページ上で答えます。
- 同じターンの中で待つ。 ガイドが表示されている間、エージェントはあなたを待ちます。ページを返すまでエージェントのクリックや入力は拒否され、あなたはいつでも 停止 / 操作を引き継ぐ を押せます。
- 成果を持ち帰る。 目当てのもの（API キー、トークン、Webhook のシークレット）がページに表示されたら、エージェントはそれをシークレットとして読み取り、プロジェクトの
.envなど、あるべき場所に保存します。報告するのはキーがどこにあるかであって、キーそのものではありません。
図をテキストで見る
sequenceDiagram
participant A as エージェント
participant B as ブラウザパネル
participant Y as あなた
participant E as .env
A->>B: ダッシュボードを開く
A->>B: ページの概要
A->>Y: ガイドカード - ログインしてから渡してください
Y->>B: パスワードとワンタイムコード
Y->>A: 完了して渡す
A->>B: API キーを作成
B-->>A: キーをシークレットとして読み取り
A->>E: PADDLE_API_KEY を保存
A->>Y: キーは .env にあります終わったら、シークレットを画面に出さずに結果を確認できます。
$ grep -o '^PADDLE_[A-Z_]*=' .env
PADDLE_API_KEY=
PADDLE_CLIENT_TOKEN=
PADDLE_WEBHOOK_SECRET=
PADDLE_ENVIRONMENT=アプリが強制するルール
これらはアプリ内のチェックで、エージェントがオフにすることはできません。
- シークレットは入れない、出さない。 エージェントは、パスワード、カード、CVC、IBAN、ワンタイムコード、本人確認の欄に入力できません。ページを読むときやスナップショットを撮るときには、それらの値は隠され、読み取るテキストからも取り除かれます。
- スクリーンショットは塗りつぶされる。 機密性の高い欄と、別オリジンのフレーム（カード入力ウィジェットや「Google でログイン」の枠など）はすべて、エージェントが画像を見る前に覆われます。
- 機密ページではスクリプトを実行しない。 そうした欄を表示しているページでは、ページ内での JavaScript の実行は拒否されます。
- 同意と支払いはあなたのもの。 規約のチェックボックスや「支払う」「注文する」ボタンのクリックは拒否されます。
- すべてが見える。 ブラウザパネルでエージェントが行っていることは、その場でパネルのバナーに表示されます。
- シークレットは会話に出さない。 シークレットとして読み取った値は機密としてマークされ、エージェントはチャット、レポート、タスクのメモ、通知で決して繰り返さないよう指示されます。
連携先のリストではなく、どんな Web サイトでも
ガイド付きセットアップはスクリプトのライブラリではなく、ループです。誰もヒントを書いていないサイトでも動きます。エージェントは目の前にある実際のページを読むからです。いくつかのサービス向けには短いヒントファイルを同梱しています。たとえば Paddle のサンドボックスのダッシュボードや RevenueCat 向けのもので、開発者向け設定がたいていどこにあるかをエージェントに伝えます。ダッシュボードのメニューは頻繁に変わるので、ヒントにははっきりこう書いてあります。ページとヒントが食い違ったら、ページを信じること。
これは見た目以上に大切です。エージェントが書く連携コードは機能の半分にすぎません。残りの半分は、他人の Web サイト上にあるアカウント、キー、Webhook です。ガイド付きセットアップなら、その両方が同じセッションで、同じエージェントとともに進みます。あなたが時間を使うのは、あなたにしかできない手順だけです。
どこに位置づけられるか
ガイド付きセットアップは、SuperDevSpace のほかのすべてと同じワークスペースの一部です。決済の連携コードを書くエージェントが、そのままキーの作成も案内します。そのターミナルの隣のブラウザパネルで。初めての方は、SuperDevSpace を作った理由で、それを取り巻くチームの全体像を紹介しています。
試してみる
トライアルは Premium を 14 日間、カード登録なしで使えます。SuperDevSpace をダウンロードし、プロジェクトに決済や分析のプロバイダーを設定するようエージェントに頼んでみてください。あなたの番が来たら、エージェントがページを渡してくれます。
