> ## 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 needed for the recommended route-handler setup below.

## Setup

The recommended setup keeps your Helius API key **server-side** — no Helius key ships to the browser. Just testing locally? Jump to the [prototyping shortcut](#prototyping-shortcut).

<Steps>
  <Step title="Wrap your app in the provider">
    Add `HeliusWalletProvider` near the root of your app in a client component. **Omit the API key** — the route handler (next step) supplies it server-side. 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={{ cluster: "mainnet-beta" }}>
          {children}
        </HeliusWalletProvider>
      );
    }
    ```
  </Step>

  <Step title="Mount the route handler">
    Add the catch-all route handler at `/api/helius/[...path]`. It holds `HELIUS_API_KEY` **server-side** and proxies the wallet bootstrap, RPC, sends, and registration — so no Helius key ever reaches the browser. This is also what gives you [Sender-optimized landing](/docs/sending-transactions/sender) and transaction history.

    ```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 (not `NEXT_PUBLIC_`); the handler injects it on the forwarded requests.
  </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>
</Steps>

You choose which sign-in methods your users see in the dashboard — see [Configure sign-in methods](/docs/waas/configuration#configure-sign-in-methods).

## Prototyping shortcut

Just trying it out locally? Skip the route handler and pass your API key straight to the provider:

```tsx app/providers.tsx theme={"system"}
<HeliusWalletProvider
  config={{ apiKey: process.env.NEXT_PUBLIC_HELIUS_API_KEY!, cluster: "devnet" }}
>
  {children}
</HeliusWalletProvider>
```

This ships the key in your browser bundle, so it's for **local testing only** — switch to the route-handler setup above before you deploy. Domain-restrict the key in the meantime (see [Securing your key](/docs/waas/securing-your-key)): it can't touch wallets or funds, but a public key can still be used to spend your credits.

## Next steps

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

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