Skip to main content

​
はじめに

このガイドは、Solana上でトークンスワップUIを構築するためのAI支援開発フローを案内します。その特長は、ユーザーの最も頻繁に取引されるペアを表示するパネルで、ワンクリックで選択できます。これにより、個別化された体験が可能です。 各セクションでは、使用された正確なプロンプト、モデルが生成した出力、およびHelius AIツールキットの使用方法を示します。 このガイドには以下の技術が紹介されています:

​
最終結果

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

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

​
セットアップ

開始する前に、Helius Claude Codeプラグインをインストールします。Claude Codeの中で、これらを2つの別々のコマンドとして実行します:
このガイドでは、モデルとしてOpus 4.6を使用します。必要に応じて切り替えてください。
このガイドはデモンストレーションとして意図されています。ラージランゲージモデル(LLM)の出力は本質的にランダムであるため、このガイドと全く同じプロンプトを使用しても、結果が異なる可能性があります。

​
初期プロンプト

このプロンプトを使用して、UIと動作を一度に完全に定義します:

プロンプト

Solanaのためのパーソナライズされたトークンスワップインターフェースを構築します。通常のスタイルでトークンスワップUIを追加します: 中央に配置されたボックスに2つのトークンセレクターとスワップボタン。その右側には、ユーザーが直接選択できるトークンペアのリストを表示します。各トークンの名前の横にロゴを表示します。リストを計算するには、これを行います: ユーザーがウォレットを接続した後、スワップ履歴を確認し、彼らが使用した最近10回の取引ペアを抽出します。取引の頻度でソートします。
このプロンプトでは以下が確立されます:
  • コアレイアウト (スワップボックス + 最近のペアレール)
  • パーソナライゼーションルール（ウォレット履歴）
  • ランキング戦略（最近の使用に基づく頻度）
この場合、モデルは次のように提案しました:
プロジェクトのスキャフォールドを作成します。Vite + React + TypeScriptアプリを作成し、Phantomウォレットの接続、DFlowのHelius Sender経由のスワップ、HeliusウォレットAPIからのスワップ履歴を導入します。
これは賢明なスタックです:
  • モダンで型安全なUIのためのVite + React + TypeScript
  • ウォレット接続と署名のためのPhantom
  • 最適な見積もりのためのDFlow
  • ウォレット履歴のためのHelius API
  • トランザクション送信のためのHelius Sender
モデルはヘリウスAPIキーを含む.envファイルを追加するよう指示しました。それが完了したら、npm run devを使用してアプリを開始しました。
アプリの初期バージョン

アプリの初期バージョン

​
最近のペアが欠如

私たちのウォレットを接続した後、最近のペアパネルが最近スワップしたトレーディングペアの一部を欠いていることを観察しました。それで、エージェントに調査を依頼しました:

プロンプト

最近のペアとしてBonk / SOLが表示されていないのはなぜですか？ 最近スワップがあるのだが。2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
この問題を解決するために、エージェントは指定されたウォレットのトランザクション履歴を知る必要がありました。ウォレットのアドレスのみを提供したため、直接情報を取得するために2つのHelius MCPツールを使用することにしました: getTransactionHistoryとparseTransactions。 これにより、すぐにバグを特定できました:
コードがイベント.swapだけに依存しており、実際のトークントランスファーを分析していないことが原因です。
スワップ履歴の抽出を修正して、tokenTransfersとnativeTransfersを直接使用します。
それで、トレーディングペアの検出方法を変更して問題を修正しました: トランザクション内でウォレットに入出するトークンを確認するだけです。 アプリ内にすべてのトレーディングペアが表示されるようになりました:
すべてのトレーディングペアが表示される

すべてのトレーディングペアが表示される

​
UIの洗練

アプリの全体的なデザインは良好ですが、スワップUIのレイアウトにはまだ改善の余地があります:

プロンプト

トークンセレクターボックスのデザインを修正してください:トークンセレクターを右に配置します。ボックスにすっきりと収まるように金額入力フィールドの幅をフレキシブルにします。
エージェントはすぐにこれらのUI変更を実装しました:
トークンセレクターボックスの新しいレイアウト

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

​
見積もり表示

現時点では、スワップUIのトークン金額は手動で設定する必要があります。これは、ユーザーが何トークンを受け取るか見えないことを意味します。 最近のDFlow見積もりでトークン金額フィールドを自動的に入力することが便利です。

プロンプト

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

受け取りフィールドに出力金額を表示する見積もりプレビュー

​
スワップ情報の追加

スワップが行われた後、ユーザーはオンチェーンで確認する方法がありません。それをUIに追加しましょう:

プロンプト

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

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

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

完全な署名とエクスプローラーリンク付きの成功したスワップ出力