はじめに
この記事では、UiPath for Coding Agents と Chrome DevTools MCP を使って、Codex に UiPath の RPA ワークフローを生成させた流れを紹介しようと思います。今回のポイントは、通常の「クリック」や「文字を入力」といった UI アクティビティを中心に使うのではなく、Chrome DevTools MCPを駆使し、その結果をUiPathの「JS スクリプトを挿入」アクティビティに渡し、Web画面を操作したことです。
目次
1.なぜ「JS スクリプトを挿入」を使うのか
2.利用ツール一覧
3.自動化業務
4.UiPath for Coding Agentsとは？
5.Chrome DevTools MCPとは？
6.VS CodeからChrome DevTools MCPを実装し、Codexを起動
7.RPA作成時にCodexへ指示したプロンプト
8.Codexがどのような流れでRPAを生成したか
9.RPAの確認と修正
1.なぜ「JS スクリプトを挿入」を使うのか
今回特に強調したいのは、普通の UI アクティビティではなく、「JS スクリプトを挿入」アクティビティを使ったことです。
通常、Web フォームに値を入力して送信する場合、UiPath では次のようなアクティビティを使うことが多いです。
- 「アプリケーション・ブラウザを使用」
- 「文字を入力」
- 「クリック」
- 必要に応じて「待機」や「要素の有無を確認」
もちろん、この方法は分かりやすく、UiPath らしい実装です。
一方で、入力項目が多いフォームや、大量データを繰り返し登録する画面では、アクティビティ数が増えやすく、処理時間も長くなりがちです。そこで使えるのが「JS スクリプトを挿入」です。「JS スクリプトを挿入」は、Web ページのコンテキストで JavaScript を実行できるアクティビティです。つまり、ブラウザ上の入力欄に値を設定したり、ボタンをクリックしたりする操作を、JavaScript 側でまとめて実行できます。このアクティビティの素晴らしさは、以前筆者の書いた記事ですでに紹介していました。ぜひご参考にしてください。
ただし、「JS スクリプトを挿入」の今までの利用には、1つの致命的な課題があったので、実際の開発で滅多に利用されていません。その致命傷は、「JSスクリプトを挿入」の利用前提としてウェブの開発経験が不可欠ということです。JavaScript、HTML、CSS、ないしAngularといったツールの使い方がわからなければ、このアクティビティの使用はほぼ不可能です。
ところが、Chrome DevTools MCPの登場により、この障壁が下がり、ウェブ開発の知識がなくても、「JS スクリプトを挿入」の使用が可能となり、RPA自動化の効率を一気に向上させることができるようになりました。Chrome DevTools MCPについて、後ほど説明しますので、一応今回の開発で利用したツール一覧を列挙します。
2.利用ツール一覧
| 利用ツール | 役割 |
|---|---|
| Codex | コード生成・修正を行うAI |
| VS Code | コード編集と開発環境提供 |
| UiPath for Coding Agents | 自動化エージェントのコード開発支援 |
| Chrome DevTools MCP | ブラウザ動作のデバッグ・解析 |
3.自動化業務
今回作成した RPA は、UiBank のローン申請ページを開き、事前に用意したCSV の内容を読み込んで、フォームへ入力・送信するワークフローです。
対象ページは以下です。
具体的には、サイトで以下の操作を行います。
①以下のページを開く
②CSVの内容を入力
以下のCSVデータを利用しています。
| Amount | Term | Income | Age | |
|---|---|---|---|---|
| Au@uipathtest.com | 5000 | 3 | 80000 | 30 |
③提出と結果確認
4.UiPath for Coding Agentsとは？
UiPath for Coding Agents は、AI エージェントが UiPath の自動化を作成・検証・実行しやすくするためのツール群です。
UiPath for Coding Agents を紹介するUiPathの公式ページがあるため、製品情報については、公式ページの情報をご覧ください。
または、この製品の使い方を説明する日本語の記事もあります。導入方法や全体像を知りたい方は、こちらをご参考ください。
AI が UiPath の自動化を書く！ RPA は新しい時代へ （筆者：utanesukeさん）
5.Chrome DevTools MCPとは？
Chrome Devtools MCP は、AI エージェントが Chrome ブラウザを操作・確認できるようにする MCP サーバーです。
通常、RPA 開発者が Web ページの中身を確認する場合、Chrome の開発者ツールを開き、HTML の構造や JavaScript の動きを確認します。以下はDevToolsの中身で、ChromeやEdgeブラウザでF12を押すと表示されます。
コード化されて読みにくいですね。RPA 開発者の中には、JavaScript や HTML に詳しくない方も多いため、さすがにこのToolの内容を解析してウェブ自動化のコードを書くのが難しいですね。
ところが、Chrome DevTools MCP を使うと、Codex のような AI エージェントが Web ページの構造を確認し、フォームの入力欄やボタンを見つけ、操作用の JavaScript を作ることができます。つまり、開発者本人が JavaScript を詳しく知らなくても、Devtools MCP があることで、AI に Web ページを調査させ、必要な JS スクリプトを生成してもらえるようになります。
6. VS CodeからChrome DevTools MCPを実装し、Codexを起動
①Chrome DevTools MCPのインストール
Codex に Chrome DevTools MCP を追加するには、VS Codeターミナルで codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest を実行します。
追加できたか確認するには、codex mcp list を実行します。一覧に chrome-devtools が表示されていれば、Codex から利用できる状態です。
詳しくは公式リポジトリも参考になります。
ChromeDevTools/chrome-devtools-mcp
②UiPath Skillsの実装
Claude Code や Codex は、汎用的なAIであり、そのままでは UiPath の知識を持っていません。そのため、UiPath の各製品を AI に使用させる際、予め体系化された知識をAIに教えておく必要はあります。その知識は、UiPath Skills と言います。UiPath Skills は GitHub で公開されています。(UiPath Skills)
これから、UiPath Skillsのインストール方法を説明します。
ア、Node.js LTS をインストール
nodejs.org から LTS 版をインストールします。インストールに成功したかどうかを確認するには、 node --version をTerminal に指示してください。バージョンが表示されたら、無事にインストールされているということとなります。
イ、UiPath CLI をインストール
npm -g install @uipath/cli で、UiPath CLI をインストールします。同じ、インストールされたかどうかについては、uip --version で確認してください。
エ、Codexをインストール
Coding Agent として Codex CLI を使います。npm i -g @openai/codex でCodexをインストールします。その後、codex でCodexの起動を確認してください。初回起動時に ChatGPT アカウントのログインが求められます。
ウ、UiPath Skills をインストール
Codex に UiPath プロジェクトや UiPath CLI の扱い方を理解させるため、UiPath Skills をCodexに入れる必要はあります。uip skills install --agent codex でインストールしてください。
これからは、今回の作業内容です。
①VS Code で作業対象のフォルダを開きます
File＞Open FolderでRPAを生成したいフォルダを選びます。そうすると、VS Codeの左に作業フォルダが表示され、Codexのコード生成において、どのファイル追加、削除されるかを確認できます。今回であれば、UiPath プロジェクトや CSV ファイルを置いたフォルダを VS Code で開きました。
②その後、VS Code の Terminal を開き、uip login でUiPathにログインします。
③Terminal で対象フォルダに移動した状態で、codex を実行します。これで、そのフォルダを作業コンテキストとして Codex に指示できるようになります。Codex はフォルダ内の UiPath プロジェクト、XAML ファイル、CSV ファイルなどを確認しながら作業します。
7.RPA作成時にCodexへ指示したプロンプト
今回、私が Codex に指示したプロンプトは以下です。
あなたは、UiPathのRPAワークフローを開発するエージェントです。以下の指示に従い、xaml、project.jsonといったファイルを含めたRPAプロジェクトを生成してください。
開発対象システム：
https://uibank.uipath.com/loans/apply
業務要件：
上記のシステムで、ローンの申請を行います。作業フォルダ内のUiBankLoanApply.csvのデータをLoan applicationのページに記入し、Submit Loan Applicationをクリックし、結果を確認します。
開発設計：
1.今回の開発では、Chrome DevToolsのMCPとUiPathのSkillsを利用してください。
2.Chrome Devtoolsで https://uibank.uipath.com/loans/apply のソースコードを分析し、入力項目のDOM情報、Event Listenersを確認し、自動入力するJavaScriptのコードを作成してください。注意事項：Javascriptのネイティブコードを使用してください。Angular などのコードは使用しないでください。
3.Chrome Devtoolsの結果を利用し、RPAワークフローを作成してください。作成に際して、以下のルールを必ず守ってください。
3-1.ワークフローの流れは、CSVデータを読み込み、そのデータをブラウザ操作のアクティビティに渡します。
3-2.ブラウザ操作において、「クリック」「文字を入力」などのアクティビティを使わず、「JS スクリプトを挿入」(Inject JsScript）というアクティビティをご利用ください。「JS スクリプトを挿入」にChrome DevToolsで生成されたJavaScriptコードを埋め込んでください。
8.Codexがどのような流れでRPAを生成したか
Codex はまず、作業フォルダの中身を確認し、CSV ファイルがどのような内容なのかを確認しました。
次に、Chrome DevTools MCP を使って Web ページ側を確認しました。対象ページをブラウザで開き、フォームの入力欄や送信ボタンを確認し、フォームに値を入れて送信するための JavaScriptを作成し、自動にUiBankを開いてデバッグし、JavaScriptの有効性を確認してくれました。
その後、UiPath for Coding Agents の知識を使って、UiPath 側のワークフローを組み立てました。思考過程は以下のイメージです。
最後に、Codex は UiPath CLI を使ってワークフローの検証とビルドを実行しました。これにより、XAML の構文やパッケージ依存関係に問題がないことを確認しました。
9.RPAの確認と修正
作成されたワークフローは以下の通りです。
その中で、「JS スクリプトを挿入」が利用され、Devtools MCPのコードも記載されています。
場合により、Codexの生成したワークフローの修正が必要なので、うまく行かない場合、VS codeで再度Codexに修正指示を出すか、最新のStudio 26.0.194 STSにもTerminalの機能が追加されたので、そこでCodexを使ってワークフローを修正することが可能ですね。今回もStudioのTerminalパネル（下図）で改良指示を出し、デバッグを実行しました。
実行したところ、入力欄に項目を1つ1つ入れるのではなく、一気に完成したので、「JSスクリプトを挿入」はやはり強いです。
終わりに
今回は、UiPath for Coding Agents と Chrome DevTools MCP を組み合わせて、UiPath の RPA ワークフローを作成しました。Chrome DevTools MCP と Codex を組み合わせることで、AI が Web ページを調査し、必要なJavaScript を生成できるようになります。その結果、RPA 開発者は Web 開発の知識が深くなくても、「JS スクリプトを挿入」を活用しやすくなります。通常の UI アクティビティだけではアクティビティ数が多くなる処理や、繰り返し入力が多い処理では、「JS スクリプトを挿入」を選択肢に入れる価値があると感じました。