我们将要构建的流程

以下是我们将要实现的结构，清晰明了并充分利用了 FlowHunt 的专用组件：

步骤 1：创建新流程并添加组件

首先设置我们的画布，并添加流程图中显示的所有必要构件。

• 在 FlowHunt 仪表盘，进入 我的流程 并点击 创建流程。可以命名为“AI JS 游戏生成器 v2”之类的。

• 从组件库拖拽以下组件到你的画布上：
  • Chat Input
  • Chat History（使用 InMemoryChatMessageHistory）
  • LLM Anthropic AI（或你偏好的 LLM 节点，如 LLM OpenAI、LLM Gemini）
  • Prompt
  • URL Retriever
  • Google Search
  • Tool Calling Agent
  • Chat Output

步骤 2：配置核心组件

现在，让我们设置处理逻辑的关键节点。

1. Prompt 节点

   • 点击 Prompt 节点。

   • 此节点用于为 AI 格式化指令。在 模板 字段中输入详细指令，如有需要可使用模板变量（如 {{$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，但对于基础的从描述生成游戏任务来说，可能不是必须的。
   • 连接它们让 Agent 可以调用这些工具。如果 AI（基于核心 LLM 和提示）认为需要搜索网页或从 URL 获取内容来完成请求，它可以使用这些工具。对于“制作一个乒乓游戏”这类简单需求，通常不需要用到它们。除非你有 Google Search 的 API key，否则无需特别配置。

步骤 3：连接组件

按照流程图精确连接各个节点，确保数据流正确无误。

1. Chat History（InMemoryChatMessageHistory 输出）→ Tool Calling Agent（Chat History 输入）
2. LLM Anthropic AI（LLM 输出）→ Tool Calling Agent（LLM 输入）
3. Chat Input（Message 输出）→ Prompt（Input 输入）
4. Prompt（Message 输出）→ Tool Calling Agent（Inputs * 输入 – 注意星号，通常表示主要的用户/提示输入）
5. URL Retriever（Documents As Tool 输出）→ Tool Calling Agent（Tools * 输入 – 该输入可连接多个工具）
6. Google Search（Google Search as Tool 输出）→ Tool Calling Agent（Tools * 输入）
7. Tool Calling Agent（Message 输出）→ Chat Output（Text * 输入）

步骤 4：生成你的 JavaScript 迷你游戏

让你的游戏创意变成现实！

1. 保存流程，然后点击 AI 按钮（▶️）。

2. 在聊天面板输入你的游戏请求（例如：Make Tetris）。

   [图片：用户在聊天界面输入游戏提示的截图]

3. 按下回车。Prompt 节点会格式化你的请求，Tool Calling Agent 会调用 LLM Anthropic AI 生成游戏代码。

步骤 5：游玩你的 AI 生成游戏

1. 从 Chat Output 中复制完整代码块。
2. 粘贴到纯文本编辑器中（如 Notepad、TextEdit、VS Code）。
3. 保存为 .html 扩展名文件（如 ai_tetris.html）。
4. 双击打开该文件，即可在浏览器中游玩！

结语：用 FlowHunt 构建专属 AI 流程

按照这个专门的流程图，你已经用 FlowHunt 构建了一个强大的 AI JavaScript 游戏生成器。这个案例展示了如何将专用的 LLM 和 Prompt 节点与灵活的 Tool Calling Agent 结合起来，必要时还可以调用外部工具如网页搜索。FlowHunt 的可视化界面让搭建和理解这些稍复杂的 AI 工作流也变得简单高效。祝你游戏生成愉快！

开始你的第一个流程

Flowhunt 拥有一支 AI 流程工程师团队，随时为你的 AI 自动化提供帮助。

• 试用 Flowhunt
• 与专家交流