---
title: Customize the React widget
description: Match Actera to your product and connect tool results to your routes.
url: "https://docs.actera.tech/docs/guides/react-widget"
docs_index: /llms.txt
---

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

`ActeraChat` defaults to a floating panel. Use `mode="drawer"` when the assistant should open from the side of your application.

```tsx
<ActeraChat
  title="Actera"
  statusLabel="Ready"
  emptyState="Ask Actera to inspect this workspace."
  suggestedPrompts={["Show recent projects", "Review production deployments"]}
  placeholder="Ask Actera..."
  mode="drawer"
/>
```

## Link results to your product

Keep routes in the integrating application. Add an `integrationConfig` for stable resource links, or resolve actions at runtime when a destination depends on the result.

```tsx
<ActeraProvider
  endpoint="https://api.actera.tech"
  getAccessToken={getAccessToken}
  resolveResultRowActions={({ item }) => {
    if (!item || typeof item !== "object" || !("id" in item)) return [];
    return [{ label: "Open", href: `/projects/${String(item.id)}` }];
  }}
>
  <ActeraChat />
</ActeraProvider>
```

The SDK is intentionally product-agnostic. Actera does not assume a resource name, a dashboard path, or your navigation model.

---

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)