💻

TRAE SOLO モード

に公開
AI
Vibe Coding
TRAE
zennfes2025ai
idea

SOLO モードは、高度に自動化された開発手法です。AI の主導により、要件理解、コード生成、テストから、成果のプレビュー、デプロイまで、全プロセスを自動で計画・実行できる機能です。

自然言語での記述、音声でのやり取り、ローカルファイルのアップロードなど、さまざまな方法で要件を入力すると、AI が内容をタスクに分解して効率的に実行してくれます。これにより開発プロセスの大幅な簡略化・スマート化が実現できます。

実際に手を動かさず、AI にすべて任せてしまいたいのであれば、SOLO モードが理想の選択肢となるでしょう。この記事では、SOLO モードをすぐに使い始められるよう、画面や主な機能、操作について詳しく説明します。

使用制限

SOLO モードを使用できるのは、Pro プランをサブスクライブし、招待コード（SOLO Code）を取得したユーザーのみです。

SOLO モードでサポートされるのは、AI エージェントとの会話のみとなります。

画面について

SOLO モードの主な画面要素は次のとおりです。

説明

AI パネル。エージェントとのやり取りに使用します。左上には SOLO モードと IDE モードの切り替えスイッチが、右上には会話管理や AI 機能管理の入口があります。

トップバー。左から以下の機能が並んでいます。

ツールパネルのコントロールボタン：ツールパネルの表示/非表示を切り替えます。

「フローモード」機能スイッチ

ツールパネルの切り替えボタン。内容は次のとおりです。

エディター パネル：コーディングのプロセスと成果物を表示。

ターミナル パネル：コマンドの実行情報を表示。

ブラウザー パネル：AI が構築したフロントエンドアプリを表示。

ドキュメント パネル：製品要求仕様書（PRD）の出力プロセスと初稿を表示。

統合 パネル：TRAEが連携している Supabase の組織とプロジェクト情報を表示し、AIサービスと支払いサービスを管理。

Figma パネル：コードに変換したいフレームまたは要素を選択し、会話に送信。

下部パネルコントロールボタン（エディター のみ）：問題、出力、デバッグコンソール パネルの表示/非表示を切り替えます。

プライマリサイドバースイッチ（エディター のみ）：サイドバーには、リソースマネージャー、検索、ソースコード管理などの機能があります。

3.ツールパネルの情報表示領域。トップバーで選択した内容に応じて、コンテンツが随時更新されます。たとえば、エディター パネルを選択すると、この領域にコーディングのプロセスと成果物がリアルタイムで表示されます。

4.ステータスバー（エディター パネルのみ）。編集ステータスに関する追加情報が表示されます。

料金について

SOLO モードでは、Builder エージェント、Builder with MCP エージェント、カスタムエージェントとの会話でエージェントが応答を開始すると、選択したモデルに応じた質問・回答回数が消費されます。SOLO Builder エージェントとの会話では、スーパーモデルの質問・回答回数（高速キュー）が1回消費されます。

SOLO Code で贈呈される質問・回答回数（高速キュー）は、SOLO モードと IDE モードのどちらでも使用できます。サブスクリプションプランまたは期間限定容量パッケージに質問・回答回数（高速キュー）が残っている場合、これらの回数から優先的に使用されます。

SOLO モードを開く

TRAE の画面左上にあるスイッチをクリックすると、SOLO モードと IDE モードを切り替えることができます。

** AI の回答中はモードを切り替えられません。

機能の使い方について

ツールパネル

SOLO モードには、エディター、ターミナル、ブラウザー、ドキュメントの 4 つのツールパネルがあり、AI の進捗や成果を確認できます。

  • エディター：コーディングのプロセスと成果物を表示します。エージェントが生成したコード変更は、新しい会話を始めるか、会話を切り替えると自動的に受け入れられます。また、生成されたコードを手動で編集したり、コードの一部を選択して会話に送信することでさらなる処理をしたりすることもできます。ファイルやコードの削除などは、実施前に確認が必要となります。

  • ターミナル：コマンドの実行プロセスと結果を表示します。出力内容を選択して会話に送信・質問をしたり、エラー発生時にエラーメッセージを選択して分析や修正を AI に依頼したりできます。

  • ブラウザー：ウェブアプリケーションの最終成果物のプレビューを表示できます。

    • 要素の修正が必要な場合は、右上にある 要素を選択 をクリックして要素選択モードに入り、ページから要素を選択してチャットに送信します。静的テキストは、クリックして直接編集することも可能です。
    • プロジェクトをデプロイしたいときは、右上にある デプロイ をクリックして、デプロイタスクを開始します（具体的な操作については、「デプロイ」の項目をご覧ください）。
    • アドレスバーに外部 URL を入力すると、そのページを表示できます。
    • 現在のプロジェクトにコンソールエラーがある場合、パネル下部に情報が表示されますので、エラーをチャットに送信できます。

  • ドキュメント：製品要求仕様書（PRD）の出力プロセスと初稿を表示します。生成された PRD は手動で修正したり、一部を選択して会話に送信することで修正を依頼したりできます。このパネルでは、Markdown 形式がサポートされています。

  • 統合：TRAEが連携している Supabase の組織とプロジェクト情報を表示し、AI サービスと支払いサービスを管理できます。

  • Figma：コードに変換したいフレームまたは要素を選択し、AI との会話に送信するのに使用できます。

フローモード

「フローモード」機能は、SOLO モードでのみ利用できます。オンにすると、AI の作業内容に応じてエディター、ターミナル、ブラウザー、ドキュメントの4つのツールパネルが自動的に切り替わり、作業の進捗状況と成果物をリアルタイムで追うことができます。たとえば、要件に基づいて PRD が出力されると、自動的にドキュメントパネルが開いて、生成プロセスが表示されます。その後、コーディングが始まるとエディターパネルに切り替わり、コードの記述プロセスを表示します。この機能は、トップバーにある フローモード で切り替えられます。

  • AIの応答中に、ツールパネルを手動で切り替えたり、会話中のツールカード（プレビューカード、新規/編集ファイルカード、ターミナルカード、PRD カードなど）をクリックしたことでツールパネルが切り替わったりすると、「フローモード」機能はオフになります。
  • AIの応答中、ツールパネルは読み取り専用になり、手動での操作は一切受け付けなくなります。手動で介入したり、内容を修正したりする必要があるときは、パネル領域をダブルクリックして「フローモード」モードを終了してから行ってください。

SOLO Builder

SOLO Builder エージェントは、プロフェッショナルで機能的な ウェブアプリケーションの構築をサポートする機能です。自然言語で要件を記述すれば、タスクに基づいて適切な AI モデルを自動的に選択し、要件分析からPRD 生成、コーディングまで行って、プレビュー可能な成果物まで生成します。

Vercel デプロイ

現在、TRAE では ウェブアプリケーションをサードパーティサービスの Vercel 経由でオンラインにデプロイできます。Vercel でサポートされているフレームワークについては、こちら をご覧ください。
ウェブアプリケーションの開発が完了したら、ダイアログボックスか ブラウザー タブの右上にある デプロイ ボタンをクリックしてデプロイタスクを開始します。AI にデプロイを要請して開始することもできます。

初回デプロイ時は、認証を行う必要があります。Connect Service というウィンドウがポップアップするので、Start Authorization をクリックし、Vercelに移動して認証を開始します。

  1. Add Integration をクリックします。
  2. Install TRAE パネルで、以下の手順に従い、インテグレーション（Integration）として Vercel に TRAE をインストールします。
    a. TRAE インテグレーションをインストールする Vercel プロジェクトを選択します。
    b. プロジェクトの認可スコープ設定で、All Projects を選択します。
    All Projects を選択しないと、今後、別のプロジェクトをデプロイする際に権限の問題が発生することがあります。
  3. 権限のスコープは Read と Read and Write を選択します。
  4. Install をクリックします。
    インストールが完了すると、Vercel の Integrations に TRAE が表示されます。また、TRAE アカウント設定ページの Integrations でも Vercel が表示されます。


    認証が完了したら TRAE に戻り、デプロイ パネルの 再デプロイ ボタンをクリックして、プロジェクトを Vercel にデプロイします。デプロイが完了すると、Vercel の Overview タブでデプロイされているプロジェクトをすべて確認できます。また、Deployments タブでは、特定のプロジェクトのログも確認できます。


    さらに デプロイ パネルに共有可能なリンクが生成されます。このリンクを使うと、プロジェクトを他のユーザーと共有可能です。プロジェクトの内容を更新したら、新しいバージョンをデプロイ をクリックすると、最新バージョンを Vercel にデプロイできます。

Supabase 連携

Supabase は、オープンソースの Firebase 代替ツールです。TRAE SOLO は、プロジェクトを Supabase と連携することで、フロントエンドの UI とバックエンドのデータベースをシンプルに管理することが可能です。アプリケーションの UI をデザインしながら、クラウド側で PostgreSQL データベースを構築する、といったことができます。
プロジェクトを Supabase と連携すると、次の機能が利用できるようになります。

  • データベース（PostgreSQL）…… SQL を完全にサポートしており、アプリケーションデータの保存・参照ができます。TRAE SOLO は、指示に従って必要なテーブルとスキーマを自動で生成可能です。詳細については、Database をご覧ください。
  • ユーザー認証…… ユーザー登録、ログイン、アクセス権限をセキュアに管理します。TRAE SOLO は Supabase Auth との統合をサポートしています。Supabase Auth は、メール/パスワードによるログインのほか、GoogleやGitHub、X などの OAuth ログインを含め、さまざまな認証方法に対応しています。詳細については、Auth をご覧ください。
  • ファイルストレージ…… Supabase Storage は画像やその他のファイルをアップロードしたり、配信したりできる機能で、ユーザーアイコンやファイルのアップロード、アプリケーションに必要な各種静的メディアに適しています。詳細については、Storageをご覧ください。
  • リアルタイム更新…… Supabase は、データの変更をリアルタイムでアプリケーションにプッシュできます。すべてのユーザーが更新を即座に確認できるため、オンライン会話や動的な情報ストリーム、共同作業型ダッシュボードなどの機能が実装できます。詳細については、Realtimeを参照してください。
    プロジェクト構築の際に、Supabase との連携が必要と AI が判断すると、左側の会話ボックスにヒントが表示されます。また、AI に提案される前から自分でプロジェクトを Supabase と連携することもできます。その場合は、次のとおり操作してください。
  1. Supabase アカウントを登録します。
  2. ヒントカードがある場合は、カードにある Connect をクリックします。また、Integrations パネルの Connect をクリックしても構いません。
    image.png
  3. 認証ページで、Connect Supabase をクリックします。
  4. API アクセス認証ページで、作成した Supabase 組織を選択し、Authorize TRAE をクリックします。
    認証が完了すると、TRAE から選択した組織に API によるアクセスが許可されます。その後、TRAE SOLO の Integrations パネルに、Supabase 組織とアクティブなプロジェクトが表示されます。
  5. アクティブな Supabase プロジェクトの右側にある Connect ボタンをクリックします。
    TRAE SOLO で連携できるのは、アクティブな Supabase プロジェクトのみです。
    以上の操作により、プロジェクトが指定された Supabase プロジェクトと連携されます。ニーズに応じてアプリケーションデータの管理やユーザー認証機能が追加できます。

Figma インポート

Figma でデザインされたファイルの情報を自動的に解析し、デザイン要素を実行可能なコードに変換できます。個々のコンポーネント（ボタン、フォーム、カードなど）を選択して生成することはもちろん、フレーム全体を完全なページコードとして生成することも可能です。選択中のフレームまたは要素をダイアログに追加して送信すると、コードスニペットの生成が開始されます。
ビルトインの Figma ツールパネルを使用すると、画面を変えることなくデザインファイルの表示やレイヤーの並び順調整、基本的なスタイル変更などができます。ブラウザー切り替えや Figma への移動などの手間を省くことが可能です。

  1. 会話の入力ボックスの右下にある Figmaからインポート をクリックします。

    右側の領域に Figma ツールパネルが表示されます。
  2. Figma にログインします。
  3. コードに変換したいフレームまたは要素を選択し、右上にある 会話に追加 をクリックします。

    選択したフレームまたは要素がダイアログボックスに追加され、デフォルトのプロンプトが表示されます。
  4. （必要に応じて）プロンプトを編集します。
  5. 送信 をクリックするか、Enterキーを押します。
    Figma のデザインとプロンプトに基づいて、AI がコードの生成を始めます。

AI サービス

TRAE SOLO に AI サービスを構成しておけば、必要に応じて自身の ウェブアプリケーションに組み込むことができます。現在、サポートしている AI サービスは、OpenAI、Anthropic、Geminiです。
AI LLM API の組み込みが必要だと判断したものの、現在のプロジェクトで AI サービスが構成されていない場合、会話パネルに構成を促すためのカードが表示されます。またこれ以外にも、統合 パネルから自身で構成することも可能です。その場合は、次のとおり操作してください。

  1. 組み込みたい AI サービスの API キーを取得します。
  2. カードの 構成 をクリックして 統合 パネルに移動し、目当てのプロバイダーの横にある 構成 をクリックします。
    プロジェクトに特定の AI LLM API を組み込む必要があると AI が判断した場合、カードに表示されるのはそのプロバイダーのみとなります。複数のプロバイダーの AI LLM API が必要だと判断した場合や、プロバイダーの指定がない場合は、複数のプロバイダーが表示されます。
    または
    統合 パネルに移動し、目当てのプロバイダーの横にある 構成 をクリックします。
  3. API キーを入力します。
  4. 確認 をクリックします。

支払いサービス

アプリケーション構築で、支払いモジュールを素早く実装できるよう、TRAE SOLO にはオールインワンの決済ソリューション「Stripe」が統合されています。Stripe は、受け取り、支払い、サブスクリプション管理、財務レポートの自動化など豊富な機能を取り揃えており、シンプルな API を通じてウェブからモバイルまでエンドツーエンドの支払い体験をサポートしているプラットフォームです。SOLO モードでは Stripe API を経由することで、決済サービスを迅速かつ柔軟に統合できます。
決済サービスを構成するには、次のとおり操作してください。

  1. Stripe にログインし、公開鍵と秘密鍵を取得します。詳細については、「APIキー」をご覧ください。
  2. SOLO モードで、統合 パネルに移動します。
  3. 支払いサービスで、Stripe の 構成 をクリックします。
  4. Stripe 公開鍵 と Stripe 秘密鍵 を入力し、確認をクリックします。
  5. 構成が完了したら、作成をクリックします。
    Stripe の商品作成ページに移動します。
  6. Stripe で商品と価格を作成します。詳細については、「商品と価格」をご覧ください。
    作成が完了したら、右上の更新をクリックすると、商品と価格が一覧に表示されます。
  7. 商品を選択すると、AI が組み込みできるようになります。

Discussion