FlowHunt에서 AI 게임 생성기로 AI 미니 게임 만들기

우리가 만들 플로우

아래는 명확성을 위해 설계된 구조로, FlowHunt의 특정 컴포넌트를 활용해 구현할 플로우입니다.

1단계: 새 플로우 생성 및 컴포넌트 추가

캔버스를 설정하고 다이어그램에 나온 모든 빌딩 블록을 추가해봅시다.

• FlowHunt 대시보드에서 My Flows로 이동해 Create Flow를 클릭하세요. 이름은 “AI JS Game Generator v2” 등으로 지정합니다.

• 컴포넌트 라이브러리에서 아래 컴포넌트들을 캔버스로 드래그하세요:
  • Chat Input
  • Chat History (InMemoryChatMessageHistory 사용)
  • LLM Anthropic AI (또는 원하는 LLM 노드: LLM OpenAI, LLM Gemini 등)
  • 프롬프트
  • URL Retriever
  • Google Search
  • Tool Calling Agent
  • Chat Output

2단계: 핵심 컴포넌트 설정

이제 주요 노드들의 로직을 설정해줍니다.

1. 프롬프트 노드

   • 프롬프트 노드를 클릭하세요.

   • 이 노드는 AI에게 전달할 지침을 포맷합니다. Template 필드에 상세 지침을 입력하세요. 필요한 경우 템플릿 변수(예: {{$input}}는 Chat Input에서 받은 메시지 참조)를 사용할 수 있습니다.

   • 아래 프롬프트 템플릿을 복사해 붙여넣으세요:

     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. Tool Calling Agent에 도구 추가 (URL Retriever, Google Search):

   • 이 플로우 다이어그램에 표시되어 Tool Calling Agent에 연결되어 있지만, 기본적인 게임 생성에는 반드시 필요한 것은 아닙니다.
   • 연결만 해두면 에이전트가 필요 시 사용할 수 있도록 해줍니다. AI가(핵심 LLM과 프롬프트에 따라) 웹 검색이나 URL에서 내용을 가져와야 한다고 판단하면 이 도구들을 사용할 수 있습니다. “퐁 게임 만들어줘”처럼 단순 요청에는 거의 필요하지 않습니다. 구글 검색 API 키가 없다면 별도 설정은 필요 없습니다.

3단계: 컴포넌트 연결

다이어그램에 나온 대로 노드를 정확히 연결하세요. 데이터가 올바르게 흐르도록 해줍니다.

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) → 프롬프트 (Input input)
4. 프롬프트 (Message output) → Tool Calling Agent (Inputs * input – 별표는 주로 주요 사용자/프롬프트 입력임을 의미)
5. URL Retriever (Documents As Tool output) → Tool Calling Agent (Tools * input – 이 입력은 여러 도구 연결을 수용)
6. Google Search (Google Search as Tool output) → Tool Calling Agent (Tools * input)
7. Tool Calling Agent (Message output) → Chat Output (Text * input)

4단계: 자바스크립트 미니게임 생성

이제 여러분의 게임 아이디어를 실현해봅시다!

1. 플로우를 저장한 뒤 AI 버튼(▶️)을 클릭하세요.

2. 채팅 패널에 게임 요청을 입력하세요. (예: Make Tetris)

   [이미지: 사용자가 게임 프롬프트를 입력하는 채팅 인터페이스 스크린샷]

3. Enter를 누르세요. 프롬프트 노드가 요청을 포맷하고, Tool Calling Agent가 LLM Anthropic AI를 활용해 게임 코드를 생성합니다.

5단계: AI가 생성한 게임 플레이

1. Chat Output에서 전체 코드 블록을 복사하세요.
2. 메모장, TextEdit, VS Code 등 일반 텍스트 에디터에 붙여넣으세요.
3. 파일 확장자를 .html로 저장하세요. (예: ai_tetris.html)
4. 저장한 파일을 더블 클릭해 웹 브라우저로 열면 게임을 플레이할 수 있습니다!

결론: FlowHunt로 특정 AI 플로우 만들기

이 플로우 다이어그램을 따라가며 FlowHunt로 강력한 AI 자바스크립트 게임 생성기를 만들었습니다. 이 예시는 전용 LLM과 프롬프트 노드를 Tool Calling Agent와 결합하고, 필요시 웹 검색 등 외부 도구도 활용할 수 있음을 보여줍니다. FlowHunt의 시각적인 인터페이스 덕분에 조금 더 복잡한 AI 워크플로우도 쉽게 만들고 이해할 수 있습니다. 즐거운 게임 생성 되세요!

첫 플로우 시작하기

Flowhunt에는 AI 자동화를 도와주는 AI 플로우 엔지니어 팀이 준비되어 있습니다.

• Flowhunt 체험하기
• 전문가와 상담하기