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

> Installieren Sie das Helius wallet-kit SDK und verbinden Sie eingebettete Wallets mit einem Anbieter

## Installation

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

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

Erforderliche Peer-Abhängigkeiten:

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

`next >= 14` wird für das empfohlene Route-Handler-Setup unten benötigt.

## Einrichtung

Das empfohlene Setup hält Ihren Helius API-Schlüssel **serverseitig** — kein Helius-Schlüssel wird an den Browser gesendet. Nur lokal testen? Springen Sie zum [Prototyping-Shortcut](#prototyping-shortcut).

<Steps>
  <Step title="Wickeln Sie Ihre App in den Anbieter">
    Fügen Sie `HeliusWalletProvider` in der Nähe des Stammverzeichnisses Ihrer App in einer Client-Komponente hinzu. **Lassen Sie den API-Schlüssel weg** — der Route-Handler (nächster Schritt) liefert ihn serverseitig. Das SDK löst Ihre Projekt-ID und schlüssellose Secure RPC URLs automatisch auf.

    ```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="Montieren Sie den Route-Handler">
    Fügen Sie den Catch-All Route-Handler bei `/api/helius/[...path]` hinzu. Er hält `HELIUS_API_KEY` **serverseitig** und leitet den Wallet-Start, RPC, Sendungen und Registrierung weiter — kein Helius-Schlüssel erreicht jemals den Browser. Dies ermöglicht auch [senderoptimiertes Landing](/docs/de/sending-transactions/sender) und Transaktionshistorie.

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

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

    Setzen Sie `HELIUS_API_KEY` als **Server**-Umgebungsvariable (nicht `NEXT_PUBLIC_`); der Handler injiziert ihn in die weitergeleiteten Anfragen.
  </Step>

  <Step title="Importieren Sie die Stile">
    Importieren Sie das SDK Stylesheet einmal in Ihrem Root-Layout:

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

Sie wählen die Anmeldemethoden aus, die Ihre Benutzer im Dashboard sehen — siehe [Anmeldemethoden konfigurieren](/docs/de/waas/configuration#anmeldemethoden-konfigurieren).

## Prototyping-Shortcut

Nur lokal ausprobieren? Überspringen Sie den Route-Handler und übergeben Sie Ihren API-Schlüssel direkt an den Anbieter:

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

Dies überträgt den Schlüssel in Ihrem Browser-Bundle, daher ist es nur für **lokales Testen** gedacht — wechseln Sie vor der Bereitstellung zum Route-Handler-Setup oben. Beschränken Sie den Schlüssel zwischenzeitlich auf die Domain (siehe [Schützen Sie Ihren Schlüssel](/docs/de/waas/securing-your-key)): Er kann keine Wallets oder Gelder berühren, aber ein öffentlicher Schlüssel kann trotzdem verwendet werden, um Ihre Kredite auszugeben.

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Konfiguration" icon="sliders" href="/docs/de/waas/configuration">
    Konfigurationsoptionen und Dashboard-Anmeldemethoden.
  </Card>

  <Card title="Verwendung des Wallets" icon="wallet" href="/docs/de/waas/using-the-wallet">
    Authentifizierungszustand lesen, unterschreiben, senden und Verlauf lesen.
  </Card>
</CardGroup>