> ## 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.
# パーソナライズされたスワップUI
> Helius AIツールキットを使用してパーソナライズされたSolanaのスワップインターフェースを構築します。
## はじめに
このガイドは、SolanaでトークンスワップUIを構築するためのAI支援開発フローを案内します。注目すべき特徴は、ユーザーの最も頻繁に取引されたペアを表示し、それをワンクリックで選択できるパネルです。これにより、パーソナライズされた体験が実現します。
各セクションでは、使用された具体的なプロンプト、モデルが生成した出力、および[Helius AIツールキット](/ja/agents/overview)の使用方法を示しています。
このガイドでは次の技術を紹介します:
* [Phantom](/ja/agents/skills/phantom)ウォレット統合
* 見積もりとスワップのための[DFlow](/ja/agents/skills/dflow)
* 高速トランザクション送信用[Helius Sender](/ja/sending-transactions/sender)
* トランザクション解析のための[Helius Enhanced Transactions](/ja/enhanced-transactions/overview)
## 最終結果
## セットアップ
始める前に、Claude Code用の[Helius Claude Codeプラグイン](/ja/agents/claude-code-plugin)をインストールしてください:
```bash theme={"system"}
claude plugin install helius @claude-plugins-official
```
または、Claude Code内のHeliusマーケットプレイスからインストールしてください:
```
/plugin marketplace add helius-labs/core-ai
/plugin install helius@helius-labs
```
このガイドでは、Opus 4.6をモデルとして使用します。必要に応じて切り替えてください。
このガイドはデモンストレーションを目的としています。大規模言語モデル（LLM）の出力は本質的にランダムであるため、ガイドと全く同じプロンプトを使用しても、結果が異なる場合があります。
## 初期プロンプト
このプロンプトを使用して、一度にUIと動作を完全に定義します:
Solanaのためのパーソナライズされたトークンスワップインターフェースを構築してください。
通常のスタイルでトークンスワップUIを追加します: 中央に配置されたボックスに2つのトークンセレクタとスワップボタン。
その右には、ユーザーが直接選択できるトークンペアのリストを表示します。各トークンのロゴを名前の隣に表示します。
リストを計算するには次の作業を行います: ユーザーがウォレットを接続した後、そのスワップ履歴を見て、使用した直近の10件の取引ペアを抽出し、スワップの頻度で並べ替えます。
このプロンプトで確立されるのは:
* コアレイアウト（スワップボックス＋最近のペアレール）
* パーソナライズルール（ウォレット履歴）
* ランキング戦略（直近の使用からの頻度）
私たちの場合、モデルは次のように提案しました:
> プロジェクトの足場を組ませてください。Phantomウォレット接続、Helius SenderによるDFlowスワップ、およびHelius Wallet APIからのスワップ履歴を備えたVite + React + TypeScriptアプリを作成します。
これは理にかなったスタックです:
* モダンで型安全なUIのためのVite + React + TypeScript
* ウォレット接続と署名用のPhantom
* 最適な見積もりのためのDFlow
* ウォレット履歴用のHelius APIs
* トランザクション送信用のHelius Sender
モデルは、Helius APIキーを含む`.env`ファイルを追加するよう指示しました。追加後、`npm run dev`でアプリを起動しました。
## 最近のペアの欠落
ウォレットを接続した後、最近のペアパネルに最近スワップした取引ペアがいくつか欠けていることを観察しました。そのため、エージェントに調査を依頼しました:
Bonk / SOLが最近のペアとして表示されていないのはなぜ？
2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
この問題を解決するために、エージェントは指定されたウォレットのトランザクション履歴を知る必要がありました。ウォレットのアドレスだけを提供したため、[Helius MCP](/ja/agents/mcp)の2つのツールを直接使用してその情報を取得することにしました: `getTransactionHistory`と`parseTransactions`。
これにより、素早くバグを特定できました:
> コードはevents.swapにのみ依存して、実際のトークントランスファーを解析していません。
> スワップ履歴の抽出を修正して、トークントランスファーとnativeTransfersを直接使用しましょう。
そこで、トランザクションでウォレットに出入りしたトークンを単に確認することで、取引ペアの検出方法を変更して問題を解決しました。
今ではすべての取引ペアがアプリに表示されます:
## UI調整
アプリの全体的なデザインはすでに良好ですが、スワップUIのレイアウトにはまだ調整が必要です:
トークンセレクターボックスのデザインを修正してください。
トークンセレクターを右に配置します。
入力フィールドの幅を調整可能にして、ボックスにきちんと収まるようにします。
エージェントはこれらのUI変更を迅速に実装しました:
## 見積もり表示
現時点では、スワップUIのトークン量は手動で設定する必要があります。つまり、ユーザーはどれだけのトークンを受け取るかを確認することができません。
最近のDFlow見積もりでトークン量フィールドを自動的に入力するのが便利です。
ユーザーが1つのトークンの量を入力したときに、見積もりを取得し、他のトークンの出力量を表示します。
これを実装するために、エージェントは[DFlow](/ja/agents/skills/dflow)スキルを使って、見積もりを取得するための適切なエンドポイントを見つけました。
スワップUIは現在、見積もりされた出力量を動的に取得し表示します:
## スワップ情報を追加
スワップが完了したら、ユーザーはオンチェーンで検証することができません。それをUIに追加しましょう:
スワップが成功したら完全なトランザクション署名を表示してください。また、エクスプローラーへのリンクも追加します。
テストのために、サンプルスワップを行います:
今では情報がUIに表示されます:
