> ## 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 de swaps personalizada
> Usa el kit de herramientas de IA de Helius para crear una interfaz de swaps personalizada para Solana.
## Introducción
Esta guía te muestra un flujo de desarrollo asistido por IA para crear una UI de swaps de tokens en Solana. Su función destacada es un panel que muestra los pares que el usuario intercambia con más frecuencia y le permite seleccionar uno con un solo clic. Esto crea una experiencia personalizada.
Cada sección muestra los prompts exactos que se usaron, el resultado que produjo el modelo y cómo usamos el [kit de herramientas de IA de Helius](/docs/es/agents/overview).
Esta guía presenta las siguientes tecnologías:
* Integración con la billetera [Phantom](/docs/es/agents/skills/phantom)
* [DFlow](/docs/es/agents/skills/dflow) para cotizaciones y swaps
* [Helius Sender](/docs/es/sending-transactions/sender) para enviar transacciones rápidamente
* [Helius Enhanced Transactions](/docs/es/enhanced-transactions/overview) para analizar transacciones
## Resultado final
## Configuración
Antes de comenzar, instala el [plugin de Helius para Claude Code](/docs/es/agents/claude-code-plugin). Dentro de Claude Code, ejecuta estos comandos por separado:
```
/plugin marketplace add helius-labs/core-ai
```
```
/plugin install helius@helius-labs
```
En esta guía, usaremos Opus 4.6 como modelo. Cámbialo si es necesario.
Esta guía tiene fines demostrativos. El resultado de un modelo de lenguaje grande (LLM) es inherentemente aleatorio, por lo que tus resultados pueden variar incluso si usas exactamente los mismos prompts que aparecen en esta guía.
## Prompt inicial
Usa este prompt para definir toda la UI y su comportamiento de una sola vez:
Crea una interfaz personalizada para hacer swaps de tokens en Solana.
Agrega una UI de swaps de tokens con el estilo habitual: un cuadro centrado con dos selectores de tokens y un botón de swap.
A la derecha, muestra una lista de pares de tokens que el usuario pueda elegir directamente. Muestra el logotipo de cada token junto a su nombre.
Para generar la lista, haz lo siguiente: después de que un usuario conecte su billetera, consulta su historial de swaps y extrae los 10 pares de trading más recientes que usó. Ordénalos según la frecuencia de los swaps.
Este prompt establece:
* El diseño principal (cuadro de swap + panel lateral de pares recientes)
* La regla de personalización (historial de la billetera)
* La estrategia de clasificación (frecuencia de uso reciente)
En nuestro caso, el modelo propuso lo siguiente:
> Voy a crear la estructura inicial del proyecto. Crearé una aplicación con Vite + React + TypeScript que incluya conexión con la billetera Phantom, swaps de DFlow mediante Helius Sender e historial de swaps de la API de billeteras de Helius.
Esta es una combinación de tecnologías adecuada:
* Vite + React + TypeScript para una UI moderna y con seguridad de tipos
* Phantom para conectar la billetera y firmar
* DFlow para obtener las mejores cotizaciones
* Las API de Helius para consultar el historial de la billetera
* Helius Sender para enviar transacciones
El modelo nos indicó que agregáramos un archivo `.env` con nuestra clave de API de Helius. Después, iniciamos la aplicación con `npm run dev`:
## Faltan pares recientes
Después de conectar nuestra billetera, observamos que en el panel de pares recientes faltaban algunos pares con los que habíamos hecho swaps recientemente. Por eso, le pedimos al agente que investigara:
No muestra Bonk / SOL como par reciente, aunque tiene swaps recientes. ¿Puedes revisar por qué?
2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
Para resolver este problema, el agente necesitaba conocer el historial de transacciones de la billetera proporcionada. Como solo proporcionamos la dirección de la billetera, decidió usar directamente dos herramientas de [Helius MCP](/docs/es/agents/mcp) para obtener esa información: `getTransactionHistory` y `parseTransactions`.
Esto le permitió identificar rápidamente el error:
> El código depende únicamente de events.swap en lugar de analizar las transferencias reales de tokens.
> Voy a corregir la extracción del historial de swaps para que use tokenTransfers y
> nativeTransfers directamente.
Así, solucionó el problema cambiando la forma en que detectamos los pares de trading: ahora simplemente comprobamos qué tokens se transfirieron hacia y desde la billetera en una transacción.
Ahora vemos todos nuestros pares de trading en la aplicación:
## Ajustes de la UI
Aunque el diseño general de la aplicación ya es bueno, la disposición de la UI de swaps aún necesita algunos ajustes:
Corrige el diseño del cuadro de selección de tokens:
Coloca el selector de tokens a la derecha.
Haz que el ancho del campo de entrada del importe sea flexible para que encaje correctamente en el cuadro.
El agente implementó rápidamente estos cambios en la UI:
## Visualización de la cotización
Por el momento, los importes de los tokens en la UI de swaps deben establecerse manualmente. Esto significa que el usuario no puede ver cuántos tokens recibirá a cambio.
Sería útil completar automáticamente el campo del importe de tokens con una cotización reciente de DFlow.
Cuando el usuario haya ingresado un importe para un token, obtén una cotización y muestra el importe de salida del otro token.
Para implementar esto, el agente usó su habilidad de [DFlow](/docs/es/agents/skills/dflow) para encontrar el endpoint adecuado para obtener cotizaciones.
Ahora, la UI de swaps obtiene y muestra dinámicamente el importe de salida cotizado:
## Agregar información del swap
Una vez que se confirma un swap, el usuario no tiene forma de verificarlo en la cadena. Agreguemos esta función a la UI:
Muestra la firma completa de la transacción cuando el swap se complete correctamente. Agrega también un enlace a un explorador.
Para probarlo, hacemos un swap de ejemplo:
Ahora, la información se muestra en la UI:
