> ## 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.
# 个性化互换界面
> 使用 Helius AI 工具包构建个性化的 Solana 互换界面。
## 介绍
本指南将引导您通过 AI 辅助的开发流程，在 Solana 上构建一个代币互换界面。其突出特点是面板显示用户最常交易的对，并可以单击选择一个。这使体验更加个性化。
每个部分都展示了使用的确切提示、模型生成的输出以及我们如何使用 [Helius AI 工具包](/docs/zh/agents/overview)。
本指南展示了以下技术：
* [Phantom](/docs/zh/agents/skills/phantom) 钱包集成
* [DFlow](/docs/zh/agents/skills/dflow) 进行报价和互换
* [Helius Sender](/docs/zh/sending-transactions/sender) 用于快速交易发送
* [Helius Enhanced Transactions](/docs/zh/enhanced-transactions/overview) 用于交易解析
## 最终结果
## 设置
在开始之前，为 Claude Code 安装 [Helius Claude Code 插件](/docs/zh/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，呈现常规样式：一个居中的框，带有两个代币选择器和一个交换按钮。
在其右侧，显示用户可以直接选择的代币对列表。将每个代币的标志与其名称一起显示。
要计算列表，执行以下操作：用户连接钱包后，查看他们的交换历史并提取他们使用的10个最近交易对。按交换频率排序。
此提示建立了：
* 核心布局（交换框+最近对轨道）
* 个性化规则（钱包历史）
* 排名策略（从最近使用的频率）
在我们的案例中，模型提出了这个：
> 让我构建项目。我将创建一个Vite + React + TypeScript应用程序，连接Phantom钱包，使用Helius Sender进行DFlow交换，并从Helius Wallet API中读取交换历史。
这是一个合理的技术栈：
* Vite + React + TypeScript用于现代、类型安全的UI
* Phantom用于钱包连接和签名
* DFlow提供最佳报价
* Helius API用于获取钱包历史
* Helius Sender用于发送交易
模型指示我们添加一个 `.env` 文件，其中包含我们的 Helius API 密钥。完成后，我们使用 `npm run dev` 启动了应用程序：
## 缺少最近的交易对
连接钱包后，我们发现最近的交易对面板缺少一些我们最近交换的交易对。因此，我们请求代理进行调查：
尽管最近有交换，但它没有显示 Bonk / SOL 作为最近的交易对。你能看看为什么吗？
2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
为了解决这个问题，代理需要知道给定钱包的交易历史。由于我们只提供了钱包的地址，它决定直接使用两个 [Helius MCP](/docs/zh/agents/mcp) 工具获取该信息：`getTransactionHistory` 和 `parseTransactions`。
这使它能够快速识别出错误：
> 代码仅依赖于 events.swap，而不是分析实际的代币转移。
> 让我修复掉交换历史提取，以便直接使用 tokenTransfers 和 nativeTransfers。
因此，它通过改变我们检测交易对的方式解决了这个问题：我们现在只需检查在交易中钱包内外转移了哪些代币。
我们现在可以在应用程序中看到所有的交易对：
## 界面优化
虽然应用程序的整体设计已经很好，但交换界面的布局仍然需要一些优化：
修复代币选择框的设计：
将代币选择器放在右侧。
使输入字段的宽度灵活，以便其整齐地适应框中。
代理迅速实施了这些用户界面更改：
## 报价显示
目前，兑换界面中的代币数量必须手动设置。这意味着用户看不到他们将获得多少代币作为回报。
通过最近的DFlow报价自动填充代币数量字段会很有用。
当用户输入一种代币的数量后，获取报价并显示另一种代币的输出数量。
为实现这一点，代理使用其[DFlow](/docs/zh/agents/skills/dflow)技能找到正确的端点以获取报价。
兑换界面现在动态获取并显示报价的输出数量：
## 添加交换信息
一旦交换完成，用户无法在链上验证它。让我们将其添加到界面中：
交换成功后请打印完整的交易签名，并将其链接到一个浏览器。
为了测试，我们进行了一次样本交换：
现在，信息显示在用户界面中：
