---
title: Getting started
description: Add the Actera widget to a React application.
url: "https://docs.actera.tech/docs/getting-started"
docs_index: /llms.txt
---

> For an index of all documentation, see [/llms.txt](/llms.txt).

## Install the React SDK

```bash
npm install @actera/sdk-react
```

`react` and `react-dom` are peer dependencies and must already be installed in your application.

## Create a delegated-token endpoint

The browser asks your backend for a short-lived token. Your backend authenticates the current user, derives their workspace and permissions, and signs the token with your Actera secret. Do not put that secret or an Actera admin API key in browser code.

The token must contain a user ID, workspace ID, and the permissions that user has in that workspace. Tokens expire after five minutes by default.

## Render the widget

```tsx title="app.tsx"
import { ActeraChat, ActeraProvider } from "@actera/sdk-react";

async function getAccessToken() {
  const response = await fetch("/api/actera-token", { method: "POST" });
  const { token } = (await response.json()) as { token: string };
  return token;
}

export function App() {
  return (
    <ActeraProvider endpoint="https://api.actera.tech" getAccessToken={getAccessToken}>
      <ActeraChat />
    </ActeraProvider>
  );
}
```

Next, [import product tools](/docs/guides/importing-tools) and review them in the Actera dashboard.

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)