Skip to main content

​
Install

Install helius-wallet-kit from npm (Node.js 18+):
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.
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.
app/providers.tsx
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 and transaction history.
app/api/helius/[...path]/route.ts
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:
app/layout.tsx
You choose which sign-in methods your users see in the dashboard — see Configure sign-in methods.

​
Prototyping shortcut

Just trying it out locally? Skip the route handler and pass your API key straight to the provider:
app/providers.tsx
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): it can’t touch wallets or funds, but a public key can still be used to spend your credits.

​
Next steps

Configuration

Config options and dashboard sign-in methods.

Using the wallet

Read auth state, sign, send, and read history.