ガイド

RunWhale を使い始める

モデルを設定してプロジェクトを開き、エージェントに変更を依頼して、スマートフォンで結果を試します。

最終更新：2026 年 9 月 4 日

最初の依頼を送る前に

RunWhale の開発環境は端末上にあり、推論には設定したプロバイダーを使用します。初回の利用をスムーズにするため、次の 3 点を確認しましょう。

モデルの API キーを用意

利用するプロバイダーのキーを用意します。RunWhale の設定からのみ保存し、プロジェクトや依頼文には入力しないでください。

エージェントの利用時はオンラインに

推論にはネットワークが必要です。Git のネットワーク操作や未キャッシュの依存関係の取得にも必要になる場合があります。

対応するプロジェクトから開始

内蔵の Web・Expo テンプレートを選ぶか、有効な RunWhale Preview のエントリーを持つ対応リポジトリを読み込みます。

基本の作業手順

設定から動作確認まで

モデル設定後は Baby game の例に沿って進めます。Expo プロジェクトを作り、ゲームの作成を依頼して編集を承認し、ネイティブプレビューで Animal Parade を試します。

設定 → モデル・安全に保存
プロバイダーとモデルを設定
設定 → モデルを開き、プロバイダーとモデルを選択します。そのプロバイダーの API キーを貼り付け、安全に保存をタップします。
キーは端末の安全なストレージに保管されます。推論には選択したプロバイダーを使用するため、依頼の送信時は端末をオンラインにしてください。
新規プロジェクト・Web / Expo
プロジェクトを作成、またはリポジトリを読み込む
新規プロジェクトをタップして名前を入力します。React の Web サイトと Web プレビューには Web、アプリとネイティブプレビューには Expo を選びます。
このデモでは Baby game と入力し、Expo を選択します。任意のリポジトリ欄は空のまま、作成してエージェントを開くをタップします。
既存のコードで作業する場合は、対応する Git リポジトリを指定します。読み込んだプロジェクトの runwhale.json がプレビューの種類を決めます。
エージェント
実現したい結果を具体的に伝える
作りたいものや変更内容、期待する動作を伝え、作業に必要な対応済みのチェックも依頼します。
このデモの依頼は「Make a game for baby」だけです。エージェントは、大きなタップ領域、やさしい反応、6 枚の動物カードを備えたゲームを計画します。
レビュー・今回のみ許可・アクティビティ
作業の進行と結果を確認
レビューモードでは、index.tsx に書き込む前に確認が表示されます。今回のみ許可をタップし、同じセッションで書き込みやチェックの進行を確認します。
エージェントは TypeScript 診断と Git 差分の確認を実行します。新しい環境で未解決の依存関係を報告した後、ネイティブプレビューで実際にアプリを起動して確認します。
実行 / 再読み込み・プレビュー
同じプロジェクトをプレビューで実行
動画ではエージェントがネイティブプレビューを直接起動します。応答の終了後に実行 / 再読み込みアイコンをタップすることもできます。Web プロジェクトは Web プレビュー、対応する Expo プロジェクトはネイティブプレビューで動作します。
最初の画面を見るだけでなく、操作も試しましょう。診断メッセージが出たらプロジェクトに戻り、その正確な内容を次の修正依頼に使います。
ネイティブプレビュー・Animal Parade
動物をタップして反応を確認
Animal Parade は犬、猫、牛、ひよこ、カエル、ライオンのカードの上に「Can you find the Dog?」を表示します。カードをタップして、問題や反応の変化を確認します。
デモでは「Yay!」「Great job!」「You found it!」などの反応に続いて、次の動物の問題が表示されます。さらに変更する場合は、保存された同じエージェントセッションに戻ります。