Guía de provisión de liquidez (React)

Guía rápida para proporcionar liquidez en STON.fi: gana comisiones aportando tokens a los pools del DEX

Esta guía te acompañará en la creación de una aplicación básica de provisión de liquidez usando el SDK y la API de STON.fi en un React proyecto. Integraremos la conectividad de la billetera con TonConnect (a través de @tonconnect/ui-react) para permitir que los usuarios conecten su billetera TON y proporcionen liquidez a los pools. La guía está pensada para principiantes y asume una experiencia mínima con React.

Nota: En esta demo, aprovecharemos Tailwind CSS para el estilo en lugar de usar CSS personalizado. La configuración de Tailwind CSS ya está incluida en las instrucciones de abajo, así que no necesitas configurarlo por separado.

Nota: Puedes usar cualquier gestor de paquetes (npm, yarn, pnpm o bun) para configurar tu proyecto React. En este tutorial, lo mostraremos con pnpm.

---

Índice

1. Introducción

2. Configuración del proyecto

3. Conectar la billetera

4. Obtener los activos disponibles

5. Simular la provisión de liquidez

6. Construir la transacción

7. Ejecutar la provisión

8. Probar tu provisión

9. Conclusión

10. Demo en vivo

11. Próximos pasos

12. Aplicación de ejemplo avanzada

13. Uso de agentes de IA para la implementación automatizada

---

1. Introducción

En este inicio rápido, construiremos una aplicación React mínima para:

• Conectarse a una billetera TON (a través de TonConnect UI).

• Obtener los tokens disponibles de STON.fi (a través de @ston-fi/api).

• Simular la provisión de liquidez (para ver los tokens LP esperados).

• Ejecutar una transacción de provisión de liquidez en la cadena (a través de @ston-fi/sdk).

Usaremos:

• @ston-fi/sdk – Ayuda a construir la carga útil para la transacción real de provisión de liquidez.

• @ston-fi/api – Nos permite obtener listas de activos y ejecutar simulaciones de provisión de liquidez.

• @tonconnect/ui-react – Proporciona un botón de conexión a billetera TON basado en React y utilidades.

---

2. Configuración del proyecto

2.1 Crear una aplicación React

Primero, comprueba si tienes pnpm instalado:

pnpm --version

Si pnpm no está instalado, instálalo globalmente:

npm install -g pnpm

Crea un nuevo proyecto React + Vite:

pnpm create vite --template react-ts

Indica un nombre para el proyecto (por ejemplo, stonfi-liquidity-app) y luego:

cd stonfi-liquidity-app

2.2 Instalación de los paquetes necesarios

En el directorio de tu proyecto, instala los paquetes necesarios:

pnpm add @ston-fi/sdk @ston-fi/api @tonconnect/ui-react @ton/ton

Instala Tailwind CSS y el plugin de polyfills de Node.js para Vite:

pnpm add tailwindcss @tailwindcss/vite vite-plugin-node-polyfills

Configura Vite actualizando vite.config.ts. Esta configuración solo aplica polyfills a buffer, manteniendo el bundle liviano y exponiendo al mismo tiempo Buffer para las bibliotecas de TON:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    nodePolyfills({
      include: ["buffer"],
      globals: {
        Buffer: true,
      },
    }),
  ],
});

En src/index.css, importa Tailwind:

@import "tailwindcss";

También puedes eliminar src/App.css (no lo necesitamos), y eliminar la instrucción de importación import './App.css' de src/App.tsx.

Después de hacer estos cambios, puedes verificar que tu aplicación sigue funcionando correctamente iniciando el servidor de desarrollo:

pnpm install
pnpm dev

Abre http://localhost:5173. Si ves una página inicial de Vite/React, todo está funcionando correctamente.

---

3. Conectar la billetera

3.1 Agregar el proveedor TonConnect

Abre src/main.tsx y envuelve tu aplicación en TonConnectUIProvider:

import React from "react";
import ReactDOM from "react-dom/client";
import { TonConnectUIProvider } from "@tonconnect/ui-react";
import "./index.css";
import App from "./App.tsx";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <TonConnectUIProvider 
    // Para fines de demostración, usamos una URL estática para el manifiesto
    // Reemplaza por la tuya: manifestUrl={`${window.location.origin}/tonconnect-manifest.json`}`
    manifestUrl="https://gist.githubusercontent.com/mrruby/243180339f492a052aefc7a666cb14ee/raw/"
    >

      <App />
    </TonConnectUIProvider>
  </React.StrictMode>
);

Nota: Para los propósitos de esta demo, estamos sirviendo el manifiesto desde una fuente estática. En una aplicación real, deberías reemplazar esto con la URL de tu propio manifiesto, que crearás en el siguiente paso.

3.2 Crear el manifiesto de TonConnect

Crea un archivo llamado tonconnect-manifest.json en tu carpeta public :

{
    "url": "https://stonfi-liquidity-demo.example.com",
    "name": "Proveedor de liquidez de STON.fi",
    "iconUrl": "https://stonfi-liquidity-demo.example.com/icon-192x192.png"
}

Actualízalo con el nombre, dominio e icono de tu propia aplicación.

3.3 Agregar el botón de conectar billetera

En src/App.tsx, importa y agrega el TonConnectButton:

import { TonConnectButton } from "@tonconnect/ui-react";

function App() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen p-6">
      <h1 className="text-2xl font-bold mb-4">Demo de liquidez de STON.fi</h1>
      <TonConnectButton />
    </div>
  );
}

export default App;

---

4. Obtener los activos disponibles

Vamos a obtener los datos de los tokens desde STON.fi usando StonApiClient. Filtraremos por etiquetas de liquidez para mantener la lista manejable.

Primero, añade nuevas importaciones en la parte superior de src/App.tsx:

import { useEffect, useState } from "react";
import { TonConnectButton } from "@tonconnect/ui-react";
import { StonApiClient, AssetTag, type AssetInfoV2  } from "@ston-fi/api";

Inicializa el cliente de la API de STON.fi:

const stonApiClient = new StonApiClient();

Añade variables de estado para la gestión de tokens:

function App() {
  const [tokens, setTokens] = useState<AssetInfoV2[]>([]);
  const [tokenA, setTokenA] = useState<AssetInfoV2 | undefined>();
  const [tokenB, setTokenB] = useState<AssetInfoV2 | undefined>();
  const [amountA, setAmountA] = useState("");
  const [amountB, setAmountB] = useState("");

Añade la lógica para obtener tokens:

  // Obtener activos al inicio
  useEffect(() => {
    const fetchTokens = async () => {
      try {
        const assets = await stonApiClient.queryAssets({
          // Consultar solo activos con liquidez media o superior para garantizar que se puedan negociar
          condition: `${AssetTag.LiquidityVeryHigh} | ${AssetTag.LiquidityHigh} | ${AssetTag.LiquidityMedium}`,
        });

        setTokens(assets);

        // Inicializar selecciones predeterminadas
        setTokenA(assets[0]);
        setTokenB(assets[1]);
      } catch (err) {
        console.error("No se pudieron obtener los tokens:", err);
      }
    };
    fetchTokens();
  }, []);

Añade el manejador de cambio de token:

  // Función fábrica para crear manejadores onChange para los menús desplegables de token
  // Usa composición para crear manejadores reutilizables para ambos selectores de token
  const handleTokenChange =
    (setter: typeof setTokenA | typeof setTokenB) =>
    (event: { target: { value: string } }) => {
      const selected = tokens.find(
        (t) => t.contractAddress === event.target.value
      );
      if (selected) {
        setter(selected);
      }
    };

Reemplaza la instrucción return con la interfaz mejorada:

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-50 to-indigo-100 p-6">
      <div className="max-w-md w-full bg-white rounded-lg shadow p-6 space-y-6">
        {/* Encabezado de la aplicación con marca y conexión a la billetera */}
        <div className="flex justify-between items-center">
          <h1 className="text-2xl font-bold text-indigo-700">
            STON.fi Liquidity
          </h1>
          <TonConnectButton />
        </div>
        <hr className="border-gray-200" />

        {/* Interfaz principal de la aplicación (condicional según la disponibilidad de datos de tokens) */}
        {tokens.length > 0 ? (
          <>
            {/* Menú desplegable para la selección del Token A */}
            <div>
              <label className="block mb-1 text-sm font-medium text-gray-600">
                Token A
              </label>
              <select
                className="w-full p-2 border rounded"
                onChange={handleTokenChange(setTokenA)}
                value={tokenA?.contractAddress || ""}
              >
                {tokens.map((tok) => (
                  <option key={tok.contractAddress} value={tok.contractAddress}>
                    {tok.meta?.symbol ?? "Token"}
                  </option>
                ))}
              </select>
            </div>

            {/* Menú desplegable para la selección del Token B */}
            <div>
              <label className="block mb-1 text-sm font-medium text-gray-600">
                Token B
              </label>
              <select
                className="w-full p-2 border rounded"
                onChange={handleTokenChange(setTokenB)}
                value={tokenB?.contractAddress || ""}
              >
                {tokens.map((token) => (
                  <option
                    key={token.contractAddress}
                    value={token.contractAddress}
                  >
                    {token.meta?.symbol ?? "Token"}
                  </option>
                ))}
              </select>
            </div>

            {/* Campos de entrada de cantidades (disposición lado a lado) */}
            <div className="flex space-x-4">
              <div className="flex-1">
                <label className="block mb-1 text-sm font-medium text-gray-600">
                  Cantidad A
                </label>
                <input
                  type="number"
                  className="w-full p-2 border rounded"
                  placeholder="0.0"
                  value={amountA}
                  onChange={(e) => setAmountA(e.target.value)}
                />
              </div>
              <div className="flex-1">
                <label className="block mb-1 text-sm font-medium text-gray-600">
                  Cantidad B
                </label>
                <input
                  type="number"
                  className="w-full p-2 border rounded"
                  placeholder="0.0"
                  value={amountB}
                  onChange={(e) => setAmountB(e.target.value)}
                />
              </div>
            </div>
          </>
        ) : (
          <p>Cargando tokens...</p>
        )}
      </div>
    </div>
  );
}

---

5. Simular la provisión de liquidez

Llamaremos a la función simulateLiquidityProvision en StonApiClient para obtener los resultados de la simulación.

Añade importaciones adicionales en la parte superior del archivo:

import { useTonAddress } from "@tonconnect/ui-react";
import { type LiquidityProvisionSimulation } from "@ston-fi/api";
import { fromNano } from "@ton/ton";

Añade funciones de utilidad para convertir cantidades de tokens:

// Convertir una cantidad en cadena de punto flotante a una cadena de unidades base enteras
// Esencial para transacciones blockchain que usan aritmética entera
function toBaseUnits(amount: string, decimals?: number) {
  return Math.floor(parseFloat(amount) * 10 ** (decimals ?? 9)).toString();
}

// Convertir unidades base enteras de vuelta a una cadena fija de 2 decimales para mostrar
function fromBaseUnits(baseUnits: string, decimals?: number) {
  return (parseInt(baseUnits) / 10 ** (decimals ?? 9)).toFixed(2);
}

Añade la dirección de la billetera y el estado de la simulación:

function App() {
  const walletAddress = useTonAddress();
  
  // ... variables de estado existentes ...
  
  const [simulation, setSimulation] = useState<
    LiquidityProvisionSimulation | Error | undefined
  >();

Añade useEffect para reiniciar la simulación cuando cambien los tokens:

  // Reiniciar la simulación cuando cambien los tokens
  useEffect(() => {
    setSimulation(undefined);
  }, [tokenA, tokenB]);

Añade el manejador de simulación después de la función handleTokenChange existente:

  const handleSimulationClick = async () => {
    if (!tokenA || !tokenB || !amountA || !amountB) {
      alert("Por favor, selecciona tokens e introduce cantidades");
      return;
    }

    try {
      // Obtener los pools disponibles para el par de tokens
      const pools = (
        await stonApiClient.getPoolsByAssetPair({
          asset0Address: tokenA.contractAddress,
          asset1Address: tokenB.contractAddress,
        })
      ).filter((pool) => !pool.deprecated);

      const pool = pools[0];

      // Obtener la simulación según la disponibilidad del pool
      const simulation = pool
        ? await stonApiClient.simulateLiquidityProvision({
            provisionType: "Balanced",
            tokenA: tokenA.contractAddress,
            tokenB: tokenB.contractAddress,
            tokenAUnits: toBaseUnits(amountA, tokenA?.meta?.decimals),
            poolAddress: pool.address,
            slippageTolerance: "0.001",
            walletAddress,
          })
        : await stonApiClient.simulateLiquidityProvision({
            provisionType: "Initial",
            tokenA: tokenA.contractAddress,
            tokenB: tokenB.contractAddress,
            tokenAUnits: toBaseUnits(amountA, tokenA?.meta?.decimals),
            tokenBUnits: toBaseUnits(amountB, tokenB?.meta?.decimals),
            slippageTolerance: "0.001",
            walletAddress,
          });

      setSimulation(simulation);
      setAmountB(fromBaseUnits(simulation.tokenBUnits, tokenB?.meta?.decimals));
    } catch (e) {
      setSimulation(new Error(e instanceof Error ? e.message : String(e)));
    }
  };

Añade el botón de simulación después de los campos de entrada de cantidades:

            <div className="flex space-x-4">
              <div className="flex-1">
                <label className="block mb-1 text-sm font-medium text-gray-600">
                  Cantidad A
                </label>
                <input
                  type="number"
                  className="w-full p-2 border rounded"
                  placeholder="0.0"
                  value={amountA}
                  onChange={(e) => setAmountA(e.target.value)}
                />
              </div>
              <div className="flex-1">
                <label className="block mb-1 text-sm font-medium text-gray-600">
                  Cantidad B
                </label>
                <input
                  type="number"
                  className="w-full p-2 border rounded"
                  placeholder="0.0"
                  value={amountB}
                  onChange={(e) => setAmountB(e.target.value)}
                />
              </div>
            </div>

            {/* Botón para iniciar la simulación con validación */}
            <button
              onClick={handleSimulationClick}
              className="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 rounded"
            >
              Simular
            </button>

Añade la visualización de resultados de la simulación después del botón simular:

            {simulation ? (
              simulation instanceof Error ? (
                <p className="text-red-600 text-sm">{simulation.message}</p>
              ) : (
                <>
                  <div className="p-4 bg-gray-50 rounded border border-gray-200 text-sm overflow-x-auto break-all max-w-full">
                    <p className="font-semibold text-gray-800">
                      Resultado de la simulación
                    </p>
                    <ul className="list-disc list-inside mt-2 space-y-1 text-gray-700">
                      {Object.entries({
                        "Tipo de provisión": simulation.provisionType,
                        "Dirección del pool": simulation.poolAddress,
                        "Router (metadatos en línea)": simulation.router?.address,
                        "Token A": simulation.tokenA,
                        "Token B": simulation.tokenB,
                        "Unidades de Token A": fromBaseUnits(
                          simulation.tokenAUnits,
                          tokenA?.meta?.decimals
                        ),
                        "Unidades de Token B": fromBaseUnits(
                          simulation.tokenBUnits,
                          tokenB?.meta?.decimals
                        ),
                        "Cuenta LP": simulation.lpAccountAddress,
                        "LP estimado": fromNano(simulation.estimatedLpUnits),
                        "LP mínimo": fromNano(simulation.minLpUnits),
                        "Impacto en el precio": simulation.priceImpact,
                      }).map(([label, value]) => (
                        <li key={label}>
                          <span className="font-medium">{label}:</span>{" "}
                          <span className="break-all">{value}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </>
              )
            ) : null}

---

6. Construir la transacción

Ve a TON Center y obtén tu clave API.

Luego crea un archivo .env en la raíz de tu proyecto y añade allí tu clave API:

VITE_TON_API_KEY=your_api_key_here

Ahora vamos a construir la transacción usando @ston-fi/sdk:

Añade nuevas importaciones al inicio del archivo e inicializa el cliente JSON-RPC de TON:

import { useTonConnectUI } from "@tonconnect/ui-react";
import { dexFactory } from "@ston-fi/sdk";
import { TonClient, fromNano } from "@ton/ton";

// Cliente JSON-RPC de TON para interacciones con la blockchain
const tonApiClient = new TonClient({
  endpoint: "https://toncenter.com/api/v2/jsonRPC",
  apiKey: import.meta.env.VITE_TON_API_KEY,
});

Añade handleProvideLiquidityClick después del callback handleSimulationClick :

const [tonConnectUI] = useTonConnectUI();

const handleProvideLiquidityClick = async () => {
  if (!simulation || simulation instanceof Error) {
    alert("La simulación no es válida");
    return;
  }

  const tonAsset = tokens.find((token) => token.kind === "Ton");
  if (!tonAsset) {
    alert("No se encontró la información del activo TON");
    return;
  }

  try {
    const routerInfo = simulation.router;
    const { Router, pTON } = dexFactory(routerInfo);
    const router = tonApiClient.open(Router.create(routerInfo.address));
    const pTon = pTON.create(routerInfo.ptonMasterAddress);

    const isTonAsset = (contractAddress: string) =>
      contractAddress === tonAsset.contractAddress;

    const buildTransaction = async (args: {
      sendAmount: string;
      sendTokenAddress: string;
      otherTokenAddress: string;
    }) => {
      const params = {
        userWalletAddress: walletAddress,
        minLpOut: simulation.minLpUnits,
        sendAmount: args.sendAmount,
        otherTokenAddress: isTonAsset(args.otherTokenAddress)
          ? pTon.address
          : args.otherTokenAddress,
      };

      // TON requiere un contrato proxy, Jettons usan transferencia directa
      if (isTonAsset(args.sendTokenAddress)) {
        return await router.getProvideLiquidityTonTxParams({
          ...params,
          proxyTon: pTon,
        });
      } else {
        return await router.getProvideLiquidityJettonTxParams({
          ...params,
          sendTokenAddress: args.sendTokenAddress,
        });
      }
    };

    // Generar parámetros de transacción para ambos tokens
    // Se usan métodos diferentes para tokens TON y Jetton debido a la mecánica de la blockchain
    const txParams = await Promise.all([
      buildTransaction({
        sendAmount: simulation.tokenAUnits,
        sendTokenAddress: simulation.tokenA,
        otherTokenAddress: simulation.tokenB,
      }),
      buildTransaction({
        sendAmount: simulation.tokenBUnits,
        sendTokenAddress: simulation.tokenB,
        otherTokenAddress: simulation.tokenA,
      }),
    ]);

    // Formatear los mensajes de transacción para la interfaz sendTransaction de TonConnect
    const messages = txParams.map((txParam) => ({
      address: txParam.to.toString(),
      amount: txParam.value.toString(),
      payload: txParam.body?.toBoc().toString("base64"),
    }));

    // Activar el modal de TonConnect para la aprobación de la transacción por parte del usuario
    await tonConnectUI.sendTransaction({
      validUntil: Date.now() + 5 * 60 * 1000, // La transacción es válida durante 5 minutos
      messages,
    });
  } catch (e) {
    alert(`Error: ${e}`);
  }
};

Añade el botón Proveer liquidez después del div de resultados de la simulación:

                    {Object.entries({
                      "Tipo de provisión": simulation.provisionType,
                      "Dirección del pool": simulation.poolAddress,
                      "Router (metadatos en línea)": simulation.router?.address,
                      "Token A": simulation.tokenA,
                      "Token B": simulation.tokenB,
                      "Unidades de Token A": fromBaseUnits(
                        simulation.tokenAUnits,
                        tokenA?.meta?.decimals
                      ),
                      "Unidades de Token B": fromBaseUnits(
                        simulation.tokenBUnits,
                        tokenB?.meta?.decimals
                      ),
                      "Cuenta LP": simulation.lpAccountAddress,
                      "LP estimado": fromNano(simulation.estimatedLpUnits),
                      "LP mínimo": fromNano(simulation.minLpUnits),
                      "Impacto en el precio": simulation.priceImpact,
                    }).map(([label, value]) => (
                      <li key={label}>
                        <span className="font-medium">{label}:</span>{" "}
                        <span className="break-all">{value}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                <button
                  onClick={handleProvideLiquidityClick}
                  className="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-2 rounded mt-4"
                >
                  Proveer liquidez
                </button>
                </>

              )
            ) : null}

---

7. Ejecutar la provisión

Después de hacer clic en "Proveer liquidez", tu billetera te pedirá que confirmes y firmes. La transacción hará lo siguiente:

1. Enviar el token A y el token B al contrato del router

2. Añadir liquidez al pool

3. Mintear tokens LP en tu billetera LP

---

8. Probar tu provisión

1. Inicia el servidor de desarrollo:

pnpm dev

1. Abre http://localhost:5173

2. Conecta tu billetera TON

3. Selecciona dos tokens e introduce cantidades

4. Simula para ver los tokens LP esperados

5. Haz clic en "Proveer liquidez" para ejecutar la transacción

6. Comprueba en tu billetera los nuevos tokens LP

---

9. Conclusión

Has creado una aplicación React mínima que:

• Se conecta a una billetera TON

• Obtiene tokens de STON.fi

• Simula la provisión de liquidez

• Gestiona tanto pools nuevos como existentes

• Ejecuta la transacción de provisión

---

10. Demostración en vivo

Con esta demo de Replit, puedes:

• Abrir el proyecto directamente en tu navegador

• Hacer un fork del Replit para crear tu propia copia

• Ejecutar la aplicación para verla en acción

• Explorar y modificar el código para aprender cómo funciona

• Experimentar con diferentes funciones y cambios en la interfaz

Como alternativa, puedes ejecutar este ejemplo localmente clonando el repositorio de GitHub:

git clone https://github.com/mrruby/stonfi-liquidity-app.git
cd omniston-swap-app
pnpm install
pnpm dev

Esto iniciará el servidor de desarrollo y podrás acceder a la app en http://localhost:5173.

También recuerda agregar tu clave de API de TON al .env archivo desde el Construir la transacción paso.

---

11. Próximos pasos

Para funciones más avanzadas puedes agregar:

• Controles dinámicos de deslizamiento

• Quemar liquidez lee sobre ello en la documentación del SDK

• Consulta la documentación de liquidez del SDK para más detalles

Más información: Pools de liquidez de STON.fi e integración con TON

12. Aplicación de ejemplo avanzada

Para quienes buscan un enfoque más avanzado y con más funciones, también tenemos una demo de Next.js que:

• Usa Next.js para un framework escalable

• Utiliza hooks y providers para una arquitectura elegante

• Demuestra un mejor manejo de errores, una gestión de estado robusta y funciones adicionales de STON.fi

Puedes explorar el código en nuestro repositorio:

Aplicación demo de Next.js del SDK de STON.fi

O verla en acción en nuestra demo en vivo:

Aplicación demo del SDK

13. Uso de agentes de IA para la implementación automatizada

Para los desarrolladores que buscan acelerar su proceso de desarrollo, pueden aprovechar agentes de programación de IA para implementar automáticamente la funcionalidad de provisión de liquidez descrita en esta guía. Aunque mostramos Gemini CLI en nuestro ejemplo (debido a su generoso plan gratuito), puedes usar cualquier asistente de programación de IA como Claude Code, GitHub Copilot, Cursor Agent, o herramientas similares.

13.1 ¿Por qué agentes de IA?

Los modernos agentes de programación de IA pueden:

• Entender documentación compleja e implementar funciones completas

• Configurar automáticamente la estructura del proyecto y las dependencias

• Gestionar errores comunes de configuración y puesta en marcha

• Proporcionar implementaciones funcionales en minutos en lugar de horas

13.2 Configuración con Gemini CLI (Ejemplo)

Haremos la demostración con Gemini CLI, pero el enfoque funciona con cualquier agente de IA que pueda leer documentación y ejecutar comandos.

13.2.1 Instalación de Gemini CLI

1. Instala Gemini CLI siguiendo las instrucciones en: https://github.com/google-gemini/gemini-cli

2. Autentícate con tu cuenta de Google cuando se te solicite. El nivel gratuito incluye:

   • 60 solicitudes al modelo por minuto

   • 1.000 solicitudes al modelo por día

13.2.2 Configuración de la guía de implementación

1. Descarga el archivo de guía adecuado desde el gist: https://gist.github.com/mrruby/3de1cedace13457b3fd6964186cfcb2e

   • Para Claude Code: Descarga AGENTS.md y cámbiale el nombre a CLAUDE.md

   • Para otros agentes de IA (Gemini CLI, GitHub Copilot, Cursor, etc.): Usa AGENTS.md tal cual

2. Crea un nuevo directorio para tu proyecto y coloca el archivo de guía dentro de él:

   mkdir my-liquidity-app
   cd my-liquidity-app
   # Coloca CLAUDE.md (para Claude Code) o AGENTS.md (para otros agentes) aquí

13.2.3 Ejecución de la implementación automatizada

1. Desde el directorio de tu proyecto, ejecuta Gemini CLI:

   gemini

2. Cuando se abra la interfaz de la CLI, escribe:

   Implementar la provisión de liquidez según la Guía rápida de provisión de liquidez en AGENTS.md  

3. El agente de IA:

   • Pedirá permiso para usar comandos como pnpm, npm, etc.

   • Creará automáticamente la estructura del proyecto

   • Instalará todas las dependencias necesarias

   • Implementará la funcionalidad completa de provisión de liquidez

   • Configurará los componentes de la interfaz y el estilo

4. Importante: Después de que la implementación se complete, debes configurar manualmente tu clave de API de TON:

   • Ve a TON Center y obtén tu clave de API

   • Crea un .env archivo en la raíz de tu proyecto

   • Añade tu clave de API: VITE_TON_API_KEY=your_api_key_here

   • Los agentes de IA no pueden encargarse de este paso, ya que requiere tus credenciales personales de API

5. Si ocurre algún error durante el proceso:

   • Simplemente vuelve a pegar el mensaje de error al agente de IA

   • Analizará y corregirá el problema automáticamente

   • En la mayoría de los casos, la implementación se completa correctamente de una sola vez

13.3 Uso de otros agentes de IA

El mismo enfoque funciona con otros asistentes de programación de IA:

• Claude Code: Descarga AGENTS.md y cámbiale el nombre a CLAUDE.md, luego colócalo en tu proyecto y pide a Claude Code que implemente la guía

• GitHub Copilot: Usa el AGENTS.md archivo tal cual, abre la guía en tu editor y usa Copilot Chat para implementar paso a paso

• Cursor Agent: Usa el AGENTS.md archivo tal cual, carga la documentación y solicita la implementación completa mediante el modo agente de Cursor

• Herramientas personalizadas: Cualquier asistente de IA con acceso a archivos y capacidad de ejecutar comandos puede seguir la guía usando el AGENTS.md archivo

Nota: El AGENTS.md archivo contiene instrucciones compatibles con todos los agentes de IA (Gemini CLI, GitHub Copilot, Cursor, etc.). Sin embargo, Claude Code requiere que el archivo se llame CLAUDE.md para ser reconocido automáticamente, así que debes renombrar AGENTS.md to CLAUDE.md cuando uses Claude Code.

13.4 Beneficios de usar agentes de IA

• Velocidad: Obtén una implementación funcional en minutos en lugar de horas

• Precisión: Los agentes de IA siguen la guía rápida con exactitud

• Gestión de errores: Resuelven automáticamente la mayoría de los problemas comunes de configuración

• Herramienta de aprendizaje: Observa cómo se desarrolla la implementación paso a paso

• Personalización: Después de la configuración inicial, puedes modificar el código generado para adaptarlo a tus necesidades específicas

• Rentable: Muchas herramientas de programación con IA ofrecen niveles gratuitos (como Gemini CLI) o están incluidas en suscripciones existentes

13.5 Mejores prácticas

1. Revisar el código: Revisa siempre el código generado por IA antes de usarlo en producción

2. Entender el flujo: Usa el código generado como una herramienta de aprendizaje para entender la provisión de liquidez

3. Personalizar: Adapta el código generado a tus requisitos específicos

4. Probar a fondo: Prueba la implementación con cantidades pequeñas antes de procesar transacciones más grandes

5. Seguridad: Nunca confirmes claves de API ni mnemónicos en el control de versiones

Este enfoque es especialmente útil para:

• Desarrolladores nuevos en el ecosistema TON

• Prototipado rápido y pruebas de concepto

• Aprender con un ejemplo de una implementación funcional

• Evitar errores comunes de configuración y problemas de puesta en marcha

• Explorar rápidamente diferentes enfoques de implementación