Vibe Coding项目 - II

设置架构图Agent Hook

现在我们将创建一个自动化Agent hook,当我们对聊天机器人进行重大更改时,它会生成和更新架构图。我们可以选择通过Kiro自动创建或手动设置,下面方式选择一种即可:

请Kiro创建代理钩子

请创建一个 Kiro Agent hook,以便在我对聊天机器人应用程序进行任何更改时,自动生成并更新 architecture/diagrams 文件夹中的架构图。该hook应执行以下操作:
1. 当我在 src 文件夹中保存文件时触发
2. 分析当前应用程序结构
3. 使用 AWS Diagram MCP 服务器生成更新后的架构图
4. 将架构图保存到 architecture/diagrams 文件夹中
5. 更新所有相关文档
请确保该hook文档齐全且易于修改。请确保该hook已启用。

kiro会帮我们执行对应操作:

image-20260123195015885

手动创建Agent Hook

如果我们更喜欢手动创建Agent Hook,或者自动设置不起作用,按照以下步骤操作:

  1. 打开Agent Hook面板:在Kiro中,导航到侧边栏中的Agent Hooks部分
  2. 创建新钩子:点击"+"按钮创建新的代理钩子

中间会打开一个新的"Create New Hook"标签。将以下文本粘贴到输入框中并运行。

请创建一个 Kiro Agent hook,以便在我对聊天机器人应用程序进行任何更改时,自动生成并更新 architecture/diagrams 文件夹中的架构图。该hook应执行以下操作:
1. 当我在 src 文件夹中保存文件时触发
2. 分析当前应用程序结构
3. 使用 AWS Diagram MCP 服务器生成更新后的架构图
4. 将架构图保存到 architecture/diagrams 文件夹中
5. 更新所有相关文档
请确保该hook文档齐全且易于修改。请确保该hook已启用。

image-20260123195405086

右侧会打开一个"New Session”。Kiro成功创建了一个名为"Auto Architecture Diagrams"的钩子。该钩子已启用。

image-20260123195521580

返回文件浏览器标签。在.kiro/hooks/目录下自动创建了一个钩子文件。

image-20260123195551760

测试设置

测试MCP服务器

您能否通过查找有关 AWS Lambda 的信息来测试 AWS 文档 MCP 服务器?另外,请创建一个简单的图表来测试 AWS Diagram 服务器,该图表展示了一个连接到 API Gateway 的 Lambda 函数。

image-20260123195740990

Kiro应该能够访问AWS Documentation MCP服务器查找有关AWS Lambda的信息,并且在architecture/diagrams/目录中应该创建如下图所示的图表(如果找不到,问kiro,有可能生成在tmp路径下了)。

image-20260123200057681

测试代理钩子

请在 src 文件夹中创建一个简单的“Hello World”文件,以测试我们的Agent Hook是否正常工作。该Hook应该会自动生成初始架构图。

Kiro应该能够在src/目录中创建一个hello_world.py文件,并且在architecture/diagrams/目录中应该创建一个更新的图表。

钩子将运行,并且在创建新图表时,右侧会打开一个新会话。 image-20260123200555637

在进入下一步之前,指示Kiro清理创建的源代码文件和生成的架构图。

清理源代码文件和生成的架构图。我希望从一个干净的项目开始。