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

# WaaS Quickstart

> Install the Helius wallet-kit SDK and wire up embedded wallets with one provider

## Install

Install [`helius-wallet-kit`](https://www.npmjs.com/package/helius-wallet-kit) from npm (Node.js 18+):

```bash theme={"system"}
pnpm add helius-wallet-kit
```

Required peer dependencies:

* `react >= 18`
* `react-dom >= 18`
* `@solana/web3.js ^1.98`

`next >= 14` is an **optional** peer — install it if you use the server route handler.

## Setup

<Steps>
  <Step title="Wrap your app in the provider">
    Add `HeliusWalletProvider` near the root of your app in a client component, and pass your Helius API key. That's the only required config — the SDK resolves your project id and key-less Secure RPC URLs automatically.

    ```tsx app/providers.tsx theme={"system"}
    "use client";

    import { HeliusWalletProvider } from "helius-wallet-kit";

    export function Providers({ children }: { children: React.ReactNode }) {
      return (
        <HeliusWalletProvider
          config={{
            apiKey: process.env.NEXT_PUBLIC_HELIUS_API_KEY!,
            cluster: "devnet",
          }}
        >
          {children}
        </HeliusWalletProvider>
      );
    }
    ```

    You choose which sign-in methods your users see in the dashboard — see [Configure sign-in methods](/waas/configuration#configure-sign-in-methods). Because the client key is exposed in the browser, use a key locked to your domains via [RPC Access Control](/rpc/protect-your-keys).
  </Step>

  <Step title="Import the styles">
    Import the SDK stylesheet once, in your root layout:

    ```tsx app/layout.tsx theme={"system"}
    import "helius-wallet-kit/ui/styles.css";
    ```
  </Step>

  <Step title="(Optional) Add the server route handler">
    By default the SDK talks to Helius directly from the browser using your project's key-less Secure RPC URLs — no server route required. To route your RPC, send, and transaction-history calls through your own server (and to use [Sender-optimized landing](/sending-transactions/sender) and transaction history), mount the catch-all route handler at `/api/helius/[...path]`:

    ```ts app/api/helius/[...path]/route.ts theme={"system"}
    import { createHeliusRouteHandler } from "helius-wallet-kit/next";

    export const { GET, POST } = createHeliusRouteHandler();
    ```

    Set `HELIUS_API_KEY` as a server env var; the handler injects it on those forwarded requests.

    <Note>
      The wallet **bootstrap** still uses your `apiKey` client-side — it's passed
      to the provider `config` and sent to `/waas/config` from the browser — so
      the key is present in the browser even with the route handler. Use a
      **domain-restricted key** (set allowed origins on the key in your
      dashboard) scoped to your app's origin, and rotate it if needed. Fully
      server-side key handling is on the roadmap.
    </Note>
  </Step>
</Steps>

## Next steps

<CardGroup cols={2}>
  <Card title="Configuration" icon="sliders" href="/waas/configuration">
    Config options and dashboard sign-in methods.
  </Card>

  <Card title="Using the wallet" icon="wallet" href="/waas/using-the-wallet">
    Read auth state, sign, send, and read history.
  </Card>
</CardGroup>