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

# SDKs & client libraries

> Official Swippee packages — the TypeScript API client (@swippee/sdk) and the React Connect component (@swippee/connect-react).

Swippee ships two official packages. Both are MIT-licensed, have zero runtime
dependencies, and work in Node 18+ and modern browsers.

<CardGroup cols={2}>
  <Card title="@swippee/sdk" icon="square-terminal">
    TypeScript client for the whole API — parse, products, enrichment, banks,
    data. Use it server-side with your secret key.
  </Card>

  <Card title="@swippee/connect-react" icon="react">
    React component for the hosted Connect consent flow.
    Use it in the browser.
  </Card>
</CardGroup>

## @swippee/sdk — API client

```bash theme={null}
npm install @swippee/sdk
```

```ts theme={null}
import { Swippee } from "@swippee/sdk";

const swippee = new Swippee({ apiKey: process.env.SWIPPEE_SECRET_KEY! });

// Parse a bank statement PDF
const report = await swippee.parse({ file: pdfBlob, bank: "NABIL" });
console.log(report.statement.bank, report.transactions.length);
```

<Warning>
  The SDK uses your **secret** key — keep it server-side, never ship it to the
  browser.
</Warning>

## @swippee/connect-react — hosted Connect

```bash theme={null}
npm install @swippee/connect-react
```

The consumer authenticates and consents in a Swippee-hosted popup; your app
never sees their statement or login. On approval you get a `public_token` to
[exchange on your server](/guides/connect).

```tsx theme={null}
import { SwippeeConnect } from "@swippee/connect-react";

<SwippeeConnect
  // your backend: POST /v1/connect/request → { connect_url }
  createRequest={() => fetch("/api/connect-request").then((r) => r.json())}
  onHostedSuccess={({ publicToken }) => exchangeOnYourServer(publicToken)}
  onExit={(info) => console.log("closed:", info.reason)}
/>
```

Prefer your own trigger? Use the headless hook:

```tsx theme={null}
import { useSwippeeConnect } from "@swippee/connect-react";

const { open } = useSwippeeConnect({
  createRequest: () => fetch("/api/connect-request").then((r) => r.json()),
  onHostedSuccess: ({ publicToken }) => exchangeOnYourServer(publicToken),
});
// <MyButton onClick={open}>Connect bank</MyButton>
```

<Note>
  No bundler? The same hosted flow is available as a plain `<script>` drop-in —
  see the [Connect guide](/guides/connect).
</Note>