はじめに
-
本記事ではUiPath Appsの新機能であるコネクション連携を使って生成AIアプリを作成してみたいと思います。出来上がりは ↓ このような感じです。
-
質問文を入力してボタンをクリックすると生成AIサービスからの回答が表示されるというシンプルなものですが、UiPath Appsを利用することによってローコードかつ自前でサーバーを用意せずにWebアプリの開発および運用が可能 です。
UiPath Appsとは?
- UiPath Apps は、ユーザーエクスペリエンスに優れたエンタープライズレベルのカスタム アプリケーションを構築・共有できる、ローコードアプリケーション開発プラットフォームで UiPath Automation Cloudの一部として利用することができます。AppsではUI要素のコンポーネントを配置し、ボタンクリックなどをトリガーとして自動化プロセス実行することもできます。
- まだプレビュー段階ですが アプリのコネクション によってAppsからIntegration Serviceを呼び出すことができるようになりました。Integration Service はいわゆるiPaaS (Integration Platform as a Service) で様々なWebサービスと容易に連携できます。UiPath GenAIアクティビティ などを利用すれば生成AIサービスを呼び出すこともできます。コネクション連携ではAppsからIntegration Service経由でWebサービスをコールするため、実行環境としてのUiPath Robotは不要になります。
UiPath GenAI アクティビティを利用するにはAIユニットが必要となります。プレビュー段階では無料でご利用いただけていましたが、2024年7月に一般提供(GA)されてからはアクティビティ実行ごとにAIユニットが消費されます。
- Appsでこのように開発されたWebアプリはRobotが不要なためモバイル端末でも実行することができます。今回はモバイル対応の生成AIアプリをAppsで作成してみたいと思います。
Appsによる生成アプリ作成手順
Integration Serviceのコネクタを作成する
-
Automation Cloud に管理者アカウントにてサインインし、Integration Serviceメニューをクリックします。
-
UiPath GenAIアクティビティ のコネクタを作成します。OpenAIなどその他の生成AIサービスとのコネクタを作成する手順については こちらの記事 をご参照ください。
Appsでアプリを作成する
-
次にAppsでアプリを作成します。Automation Cloud にてAppsメニューをクリックします。
-
[新しいアプリを作成] をクリックし、アプリケーション名として
ChatApps
と入力し [作成] をクリックします。
UIの作成
-
生成AIアプリのシンプルなUIを作成します。[コントロールを追加] をクリックし、入力 > テキストボックス をドラッグ&ドロップしてMainPageに追加します。
-
[コントロールを追加] をクリックし、入力 > ボタン をドラッグ&ドロップしてMainPageに追加します。テキストを "Query" に変更します。ユーザーがクリックした時に質問内容を生成AIに問い合わせするように後ほどイベントルールを実装します。
-
再び [コントロールを追加] をクリックし、入力 > カスタムHTML をドラッグ&ドロップしてMainPageに追加します。カスタムHTMLは生成AIサービスからの応答を表示します。スタイル > サイズ > 幅を
370 px
に指定します。
-
生成AIサービスからの応答を格納する変数を作成します。左メニューの アプリの変数 > (+) をクリックし、変数名
query_response
、型Text
を選択して [作成] をクリックします。
イベントルールの作成
ボタンクリック時にコネクションを利用して生成AIサービスに問い合わせするようにイベントルールを実装します。
-
新しいルールとして UiPath GenAI Activities > Content Generation を選択します。
-
Content Generation (コンテンツ作成) のパラメーターは下記のように設定します。
-
Model name:
"gpt-4o-2024-05-13"
-
Stream:
false
-
Prompt:
MainPage.Text.Value
(※ コントロール名を変更している場合はText
部分を置き換えます) - その他のパラメーターは アクティビティガイド をご参照ください。
-
Model name:
-
アクティビティ実行の戻り値を受け取るため、完了時のルールを (+) をクリックして追加し、 値を設定 を選択します。
- 設定する項目: アプリの変数として
query_response
をセットします。 - 値: 式として
Newtonsoft.Json.Linq.JToken.Parse(MainPage.Button.ContentGeneration.Response.RawResponse)("text").ToString
をセットします。-
Webガイド に記載の通り、生の戻り値は
<PageName>.<ControlName>.<RuleName>.Response.RawResponse
で受け取ります。それをJSONオブジェクトとしてパースし、応答部分のみを取り出しています。
-
Webガイド に記載の通り、生の戻り値は
- 設定する項目: アプリの変数として
カスタムHTMLコントロールの設定
カスタムHTMLの外観を設定し、生成AIサービスからの応答を表示するようコードを記述します。
-
コードエディターにてそれぞれ次のように設定して [保存] をクリックします。
HTML<div id="textContainer"> </div>
CSS@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP"); div { background-color: #ffffff; font-family: 'Noto Sans JP'; font-size: 13px; color: #333333; display: grid; } code { font-family: 'Courier New', Courier, monospace; font-size: small; background-color: #f8f8f8; border: 1px solid #dddddd; border-radius: 4px; padding: 2px 4px; color: #333333; }
JAVASCRIPTasync function init() { const text_container = document.getElementById('textContainer'); App.onVariableChange("query_response", value => { console.log("Response: ", value); text_container.innerHTML = value; }) } init();
実行確認とデバック・微調整
- これで基本部分は実装できましたので動作確認してみましょう。[プレビュー] をクリックすると別タブにてアプリが起動します。
- UIが表示されましたらテキストボックスに質問文 (例:
UiPath Automation Cloudについて教えて
) を入力して [Query] ボタンをクリックします。30秒ほどで応答が表示されます。
- 現段階では見栄えはあまり良くありませんので後ほど調整します。
デバッグとモバイル対応
-
もし応答が正常に表示されない場合にはF12を押下して開発者ツールを起動し、Console タブを開きます。
-
モバイル端末でのUI微調整も開発者ツールで行うことができます。Elements タブ左のモバイルアイコンをクリックし、画面左上部で端末の種類を選択します。見栄えが良くなるようにテキストコントロールやカスタムHTMLのサイズやマージン(余白)を調整します。
- モバイル対応のデザインに関する詳細は こちらのガイド もご参照ください。
Markdown→HTML変換
-
現段階ではカスタムHTMLにて生成AIサービスの応答をそのまま表示していますが、改行などがされておらず可読性があまり良くありません。応答は主にMarkdown形式であるため、既存コードに少し手を加えてHTMLに変換し見栄えを改善してみましょう。
-
Markdown→HTML変換のJavaScriptライブラリはいくつかありますが、今回は Showdown を使用したいと思います。
-
コードエディターを再度開き、JavaScriptを次のように変更して [保存] をクリックします。
JAVASCRIPTasync function init() { const text_container = document.getElementById('textContainer'); const converter = new showdown.Converter(); App.onVariableChange("query_response", value => { let answer_html = converter.makeHtml(value); console.log("HTML: ", answer_html); text_container.innerHTML = answer_html; }) } init();
アプリのデプロイ
-
アプリはOrchestratorフォルダーごとにデプロイします。利用ユーザーが割り当てられているフォルダーを選択し、 オートメーション > アプリ > [アプリをデプロイ] をクリックします。
-
モバイル端末でURLを開きます。まずAutomation Cloudへの認証が求められますので権限のないユーザーはアクセスできません。Automation Cloudへのサインイン後、質問文を入力してQueryボタンをクリックし、応答が表示されることを確認します。
おわりに
本記事ではUiPath Appsのコネクション連携機能を使用してモバイル端末に対応した生成AIアプリを作成してみました。今回紹介したコネクション・アクティビティ以外にも様々なサービスとの連携が利用可能ですし、UIデザインもカスタマイズできます。Appsユーザーガイド を参照して皆さんのニーズに合わせたアプリ開発をお試しいただければと思います!