> ## 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).

**1. 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>
  );
}
```

**2. 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](https://www.helius.dev/docs/sending-transactions/sender.md) 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.

**3. 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";
```

You choose which sign-in methods your users see in the dashboard — see [Configure sign-in methods](https://www.helius.dev/docs/waas/configuration.md#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](https://www.helius.dev/docs/waas/securing-your-key.md)): it can't touch wallets or funds, but a public key can still be used to spend your credits.

## Next steps

> [card] [Configuration](https://www.helius.dev/docs/waas/configuration.md)
>
> Config options and dashboard sign-in methods.

> [card] [Using the wallet](https://www.helius.dev/docs/waas/using-the-wallet.md)
>
> Read auth state, sign, send, and read history.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.