maninder-uipath · Oct 6, 2026 · swati354 · Sep 30, 2026
diff --git a/.github/workflows/docs-pr-preview.yml b/.github/workflows/docs-pr-preview.yml
@@ -24,6 +24,7 @@ on:
       - "mkdocs.yml"
       - "package.json"
       - "scripts/fetch-js-functions-docs.sh"
+      - "scripts/fetch-widget-docs.mjs"
       - ".github/workflows/docs-pr-preview.yml"
 
 permissions:
@@ -91,10 +92,14 @@ jobs:
       - name: Generate API documentation
         # docs:api also fetches the JS Functions pages from
         # UiPath/coded-functions-js using the token minted above, when there is
-        # one.
+        # one, and the React Widgets pages from the package READMEs in the
+        # public UiPath/uipath-ui-widgets. GITHUB_TOKEN covers the latter --
+        # read-only on a fork PR, which is all the fetch needs, and enough to
+        # lift the unauthenticated rate limit either way.
         if: github.event.action != 'closed'
         env:
           CODED_FUNCTIONS_DOCS_TOKEN: ${{ steps.js_functions_docs_token.outputs.token }}
+          WIDGET_DOCS_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: npm run docs:api
 
       - name: Build MkDocs site (CI gate)

diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -10,10 +10,12 @@ on:
       CODED_FUNCTIONS_DOCS_PRIVATE_KEY:
         required: false
   workflow_dispatch:
-  # Sent by UiPath/coded-functions-js when its docs/ changes on main, so the
-  # JS Functions section refreshes without waiting for the next SDK release.
+  # Sent by a source repo when the docs it owns change, so that section
+  # refreshes without waiting for the next SDK release:
+  #   UiPath/coded-functions-js  -> the JS Functions section
+  #   UiPath/uipath-ui-widgets   -> the React Widgets pages (package READMEs)
   repository_dispatch:
-    types: [js-functions-docs-updated]
+    types: [js-functions-docs-updated, react-widgets-docs-updated]
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
@@ -68,10 +70,15 @@ jobs:
           repositories: coded-functions-js
 
       - name: Generate API Documentation
-        # docs:api also fetches the JS Functions pages from
-        # UiPath/coded-functions-js using the token minted above.
+        # docs:api also pulls in two sections authored elsewhere: the JS
+        # Functions pages from UiPath/coded-functions-js, using the token
+        # minted above, and the React Widgets pages from the package READMEs in
+        # UiPath/uipath-ui-widgets. That repo is public, so GITHUB_TOKEN is
+        # enough -- it is only there to lift the 60/hr unauthenticated limit,
+        # which a shared-IP runner burns through quickly.
         env:
           CODED_FUNCTIONS_DOCS_TOKEN: ${{ steps.js_functions_docs_token.outputs.token }}
+          WIDGET_DOCS_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: npm run docs:api
 
       - name: Build MkDocs Documentation

diff --git a/.gitignore b/.gitignore
@@ -79,5 +79,11 @@ docs/coded-action-app-sdk/*
 # Fetched from UiPath/coded-functions-js by the docs workflows. Regenerate; never commit.
 docs/js-functions/
 
+# Fetched from UiPath/uipath-ui-widgets (each package's README) by the docs
+# workflows. Regenerate; never commit. index.md is the hand-written section
+# overview and is tracked.
+docs/react-widgets/*
+!docs/react-widgets/index.md
+
 # Python bytecode cache (created by the mkdocs-llmstxt preprocess hook)
 __pycache__/
diff --git a/agent_docs/rules.md b/agent_docs/rules.md
@@ -61,6 +61,19 @@ JSDoc comments in `src/models/{domain}/*.models.ts` are the **source of truth fo
 - When adding methods, update `docs/oauth-scopes.md` with required OAuth scopes. **NEVER** skip this — missing scopes break the OAuth integration guide. **Exception: methods tagged `@internal` in their JSDoc do not get an OAuth scope entry** — they are not part of the public API surface and do not appear in the OAuth integration guide. Similarly, `mkdocs.yml` nav entries and docs site pages are not needed for services where every public-facing method is tagged `@internal` (i.e., the service has no user-visible API).
 - Run `npm run docs:api` to regenerate.
 
+**Docs pages fetched from other repos — never hand-edit:**
+
+`npm run docs:api` materializes two sections from the repo that owns the code they document. Both are gitignored and rebuilt on every docs build, so an edit here is silently overwritten on the next one.
+
+| Section | Authored in | Fetched by |
+|---------|-------------|------------|
+| `docs/js-functions/` | `UiPath/coded-functions-js`, as its `docs/` | `scripts/fetch-js-functions-docs.sh` |
+| `docs/react-widgets/*.md` (except `index.md`) | `UiPath/uipath-ui-widgets`, as each `packages/<widget>/README.md` | `scripts/fetch-widget-docs.mjs` |
+
+To change one of those pages, open a PR on the source repo. Each repo dispatches to `docs.yml` on merge, so the site refreshes without an SDK release. `docs/react-widgets/index.md` is the exception — the section overview is written here, because it documents the collection rather than any one package.
+
+A widget README must render on npm and GitHub too, so MkDocs-only syntax is written in a portable form and translated on the way in — `> **Note:** …` for admonitions, `<!-- tabs -->` / `<!-- details type: Title -->` for tabs and collapsibles, and absolute `https://uipath.github.io/uipath-typescript/…` URLs for cross-page links. The contract is spelled out at the top of `scripts/fetch-widget-docs.mjs`.
+
 **JSDoc quality rules:**
 - Link response types with `{@link TypeName}` in every method's JSDoc `@returns`, embedded **inline within the sentence** — a `{@link}` placed on a standalone line after `@returns` renders as stray text in TypeDoc, not a clickable link. **NEVER** add `{@link TypeName}` inside `@param` descriptions — TypeDoc automatically links parameter types, so adding it is redundant noise.
 - Show how to get prerequisite IDs (e.g., "First, get entities with `entities.getAll()`").

diff --git a/docs/react-widgets/index.md b/docs/react-widgets/index.md
@@ -0,0 +1,111 @@
+# React Widgets
+
+**UiPath UI Widgets** is a collection of ready-made React components that sit on top of the UiPath TypeScript SDK. Each widget is published as its own npm package, so you install only what you use.
+
+They are designed for browser apps that talk to UiPath — [Coded Apps](../coded-apps/getting-started.md), [Coded Action Apps](../coded-action-apps/getting-started.md), or any React application that already holds a `UiPath` SDK instance.
+
+Source: [github.com/UiPath/uipath-ui-widgets](https://github.com/UiPath/uipath-ui-widgets)
+
+---
+
+## Available widgets
+
+| Widget | Package | What it does |
+| ------ | ------- | ------------ |
+| [Validation Station](validation-station.md) | `@uipath/ui-widgets-validation-station` | React wrapper for the Document Understanding Validation Station |
+| [Conversational Agent Chat](conversational-agent-chat.md) | `@uipath/ui-widgets-conversational-agent-chat` | Streaming chat UI for UiPath Conversational Agents, with tool-call visualization |
+| [DataTable](datatable.md) | `@uipath/ui-widgets-datatable` | Full CRUD grid over a Data Fabric entity — inline editing, master-detail, filtering, diff review |
+| [Multi File Upload](multi-file-upload.md) | `@uipath/ui-widgets-multi-file-upload` | Drag-and-drop upload of multiple files to an Orchestrator Storage Bucket |
+| [PDF Viewer](pdf-viewer.md) | `@uipath/ui-widgets-pdf-viewer` | Renders PDFs from Storage Buckets, Data Fabric attachments, URLs, or bytes |
+| [External Auth](external-auth.md) | `@uipath/ui-widgets-external-auth` | Provider-agnostic sign-in buttons that start login at an external IdP |
+
+---
+
+## Common setup
+
+### Requirements
+
+- **React** `^19.2.0` — 19.2.0 or later in the 19.x line (and a matching `react-dom`)
+- **@uipath/uipath-typescript** — a peer dependency, so you install it yourself. Each widget pins its own minimum; the per-widget pages give the exact range
+
+### Install
+
+Each widget is installed independently:
+
+```bash
+npm install @uipath/ui-widgets-datatable
+```
+
+### Pass an initialized SDK instance
+
+Most widgets take an `sdk` prop — an initialized `UiPath` instance. Create it once and share it across widgets.
+
+A browser app is a public client, so authenticate it with OAuth:
+
+```tsx
+import { UiPath } from "@uipath/uipath-typescript/core";
+import { useEffect, useState } from "react";
+
+function App() {
+  const [sdk, setSdk] = useState<UiPath | null>(null);
+
+  useEffect(() => {
+    const init = async () => {
+      const uipath = new UiPath({
+        baseUrl: "https://api.uipath.com",
+        orgName: "your-org",
+        tenantName: "your-tenant",
+        clientId: "your-client-id",
+        redirectUri: "http://localhost:3000/callback",
+        scope: "<scopes the widgets you use need>",
+      });
+      await uipath.initialize();
+      setSdk(uipath);
+    };
+    init();
+  }, []);
+
+  if (!sdk) return <div>Loading...</div>;
+
+  return /* ... widgets ... */;
+}
+```
+
+!!! danger "Never ship a tenant secret to the browser"
+    The SDK's secret-based mode is for backend services, where the credential stays on the server. Anything handed to a browser bundle is readable by every user of the page, so a frontend app uses OAuth — the flow above — and never `secret`.
+
+The scopes you need depend on which SDK services the widgets call — [OAuth Scopes](../oauth-scopes.md) lists them per method. In a [Coded App](../coded-apps/getting-started.md) deployed to UiPath, `new UiPath()` picks the configuration up on its own and there is nothing to pass at all. See [Authentication](../authentication.md) for the full set of credential types and when each applies.
+
+!!! info "External Auth needs no SDK"
+    [External Auth](external-auth.md) is the one widget that takes no `sdk` prop — it starts a login at a third-party identity provider and never calls UiPath.
+
+### Enable theming
+
+Add either a `light` or a `dark` class to your `<body>` element. Without it, Apollo design tokens do not resolve and the widget renders unstyled:
+
+```html
+<body class="light">
+```
+
+### Import the stylesheet
+
+Most widgets ship a stylesheet that you import once, alongside the component:
+
+```tsx
+import { DataTable } from "@uipath/ui-widgets-datatable";
+import "@uipath/ui-widgets-datatable/DataTable.css";
+```
+
+[Validation Station](validation-station.md) is the exception — it exports no stylesheet. Its styles arrive with the web component bundle and are adopted into the shadow root.
+
+### One widget needs an extra step
+
+[Validation Station](validation-station.md) additionally requires a `configureValidationStationWc()` call before render, plus the Document Understanding web component hosted as static files. Miss either and nothing renders — see [Hosting the web component](validation-station.md#hosting-the-web-component).
+
+### TypeScript
+
+All packages are written in TypeScript and ship their own type definitions — prop types are exported for use in your own component signatures:
+
+```tsx
+import type { DataTableProps } from "@uipath/ui-widgets-datatable";
+```
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -100,6 +100,14 @@ plugins:
           - authentication.md: Authentication setup
           - pagination.md: Pagination guide
           - helpers.md: Helper methods guide
+        React Widgets:
+          - react-widgets/index.md: React widgets overview
+          - react-widgets/validation-station.md: Validation Station widget
+          - react-widgets/conversational-agent-chat.md: Conversational Agent Chat widget
+          - react-widgets/datatable.md: DataTable widget
+          - react-widgets/multi-file-upload.md: Multi File Upload widget
+          - react-widgets/pdf-viewer.md: PDF Viewer widget
+          - react-widgets/external-auth.md: External Auth widget
         API Reference:
           - api/interfaces/AssetServiceModel.md: Asset service methods
           - api/interfaces/JobServiceModel.md: Job service methods
@@ -249,6 +257,14 @@ nav:
       - Coded Action App SDK:
         - Getting Started: coded-action-app-sdk/getting-started.md
         - SDK Reference: coded-action-app-sdk/interfaces/CodedActionAppServiceModel.md
+  - React Widgets:
+      - Overview: react-widgets/index.md
+      - Validation Station: react-widgets/validation-station.md
+      - Conversational Agent Chat: react-widgets/conversational-agent-chat.md
+      - DataTable: react-widgets/datatable.md
+      - Multi File Upload: react-widgets/multi-file-upload.md
+      - PDF Viewer: react-widgets/pdf-viewer.md
+      - External Auth: react-widgets/external-auth.md
   - JS Functions:
       - Overview: js-functions/index.md
       - Getting Started: js-functions/getting-started.md

diff --git a/package.json b/package.json
@@ -289,9 +289,10 @@
         "build": "rollup -c",
         "build:watch": "rollup -c -w",
         "clean": "rimraf dist && rimraf node_modules && rimraf package-lock.json",
-        "docs:api": "typedoc && npm run docs:post-process && npm run docs:coded-action-app && npm run docs:js-functions",
+        "docs:api": "typedoc && npm run docs:post-process && npm run docs:coded-action-app && npm run docs:js-functions && npm run docs:react-widgets",
         "docs:coded-action-app": "npm run docs --prefix packages/coded-action-app",
         "docs:js-functions": "bash scripts/fetch-js-functions-docs.sh",
+        "docs:react-widgets": "node scripts/fetch-widget-docs.mjs",
         "docs:post-process": "node scripts/docs-post-process.mjs",
         "docs:validate": "typedoc --options typedoc.validation.json",
         "lint": "oxlint",