1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめての記事投稿
Qiita Tech Festa20262026年7月13日まで開催中！
@songxz(Xinze Song)

Vibe CodingでUiPath Coded Appsを作成してみる

1
Last updated at Posted at 2026-07-01

はじめに

UiPathのコード化されたAppsは、Webアプリケーション開発の柔軟性と業務自動化の利便性を兼ね備えた新しいアプリ開発アプローチです。ReactやVue、Angularなどのモダンな技術を活用しながら、開発者は慣れ親しんだIDE上でアプリケーションを構築できるため、既存の開発スキルやノウハウをそのまま活用できます。

また、プログラミング経験が少ない方でも、Vibe Codingを活用してAIに要件やイメージを伝えることで、画面や機能の作成を効率的に進めることが可能です。高度なカスタマイズ性とAIによる開発支援を組み合わせることで、幅広いユーザーが業務アプリケーション開発に取り組める環境を実現します。

本記事では、UiPath TypeScript SDK と UiPath CLI を利用して、Coded Apps の開発環境の構築から ビルド・デプロイまでの流れを簡単に紹介します。

前提条件

Vibe Coding による Coded Apps の開発を行うには、以下の環境を準備してください。

必須環境

ソフトウェア 要件
Node.js 20.x 以上
npm 8.x 以上
TypeScript 4.5 以上
Coding Agent 例：Codex、Claude Code
開発IDE（推奨） 例：Visual Studio Code

1. Node.js のインストール

まず公式サイトから Node.js のインストーラーをダウンロードし、インストールします。

インストール後、PowerShell を開き、以下のコマンドでバージョンを確認します。

node -v

このステップで行っていること

  • Node.js がインストールされていることを確認
  • Coded Apps の開発環境の基盤を準備

2. npm の確認

npm は Node.js に同梱されるパッケージ管理ツールです。

npm -v

このステップで行っていること

  • npm が利用可能であることを確認

公式サイト

3. UiPath CLI のインストール

UiPath CLI をインストールします。

npm install -g @uipath/cli

インストール後、バージョンを確認します。

uip --version

このステップで行っていること

  • UiPath CLI をインストール
  • Automation Cloud へのログインや Coded Apps の操作を行えるようにする

公式ドキュメント

4. UiPath CLI にログイン

Automation Cloud にログインします。

uip login

必要であれば利用するテナントを変更します。

uip login tenant set "{テナント名}"

このステップで行っていること

  • Automation Cloud に認証
  • Coded Apps の公開先テナントを設定

5. TypeScript のインストール

TypeScript をインストールします。

npm install -g typescript

バージョンを確認します。

tsc -v

このステップで行っていること

  • TypeScript コンパイラをインストール
  • TypeScript プロジェクトを作成できるようにする

公式サイト

6. Coding Agent にスキルをインストール

Coding Agent に対して UiPath のスキルインストールします。

例：Codex に UiPath Skills をインストールします。

uip skills install --agent codex

※利用可能な Coding Agent の一覧：

このステップで行っていること

  • Coding Agent に UiPath Skills をインストール

7. External Application の作成

Automation Cloud の管理画面から External Application を作成します。

設定内容

  • Application Type: Non-Confidential
  • 利用する API に応じて Scope を付与
  • Redirect URI を設定（ローカルテスト用のCallback URL、例：http://localhost:8080/callback )
    デプロイ時に自動的に本番のURLが追加されます。

このステップで行っていること

  • OAuth 認証用のアプリケーションを作成
  • Coded Apps から UiPath Platform へアクセスできるようにする

公式ドキュメント

8. uipath.json の作成

プロジェクトフォルダに uipath.json を作成します。

各項目の説明

項目 必須 説明
clientId ○ UiPath Organization に登録したExternal ApplicationのClient ID
scope － アプリケーションが必要とする OAuth スコープ。省略した場合は、指定した Client ID に登録されているすべてのスコープが利用されます。
orgName － UiPath Organization の名前または ID
tenantName － UiPath Tenant の名前または ID
baseUrl － UiPath Platform のベース URL。省略した場合は https://api.uipath.com が利用されます。
redirectUri － OAuth 認証時のリダイレクト URI

設定例

{
  "clientId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "scope": "OR.Assets OR.Jobs",
  "orgName": "myOrg",
  "tenantName": "DefaultTenant",
  "baseUrl": "https://api.uipath.com",
  "redirectUri": "http://localhost:8080/callback"
}

既知な問題とトラブルシューティング

このステップで行っていること

  • SDK が利用する認証設定を定義

公式ドキュメント

9. 開発用パッケージのインストール

作業用のプロジェクトフォルダへ移動します。

cd {フォルダパス}

Node.js プロジェクトを初期化する

npm init -y

開発用パッケージのインストール

npm install --save-dev @uipath/coded-apps-dev

このステップで行っていること

  • ローカル開発環境を追加
  • 開発サーバーを利用できるようにする

公式ドキュメント

10. TypeScript プロジェクトの初期化

TypeScript 設定ファイルを生成します。

npx tsc --init

UiPath TypeScript SDK をインストールします。

npm install @uipath/uipath-typescript

このステップで行っていること

  • tsconfig.json を生成
  • UiPath Platform と連携する SDK を追加

公式ドキュメント

11. Coding Agent に UiPath Apps の作成を指示

開発環境の準備が完了したら、Coding Agent に作成したい UiPath Apps の要件を指示します。

Vibe Coding では、最初から詳細な実装方法を指示するよりも、「どのようなアプリを作りたいか」「どのような機能が必要か」を明確に伝えることで、より目的に合ったコードを生成しやすくなります。

AI と対話しながら要件をブラッシュアップしていくことで、より品質の高いアプリケーションを効率的に作成できます。

今回は、Agentを呼び出して実行時間を計測する画面を作成するよう指示します。
※「1. Purpose」以外の部分は省略しています。

# Agent Speed Tester Basic Design

## 0. Document Policy

## 1. Purpose
通常 Agent をブラウザから呼び出し、各呼び出しについて以下を確認できる Web 画面を提供する。

- Agent への input JSON
- Agent output
- 画面上の体感応答時間
- Orchestrator Job としての実行時間
- 過去実行履歴

本アプリは Conversational Agent のチャット UI ではない。publish 済みの通常 Agent を Orchestrator Process / Job として起動する。

## 2. Current Technology Stack

## 3. UiPath Configuration

## 4. Development Tooling

## 5. Authentication Design

## 6. Screen Structure
### 6.1 Login Screen
### 6.2 Main Screen

## 7. Agent List Design

## 8. Agent Metadata

## 9. Input Design
### 9.1 Input Schema Initialization

## 10. Agent Invocation Design

## 11. Job Polling and Runtime

## 12. Timing Definitions
### 12.1 UI Elapsed
### 12.2 Job Runtime
### 12.3 Display Format

## 13. Output Design

## 14. History Design

## 15. Component Design
### 15.1 App
### 15.2 AppShell
### 15.3 AgentInvocationPanel
### 15.4 HistoryPanel
### 15.5 MetricsSummary
### 15.6 OutputViewer

## 16. Error Handling

## 17. Non-functional Design

## 18. Known Limitations

## 19. Implementation Phases Status
### Completed
### Future Options

※万が一スキルが利用されない場合は、明示的に指定することも可能です。
例：
codex.png

Vibe Coding のベストプラクティス

AI に一度で完成形を生成してもらうことを目指すのではなく、要件を段階的に具体化していくことをおすすめします。

例えば、以下のような流れで要件を整理すると、期待どおりのアプリが生成されやすくなります。

  1. アプリの目的を伝える

    • 誰が利用するか
    • どのような業務を効率化するか

  2. 画面構成を決める

    • 一覧画面
    • 詳細画面
    • 編集画面
    • ダッシュボード

  3. 画面ごとの機能を整理する

    • 検索
    • ソート
    • ページング
    • CRUD（登録・更新・削除）

  4. UiPath Platform との連携内容を決める

    • Assets
    • Queues
    • Jobs
    • Orchestrator API

  5. 生成結果をレビューし、追加要件を伝える

    • UI の改善
    • エラーハンドリング
    • コンポーネント分割
    • パフォーマンス改善

このステップで行っていること

  • Coding Agent にアプリの要件を指示
  • Vibe Coding を利用してアプリのひな形を生成
  • 生成結果をレビューしながら開発を進める

12. ローカル開発サーバーの起動

開発サーバーを起動します。

npm run dev

ブラウザで以下へアクセスします。

http://localhost:8080

アプリが起動し、画面が表示されることを確認します。
login.png
agentTest.png

このステップで行っていること

  • ローカル環境でアプリを起動
  • OAuth 認証を確認
  • UI や機能の動作確認を実施

13. 本番ビルド

配布用の成果物を生成します。

npm run build

ビルドが成功すると、dist フォルダへ成果物が出力されます。

このステップで行っていること

  • 本番用のビルドを実施
  • 配布可能な成果物を生成

14. Coded App のパッケージ化

ビルドした成果物を Coded App パッケージへ変換します。

uip codedapp pack dist -n {パッケージ名} --version 1.0.0

ビルドが成功すると、.uipath フォルダへ成果物が出力されます。
packed.png

このステップで行っていること

  • ビルド成果物を Coded App パッケージへ変換
  • 公開可能な形式を作成

15. Coded App の公開

Automation Cloud へアプリを公開します。

uip codedapp publish

公開が完了すると、Automation Cloud 上でアプリを管理できるようになります。

このステップで行っていること

  • Automation Cloud へアプリをアップロード
  • アプリを公開

16. Coded App のデプロイ

公開したアプリを利用可能な状態へ反映します。

uip codedapp deploy

※Orchestrator側で手動でアプリをデプロイすることも可能です。

デプロイが完了すると、Automation Cloud上でCoded Appを利用できるようになります。

「テナント > 対象フォルダ > オートメーション > アプリ」画面で、デプロイしたアプリを確認できます。
対象アプリの「その他のアクション」>「URLをコピー」を選択し、コピーしたURLへアクセスして動作を確認します。
publish.png

このステップで行っていること

  • Coded App をデプロイ
  • 利用可能な状態へ反映

まとめ

本記事では、UiPath TypeScript SDK と UiPath CLI を利用して、Coded Apps の開発環境構築からデプロイまでの流れを紹介しました。

  1. Node.js のインストール
  2. npm の確認
  3. UiPath CLI のインストール
  4. UiPath CLI へログイン
  5. TypeScript のインストール
  6. Coded Apps ツールのインストール
  7. External Application の作成
  8. uipath.json の設定
  9. 開発用パッケージのインストール
  10. TypeScript プロジェクトの初期化
  11. Coding Agent に UiPath Apps の作成を指示
  12. ローカル実行
  13. ビルド
  14. Pack
  15. Publish
  16. Deploy

Vibe Coding を活用することで、画面や機能の実装を AI と対話しながら効率的に進めることができます。一方で、要件定義や画面設計を事前に整理しておくことで、より期待どおりの成果物を得やすくなります。

本記事が、UiPath Coded Apps をこれから始める方や、TypeScript を利用したアプリケーション開発に興味のある方の参考になれば幸いです。

参考ドキュメント

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?