クエリに画像を添付すると、エージェントがアプリのアーキテクチャをより深く理解し、UI 開発プロセスを加速できます。
プロンプトに画像を添付するには、[コンテキストを追加] > [メディア] 
をクリックして画像をアップロードします。
エージェントが画像に関してサポートできることの例をいくつかご紹介します。
希望する UI のモックアップがある場合は、エージェントがそれを作成するコードを提供できます。たとえば、Now in Android アプリのスクリーンショットをエージェントに提供すると、エージェントはそれを作成するための Compose コードを提供できます。この例は、アプリのフィード（左）と、その UI 用にエージェントが生成した Jetpack Compose コード（右）のスクリーンショットを示しています。詳細については、画像アタッチメントを使用して UI を生成するをご覧ください。
エージェントが Now in Android アプリの UI のスクリーンショットから Jetpack Compose コードを生成します。 アプリの構成方法を学習したい場合は、エージェントがコンポーネント パーツの観点から UI の仕組みを説明できます。たとえば、別の Now in Android のスクリーンショットの背後にあるコンポーザブルとデータフローを説明するようエージェントに依頼できます。左側の画像はニュース アイテムの詳細画面を示し、右側の画像は、その画面の Compose 構造とデータフローに関するエージェントの説明を示しています。
エージェントが、特定のアプリ画面の UI 構成とデータフローを説明します。 アプリのアーキテクチャ図がある場合、エージェントは図に基づいてアプリを作成するコードを提案し、フルスタック開発アシスタントとして機能します。エージェントは、図をドキュメント化し、アプリの構造を説明することもできます。これは、チームメイトがレビューする設計ドキュメントを作成する際に役立ちます。たとえば、次の図は、UI、ViewModel、リポジトリ、データソースなどのさまざまなアプリ コンポーネント間のデータフローを示す簡略化されたアーキテクチャ図です。
エージェントは、アプリのアーキテクチャ図からコードとドキュメントを生成できます。 UI のバグに気づいた場合は、スクリーンショットを撮り、エージェントに解決策をブレインストーミングするよう依頼します。エラーのある領域を丸で囲むことで、問題点を指摘できます。次の例は、位置がずれている UI 要素を赤色の円で強調表示したモバイルアプリのスクリーンショットを示しています。
エージェントは、スクリーンショットから UI バグの解決策をブレインストーミングできます。