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

# Mulai Cepat WaaS

> Instal SDK Helius wallet-kit dan siapkan dompet tersemat dengan satu penyedia

## Instalasi

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

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

Dependensi peer yang diperlukan:

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

`next >= 14` diperlukan untuk penyiapan handler rute yang direkomendasikan di bawah ini.

## Penyiapan

Penyiapan yang direkomendasikan menyimpan kunci API Helius Anda **di sisi server** — tidak ada kunci Helius yang dikirim ke browser. Hanya ingin menguji secara lokal? Buka [pintasan pembuatan prototipe](#pintasan-pembuatan-prototipe).

<Steps>
  <Step title="Wrap your app in the provider">
    Tambahkan `HeliusWalletProvider` di dekat root aplikasi Anda dalam komponen klien. **Jangan sertakan kunci API** — handler rute (langkah berikutnya) menyediakannya di sisi server. SDK secara otomatis menemukan ID proyek dan URL Secure RPC tanpa kunci Anda.

    ```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">
    Tambahkan handler rute catch-all di `/api/helius/[...path]`. Handler ini menyimpan `HELIUS_API_KEY` **di sisi server** dan memproksikan inisialisasi dompet, RPC, pengiriman, serta pendaftaran — sehingga kunci Helius tidak pernah sampai ke browser. Handler ini juga memberi Anda [landing yang dioptimalkan untuk Sender](/docs/id/sending-transactions/sender) dan riwayat transaksi.

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

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

    Tetapkan `HELIUS_API_KEY` sebagai variabel lingkungan **server** (bukan `NEXT_PUBLIC_`); handler akan menyisipkannya ke permintaan yang diteruskan.
  </Step>

  <Step title="Import the styles">
    Impor stylesheet SDK satu kali dalam tata letak root Anda:

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

Anda dapat memilih metode masuk yang dilihat pengguna di dasbor — lihat [Mengonfigurasi metode masuk](/docs/id/waas/configuration#konfigurasikan-metode-masuk).

## Pintasan pembuatan prototipe

Hanya ingin mencobanya secara lokal? Lewati handler rute dan teruskan kunci API Anda langsung ke penyedia:

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

Cara ini menyertakan kunci dalam bundle browser Anda, sehingga hanya ditujukan untuk **pengujian lokal** — beralihlah ke penyiapan handler rute di atas sebelum melakukan deployment. Sementara itu, batasi kunci berdasarkan domain (lihat [Mengamankan kunci Anda](/docs/id/waas/securing-your-key)): kunci tersebut tidak dapat mengakses dompet atau dana, tetapi kunci yang terekspos ke publik masih dapat digunakan untuk menghabiskan kredit Anda.

## Langkah berikutnya

<CardGroup cols={2}>
  <Card title="Configuration" icon="sliders" href="/docs/id/waas/configuration">
    Opsi konfigurasi dan metode masuk melalui dasbor.
  </Card>

  <Card title="Using the wallet" icon="wallet" href="/docs/id/waas/using-the-wallet">
    Baca status autentikasi, tanda tangani, kirim, dan baca riwayat.
  </Card>
</CardGroup>