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

# Personalisierte Swap-Benutzeroberfläche

> Verwenden Sie das Helius AI-Toolkit, um eine personalisierte Swap-Oberfläche für Solana zu erstellen.

## Einführung

Dieser Leitfaden führt Sie durch einen KI-unterstützten Entwicklungsablauf zur Erstellung einer Token-Swap-Benutzeroberfläche auf Solana. Das herausragende Merkmal ist ein Panel, das die am häufigsten gehandelten Paare des Benutzers anzeigt und die Auswahl mit einem einzigen Klick ermöglicht. Dies macht es zu einem personalisierten Erlebnis.

Jeder Abschnitt zeigt die genauen Eingabeaufforderungen, die verwendet wurden, was das Modell als Ausgaben erzeugte und wie wir das [Helius AI-Toolkit](/docs/de/agents/overview) genutzt haben.

Dieser Leitfaden zeigt die folgenden Technologien:

* [Phantom](/docs/de/agents/skills/phantom) Wallet-Integration
* [DFlow](/docs/de/agents/skills/dflow) für Angebote und Swaps
* [Helius Sender](/docs/de/sending-transactions/sender) für schnelles Transaktionssenden
* [Helius Enhanced Transactions](/docs/de/enhanced-transactions/overview) für die Transaktionsanalyse

## Endergebnis

<Frame caption="Personalisierte Swap-Benutzeroberfläche mit Panel für jüngste Paare">
  <img src="https://mintcdn.com/helius/8LUYXnaXO1N9za28/images/personalized-swap-ui/00-final-result.png?fit=max&auto=format&n=8LUYXnaXO1N9za28&q=85&s=0715a87a899d34a6d22ca8badd570f54" alt="Personalisierte Swap-Benutzeroberfläche mit Panel für jüngste Paare" width="1846" height="1102" data-path="images/personalized-swap-ui/00-final-result.png" />
</Frame>

## Einrichtung

Bevor Sie beginnen, installieren Sie das [Helius Claude Code-Plugin](/docs/de/agents/claude-code-plugin). Führen Sie in Claude Code diese als zwei separate Befehle aus:

```
/plugin marketplace add helius-labs/core-ai
```

```
/plugin install helius@helius-labs
```

In diesem Leitfaden verwenden wir Opus 4.6 als Modell. Bitte wechseln Sie bei Bedarf.

<Warning>
  Dieser Leitfaden dient als Demonstration. Die Ausgabe von Modellen mit großer Sprachfähigkeit (LLM) ist von Natur aus zufällig. Selbst wenn Sie exakt dieselben Eingabeaufforderungen wie in diesem Leitfaden verwenden, können Ihre Ergebnisse variieren.
</Warning>

## Erste Eingabeaufforderung

Verwenden Sie diese Eingabeaufforderung, um die vollständige Benutzeroberfläche und das Verhalten in einem Durchgang zu definieren:

<CardGroup cols={1}>
  <Card title="Eingabeaufforderung" icon="terminal">
    Erstellen Sie eine personalisierte Token-Swap-Oberfläche für Solana.

    Fügen Sie eine Token-Swap-Benutzeroberfläche im regulären Stil hinzu: ein zentriertes Feld mit zwei Token-Auswahlen und einem Swap-Button.

    Zeigen Sie rechts daneben eine Liste von Token-Paaren an, die der Benutzer direkt auswählen kann. Zeigen Sie das Logo jedes Tokens neben seinem Namen an.

    Um die Liste zu berechnen, tun Sie Folgendes: Nachdem ein Benutzer seine Wallet verbunden hat, schauen Sie in seine Swap-Historie und extrahieren Sie die 10 zuletzt verwendeten Handelspaare. Sortieren Sie sie nach Häufigkeit der Swaps.
  </Card>
</CardGroup>

Diese Eingabeaufforderung legt fest:

* Das Kernlayout (Swap-Feld + Schiene für jüngste Paare)
* Die Personalisierungsregel (Wallet-Historie)
* Die Bewertungsstrategie (Häufigkeit anhand der letzten Nutzung)

In unserem Fall schlug das Modell Folgendes vor:

> Lassen Sie mich das Projekt erstellen. Ich werde eine Vite + React + TypeScript-App mit Phantom-Wallet-Verbindung, DFlow-Swaps über Helius Sender und Swap-Historie von der Helius Wallet API erstellen.

Dies ist ein sinnvoller Stack:

* Vite + React + TypeScript für eine moderne, typsichere Benutzeroberfläche
* Phantom zur Wallet-Verbindung und Signierung
* DFlow für die besten Angebote
* Helius APIs für Wallet-Historie
* Helius Sender für Transaktionssenden

Das Modell wies uns an, eine `.env`-Datei mit unserem Helius API-Schlüssel hinzuzufügen. Nachdem wir dies getan hatten, starteten wir die App mit `npm run dev`:

<Frame caption="Erste Version der App">
  <img src="https://mintcdn.com/helius/8LUYXnaXO1N9za28/images/personalized-swap-ui/01-wallet-disconnected.png?fit=max&auto=format&n=8LUYXnaXO1N9za28&q=85&s=fec8e905c49cbbbb33a84e46e4f4805e" alt="Erste Version der App" width="1860" height="1116" data-path="images/personalized-swap-ui/01-wallet-disconnected.png" />
</Frame>

## Fehlende jüngste Paare

Nach dem Verbinden unserer Wallet stellten wir fest, dass im Panel für jüngste Paare einige gehandelte Paare fehlten, die wir kürzlich getauscht hatten. Also baten wir den Agenten, nachzuforschen:

<CardGroup cols={1}>
  <Card title="Eingabeaufforderung" icon="terminal">
    Es wird Bonk / SOL nicht als jüngstes Paar angezeigt, obwohl es kürzliche Swaps gab. Können Sie nachsehen, warum?

    2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
  </Card>
</CardGroup>

Um dieses Problem zu lösen, musste der Agent die Transaktionshistorie der angegebenen Wallet kennen. Da wir nur die Adresse der Wallet bereitgestellt hatten, entschied er sich, zwei [Helius MCP](/docs/de/agents/mcp) Tools direkt zu verwenden, um diese Informationen zu erhalten: `getTransactionHistory` und `parseTransactions`.

So konnte er den Fehler schnell identifizieren:

> Der Code verlässt sich ausschließlich auf events.swap anstatt tatsächliche Token-Transfers zu analysieren.

> Lassen Sie mich die Swap-Historien-Erfassung so ändern, dass tokenTransfers und
> nativeTransfers direkt verwendet werden.

Er löste das Problem, indem er änderte, wie wir Handelspaare erkennen: Wir prüfen jetzt einfach, welche Token in einer Transaktion in und aus der Wallet transferiert wurden.

Wir sehen nun alle unsere Handelspaare in der App:

<Frame caption="Alle Handelspaare angezeigt">
  <img src="https://mintcdn.com/helius/8LUYXnaXO1N9za28/images/personalized-swap-ui/02-connected-recent-pairs.png?fit=max&auto=format&n=8LUYXnaXO1N9za28&q=85&s=520f3dd879dd02c76735153532ab58c5" alt="Alle Handelspaare angezeigt" width="1856" height="1120" data-path="images/personalized-swap-ui/02-connected-recent-pairs.png" />
</Frame>

## Verfeinerung der Benutzeroberfläche

Während das Gesamtdesign der App bereits gut ist, benötigt das Layout der Swap-Benutzeroberfläche noch einige Verbesserungen:

<CardGroup cols={1}>
  <Card title="Eingabeaufforderung" icon="terminal">
    Verbessern Sie das Design des Token-Auswahlfelds:

    Setzen Sie den Token-Auswähler nach rechts.

    Machen Sie die Breite des Eingabefelds für die Menge flexibel, sodass es sich gut in das Feld einfügt.
  </Card>
</CardGroup>

Der Agent implementierte diese UI-Änderungen umgehend:

<Frame caption="Neues Layout für das Token-Auswahlfeld">
  <img src="https://mintcdn.com/helius/8LUYXnaXO1N9za28/images/personalized-swap-ui/09-ui-changes.png?fit=max&auto=format&n=8LUYXnaXO1N9za28&q=85&s=13ae436bff4826283a5747e321b3a8ce" alt="Neues Layout für das Token-Auswahlfeld" width="1844" height="1062" data-path="images/personalized-swap-ui/09-ui-changes.png" />
</Frame>

## Angebotsanzeige

Derzeit müssen die Token-Mengen in der Swap-Benutzeroberfläche manuell eingestellt werden. Das bedeutet, dass der Benutzer nicht sieht, wie viele Token er im Austausch erhält.

Es wäre nützlich, das Mengenfeld der Token automatisch durch ein aktuelles DFlow-Angebot zu füllen.

<CardGroup cols={1}>
  <Card title="Eingabeaufforderung" icon="terminal">
    Wenn der Benutzer eine Menge für einen Token eingegeben hat, holen Sie ein Angebot ein und zeigen Sie die Ausgabemenge für den anderen Token an.
  </Card>
</CardGroup>

Um dies zu implementieren, nutzte der Agent seine [DFlow](/docs/de/agents/skills/dflow) Fähigkeit, um den richtigen Endpunkt für die Angebotsabfrage zu finden.

Die Swap-Benutzeroberfläche ruft nun dynamisch die angebotene Ausgabemenge ab und zeigt sie an:

<Frame caption="Angebotsvorschau zeigt die Ausgabemenge im Empfangsfeld">
  <img src="https://mintcdn.com/helius/8LUYXnaXO1N9za28/images/personalized-swap-ui/03-quote-visible.png?fit=max&auto=format&n=8LUYXnaXO1N9za28&q=85&s=701d58c30da16de84814cf87ce486c92" alt="Angebotsvorschau zeigt die Ausgabemenge im Empfangsfeld" width="1846" height="1102" data-path="images/personalized-swap-ui/03-quote-visible.png" />
</Frame>

## Hinzufügen von Swap-Informationen

Nachdem ein Swap stattgefunden hat, hat der Benutzer keine Möglichkeit, dies On-Chain zu verifizieren. Lassen Sie uns das zur Benutzeroberfläche hinzufügen:

<CardGroup cols={1}>
  <Card title="Eingabeaufforderung" icon="terminal">
    Bitte drucken Sie die vollständige Transaktionssignatur aus, sobald der Swap erfolgreich ist. Verlinken Sie sie auch zu einem Explorer.
  </Card>
</CardGroup>

Zum Testen führen wir einen Beispielswaus:

<Frame caption="Wallet-Bestätigungspopup während der Swap-Verifizierung">
  <img src="https://mintcdn.com/helius/8LUYXnaXO1N9za28/images/personalized-swap-ui/05-wallet-confirmation.png?fit=max&auto=format&n=8LUYXnaXO1N9za28&q=85&s=8d289e4583b5f33a24581999f66fd3e0" alt="Wallet-Bestätigungspopup während der Swap-Verifizierung" width="1852" height="1180" data-path="images/personalized-swap-ui/05-wallet-confirmation.png" />
</Frame>

Nun werden die Informationen in der Benutzeroberfläche angezeigt:

<Frame caption="Erfolgreiche Swap-Ausgabe mit vollständiger Signatur und Explorer-Link">
  <img src="https://mintcdn.com/helius/8LUYXnaXO1N9za28/images/personalized-swap-ui/08-send-successful.png?fit=max&auto=format&n=8LUYXnaXO1N9za28&q=85&s=d1264eb7e065b4fa6c0e8505216c6c9e" alt="Erfolgreiche Swap-Ausgabe mit vollständiger Signatur und Explorer-Link" width="1856" height="1192" data-path="images/personalized-swap-ui/08-send-successful.png" />
</Frame>