> ## Documentation Index
> Fetch the complete documentation index at: https://docs.actionx.top/llms.txt
> Use this file to discover all available pages before exploring further.

# SDK integration

> Use the ActionX SDK to request and render monetization results in a frontend application.

The SDK is a good fit when you want to integrate ActionX directly into a frontend app and render results inside chat, recommendation, or content areas.

```mermaid theme={null}
flowchart LR
    app["Frontend app"] --> manager["AdManager"]
    manager --> request["requestAds"]
    request --> api["network.actionx.top/api/v1"]
    api --> render["render into DOM container"]
```

## Minimal example

```bash theme={null}
npm install @action-x/ad-sdk
```

```typescript theme={null}
import { AdManager } from "@action-x/ad-sdk";
import "@action-x/ad-sdk/style.css";

const manager = new AdManager({
  apiBaseUrl: "https://network.actionx.top/api/v1",
  apiKey: "ak_your_api_key",
});

await manager.requestAds({
  query: "Recommend a Bluetooth headset",
  response: "Here are a few good options for work and travel.",
});

manager.render(document.getElementById("ad-container"));
```

## When to choose the SDK first

* You want the frontend to control render position and presentation
* Your application is a web frontend or frontend-led architecture
* You want the shortest path to integration and validation

## Continue reading

<Columns cols={2}>
  <Card title="Full SDK guide" href="/sdk/integration">
    Explore fuller examples for React, Vue, and SDK event handling.
  </Card>

  <Card title="Universal SDK usage" href="/developers/universal-sdk">
    Explore framework-agnostic and vanilla JavaScript integration patterns.
  </Card>
</Columns>