# UiPath TypeScript SDK

# Coded Action Apps

# Getting Started

An SDK enabling coded apps to be the UI for tasks within UiPath Action Center. SDK handles bi-directional communication between the coded app and UiPath Action Center host using `window.postMessage` events.

## Prerequisites

- **Node.js** 20.x or higher (for development tooling)
- **npm** 8.x or higher (or yarn/pnpm)
- **TypeScript** 4.5+ (recommended)

## Install the SDK

npm install @uipath/uipath-ts-coded-action-apps\
found 0 vulnerabilities

yarn add @uipath/uipath-ts-coded-action-apps✨ Done in 1.85s.

pnpm add @uipath/uipath-ts-coded-action-apps

## Project Setup

A coded action app is a standard browser-based web application that runs in UiPath Action Center. Set up your project as you normally would, then install the `@uipath/uipath-ts-coded-action-apps` SDK.

mkdir my-uipath-project && cd my-uipath-projectnpm init -yWrote to package.jsonnpm install typescript @types/node ts-node --save-dev\
added x packages in 1snpx tsc --initCreated a new tsconfig.jsonnpm install @uipath/uipath-ts-coded-action-apps\
added x packages in 1s

mkdir my-uipath-project && cd my-uipath-projectnpm init -yWrote to package.jsonnpm install @uipath/uipath-ts-coded-action-apps\
added x packages in 1s

## Overview

Action Center renders a coded action app within an iframe. `@uipath/uipath-ts-coded-action-apps` provides `CodedActionAppsService` which offers the following capabilities:

- **Receive** — `getTask()` — On app load, UiPath Action Center provides the task details along with task data.
- **Notify** — `setTaskData()` — Notify Action Center when task data changes (e.g. to enable the Save button).
- **Complete** — `completeTask()` — Completes the task when user clicks on submit buttons (e.g. `'Approve'` or `'Reject'` buttons).
- **Display** — `showMessage()` — Displays toast messages inside Action Center.

## Import & Initialize

```
import { CodedActionAppsService } from '@uipath/uipath-ts-coded-action-apps';

const service = new CodedActionAppsService();
```

The class is also exported under the alias `CodedActionApps` for convenience:

```
import { CodedActionApps } from '@uipath/uipath-ts-coded-action-apps';

const service = new CodedActionApps();
```

## Usage

### Get task details from Action Center

Call this once when the app loads. It sends an event to Action Center and waits for the task details and data to be posted back. (**Recommended**: Do not call it more than once in your app)

```
const taskData = await service.getTask();

console.log(taskData.taskId);     // number
console.log(taskData.title);      // string
console.log(taskData.status);     // TaskStatus enum
console.log(taskData.isReadOnly); // boolean
console.log(taskData.data);       // the task's form data
console.log(taskData.folderId);   // number
console.log(taskData.folderName); // string
console.log(taskData.theme);      // Theme enum — the UI theme Action Center is currently using
```

Note

This call will reject with an error if Action Center does not respond within 3 seconds, or if the parent origin is not trusted.

### Notify Action Center of data changes

Call this whenever the user modifies the task form data. Action Center uses this signal to enable its Save button. Make sure to pass the full current task data.

```
service.setTaskData({ field: 'updatedValue' });
```

### Complete a task

Call this when the user submits the form to mark the task as complete. Provide the action taken (e.g. `"Approve"` or `"Reject"`) and the final data payload. The call returns a `Promise<TaskCompleteResponse>` that resolves once Action Center confirms the completion.

```
const result = await service.completeTask('Approve', { approved: true, notes: 'Looks good' });

if (!result.success) {
  console.error(result.errorMessage);
}
```

Note

Only one `completeTask` call may be in flight at a time. Calling it again before the previous call resolves will throw an error: `"A completeTask call is already in progress"`.

### Display a message in Action Center

Show a toast notification inside Action Center using one of the four severity levels.

```
import { MessageSeverity } from '@uipath/uipath-ts-coded-action-apps';

service.showMessage('Validation successful', MessageSeverity.Success);
service.showMessage('Validation failed', MessageSeverity.Error);
service.showMessage('Please review the details', MessageSeverity.Warning);
service.showMessage('User information', MessageSeverity.Info);
```

## **Vibe Coding**

The SDK is designed for rapid prototyping and development, making it perfect for vibe coding. Here are two ways to get started:

### **Option 1: AI IDE Integration**

After installing the SDK, supercharge your development with AI IDEs:

1. **Install the SDK**: `npm install @uipath/uipath-ts-coded-action-apps`
1. **Drag & Drop**: From your `node_modules/@uipath/uipath-ts-coded-action-apps` folder, drag the entire package into your AI IDE
1. **Start Prompting**: Your AI assistant now has full context of the SDK!

**Works with:**

- **GitHub Copilot**
- **Cursor**
- **Claude**
- **Any AI coding assistant**

### **Option 2: Copy Documentation for LLMs**

Give your AI assistant complete context by copying our documentation:

**For Maximum Context:**

1. **Download Complete Documentation**: [llms-full-content.txt](/uipath-typescript/coded-action-apps/llms.txt)
1. **Copy and Paste**: Copy the entire content and paste it into your AI chat
1. **Start Prompting**: Your AI now has complete SDK knowledge!

**For Specific Features:**

1. **Use the copy button** (📋) on any documentation page
1. **Paste into your AI chat**
1. **Ask specific questions** about that feature

Service for bi-directional communication between coded action apps and Action Center

### Usage

```
import { CodedActionApps } from '@uipath/uipath-ts-coded-action-apps';

const service = new CodedActionApps();
```

## Methods

### completeTask()

> **completeTask**(`actionTaken`: `string`, `data`: `unknown`): `Promise`\<[`TaskCompleteResponse`](../../type-aliases/TaskCompleteResponse/)>

Marks the current task as complete in Action Center. Sends the final action and associated data to Action Center, signalling that the user has finished interacting with the task.

#### Parameters

| Parameter     | Type      | Description                                                                        |
| ------------- | --------- | ---------------------------------------------------------------------------------- |
| `actionTaken` | `string`  | A string identifying the action the user performed (e.g. `"Approve"`, `"Reject"`). |
| `data`        | `unknown` | The final data payload to submit alongside the completion event.                   |

#### Returns

`Promise`\<[`TaskCompleteResponse`](../../type-aliases/TaskCompleteResponse/)>

A promise that resolves with a [TaskCompleteResponse](../../type-aliases/TaskCompleteResponse/) object containing success and error message if any.

#### Throws

If called from an untrusted origin.

#### Throws

If a completeTask call is already in progress.

#### Example

```
// Approve a task
const result = await service.completeTask('Approve', { approved: true, notes: 'Looks good' });

if (!result.success) {
  console.error(`Failed (code ${result.errorCode}): ${result.errorMessage}`);
}

// Reject a task
const result = await service.completeTask('Reject', { approved: false, reason: 'Missing info' });

if (!result.success) {
  console.error(`Failed (code ${result.errorCode}): ${result.errorMessage}`);
}
```

______________________________________________________________________

### getTask()

> **getTask**(): `Promise`\<[`Task`](../../type-aliases/Task/)>

Fetches the current opened task's details from Action Center.

#### Returns

`Promise`\<[`Task`](../../type-aliases/Task/)>

A promise that resolves with a [Task](../../type-aliases/Task/) object containing task metadata and data.

#### Throws

If called from an untrusted origin.

#### Throws

If Action Center does not respond within the allotted timeout.

#### Example

```
// Call once when the app loads
const task = await service.getTask();

console.log(task.taskId);     // number
console.log(task.title);      // string
console.log(task.status);     // TaskStatus enum
console.log(task.isReadOnly); // boolean — disable editing if true
console.log(task.data);       // the task's form data
console.log(task.folderId);   // number
console.log(task.folderName); // string
console.log(task.theme);      // Theme enum — current Action Center UI theme

// Disable the form when task is read-only
if (task.isReadOnly) {
  disableForm();
}
```

______________________________________________________________________

### setTaskData()

> **setTaskData**(`data`: `unknown`): `void`

Notifies Action Center that the task data has been changed by the user. This is needed to enable the save button in Action Center when the task data has changed

#### Parameters

| Parameter | Type      | Description                                        |
| --------- | --------- | -------------------------------------------------- |
| `data`    | `unknown` | The updated data payload to send to Action Center. |

#### Returns

`void`

#### Example

```
// Call whenever the user modifies the form. Make sure to pass the full current task data
service.setTaskData({ name: 'John', approved: true, notes: 'Looks good' });
```

______________________________________________________________________

### showMessage()

> **showMessage**(`msg`: `string`, `type`: [`MessageSeverity`](../../enumerations/MessageSeverity/)): `void`

Displays a toast message inside Action Center.

#### Parameters

| Parameter | Type                                                     | Description                                                                   |
| --------- | -------------------------------------------------------- | ----------------------------------------------------------------------------- |
| `msg`     | `string`                                                 | The message text to display.                                                  |
| `type`    | [`MessageSeverity`](../../enumerations/MessageSeverity/) | The severity/style of the message (`info`, `success`, `warning`, or `error`). |

#### Returns

`void`

#### Example

```
import { MessageSeverity } from '@uipath/uipath-ts-coded-action-apps';

service.showMessage('Submitted successfully', MessageSeverity.Success);
service.showMessage('Submission failed', MessageSeverity.Error);
service.showMessage('Please review the details', MessageSeverity.Warning);
service.showMessage('Auto-saved', MessageSeverity.Info);
```