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

# Quickstart

> Get started with the Alphscan SDK in a few steps

This guide gets you from zero to a working client and your first API call using **@alphscan/sdk**. For React apps, see the **sdk-react** tab after this.

## Step 1: Install the SDK

```bash theme={null}
npm install @alphscan/sdk
# or
pnpm add @alphscan/sdk
```

No API key is required for **public** endpoints (e.g. token list, plans).

## Step 2: Create a client and call the API

```typescript theme={null}
import { alphscan } from "@alphscan/sdk";

const client = alphscan({
  apiUrl: "https://api.alphscan.io",
  // apiKey: "sk_...",  // optional; required for user/admin endpoints
});

// List tokens (public)
const { tokens, total } = await client.token.list({ page: 1, pageSize: 20 });
console.log(`${total} tokens:`, tokens.slice(0, 3));

// List plans (public)
const { plans } = await client.plan.list();
console.log("Plans:", plans);
```

## Step 3: Use in a React app (optional)

If you use React, add **@alphscan/sdk-react** and wrap your app with the provider. Then use hooks like **useTokens** instead of calling the client directly.

```bash theme={null}
pnpm add @alphscan/sdk-react @alphscan/sdk
```

```tsx theme={null}
import { AlphscanProvider, useTokens } from "@alphscan/sdk-react";

function App() {
  return (
    <AlphscanProvider apiUrl="https://api.alphscan.io" apiKey="">
      <TokenList />
    </AlphscanProvider>
  );
}

function TokenList() {
  const { tokens, loading, error } = useTokens({ pageSize: 20 });
  if (loading) return <p>Loading…</p>;
  if (error) return <p>Error: {error.message}</p>;
  return <ul>{tokens.map((t) => <li key={t.id}>{t.symbol} – {t.name}</li>)}</ul>;
}
```

Full details: **sdk-react** tab → [Overview](/sdk-react/overview) and [useTokens](/sdk-react/use-tokens).

## Next steps

<CardGroup cols={2}>
  <Card title="Client & settings" icon="gear" href="/sdk/client-and-settings">
    Configure API URL, API key, and environment variables.
  </Card>

  <Card title="Token API" icon="coins" href="/sdk/token-api">
    Pagination and response shape for token.list().
  </Card>

  <Card title="Provider & useClient" icon="layer-group" href="/sdk-react/provider-and-useclient">
    AlphscanProvider and useClient() in React.
  </Card>

  <Card title="Development" icon="wrench" href="/development">
    Run the docs site locally.
  </Card>
</CardGroup>