### Install and Run Storybook

Source: https://github.com/palantir/osdk-ts/blob/main/packages/react-components-storybook/README.md

Install dependencies and start the Storybook development server locally. The Storybook will be accessible at http://localhost:6006.

```bash
pnpm install
pnpm dev
```

--------------------------------

### Run the Example People App

Source: https://github.com/palantir/osdk-ts/blob/main/packages/react-components/README.md

Command to run the example people app after dependencies have been transpiled. This command starts the development server for the specified package.

```bash
pnpm --filter @osdk/e2e.sandbox.peopleapp dev

```

--------------------------------

### Install @osdk/osdk-docs-context

Source: https://github.com/palantir/osdk-ts/blob/main/packages/osdk-docs-context/README.md

Install the package using npm or pnpm.

```bash
npm install @osdk/osdk-docs-context
# or
pnpm add @osdk/osdk-docs-context
```

--------------------------------

### Install Dependencies

Source: https://github.com/palantir/osdk-ts/blob/main/README.md

Run this command from the root of the repository to install all project dependencies.

```bash
pnpm install
```

--------------------------------

### Install Globally and Use Alias

Source: https://github.com/palantir/osdk-ts/blob/main/packages/create-widget/README.md

Demonstrates installing the CLI globally and using the npm create alias.

```sh
npm install -g @osdk/create-widget@latest
```

```sh
npm create @osdk/widget@latest
```

--------------------------------

### Request OSDK Examples for Loading Topic

Source: https://github.com/palantir/osdk-ts/blob/main/packages/osdk-docs-context/OSDK-DOCS-CONTEXT-IN-MCP.md

Example of an agent requesting OSDK examples for the 'loading' topic. The function returns a JSON string with code examples and metadata.

```typescript
// Agent requests loading examples
const jsonResponse = getOsdkExamples({
  topic: "loading",
  version: "2.4.0",
});
// Returns JSON string containing loadSingleObjectGuide, loadObjectPageGuide, etc.
// with full code examples, file paths, and metadata
```

--------------------------------

### Install @osdk/react-components-styles

Source: https://github.com/palantir/osdk-ts/blob/main/packages/react-components-styles/README.md

Install the package using npm.

```bash
npm install @osdk/react-components-styles
```

--------------------------------

### Install and Run CLI Locally

Source: https://github.com/palantir/osdk-ts/blob/main/packages/create-widget/README.md

Commands to install dependencies, build the project, navigate to the create-widget package, and run the CLI locally.

```sh
pnpm install
pnpm build
cd packages/create-widget
./bin/createWidget.mjs
```

--------------------------------

### Generate Example Files with npm

Source: https://github.com/palantir/osdk-ts/blob/main/packages/typescript-sdk-docs-examples/README.md

Executes the script to generate individual example files from documentation sections. This organizes code snippets by language and version.

```bash
npm run generateExamples
```

--------------------------------

### Run Development Server

Source: https://github.com/palantir/osdk-ts/blob/main/packages/e2e.sandbox.todoapp/README.md

Follow these steps to copy the environment sample, generate code, and start the development server.

```bash
pnpm run codegen
```

```bash
pnpm dev
```

--------------------------------

### Example Data Structure

Source: https://github.com/palantir/osdk-ts/blob/main/packages/osdk-docs-context/README.md

Illustrates the structure of an example object, including filePath, code, and version/variation metadata.

```json
{
  "2.4.0": {
    "examples": {
      "loadGeotimeSeriesPointsSnippet": {
        "filePath": "examples/typescript/2.4.0/loadGeotimeSeriesPointsSnippet.ts",
        "code": "// TypeScript code here..."
      },
      "derivedPropertyNumericExpression": {
        "#isUnary": {
          "filePath": "examples/typescript/2.4.0/derivedPropertyNumericExpression_#isUnary.ts",
          "code": "// Unary operation code..."
        },
        "^isUnary": {
          "filePath": "examples/typescript/2.4.0/derivedPropertyNumericExpression_^isUnary.ts",
          "code": "// Non-unary operation code..."
        }
      }
    }
  }
}
```

--------------------------------

### Install and Build Project Locally

Source: https://github.com/palantir/osdk-ts/blob/main/packages/cli/README.md

Run these commands from the repository root to install dependencies and build the project locally before running the CLI.

```sh
pnpm install
pnpm build
cd packages/cli
./bin/osdk.mjs
```

--------------------------------

### Install @osdk/react-components

Source: https://github.com/palantir/osdk-ts/blob/main/packages/react-components/README.md

Install the package using npm. Ensure peer dependencies are also installed.

```sh
npm install @osdk/react-components
```

--------------------------------

### Install and Run OSDK CLI Locally

Source: https://github.com/palantir/osdk-ts/blob/main/packages/create-app/README.md

Commands to install dependencies, build the project, navigate to the create-app package, and run the CLI locally. Ensure you are in the repository root before executing.

```sh
pnpm install
pnpm build
cd packages/create-app
./bin/createOsdkApp.mjs
```

--------------------------------

### CLI Options for Example Generation

Source: https://github.com/palantir/osdk-ts/blob/main/packages/typescript-docs-example-generator/README.md

Available command-line options for the `generate-examples` script, including version selection and output directory configuration.

```bash
generate-examples [options]

--versions <versions>      Comma-separated versions to generate (default: 2.1.0,2.4.0)
--output-dir <path>       Output directory (default: src/examples)
--hierarchy-output <path> Path for hierarchy file (default: src/typescriptOsdkExamples.ts)
--help, -h               Show help
```

--------------------------------

### Install OSDK Client and OAuth Packages

Source: https://github.com/palantir/osdk-ts/blob/main/README.md

Install the necessary packages for the OSDK client and OAuth functionality using npm.

```sh
npm install @osdk/client
npm install @osdk/oauth
```

--------------------------------

### Troubleshoot Build Issues: Missing Examples for Version X

Source: https://github.com/palantir/osdk-ts/blob/main/packages/typescript-docs-example-generator/README.md

Instructions for diagnosing missing examples for a specific version. Requires confirming version existence, checking template syntax, and reviewing generation logs.

```text
- Confirm version exists in `TYPESCRIPT_OSDK_SNIPPETS.versions`
- Check that templates for that version have valid syntax
- Review generation logs for skipped templates
```

--------------------------------

### Search OSDK Examples

Source: https://github.com/palantir/osdk-ts/blob/main/packages/osdk-docs-context/README.md

Search for examples across all versions or within a specific version using keywords.

```typescript
// Search examples across all versions
const results = NestedOsdkExamplesContext.searchExamples("numeric");

// Search within a specific version
const versionResults = NestedOsdkExamplesContext.searchExamples(
  "load",
  "2.4.0",
);
```

--------------------------------

### Install @osdk/cbac-components

Source: https://github.com/palantir/osdk-ts/blob/main/packages/cbac-components/README.md

Install the beta version of the CBAC components package using npm.

```sh
npm install @osdk/cbac-components@beta
```

--------------------------------

### Define Example Response Format

Source: https://github.com/palantir/osdk-ts/blob/main/packages/osdk-docs-context/OSDK-DOCS-CONTEXT-IN-MCP.md

JSON structure representing the format of the OSDK examples returned by the tool. Includes topic, version, and a list of examples with code and variations.

```json
{
  "topic": "loading",
  "version": "2.4.0",
  "examples": [
    {
      "templateName": "loadSingleObjectGuide",
      "code": "// Full TypeScript code here...",
      "variations": {
        "#condition": "// Variation code if applicable"
      }
    }
  ]
}
```

--------------------------------

### Install OSDK Core Packages

Source: https://context7.com/palantir/osdk-ts/llms.txt

Install the core OSDK packages using npm. This includes the client, OAuth, and API definition packages.

```bash
npm install @osdk/client @osdk/oauth @osdk/api
```

--------------------------------

### App Setup with OsdkProvider2

Source: https://github.com/palantir/osdk-ts/blob/main/packages/cbac-components/README.md

Wrap your application with OsdkProvider2, passing in a configured OSDK client.

```tsx
import { createClient } from "@osdk/client";
import { OsdkProvider2 } from "@osdk/react/experimental";

const client = createClient(/* config */);

function App() {
  return <OsdkProvider2 client={client}>{/* components */}</OsdkProvider2>;
}
```

--------------------------------

### Request OSDK Examples for Aggregation Topic

Source: https://github.com/palantir/osdk-ts/blob/main/packages/osdk-docs-context/OSDK-DOCS-CONTEXT-IN-MCP.md

Example of an agent requesting OSDK examples for the 'aggregation' topic. The function returns a JSON string with relevant aggregation templates.

```typescript
// Agent requests aggregation examples
const jsonResponse = getOsdkExamples({
  topic: "aggregation",
  version: "2.4.0",
});
// Returns JSON string with countAggregationTemplate,
// approximateDistinctAggregationTemplate, etc.
```

--------------------------------

### Install OSDK Beta Packages

Source: https://github.com/palantir/osdk-ts/blob/main/docs/react/getting-started.md

Install the beta versions of OSDK packages using npm. Ensure all @osdk/* packages use compatible versions to avoid TypeScript errors.

```bash
npm install @osdk/api@beta @osdk/client@beta @osdk/react@beta
```

--------------------------------

### Install OSDK and React Dependencies

Source: https://github.com/palantir/osdk-ts/blob/main/docs/react/prerequisites.md

Install the required OSDK packages and React libraries using npm.

```bash
npm install @osdk/api@beta @osdk/client@beta @osdk/react@beta
npm install react react-dom
```

--------------------------------

### Install OSDK Dependencies

Source: https://github.com/palantir/osdk-ts/blob/main/packages/react-components/docs/Prerequisites.md

Install the necessary OSDK packages and their peer dependencies like React. Ensure you are using the beta versions as indicated.

```bash
npm install @osdk/api@beta @osdk/client@beta @osdk/react@beta
npm install @osdk/react-components
npm install @osdk/cbac-components # if using CBAC components
npm install react react-dom classnames
```

--------------------------------

### Understand Version Compatibility

Source: https://github.com/palantir/osdk-ts/blob/main/packages/osdk-docs-context/README.md

Retrieve base examples for a given version, considering semantic version fallback where newer versions include examples from older compatible versions.

```typescript
// 2.4.0 includes examples from 2.0.0, 2.1.0, and 2.4.0
const examples240 = NestedOsdkExamplesContext.getBaseExamplesForVersion(
  "2.4.0",
);

// 2.1.0 includes examples from 2.0.0 and 2.1.0 (but NOT 2.4.0)
const examples210 = NestedOsdkExamplesContext.getBaseExamplesForVersion(
  "2.1.0",
);
```

--------------------------------

### MCP Server Integration Example

Source: https://github.com/palantir/osdk-ts/blob/main/packages/osdk-docs-context/README.md

Demonstrates how to use NestedOsdkExamplesContext within an MCP server environment for stable public API access to OSDK examples.

```typescript
// Perfect for MCP servers - stable public API
import { NestedOsdkExamplesContext } from "@osdk/osdk-docs-context";

function getOsdkExamples(version: string, templateName?: string) {
  if (templateName) {
    return NestedOsdkExamplesContext.getExample(version, [templateName]);
  }
  return NestedOsdkExamplesContext.getExamplesWithVersionInfo(version);
}
```

--------------------------------

### Install Peer Dependencies

Source: https://github.com/palantir/osdk-ts/blob/main/packages/cbac-components/README.md

Install the necessary peer dependencies for @osdk/cbac-components.

```sh
npm install react react-dom classnames @osdk/react @osdk/react-components
```

--------------------------------

### Build and Run Generator Commands

Source: https://github.com/palantir/osdk-ts/blob/main/packages/typescript-docs-example-generator/README.md

Commands to build the generator, run tests, generate examples, and run generation with custom options.

```bash
# Build the generator
pnpm build

# Run tests
pnpm test

# Generate examples (from parent directory)
pnpm generateExamples

# With custom options
./bin/generate-examples.mjs --versions 2.1.0,2.4.0 --output-dir dist/examples
```

--------------------------------

### Run OSDK CLI with Arguments

Source: https://github.com/palantir/osdk-ts/blob/main/packages/create-app/README.md

Example of how to run the OSDK CLI with a project name and options. Use this to bypass interactive prompts and configure your application directly.

```sh
npx @osdk/create-app [project] [--<option>]
```

--------------------------------

### Transpile Dependencies for People App

Source: https://github.com/palantir/osdk-ts/blob/main/packages/react-components/README.md

Command to transpile all dependencies for the `@osdk/e2e.sandbox.peopleapp` package. This is a necessary step before running the example app.

```bash
pnpm --filter @osdk/e2e.sandbox.peopleapp transpileAllDeps

```

--------------------------------

### CSS Setup with OSDK Styles and Custom Layer

Source: https://github.com/palantir/osdk-ts/blob/main/packages/react-components/README.md

Configure CSS layers for OSDK components and custom brand overrides. This setup prioritizes OSDK styles.

```css
/* index.css */
@layer osdk.styles, user.brand;

@import "@osdk/react-components/styles.css" layer(osdk.styles);
@import "./user-brand.css" layer(user.brand);
```

--------------------------------

### Setup ObservableClient for Cache Invalidation

Source: https://github.com/palantir/osdk-ts/blob/main/docs/react/cache-management.md

Demonstrates how to create and export an `ObservableClient` from a base `client` to enable manual cache invalidation methods. This setup is required for `OsdkProvider2` to manage cache.

```tsx
// client.ts
import { createClient } from "@osdk/client";
import {
  createObservableClient,
  type ObservableClient,
} from "@osdk/client/unstable-do-not-use";

const client = createClient(
  "https://your-stack.palantirfoundry.com",
  "your-ontology-rid",
  authProvider,
);

// Create and export the observable client for invalidation
export const observableClient = createObservableClient(client);
export { client };
```

```tsx
// main.tsx
import { OsdkProvider2 } from "@osdk/react/experimental";
import { client, observableClient } from "./client";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <OsdkProvider2 client={client} observableClient={observableClient}>
    <App />
  </OsdkProvider2>,
);

```

--------------------------------

### Access OSDK Examples

Source: https://github.com/palantir/osdk-ts/blob/main/packages/osdk-docs-context/README.md

Import and use NestedOsdkExamplesContext to retrieve OSDK versions, simple templates, and template variations.

```typescript
import {
  NestedOsdkExamplesContext,
  OSDK_DOCS_CONTEXT,
} from "@osdk/osdk-docs-context";

// Get all available OSDK versions
const versions = NestedOsdkExamplesContext.getAvailableVersions();

// Get a simple template (no variations)
const example = NestedOsdkExamplesContext.getExample("2.4.0", [
  "loadGeotimeSeriesPointsSnippet",
]);

// Get a template variation
const variation = NestedOsdkExamplesContext.getExample("2.4.0", [
  "derivedPropertyNumericExpression",
  "#isUnary",
]);
```

--------------------------------

### Quick Example: CbacPicker Usage

Source: https://github.com/palantir/osdk-ts/blob/main/packages/cbac-components/README.md

Demonstrates basic usage of the CbacPicker component, managing marking IDs with local state.

```tsx
import { CbacPicker } from "@osdk/cbac-components/experimental";
import { useState } from "react";

function ClassificationForm() {
  const [markingIds, setMarkingIds] = useState<string[]>([]);

  return (
    <CbacPicker
      initialMarkingIds={markingIds}
      onChange={setMarkingIds}
    />
  );
}
```

--------------------------------

### ObjectTable Examples

Source: https://github.com/palantir/osdk-ts/blob/main/packages/react-components/docs/ObjectTable.md

Illustrates various configurations for the ObjectTable component, including custom column definitions, multiple selection, and default sorting.

```APIDOC
## ObjectTable Examples

### Example 1: Basic Table with Custom Column Definitions

```typescript
import {
  type ColumnDefinition,
  ObjectTable,
} from "@osdk/react-components/experimental/object-table";
import { Employee } from "@YourApp/sdk";

const columnDefinitions: Array<ColumnDefinition<typeof Employee>> = [
  {
    locator: { type: "property", id: "fullName" },
    pinned: "left",
    width: 200,
  },
  {
    locator: { type: "property", id: "email" },
    width: 250,
  },
  {
    locator: { type: "property", id: "jobTitle" },
  },
  {
    locator: { type: "property", id: "department" },
  },
];

function EmployeesTable() {
  return (
    <ObjectTable
      objectType={Employee}
      columnDefinitions={columnDefinitions}
    />
  );
}
```

### Example 2: Table with Multiple Selection

```typescript
import { ObjectTable } from "@osdk/react-components/experimental/object-table";
import { Employee } from "@YourApp/sdk";

function EmployeesTable() {
  return (
    <ObjectTable
      objectType={Employee}
      selectionMode="multiple"
    />
  );
}
```

### Example 3: Table with Default Sorting

```typescript
import { ObjectTable } from "@osdk/react-components/experimental/object-table";
import { Employee } from "@YourApp/sdk";

function EmployeesTable() {
  return (
    <ObjectTable
      objectType={Employee}
      defaultOrderBy={[
        {
          property: "firstFullTimeStartDate",
          direction: "desc",
        },
      ]}
    />
  );
}
```
```

--------------------------------

### PdfViewer Advanced Usage

Source: https://github.com/palantir/osdk-ts/blob/main/packages/react-components/docs/PdfViewer.md

Example demonstrating advanced configuration of the PdfViewer component, including annotations, initial page and scale, and sidebar settings.

```APIDOC
## PdfViewer Advanced Usage

### Description
This example shows how to use the `PdfViewer` component with advanced props such as `initialPage`, `initialScale`, `annotations`, and sidebar configurations.

### Usage

```tsx
<PdfViewer
  media={myMedia}
  initialPage={3}
  initialScale={1.5}
  initialSidebarOpen
  sidebarMode="outline"
  enableDownload
  annotations={{
    1: [
      {
        id: "finding-1",
        type: "highlight",
        page: 1,
        rect: { x: 72, y: 500, width: 200, height: 16 },
        label: "Key finding",
        color: "rgba(255, 200, 0, 0.4)",
      },
    ],
  }}
  onAnnotationClick={(annotation) => console.log("Clicked:", annotation.id)}
/>;
```
```

--------------------------------

### Execute a Simple Action

Source: https://context7.com/palantir/osdk-ts/llms.txt

Apply a predefined action to an object. This example shows how to mark a todo item as complete. Ensure the action definition is imported correctly.

```typescript
import { $Actions, Todo, Employee } from "@my/generated-sdk";

const client = createClient(url, ontologyRid, auth);

// Simple action execution
const completeTodo = client($Actions.completeTodo);
await completeTodo.applyAction({
  todo: todoObject,  // Pass the object or its primary key
  isComplete: true,
});
```

--------------------------------

### Derived Properties: Basic Usage

Source: https://github.com/palantir/osdk-ts/blob/main/docs/react/advanced-queries.md

Add computed properties server-side using a builder function with `useOsdkObjects`. This example shows how to get a manager's name and count direct reports.

```tsx
import type { DerivedProperty } from "@osdk/client";
import { Employee } from "@my/osdk";
import { useOsdkObjects } from "@osdk/react/experimental";

const { data } = useOsdkObjects(Employee, {
  where: { department: "Engineering" },
  withProperties: {
    // Get manager's name via link traversal
    managerName: (base: DerivedProperty.Builder<Employee, false>) =>
      base.pivotTo("manager").selectProperty("fullName"),

    // Count direct reports
    reportCount: (base: DerivedProperty.Builder<Employee, false>) =>
      base.pivotTo("reports").aggregate("$count"),
  },
});
```

--------------------------------

### Create To-Do App Project

Source: https://github.com/palantir/osdk-ts/blob/main/examples/example-tutorial-todo-app-sdk-2.x/README.md

Use this command to generate a new project from the tutorial-todo-app template. Answer the prompts using information from your Developer Console application. Ensure you specify the desired SDK version.

```bash
npm create @osdk/app@latest -- --template tutorial-todo-app --sdkVersion 2.x
```

--------------------------------

### Install Peer Dependencies

Source: https://github.com/palantir/osdk-ts/blob/main/packages/react-components/README.md

Install the required peer dependencies for @osdk/react-components.

```sh
npm install react react-dom classnames @osdk/react @osdk/client @osdk/api
```

--------------------------------

### Install OSDK Maker Package

Source: https://github.com/palantir/osdk-ts/blob/main/packages/maker/README.md

Install the maker package as a dependency in your project using npm.

```bash
npm install @osdk/maker
```

--------------------------------

### Run Primary Benchmarks

Source: https://github.com/palantir/osdk-ts/blob/main/benchmarks/README.md

Navigate to the primary tests directory and execute the benchmark commands. This involves building the bundle and then running the benchmark script, followed by viewing the results.

```bash
cd tests/primary
pnpm exec turbo bundle
pnpm run benchmark
cat build/benchmark/results.json
```

--------------------------------

### Display Help for a Command

Source: https://github.com/palantir/osdk-ts/blob/main/packages/cli/README.md

Use the --help flag to see all supported commands and their arguments. This is useful for understanding command usage.

```bash
npx @osdk/cli site version --help
```

--------------------------------

### Create New App with Template

Source: https://github.com/palantir/osdk-ts/blob/main/examples/example-tutorial-todo-aip-app-sdk-2.x/README.md

Use this command to create a new project from the tutorial-todo-aip-app template. Ensure you have your Developer Console application details ready to answer the prompts.

```bash
npm create @osdk/app@latest -- --template tutorial-todo-aip-app --sdkVersion 2.x
```

--------------------------------

### Derived Properties - Advanced Examples

Source: https://github.com/palantir/osdk-ts/blob/main/docs/react/advanced-queries.md

Provides advanced examples of using chained traversals and property aggregation for derived properties.

```APIDOC
## Derived Properties - Advanced Examples

### Description
Demonstrates advanced usage of derived properties, including chained link traversals and aggregating specific properties.

### Method
Not Applicable (This is a conceptual example using a React hook)

### Endpoint
Not Applicable

### Request Example
```tsx
import type { DerivedProperty } from "@osdk/client";

const { data } = useOsdkObjects(Employee, {
  where: { department: "Engineering" },
  withProperties: {
    // Chained traversal
    departmentSize: (base: DerivedProperty.Builder<Employee, false>) =>
      base.pivotTo("manager")
        .pivotTo("reports")
        .aggregate("$count"),

    // Aggregate a specific property
    avgReportSalary: (base: DerivedProperty.Builder<Employee, false>) =>
      base.pivotTo("reports")
        .selectProperty("salary")
        .aggregate("$avg"),
  },
});
```

### Response
#### Success Response (200)
- **data** (Array<Object>) - Array of objects, each potentially including the defined advanced derived properties.

#### Response Example
```json
{
  "data": [
    {
      "departmentSize": 10,
      "avgReportSalary": 75000
    }
  ]
}
```
```

--------------------------------

### Example Widget Configuration JSON

Source: https://github.com/palantir/osdk-ts/blob/main/packages/widget.vite-plugin/README.md

This JSON output shows how the vite plugin discovers multiple entrypoints, generating configurations for each widget. It includes paths to generated JavaScript and CSS files.

```json
{
  "manifestVersion": "1.0.0",
  "widgetSet": {
    "rid": "ri.widgetregistry..widget-set.abc",
    "version": "0.0.0",
    "widgets": {
      "main": {
        "entrypointJs": [
          "assets/main-D7Z1E0qk.js"
        ],
        "entrypointCss": []
        // Rest of config
      },
      "second": {
        "entrypointJs": [
          "assets/second-CULz-_Ck.js"
        ],
        "entrypointCss": []
        // Rest of config
      }
    }
  }
}
```

--------------------------------

### Install OAC Vite Plugin

Source: https://github.com/palantir/osdk-ts/blob/main/packages/vite-plugin-oac/README.md

Install the OAC Vite Plugin using pnpm. This command adds the necessary package to your project dependencies.

```bash
pnpm add @osdk/vite-plugin-oac
```

--------------------------------

### Run create-widget CLI with Arguments

Source: https://github.com/palantir/osdk-ts/blob/main/packages/create-widget/README.md

How to run the create-widget CLI using npx, with placeholders for project name and options.

```sh
npx @osdk/create-widget [project] [--<option>]
```

--------------------------------

### Create New App with Widget Template

Source: https://github.com/palantir/osdk-ts/blob/main/examples/example-widget-minimal-react-sdk-2.x/README.md

Use this command to generate a new project based on the widget-minimal-react template. Ensure you have @osdk/create-app installed globally or use npx.

```bash
npm create @osdk/app@latest -- --template widget-minimal-react --sdkVersion 2.x
```

--------------------------------

### CSS Setup without Tailwind

Source: https://github.com/palantir/osdk-ts/blob/main/packages/react-components/docs/Prerequisites.md

Import OSDK component styles using CSS @layer for predictable theming. This setup is for applications not using Tailwind CSS.

```css
/* index.css */
@layer osdk.components, cbac.components;

@import "@osdk/react-components/styles.css" layer(osdk.components);
@import "@osdk/cbac-components/styles.css" layer(cbac.components); /* only needed if using CBAC components */
```

--------------------------------

### Create React App with @osdk/create-app

Source: https://github.com/palantir/osdk-ts/blob/main/examples/example-react-sdk-2.x-no-osdk/README.md

Use this command to generate a new React application with the Ontology SDK. Answer the prompts with your Developer Console application details. The --skipOsdk flag is used here.

```bash
npm create @osdk/app@latest -- --template react --sdkVersion 2.x --skipOsdk
```

--------------------------------

### Missing Variable Error Example

Source: https://github.com/palantir/osdk-ts/blob/main/packages/typescript-docs-example-generator/README.md

Example of a missing variable error message indicating that a required variable, 'newProperty', was not found in the context. This requires adding the variable to the context definition.

```text
Variable 'newProperty' not found in context
```

--------------------------------

### Example Benchmark Results (esbuild)

Source: https://github.com/palantir/osdk-ts/blob/main/benchmarks/README.md

This JSON structure represents the output of a benchmark run for the 'import.createClient.esbuild.js' module. It includes detailed run data and statistical summaries for time, heap usage, and RSS.

```json
{
  "tests": {
    "import.createClient.esbuild.js": {
      "runs": [
        {
          "type": "result",
          "time": 14.41,
          "heapUsed": 1362704,
          "rss": 1884160
        },
        {
          "type": "result",
          "time": 14.66,
          "heapUsed": 1362680,
          "rss": 2392064
        }
      ],
      "stats": {
        "time": {
          "std": 0.6165480967090525,
          "mean": 14.905333333333335,
          "min": 14.41,
          "max": 16.7
        },
        "heapUsed": {
          "std": 41.845429857990474,
          "mean": 1362665.6,
          "min": 1362632,
          "max": 1362752
        },
        "rss": {
          "std": 243298.56906823127,
          "mean": 2170333.8666666667,
          "min": 1818624,
          "max": 2506752
        }
      }
    }
  },
  "sizes": {
    "esbuild/bundle.js": 128543
  }
}
```

--------------------------------

### Create OSDK Client Instance

Source: https://github.com/palantir/osdk-ts/blob/main/README.md

Create an OSDK client instance by providing the Foundry stack URL, the specific Ontology rid, and the authenticated auth provider.

```typescript
import { createClient } from "@osdk/client";

const client = createClient(
  "https://stack.palantir.com",
  "ri.foundry.main",
  auth, // This is the auth that we created above.
);
```

--------------------------------

### Generation Failure Example

Source: https://github.com/palantir/osdk-ts/blob/main/packages/typescript-docs-example-generator/README.md

Example of a generation failure message indicating an issue processing a block variation. This suggests a problem with the block's syntax or its associated context variable values.

```text
Failed to process block variation templateName#blockName
```

--------------------------------

### Template Syntax Error Example

Source: https://github.com/palantir/osdk-ts/blob/main/packages/typescript-docs-example-generator/README.md

Example of a template syntax error message indicating an issue with Mustache syntax, specifically an unexpected 'OPEN_ENDBLOCK' token. This error typically requires fixing the syntax in the template file.

```text
Parse error on line 5: Expecting 'EOF', got 'OPEN_ENDBLOCK'
```

--------------------------------

### useOsdkObjects - All Options

Source: https://github.com/palantir/osdk-ts/blob/main/docs/react/querying-data.md

Illustrates the various configuration options available for the `useOsdkObjects` hook.

```APIDOC
## useOsdkObjects - All Options

### Description
Provides a comprehensive set of options for fetching and observing OSDK objects.

### Method
`useOsdkObjects` hook

### Endpoint
N/A (Client-side hook)

### Parameters
#### Query Parameters
- **rids** (Array<string>) - Optional - Array of object resource IDs to fetch.
- **where** (object) - Optional - Filter criteria for the objects.
- **pageSize** (number) - Optional - Number of objects to retrieve per page.
- **orderBy** (object) - Optional - Criteria for sorting the results.
- **dedupeIntervalMs** (number) - Optional - Interval in milliseconds to deduplicate updates.
- **streamUpdates** (boolean) - Optional - Whether to stream real-time updates.
- **autoFetchMore** (number) - Optional - Number of items to automatically fetch more when scrolling.
- **enabled** (boolean) - Optional - Whether the query is enabled.
- **intersectWith** (Array<object>) - Optional - Criteria for intersecting with other object sets.
- **withProperties** (object) - Optional - Advanced query options for properties.

### Request Example
```ts
const { data, isLoading, isOptimistic, fetchMore, error } = useOsdkObjects(
  Todo,
  {
    rids: ["ri.phonograph2-objects.main.object.abc123", "ri.phonograph2-objects.main.object.def456"],
    where: { isComplete: false },
    pageSize: 20,
    orderBy: { createdAt: "desc" },
    dedupeIntervalMs: 5000,
    streamUpdates: true,
    autoFetchMore: 100,
    enabled: true,
    intersectWith: [{ where: { priority: "high" } }],
    withProperties: { /* see advanced-queries */ },
  },
);
```

### Note
`streamUpdates` and `pivotTo` cannot be used together. Queries using `pivotTo` will fetch data normally but won't receive real-time updates.
```

--------------------------------

### Create React App with OSDK

Source: https://github.com/palantir/osdk-ts/blob/main/examples/example-react-sdk-2.x/README.md

Use this command to quickly generate your own version of the React template. Ensure you have the correct SDK version specified.

```bash
npm create @osdk/app@latest -- --template react --sdkVersion 2.x
```

--------------------------------

### Migration: Before CSS Imports

Source: https://github.com/palantir/osdk-ts/blob/main/packages/react-components-styles/README.md

Example of CSS imports before migrating from @osdk/react-components-styles to @osdk/react-components.

```css
/* Before */
@import "@osdk/react-components-styles" layer(osdk.tokens);
@import "@osdk/react-components/styles.css" layer(osdk.components);
```

--------------------------------

### Get Live Site Version

Source: https://github.com/palantir/osdk-ts/blob/main/packages/cli/README.md

Command to retrieve the currently deployed live version of a Foundry site.

```sh
npx @osdk/cli site version get
```

--------------------------------

### Paginate Foundry Users List with useFoundryUsersList

Source: https://github.com/palantir/osdk-ts/blob/main/docs/react/platform-apis.md

Demonstrates how to implement pagination for the Foundry users list using the `useFoundryUsersList` hook. Manages state for `pageToken` and displays a 'Next page' button when available.

```tsx
import { PalantirApiError } from "@osdk/client";
import { useFoundryUsersList } from "@osdk/react/experimental";
import { useState } from "react";

export function UsersList() {
  const [pageToken, setPageToken] = useState<string | undefined>(undefined);

  const { users, nextPageToken, error, isLoading } = useFoundryUsersList({
    pageSize: 10,
    pageToken,
  });

  if (error != null) {
    const errorMessage = error instanceof PalantirApiError
      ? error.errorDescription
      : error.message;

    return <div>Failed to load users: {errorMessage}</div>;
  }

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {users && (
        <>
          <ul>
            {users.map((user) => <li key={user.id}>{user.username}</li>)}
          </ul>

          {nextPageToken && (
            <button
              onClick={() => setPageToken(nextPageToken)}
              disabled={isLoading}
            >
              Next page
            </button>
          )}
        </>
      )}
    </div>
  );
}
```

--------------------------------

### FilterList Component

Source: https://github.com/palantir/osdk-ts/blob/main/packages/react-components/docs/FilterList.md

This section details the FilterList component, its import, basic usage with an example, and a comprehensive reference of its props.

```APIDOC
## FilterList Component

### Description
The FilterList component from `@osdk/react-components/experimental/filter-list` allows users to filter object sets based on defined criteria. It supports various filter types and UI customization options.

### Import
```typescript
import { FilterList } from "@osdk/react-components/experimental/filter-list";
```

### Basic Usage
This example demonstrates how to use FilterList with an objectSet and two property-based filter definitions.

```typescript
import { FilterList } from "@osdk/react-components/experimental/filter-list";
import { Employee } from "@YourApp/sdk";
import { $ } from "@YourApp/sdk";

function EmployeeFilters() {
  return (
    <FilterList
      objectSet={$(Employee)}
      filterDefinitions={[
        {
          type: "PROPERTY",
          key: "department",
          filterComponent: "LISTOGRAM",
        },
        {
          type: "PROPERTY",
          key: "jobTitle",
          filterComponent: "LISTOGRAM",
        },
      ]}
    />
  );
}
```

### Props Reference

#### Core Props

| Prop                | Type                              | Required | Default | Description                                                           |
| ------------------- | --------------------------------- | -------- | ------- | --------------------------------------------------------------------- |
| `objectSet`         | `ObjectSet<Q>`                    | Yes      | -       | The object set to filter. Supports prefiltered sets (e.g. `.where()`) |
| `filterDefinitions` | `Array<FilterDefinitionUnion<Q>>` | No       | -       | Filter items to display. If omitted, all filterable properties shown  |

#### Filter Management

| Prop                    | Type                             | Default | Description                                                    |
| ----------------------- | -------------------------------- | ------- | -------------------------------------------------------------- |
| `filterClause`          | `WhereClause<Q>`                 | -       | Current where clause (controlled mode)                         |
| `onFilterClauseChanged` | `(newClause) => void`            | -       | Called when filter clause changes. Required in controlled mode |
| `onFilterStateChanged`  | `(definition, newState) => void` | -       | Called when any filter's state changes                         |
| `initialFilterStates`   | `Map<string, FilterState>`       | -       | Initial states for hydrating from external storage             |

#### UI Features

| Prop                    | Type                  | Default | Description                               | |
| ----------------------- | --------------------- | ------- | ----------------------------------------- |
| `title`                 | `ReactNode`           | -       | Title displayed in the filter list header |
| `titleIcon`             | `React.ReactNode`     | -       | Icon displayed next to the title          |
| `collapsed`             | `boolean`             | `false` | Whether the panel is collapsed            |
| `onCollapsedChange`     | `(collapsed) => void` | -       | Called when collapsed state changes       |
| `showResetButton`       | `boolean`             | `false` | Show reset filters button in header       |
| `onReset`               | `() => void`          | -       | Called when reset button is clicked       |
| `showActiveFilterCount` | `boolean`             | `false` | Show count of active filters in header    |
| `className`             | `string`              | -       | Additional CSS class name                 |
```

--------------------------------

### Example Benchmark Results (Standard JS)

Source: https://github.com/palantir/osdk-ts/blob/main/benchmarks/README.md

This JSON structure shows benchmark results for the 'import.createClient.js' module, highlighting performance metrics. It includes run data and statistical summaries for time, heap usage, and RSS.

```json
{
  "tests": {
    "import.createClient.js": {
      "runs": [
        {
          "type": "result",
          "time": 36.3,
          "heapUsed": 2090960,
          "rss": 5619712
        },
        {
          "type": "result",
          "time": 38.81,
          "heapUsed": 2094352,
          "rss": 5996544
        }
      ],
      "stats": {
        "time": {
          "std": 1.561981078274923,
          "mean": 38.35466666666668,
          "min": 36.3,
          "max": 41.92
        },
        "heapUsed": {
          "std": 1157.6154494860928,
          "mean": 2092049.0666666667,
          "min": 2090744,
          "max": 2094352
        },
        "rss": {
          "std": 326074.07364803203,
          "mean": 5936469.333333333,
          "min": 5505024,
          "max": 6602752
        }
      }
    }
  },
  "sizes": {
    "esbuild/bundle.js": 128543
  }
}
```

--------------------------------

### Migration: After CSS Imports

Source: https://github.com/palantir/osdk-ts/blob/main/packages/react-components-styles/README.md

Example of CSS imports after migrating from @osdk/react-components-styles to @osdk/react-components, consolidating styles into a single layer.

```css
/* After */
@import "@osdk/react-components/styles.css" layer(osdk.styles);
```

--------------------------------

### useOsdkObject - Loading by Primary Key

Source: https://github.com/palantir/osdk-ts/blob/main/docs/react/querying-data.md

Demonstrates how to fetch a single object by its type and primary key using `useOsdkObject`.

```APIDOC
## useOsdkObject - Loading by Primary Key

### Description
Fetch a single object by providing its type and primary key to the `useOsdkObject` hook.

### Method
`useOsdkObject` hook

### Endpoint
N/A (Client-side hook)

### Parameters
#### Path Parameters
- **objectType** (object) - Required - The type of the object to fetch.
- **primaryKey** (string) - Required - The primary key of the object.

### Request Example
```tsx
import { Todo } from "@my/osdk";
import { useOsdkObject } from "@osdk/react/experimental";

function TodoLoader({ todoId }: { todoId: string }) {
  const { object, isLoading, error } = useOsdkObject(Todo, todoId);

  if (isLoading && !object) {
    return <div>Loading todo...</div>;
  }

  if (error) {
    return <div>Error loading todo: {error.message}</div>;
  }

  if (!object) {
    return <div>Todo not found</div>;
  }

  return <TodoView todo={object} />;
}
```

### Return Values
- **object** - The object instance (may be undefined while loading).
- **isLoading** - True while fetching from server.
- **error** - Error object if fetch failed.
```

--------------------------------

### useObjectSet Options

Source: https://github.com/palantir/osdk-ts/blob/main/docs/react/advanced-queries.md

Lists all available options for configuring `useObjectSet` queries.

```APIDOC
## useObjectSet Options

### Description
Configuration options for the `useObjectSet` hook.

### Parameters
#### Query Parameters
- **where** (Object) - Filter objects based on specified criteria.
- **withProperties** (Object) - Add derived or computed properties to the results.
- **union** (ObjectSet) - Combine the current ObjectSet with another.
- **intersect** (ObjectSet) - Find common objects between the current ObjectSet and another.
- **subtract** (ObjectSet) - Remove objects that exist in another ObjectSet.
- **pivotTo** (string) - Traverse to linked objects. Cannot be combined with `streamUpdates`.
- **pageSize** (number) - Number of objects to retrieve per page.
- **orderBy** (Object) - Specify the sorting order for the results.
- **dedupeIntervalMs** (number) - Minimum time in milliseconds between re-fetches. Defaults to 2000ms.
- **streamUpdates** (boolean) - Enable real-time WebSocket updates. Defaults to `false`. Cannot be combined with `pivotTo`.
- **autoFetchMore** (number) - Automatically fetch additional pages of results.
- **enabled** (boolean) - Enable or disable the query execution.
```

--------------------------------

### Create Vue App with OSDK

Source: https://github.com/palantir/osdk-ts/blob/main/examples/example-vue-sdk-2.x/README.md

Use this command to generate a new Vue project with a specified SDK version. Answer prompts based on your Developer Console application.

```bash
npm create @osdk/app@latest -- --template vue --sdkVersion 2.x
```

--------------------------------

### Canonical Where Clause Example

Source: https://github.com/palantir/osdk-ts/blob/main/packages/client/architecture_observable_client.md

Demonstrates two semantically equivalent 'where' clauses that should be canonicalized to the same object reference for efficient caching.

```typescript
{
  $and: [
    { hello: "world" },
    { value: { $gt: 5 } },
  ];
}
```

```typescript
{
  $and: [
    { hello: { $eq: "world" } },
    { value: { $gt: 5 } },
  ];
}
```