UiPath Coded Apps TypeScript SDK入門（第3回）Vibe CodingでConversationalAgentのChatアプリを作ろう

前回までの第1回・第2回では、UiPath TypeScript SDKを使い始めるための環境構築とセットアップ手順、そして既存のサンプルプロジェクトの構成や実装内容について解説してきました。

そして第3回となる今回は、いよいよ実践編です。

これまでに学んだセットアップ手順とサンプルコードの知識を土台に、実際に動くChatアプリをゼロから構築していきます。

本記事では、Vibe Codingのアプローチを取り入れながら、ConversationalAgentを活用したChatアプリ開発の流れを具体的に見ていきましょう。

1.Vibe Codingツール準備

今回のハンズオンではVisual Studio Code + Codex拡張機能の組み合わせで開発していきます。

なお、本記事ではCodexを使っていますが、Claude Codeなど他のAIコーディング支援ツールでも基本的な使い方はほぼ同じです。

Visual Studio Code の準備

まずはおなじみ VS Code を用意します。

Codex 拡張機能のインストール

次に、VS CodeにCodex拡張機能を追加します。

• VS Codeを起動
• 左側の「拡張機能」アイコンをクリック
• 「Codex」と検索
• 対象の拡張機能をインストール
• 必要に応じてアカウント連携やAPIキー設定

早速試してみよう：

上記のように、超ざっくりした指示簡単なカードゲームのHTMLページ(game.html)を作ってください。をして、4分30秒作業をしたら、game.htmlが出来上がりました。

game.html をブラウザで開いて、まずは動けばOKです。

もし動きが微妙だったら、ここもVibe Codingの出番です。2枚目をめくった後、少し待ってから戻すようにしてなどで、直したいことをそのまま日本語で再度指示を出します。

このミニゲームが作れれば、もう「AIにお願い→動くものを作る」流れは掴めたはずです。

2.まずは土台を手動で準備する（Vibe Codingの前準備）

ここからは、Vibe Codingでガシガシ実装を進める前に、プロジェクトの土台だけは手動で用意していきます。
理由はシンプルで、SDK導入や認証まわりは「一度ちゃんと動く状態」を作っておくと、この後のVibe Codingがめちゃくちゃスムーズになるからです。

こちらでやっていることは、以下のページの6. SDK への設定と認証実行サンプル(OAuth認証の場合) の内容ですので、ご参照ください。

ご参考まで、6. SDK への設定と認証実行サンプル(OAuth認証の場合) で作ったプロンプトは以下のリンクよりダウンロード可能です。

ダウンロードしたプロジェクトベースで次のVibeCodingをいきましょう。

3.Typescript SDKでConversationalAgentのChatアプリをVibe Codingで実装する

前章でSDKと認証の土台は整いました。
あとは UIを作り、ConversationalAgentを呼び出し、会話を成立させる だけです。
もちろん、ここからは手で全部書きません。Vibe Codingでいきます。

そのSDKは素早いプロトタイピングと開発のために設計されており、まさに「Vibe Coding（直感やノリを重視した開発）」に最適です。

初回プロンプト文の作成

VibeCoding を始めるとき、「最初のプロンプトをどう書けばいいのか？」で手が止まりがちです。
ですが、最初から完成度の高いプロンプトを書く必要はありません。

まずは ChatGPT にざっくり相談するところから始めます。

「こんなものを作りたい」
「今はこんな環境」
「最終的にはこうしたい」

といったラフな情報を伝え、そこから対話を重ねながら具体化していきます。
修正 → 具体化 → 制約の追加 → 出力形式の明示、という流れを繰り返すことで、最終的に VibeCoding 用の“初回プロンプト”が仕上がります。

精度を上げるための5つの視点

ChatGPT に相談するとき、より具体的で精度の高いプロンプトを作るために、次の5つの要素を意識すると効果的です。

項目	説明	例
ゴール (Goal)	作りたいものの目的	UiPath TypeScript SDK の ConversationalAgent を使用した Webチャットデモアプリ
インプット (Input)	ユーザーがソフトウェアに提供する情報	ユーザ操作手順(Login ボタン押下…)
レイアウト (Layout)	ソフトウェアの見た目や各パーツの配置	左右の配置
特殊機能 (Special Features)	望む追加機能	返答はストリーミング表示
アウトプット (Output)	ソフトウェアが生成すべきもの	各ファイルの全文コード

この5つを整理するだけで、プロンプトの精度は一気に向上します。

実際のVibeCoding用 初回プロンプト例

例えば、今回の ConversationalAgent デモを作るための初回プロンプトは、次のような形に整理しました。

## ゴール (Goal)
現在の Vite + vanilla-ts プロジェクト（QiitaのOAuthサンプル構成）をベースに、
UiPath TypeScript SDK の ConversationalAgent を使用した **Webチャットデモ** に改造する。

実行確認は必ず `npm run dev` で行う。

## インプット (Input)
* 既存の Vite + vanilla-ts プロジェクト
* `src/main.ts` に `oauthConfig` が定義済み
* OAuth認証は既に成功しており、UiPath Cloud へアクセス可能
* ユーザー入力：
  * Login操作
  * エージェント選択
  * チャットテキスト入力
* `vite.config.ts` の proxy は設定済み（CORS回避）

## レイアウト (Layout)
ルーティングはライブラリを使わず、
`window.location.pathname` で分岐する方式を維持する。

### `/`
* Login画面
* 「Login with UiPath」ボタンを表示

### `/callback`
* OAuth処理画面
* `sdk.completeOAuth()` 実行後に `/chat` へ遷移

### `/chat`
* Agent選択（selectボックス）
* Start Chat ボタン
* メッセージ表示エリア（縦スクロール）
* テキスト入力欄
* Send ボタン
* End Session ボタン
* エラー表示領域


## 特殊機能 (Special Features)
* `/` で `await sdk.initialize()` を実行する
* `/callback` で `sdk.isInOAuthCallback()` を確認し、`sdk.completeOAuth()` を実行して `/chat` に遷移
* `oauthConfig.scope` を以下に更新する：
  OR.Execution OR.Folders OR.Jobs ConversationalAgents Traces.Api
* `ConversationalAgent.getAll()` でエージェント一覧を取得
* 選択エージェントで `conversation` を作成
* `session.startSession()` を実行
* ★ `startExchange()` は必ず `session.onSessionStarted` の中で呼ぶ
* Send ボタンで以下を実行：
  startExchange().sendMessageWithContentPart({
    data: userText,
    role: MessageRole.User
  })
* assistantの返答は以下の順でストリーミング表示：

  onExchangeStart
    → onMessageStart
      → onContentPartStart
        → onChunk

* “End session” ボタンで `conversation.endSession()` を実行
* ブラウザ環境のみで動作させる（Node専用APIは使用しない）
* 余計なフレームワークは追加しない

## アウトプット (Output)

以下を必ず提示する：
1. 変更・追加したファイル一覧
2. 各ファイルの全文コード
3. 必要な設定変更点の明示
4. `npm run dev` での実行確認手順
5. 成功時の画面挙動の説明

このプロンプトは、一回で書けたわけではありません。

• 最初はざっくり相談
• その後、条件を追加
• さらにレイアウトを明確化
• 出力形式を指定
• 実行方法を固定（npm run dev）
• 技術的な注意点（startExchange の位置など）を追記

という流れで、何度も調整してここまで仕上げました。

Vibe Coding を始める

初回プロンプトの準備ができたら、Codex に貼り付けて実行を開始します。途中で確認を求められることがあるので、内容を読みながら進めてください。実行が完了したら、npm run dev でローカル起動して動作を確認します。

初回生成されたアプリは、まずログイン画面から始まりました。

ログインも問題なく成功し、UiPath Cloud 上の ConversationalAgent を取得できるところまで動作しました。

正直、初回の出力でここまで形になるのは想像以上で驚きました。

繰り返し改善して完成度を上げる

ただし、この時点では「Start Chat」をクリックしても、入力欄（Type your message）と「Send」ボタンが 無効のまま でした。
つまり、UIはできているものの、セッション開始後の状態管理がまだ不十分な状態です。

そこで、現状の挙動と理想の挙動を Codex に具体的に伝え、修正を依頼します。

修正後、しばらく実行して確認すると、メッセージの入力ができるようになりました。

しかし今度は、送信しても 回答が表示されない という新しい問題が発生しました。
この場合も同様に、状況（どこまで動いていて、どこから動かないか）を Codex に伝え、原因の切り分けと修正を依頼します。

このように、

指示 → 修正 → 確認

を繰り返すことで、少しずつアプリの完成度を上げていきます。

最終的には約2時間ほどで、以下のような ConversationalAgent のチャットアプリとして動作するところまで到達しました。

始めてのVibeCoding出来上がったものです。UiPath ConversationalAgentのチャットアプリです。 pic.twitter.com/AnmIPAt3Zk

— Junlee@UiPath (@utanesuke_papa) February 26, 2026

4.最後に

今回の Vibe Coding では、プロンプト設計 → 実行 → 修正 → 確認 のループを回しながら、ConversationalAgent のチャットアプリを完成させました。最初から完璧なコードを出すのではなく、期待との差分を明確に伝えて改善していくことがポイントです。

特に、ゴール / インプット / レイアウト / 特殊機能 / アウトプット の5要素で整理したプロンプト設計は、出力精度を大きく高めました。

Vibe Coding は魔法ではありませんが、目的を明確にし、小さく改善を積み重ねることで、開発スピードを大きく加速できます。