Creando mini juegos de IA con un generador de juegos de IA en FlowHunt

El flujo que construiremos

Aquí tienes la estructura que vamos a implementar, diseñada para mayor claridad y utilizando componentes específicos de FlowHunt:

Paso 1: Crea un nuevo flujo y agrega componentes

Comencemos configurando nuestro lienzo y añadiendo todos los bloques necesarios que se muestran en el diagrama.

• En tu panel de FlowHunt, navega a Mis Flujos y haz clic en Crear Flujo. Ponle un nombre como “Generador de Juegos JS con IA v2”.

• Arrastra los siguientes componentes a tu lienzo desde la biblioteca de componentes:
  • Chat Input
  • Chat History (usando InMemoryChatMessageHistory)
  • LLM Anthropic AI (o tu nodo LLM preferido como LLM OpenAI, LLM Gemini)
  • Prompt
  • URL Retriever
  • Google Search
  • Tool Calling Agent
  • Chat Output

Paso 2: Configura los componentes principales

Ahora, configuremos los nodos clave que gestionan la lógica.

1. Nodo Prompt

   • Haz clic en el nodo Prompt.

   • Este nodo da formato a las instrucciones para la IA. En el campo Template, introduce las instrucciones detalladas, usando variables de plantilla si es necesario (como {{$input}} para referirse al mensaje de Chat Input).

   • Pega la siguiente plantilla de prompt:

     User will give you a game name and you must create the video game in a single javascript file like the EXAMPLE shown below. BUT KEEP IN MIND THAT WE ALREADY HAVE AN HTML FILE AND THE GAMES SHOULD BE BUILT BASED ON THAT THE FILE IS MENTIONED DOWN BELOW.
     —GAME TO BE GENERATED—
     {input}
     —EXAMPLE OF JAVASCRIPT FILE—
     *java file*—
     —ALREADY CREATED HTML FILE—
     *HTML file*—
     

2. Agregar herramientas al Tool Calling Agent (URL Retriever, Google Search):

   • Aunque están incluidos en este diagrama de flujo y conectados al Tool Calling Agent, estas herramientas pueden no ser estrictamente necesarias para la tarea básica de generar un juego a partir de una descripción.
   • Conectarlas las hace disponibles para el agente. Si la IA (según su LLM principal y el prompt) decide que necesita buscar en la web o extraer contenido de una URL para cumplir la solicitud, puede usar estas herramientas. Para peticiones simples como “haz un juego de pong”, probablemente no las necesite. No se requiere configuración específica aquí, a menos que dispongas de claves API para Google Search.

Paso 3: Conecta los componentes

Conecta los nodos exactamente como se muestra en el diagrama. Esto asegura que los datos fluyan correctamente.

1. Chat History (InMemoryChatMessageHistory output) → Tool Calling Agent (Chat History input)
2. LLM Anthropic AI (LLM output) → Tool Calling Agent (LLM input)
3. Chat Input (Message output) → Prompt (Input input)
4. Prompt (Message output) → Tool Calling Agent (Inputs * input – Nota el asterisco, que suele indicar la entrada principal del usuario/prompt)
5. URL Retriever (Documents As Tool output) → Tool Calling Agent (Tools * input – Esta entrada acepta múltiples conexiones de herramientas)
6. Google Search (Google Search as Tool output) → Tool Calling Agent (Tools * input)
7. Tool Calling Agent (Message output) → Chat Output (Text * input)

Paso 4: Genera tu mini-juego en JavaScript

¡Demos vida a tus ideas de juegos!

1. Guarda tu flujo y haz clic en el botón IA (▶️).

2. En el panel de chat, escribe tu petición de juego (por ejemplo: Haz Tetris).

   [Imagen: Captura de pantalla de la interfaz de chat con un usuario introduciendo una petición de juego]

3. Pulsa Enter. El nodo Prompt formateará tu solicitud, y el Tool Calling Agent, usando el LLM Anthropic AI, generará el código del juego.

Paso 5: Juega tu juego generado por IA

1. Copia todo el bloque de código del Chat Output.
2. Pégalo en un editor de texto plano (Notepad, TextEdit, VS Code).
3. Guarda el archivo con la extensión .html (por ejemplo, ia_tetris.html).
4. Haz doble clic en el archivo guardado para abrirlo en tu navegador web y ¡juega!

Conclusión: Construyendo flujos de IA específicos con FlowHunt

Siguiendo este diagrama de flujo específico, has creado un potente generador de juegos JavaScript con IA usando FlowHunt. Este ejemplo demuestra cómo combinar nodos dedicados de LLM y Prompt con el versátil Tool Calling Agent, incluso haciendo disponibles herramientas externas como la búsqueda web si es necesario. La interfaz visual de FlowHunt hace que construir y entender incluso estos flujos de IA un poco más complejos sea sencillo y eficiente. ¡Feliz generación de juegos!

Comienza con tu primer flujo

Flowhunt cuenta con un equipo de ingenieros de flujos de IA listos para ayudarte con la Automatización con IA.

• Prueba Flowhunt
• Habla con un experto