> ## Documentation Index
> Fetch the complete documentation index at: https://cyphers-3138df4b.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Install @cypher-zk/sdk and configure your bundler.

## Install

<CodeGroup>
  ```bash bun theme={null}
  bun add @cypher-zk/sdk @solana/web3.js
  ```

  ```bash npm theme={null}
  npm install @cypher-zk/sdk @solana/web3.js
  ```

  ```bash yarn theme={null}
  yarn add @cypher-zk/sdk @solana/web3.js
  ```

  ```bash pnpm theme={null}
  pnpm add @cypher-zk/sdk @solana/web3.js
  ```
</CodeGroup>

<Warning>
  Pin `@solana/web3.js` to `^1.95.4`. The SDK is not compatible with `@solana/web3.js` v2 or `@solana/kit`.
</Warning>

## Import paths

The package ships three entry points. Only import what you need.

| Path                   | Use for                                         |
| ---------------------- | ----------------------------------------------- |
| `@cypher-zk/sdk`       | Core client, actions, account types, utilities  |
| `@cypher-zk/sdk/react` | React hooks (`usePlaceBet`, `useMarkets`, etc.) |

Never import `@cypher-zk/sdk/react` in a Node.js script - it pulls in React and TanStack Query which are browser-only.

## Buffer polyfill (Next.js / Vite)

The SDK uses Node's `Buffer` internally. In browser bundlers, `Buffer` is not available by default.

<Tabs>
  <Tab title="Next.js (Turbopack)">
    Create `src/lib/buffer-polyfill.ts` and import it at the top of your root layout:

    ```typescript TypeScript theme={null}
    // src/lib/buffer-polyfill.ts
    import { Buffer } from "buffer";
    if (typeof window !== "undefined") {
      window.Buffer = window.Buffer ?? Buffer;
    }
    ```

    ```typescript TypeScript theme={null}
    // src/app/layout.tsx
    import "@/lib/buffer-polyfill";
    ```

    Then add to `next.config.ts`:

    ```typescript TypeScript theme={null}
    const nextConfig = {
      experimental: {
        turbo: {
          resolveAlias: {
            buffer: "buffer",
          },
        },
      },
    };
    ```
  </Tab>

  <Tab title="Next.js (Webpack)">
    ```typescript TypeScript theme={null}
    // next.config.ts
    const nextConfig = {
      webpack: (config) => {
        config.resolve.fallback = {
          ...config.resolve.fallback,
          fs: false,
          buffer: require.resolve("buffer/"),
        };
        return config;
      },
    };
    ```

    Install the `buffer` package:

    <CodeGroup>
      ```bash bun theme={null}
      bun add buffer
      ```

      ```bash npm theme={null}
      npm install buffer
      ```

      ```bash yarn theme={null}
      yarn add buffer
      ```

      ```bash pnpm theme={null}
      pnpm add buffer
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Vite">
    ```typescript TypeScript theme={null}
    // vite.config.ts
    import { defineConfig } from "vite";
    import { nodePolyfills } from "vite-plugin-node-polyfills";

    export default defineConfig({
      plugins: [nodePolyfills()],
    });
    ```

    <CodeGroup>
      ```bash bun theme={null}
      bun add vite-plugin-node-polyfills
      ```

      ```bash npm theme={null}
      npm install vite-plugin-node-polyfills
      ```

      ```bash yarn theme={null}
      yarn add vite-plugin-node-polyfills
      ```

      ```bash pnpm theme={null}
      pnpm add vite-plugin-node-polyfills
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## What's next

* [Quickstart](/sdk/quickstart) - initialize the client and place your first bet
* [React setup](/sdk/react/setup) - wire up `CypherProvider` in your app