Trae SOLO チュートリアル:アイデアを自律的にアプリへ(2026)
TraeのSOLOモードは、作業計画から質問、成果物の納品まで自律的に進めるAIエージェントです。このチュートリアルでは生データのレポートから完成したReactダッシュボードまでの実際の開発を、画像付き13ステップで追いかけます。
要点まとめ
- SOLOはTraeの自律モードです。コードの自動補完ではなく、プロジェクトを計画し、確認質問を行い、ドキュメント・スライド・動くアプリという完成物を納品します。
- このページで示す基本ループ:MTCモードで生データを添付し、成果物の質問に答え、自動生成された ToDo リストを確認してから、PRDの起草をSOLOに任せます。
- ビルドはCode with SOLOへ切替。ブランドブック画像からブランドカラーを抽出してアプリに適用し、ブラウザで開ける動くダッシュボードを作り上げます。
- SOLOはWeb版とデスクトップ版があり、タスクはクラウドで実行。有料プランに含まれ、Proは月10ドルで同時2件のクラウドタスクが可能です。重いタスクはクレジットを素早く消費します。
TRAE SOLO Tutorial - 2026 | How I Built a React App From Raw Data Reports
動画ソース:Dan - Smart Tutorials6:35
Get Started with SOLO Builder
公式デモ:Trae8:29
スクリーンショットは上のチュートリアル動画からのもの。SOLO Builderに関する事実はTrae公式チャンネルのデモおよび docs.trae.ai ドキュメントと突き合わせて確認しました。
すべてのスクリーンショットの権利は元の作者に帰属します(上でクレジット表記)。各ステップから元動画の該当シーンへジャンプできます。
生レポートから動くダッシュボードまでの13ステップ
- 1
MTCモードで生データを添付する
Trae SOLO(Webまたはデスクトップ)を開き、デフォルトの More Than Coding モードのままにします。分析したいデータ——ここではユーザー行動のExcelエクスポート——を添付し、「この数字の裏にある市場を調査して」のような目標を入力します。ツールやスキルの選択はSOLO Auto Modeに任せて構いません。
データセットを添付し調査目標を入力したMTCコンポーザー。1:00 に視聴 - 2
成果物の質問に答える
作業に入る前に、SOLOは「完成」の形を確認してきます。最初の質問は最終成果物の種類:グラフと引用付きのDOCXレポート、PPTXスライド、その両方、注釈付きExcelブックから選びます。ステークホルダーが本当に必要なものを選んでください。以降のすべてがこの選択で決まります。
4つの出力選択肢が並ぶ「最終成果物は何にしますか?」ダイアログ。1:05 に視聴 - 3
SOLOにプロジェクトのToDoリストを草案させる
目標と出力形式が確定すると、SOLOは job 全体の構造化ToDoリストを生成し、紫色のワークスペースで追跡対象のタスクとして実行します。チェックリストの各行がエージェントの監視単位になり、ウィンドウタイトルにも job 名——ここでは「Generate PRD from To-Do List」——が表示されます。
生成されたToDoリストがSOLOワークスペースのタスクとして実行中。1:06 に視聴 - 4
ソースを重ねる —— フォーマットは自由
実際のプロジェクトは一つのファイルに収まりません。SOLOは複数の添付を一度に受け、フォーマットを自由に混ぜられます。事例では JS のKPIエクスポート、チャネル実績のxlsx、PDFのリサーチ概要、DOCXの計測メモを1つのフォローアッププロンプトにまとめて添付し、成長提案付きのPDFサマリーを依頼しました。
4種類のファイルを1つのPDFサマリー依頼に同時添付。1:31 に視聴 - 5
SOLOの読み取りを眺める:思考・スキル・ファイル
実行中、MTCパネルはエージェントの振る舞いを語ります —— Thought の一行、続いて Launching skill pdf と Launching skill data が、添付ごとに適切な能力を開く様子を示します。ここで2つ目のタスクを始めるのが得策です。すべてクラウドで動くため、自分のマシンは自由のまま。
アップロードに対しPDFとデータのスキルを起動するSOLOのアクティビティフィード。2:48 に視聴 - 6
ビルドは Code with SOLO へ切替
アプリ本体は Code with SOLO タスクで作ります。コンポーザーには Application Development、Project Understanding、Game Creativity、Automation Tools といったタスクタイプカードが並び、ブランドブック画像の添付も可能です。ここで TraeWISE のブランドガイドラインを添付することが、後のReactビルドをブランド通りに保つ鍵になります。
ブランドブック画像を添付した Code with SOLO のコンポーザー。3:19 に視聴 - 7
ブランドブックからデザインシステムを抽出
SOLOはブランドブック画像を読み、すぐ使えるデザイン言語を抽出します。ロゴのバリエーション、16進カラーコード付きの正確なパレット(#009669 緑、#0F173A ネイビー、#FFFFFF 白)、Inter Light のタイポグラフィ標本。これらの値がアプリのスタイリングトークンになり、手作業の転記は不要です。
抽出された TraeWISE ブランドガイドライン:パレットのhex値とタイポグラフィ。3:21 に視聴 - 8
PRDアンケートに答える
次にSOLOはPRDの準備に入り、形式を尋ねてきます。社内共有なら推奨のDOCX、リポジトリで版管理するならMarkdown、配布にはPDF、あるいはDOCXとMarkdownの両方も選べます。これは一連の質問の最初のもので、この後に分量や範囲に関する質問が続きます。
DOCXが推奨として表示されたPRD形式の質問。3:45 に視聴 - 9
生成されたPRDをレビューする
完成したPRDはワークスペースで正式なドキュメントとして表示されます。カバーブロック、「なぜ今このダッシュボードか」の論証、そしてアップロードしたリサーチ由来の「3つの重要な市場ギャップ(と自社の差別化)」セクション。ここで修正した内容はそのままビルドに反映されるので、批判的に読みましょう。
タスクリストの横に開いた Operations & Facilities 排出ダッシュボードのPRD。4:31 に視聴 - 10
分析ドキュメントを確認する
PRDと並行して、SOLOはステップ2で依頼した分析成果物もまとめます。ソリューションの概要モジュール、「インサイトから検証済みの削減へ」のアクションループ、ソースデータのホットスポットと欠落を示すデータ信頼性テーブル。非エンジニアのステークホルダーが実際に読むのはこのドキュメントです。
レポート内のソリューションモジュール、アクションループ、データ信頼性テーブル。4:35 に視聴 - 11
完成したダッシュボードを開く
ビルド結果は実際に動くアプリとして届きます。TraeWISEダッシュボードには 142.5 MWh の省エネ数値、排出量と水のKPIカード、省エネ推移の折れ線グラフ、最近のアクティビティ、92のサステナビリティスコアが表示され、スタイルはすべてステップ7で抽出したパレットから。エージェントは本番ビルドの検証まで自力で行いました。
KPIカードとグラフを備えた完成済み TraeWISE サステナビリティダッシュボード。4:50 に視聴 - 12
完了タスクとアーティファクトを確認する
タスクが完了すると、サマリーが納品物を一覧化し、アーティファクトをまとめます。PRD.md、sustainability-architecture.md、プロトタイプのPNG、KPI出力のJSON、変更ファイル数など。アーティファクトは「依頼したこと」と「エージェントが作ったもの」を結ぶ契約書です。
PRD・アーキテクチャ・プロトタイプを一覧する Artifacts セクション付きタスクサマリー。5:05 に視聴 - 13
ワークスペースのファイルを見回す
エージェントが書いたファイルはすべてタスクのワークスペースに残ります。index.html、assets と src フォルダ、Analysis.pdf、さらには Testing.mp4 と Testing.zip まで。ここから左サイドバーの並列タスク間を移動して反復を続けられます。SOLOはフォローアップのためにプロジェクト文脈をまるごと保持しています。
生成されたプロジェクトファイルが並ぶワークスペースのファイルブラウザ。5:12 に視聴