皆さん、v0は使っていますか？最近外部APIとの連携が可能になり、更にできることの幅が広く・便利になりました。

今回はv0を例にしつつ、他のフロントエンド生成AIツールでも使えるLLMアプリの開発方法についてご紹介します。

アプリの設計をしよう

まずは作りたいアプリの設計をしましょう。
どのようなアプリを作りたいか

アプリの目的を明確にする

今回は旅行に便利なAIアプリを作るために、まずは簡単な機能から開発を始めます。例として荷物リスト作成支援をしてくれる、地名、滞在日数、季節を入力すると必要な荷物のリストをAIエージェントが提案してくれるというものを作ることにします。

主要な機能を列挙する

アプリを作るために必要な機能を考えてざっと挙げてみましょう。もちろん目的からAIと相談して要件定義を行っても大丈夫です。
- ユーザー入力機能（目的地、滞在日数、季節）
- Dify APIへのリクエスト送信
- AIが生成した荷物リストの表示
など

(オプション)ユーザーフローを図式化する

ユーザーがどのような操作をするか、要件だけでは伝わりにくい場合や開発側がイメージしにくい場合はユーザーフローまで作成しましょう。簡単なものでもかなり開発後のイメージが湧きやすく、またアプリらしい挙動に一気に近づきます。

1. ユーザーがアプリにアクセス

2. 入力フォームに情報を入力

   1. 目的地を入力

   2. 滞在日数を選択

   3. 季節を選択

3. 「リスト生成」ボタンをクリック

4. ローディング表示（APIリクエスト中）

5. 生成された荷物リストを表示

6. (オプション)

   1. リストの編集

   2. リストの保存

   3. リストの共有(出力)

(オプション)必要なコンポーネントをリストアップする

上記の内容をv0に渡すだけでも問題ありませんが、v0のトークンを節約できるように先に必要なコンポーネントを他AIと相談してあらかじめ決めておくのがおすすめです。

1. ヘッダー（アプリタイトル表示）

2. 入力フォーム - 目的地入力フィールド - 滞在日数入力フィールド - 季節選択ドロップダウン

3. 「リスト生成」ボタン

4. ローディングインジケーター

5. 結果表示エリア - カテゴリー別の荷物リスト - 各アイテムのチェックボックス

6. 編集機能（アイテムの追加・削除）

7. 保存ボタン

8. 共有ボタン（PDFエクスポート、リンク生成など）

設計を元にモックを作ってみよう

それではv0にログインして、最初のチャット開始欄に上記の設計、もしくは以下のようなプロンプトを作ってv0に渡してみましょう。

v0に入力するプロンプトの例

<prompt>
  <project_type>React Application</project_type>
  
  <project_name>Travel Packing Assistant</project_name>
  
  <description>
    Create a responsive web application that helps travelers generate personalized packing lists based on their destination, trip duration, and season.
  </description>
  
  <key_features>
    <feature>User input form for destination, trip duration, and season</feature>
    <feature>API integration to generate packing lists</feature>
    <feature>Display of generated packing list, categorized by item types</feature>
    <feature>Option to save and share packing lists</feature>
  </key_features>
  
  <ui_components>
    <component>Header with application title</component>
    <component>Input form for travel details</component>
    <component>Generate button to trigger list creation</component>
    <component>Loading indicator for API requests</component>
    <component>Results display area for packing list</component>
    <component>Save and share buttons for generated lists</component>
  </ui_components>
  
  <design_requirements>
    <requirement>Use a clean, modern design with a travel-themed color scheme</requirement>
    <requirement>Ensure responsive layout for mobile and desktop devices</requirement>
    <requirement>Implement accessible design with proper ARIA labels</requirement>
  </design_requirements>
  
  <additional_considerations>
    <item>Implement basic error handling for API requests</item>
    <item>Consider adding a feature for users to customize generated lists</item>
    <item>Optimize performance for quick loading and response times</item>
  </additional_considerations>
</prompt>

上手く作成されると、このような画面が出来ました。

まだリスト作成の部分は設定していないので見た目のみですが、大まかにイメージ通りの操作ができるUIが作成されました。

後でこの画面を元に同じチャットからAPIとの接続を行うので、こちらは消さずに残しておいてください。

Difyでフロー or チャットボットを作ろう

それでは次に、Difyから裏側のエージェントを作成しましょう。