メインコンテンツへスキップ

​
はじめに

このガイドは、SolanaでトークンスワップUIを構築するためのAI支援開発フローを案内します。注目すべき特徴は、ユーザーの最も頻繁に取引されたペアを表示し、それをワンクリックで選択できるパネルです。これにより、パーソナライズされた体験が実現します。 各セクションでは、使用された具体的なプロンプト、モデルが生成した出力、およびHelius AIツールキットの使用方法を示しています。 このガイドでは次の技術を紹介します:

​
最終結果

最近のペアパネルを備えたパーソナライズされたスワップUI

最近のペアパネルを備えたパーソナライズされたスワップUI

​
セットアップ

始める前に、Claude Code用のHelius Claude Codeプラグインをインストールしてください:
または、Claude Code内のHeliusマーケットプレイスからインストールしてください:
このガイドでは、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の2つのツールを直接使用してその情報を取得することにしました: getTransactionHistoryとparseTransactions。 これにより、素早くバグを特定できました:
コードはevents.swapにのみ依存して、実際のトークントランスファーを解析していません。
スワップ履歴の抽出を修正して、トークントランスファーとnativeTransfersを直接使用しましょう。
そこで、トランザクションでウォレットに出入りしたトークンを単に確認することで、取引ペアの検出方法を変更して問題を解決しました。 今ではすべての取引ペアがアプリに表示されます:
すべての取引ペアが表示されている

すべての取引ペアが表示されている

​
UI調整

アプリの全体的なデザインはすでに良好ですが、スワップUIのレイアウトにはまだ調整が必要です:

プロンプト

トークンセレクターボックスのデザインを修正してください。トークンセレクターを右に配置します。入力フィールドの幅を調整可能にして、ボックスにきちんと収まるようにします。
エージェントはこれらのUI変更を迅速に実装しました:
トークンセレクターボックスの新しいレイアウト

トークンセレクターボックスの新しいレイアウト

​
見積もり表示

現時点では、スワップUIのトークン量は手動で設定する必要があります。つまり、ユーザーはどれだけのトークンを受け取るかを確認することができません。 最近のDFlow見積もりでトークン量フィールドを自動的に入力するのが便利です。

プロンプト

ユーザーが1つのトークンの量を入力したときに、見積もりを取得し、他のトークンの出力量を表示します。
これを実装するために、エージェントはDFlowスキルを使って、見積もりを取得するための適切なエンドポイントを見つけました。 スワップUIは現在、見積もりされた出力量を動的に取得し表示します:
受信フィールドの出力量を示す見積もりプレビュー

受信フィールドの出力量を示す見積もりプレビュー

​
スワップ情報を追加

スワップが完了したら、ユーザーはオンチェーンで検証することができません。それをUIに追加しましょう:

プロンプト

スワップが成功したら完全なトランザクション署名を表示してください。また、エクスプローラーへのリンクも追加します。
テストのために、サンプルスワップを行います:
スワップ署名中のウォレット確認ポップアップ

スワップ署名中のウォレット確認ポップアップ

今では情報がUIに表示されます:
完全な署名とエクスプローラリンクを伴う成功したスワップ出力

完全な署名とエクスプローラリンクを伴う成功したスワップ出力