会話AIモックアップの作り方

会話AIエージェントの開発を始めたいとお考えですか？それは素晴らしい！でも何から始めたらいいのでしょう？VonageのAI Studioは、ドラッグ＆ドロップですぐに始められる超シンプルなソリューションを開発しました。しかし AI Studioでも ノード, パラメータ, エンティティなどなど、いざ構築しようとすると圧倒されることがある。何をどこに配置すべきかを知るにはどうすればいいのか？もちろん、モックアップ（フローチャート）を使えばいい！

もしかしたら、モックアップは時間の無駄で、ドラッグ＆ドロップを始めればいいと思っているかもしれない。しかし私は、モックアップは長い目で見れば時間を節約するものだと主張したい。モックアップから始めることの重要な利点がいくつかある：

• 視覚化：モックアップは、デザインの視覚的な表現を提供し、最終的な製品がどのように見え、どのように機能するかをすべての関係者に正確に伝えます。ビジュアライゼーションは、エージェントのフローとデザインに関して、全員が同じページにいることを確実にするのに役立ちます。

• フィードバック：モックアップを作成することで、デザイナーやその他のステークホルダーは、フローを歩きながら不測の事態を想像し、デザインをテストすることができます。フローを見ることで、デザイナーは見落としを見つけることができる。

• 効率：モックアップは、デザインプロセスの早い段階で潜在的な問題や障害を特定することで、時間とリソースを節約することができます。これにより、後でコストのかかるミスや再設計を防ぐことができます。AI Studioの構築速度は確かに速いですが、ノードを再設定することなく画像に変更を加えることができれば、さらに速くなります！例えば エンティティを パラメータ例えば、パラメータにエンティティを設定した場合、それは将来変更することができないので、正しいエンティティ（データ型）を決定するためにモックアップが役に立ちます。

さて、モックアップの重要性を納得してもらったところで、良いモックアップの作り方を見ていこう。

忠実度の高いモックアップ

エージェントを視覚化するのに役立つフローチャートであれば、どの程度でもチームに大きな方向性を与えることができる。しかし、モックアップを本当に「忠実度の高い」ものにするためには、いくつかの重要な要素があると私は信じています。

• ノード表現 - モックアップは、エージェントで使用されるすべてのノードタイプを考慮しなければなりません。それぞれの特定のケースでどのノードが使用されるかを明確に視覚的に示すことは、エージェントビルダーにとって多くの時間を節約することになります。

• 変数の説明責任 - 変数はどのように扱われるのか？モックアップでは、必要な変数（AI Studioではパラメータと呼ばれる）と、それらがフロー全体でどのように使用されるかを考慮する必要があります。変数のすべてのインスタンスを追跡できれば、どのデータ型が必要かを簡単に判断できます。

• ユーザーの結果満足度 - あなたのモックアップには、論理的で一貫したフローに沿った明確なユーザー・ジャーニーがありますか？フローの分岐点としてユーザーの選択をたどるのは簡単ですか？ユーザーが達成した結果は満足のいくものですか？ユーザは結果に満足しないかもしれませんが、会話は少なくともユーザの意図を満たしていますか？例えば、エージェントはユーザが自分の注文を見つけるのを助けることができないかもしれませんが、エージェントは正しい質問をし、ユーザが探しているリソースを見つけることができる別の方法を提供していますか？

モックアップツール

私自身はモックアップにMiroを使っているが、世の中には良い選択肢がたくさんある。

• ミロ- たくさんの形、色、コネクター、そしてテキスト。

• ルシッドチャート- AI Studioでカンバセーショナル・デザイナーとして働いている私の同僚の何人かは、Lucidchartを好んで使っている。かなり素晴らしいはずだ！

• Draw.io- エージェントを構築するために必要なものがすべて揃った、無料のオープンソースビルダーです。

• ペンと紙 - モックアップに高級なソフトウェアは必要ない！ペンと紙でもホワイトボードでもいい、

鍵から始める

前述したように、さまざまなタイプの会話をすべて完全に表現することは、会話に必要不可欠である。 会話ノードを完全に表現することが不可欠です。キーを作成するとき、エージェントのすべての異なる機能について考えてください。幸運なことに、AI Studio にはキーの青写真があります。以下は、私が使用しているコンポーネントの簡単なキーです：

key-of-mockup-components.png

文字通りに、文字通りに

コンポーネントを使用する場合、エージェント内で何が起こるかを正確に記述します。メッセージを送信する場合は、メッセージテキストを記述します。条件を書く場合、その条件は何をチェックするのか？分類であれば、どの変数が分類されるのか。この例です：

conversational-ai-flow-mockup.png

上記の例では、変数がどのように扱われているかがわかる。変数 $Topic変数は 入力の収集ノードで設定され、Classification ノードで使用されます。

建築準備完了

モックアップを作成した後、エージェントのために多くの異なるフローを作成することになるかもしれません。エラー処理、統合やウェブフックの正確な実装、特定のノードのテキストを編集するかどうかなど、まだ残っている疑問があるかもしれません。しかし、一般的には、すべての利害関係者が可能な結果とフローに同意できるように、エージェントを完璧に表現することができます。下記は、昨年、API Days Paris でカンファレンス参加者を支援するために使用したエージェントのモックアップの例です。 API デイズ パリ).

complicated-conversational-ai-mockup.png

結論

モックアップとフローチャートに関するこのガイドは役に立ちましたか？AI Studioの構築はモックアップから始めるべきだと確信されましたか？ぜひ ツイッターまたは VonageコミュニティSlack(AI Studioのチャンネルもあります）。あなたがLow Codeを使って何を作っているのか、とても興味があります！