Tạo Trò Chơi Mini AI với Trình Tạo Trò Chơi AI trong FlowHunt

Luồng chúng ta sẽ xây dựng

Dưới đây là cấu trúc mà chúng ta sẽ triển khai, được thiết kế rõ ràng và sử dụng các thành phần cụ thể của FlowHunt:

Bước 1: Tạo luồng mới & Thêm các thành phần

Hãy bắt đầu bằng cách thiết lập canvas và thêm tất cả các khối xây dựng cần thiết như trong sơ đồ.

• Trong bảng điều khiển FlowHunt, điều hướng đến My Flows và nhấp Create Flow. Đặt tên như “AI JS Game Generator v2”.

• Kéo các thành phần sau từ thư viện component vào canvas:
  • Chat Input
  • Chat History (sử dụng InMemoryChatMessageHistory)
  • LLM Anthropic AI (hoặc LLM bạn chọn như LLM OpenAI, LLM Gemini)
  • Prompt
  • URL Retriever
  • Google Search
  • Tool Calling Agent
  • Chat Output

Bước 2: Cấu hình các thành phần cốt lõi

Bây giờ, hãy thiết lập các node quan trọng xử lý logic.

1. Node Prompt

   • Nhấp vào node Prompt.

   • Node này định dạng hướng dẫn cho AI. Trong trường Template, nhập hướng dẫn chi tiết, sử dụng các biến template nếu cần (như {{$input}} để tham chiếu tới tin nhắn từ Chat Input).

   • Dán mẫu prompt sau:

     User sẽ đưa cho bạn tên trò chơi và bạn phải tạo trò chơi điện tử trong một file javascript duy nhất như VÍ DỤ bên dưới. NHƯNG LƯU Ý RẰNG CHÚNG TA ĐÃ CÓ FILE HTML VÀ CÁC TRÒ CHƠI PHẢI ĐƯỢC XÂY DỰNG DỰA TRÊN FILE ĐÓ, FILE NÀY ĐƯỢC NÊU DƯỚI ĐÂY.
     —TRÒ CHƠI CẦN ĐƯỢC TẠO—
     {input}
     —VÍ DỤ VỀ FILE JAVASCRIPT—
     *java file*—
     —FILE HTML ĐÃ TẠO SẴN—
     *HTML file*—
     

2. Thêm công cụ cho Tool Calling Agent (URL Retriever, Google Search):

   • Mặc dù được đưa vào sơ đồ luồng này và kết nối với Tool Calling Agent, các công cụ này không thực sự bắt buộc cho nhiệm vụ cơ bản là tạo trò chơi từ mô tả.
   • Kết nối chúng giúp agent có sẵn các công cụ này. Nếu AI (phụ thuộc vào LLM và prompt) thấy cần thiết phải tìm kiếm web hoặc lấy nội dung từ URL để hoàn thành yêu cầu, nó có thể sử dụng. Với các yêu cầu đơn giản như “tạo trò chơi pong”, thường sẽ không cần dùng tới. Bạn không cần cấu hình gì thêm trừ khi có API key cho Google Search.

Bước 3: Kết nối các thành phần

Kết nối các node như trong sơ đồ để đảm bảo dữ liệu luân chuyển chính xác.

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 – Lưu ý dấu hoa thị, thường chỉ đầu vào chính của người dùng/prompt)
5. URL Retriever (Documents As Tool output) → Tool Calling Agent (Tools * input – Đầu vào này nhận nhiều kết nối công cụ)
6. Google Search (Google Search as Tool output) → Tool Calling Agent (Tools * input)
7. Tool Calling Agent (Message output) → Chat Output (Text * input)

Bước 4: Tạo trò chơi mini JavaScript của bạn

Hãy biến ý tưởng trò chơi của bạn thành hiện thực!

1. Lưu luồng, sau đó nhấn nút AI (▶️).

2. Trong khung chat, nhập yêu cầu trò chơi của bạn (ví dụ: Tạo Tetris).

   [Hình minh họa: Giao diện chat với người dùng nhập prompt trò chơi]

3. Nhấn Enter. Node Prompt sẽ định dạng yêu cầu, và Tool Calling Agent, sử dụng LLM Anthropic AI, sẽ tạo mã trò chơi.

Bước 5: Chơi trò chơi do AI tạo ra

1. Sao chép toàn bộ khối mã từ Chat Output.
2. Dán vào trình soạn thảo văn bản thuần (Notepad, TextEdit, VS Code).
3. Lưu file với đuôi .html (ví dụ: ai_tetris.html).
4. Nhấp đúp vào file đã lưu để mở trên trình duyệt và chơi!

Kết luận: Xây dựng luồng AI chuyên biệt với FlowHunt

Làm theo sơ đồ luồng này, bạn đã xây dựng thành công trình tạo trò chơi JavaScript bằng AI mạnh mẽ với FlowHunt. Ví dụ này minh họa cách kết hợp node LLM chuyên dụng và Prompt cùng Tool Calling Agent đa năng, thậm chí bổ sung công cụ bên ngoài như tìm kiếm web khi cần. Giao diện trực quan của FlowHunt giúp việc xây dựng và hiểu các quy trình AI phức tạp này trở nên đơn giản và hiệu quả. Chúc bạn tạo game vui vẻ!

Bắt đầu với luồng đầu tiên của bạn

Flowhunt có đội ngũ kỹ sư luồng AI sẵn sàng hỗ trợ bạn với Tự động hóa AI.

• Thử Flowhunt
• Trao đổi với chuyên gia