Aicode Toolkit

🚀 AI代码工具包

AI代码工具包是一套基于模型上下文协议（MCP）的服务器和工具集合，它能助力AI编码代理保持一致性、遵循规范，并与你的代码库协同扩展，有效解决项目从最小可行产品（MVP）向生产环境演进过程中，AI代理遵循项目规范的难题，提升开发效率。

🚀 快速开始

前提条件

• Node.js：>= 18（建议使用长期支持版本）
• 包管理器：pnpm（或npm/yarn）
• Git：>= 2.13.2

快速上手

选项1：作为MCP服务器使用（搭配Claude Desktop）

1. 安装包：

   pnpm install @agiflowai/scaffold-mcp
   

2. 配置Claude Desktop： 在MCP设置中添加以下内容：

   {
     "mcpServers": {
       "scaffold": {
         "command": "scaffold-mcp",
         "args": ["mcp-serve"]
       }
     }
   }
   

3. 开始使用： MCP服务器工具将在Claude Desktop中可用。

选项2：作为命令行工具使用

# 全局安装或使用npx
pnpm install -g @agiflowai/scaffold-mcp

# 初始化模板（自动下载官方模板）
scaffold-mcp init

# 列出可用的模板
scaffold-mcp boilerplate list

# 创建新项目
scaffold-mcp boilerplate create scaffold-nextjs-app \
  --vars '{"appName":"my-app","withDrizzle":true}'

# 为现有项目添加功能
scaffold-mcp scaffold list ./apps/my-app
scaffold-mcp scaffold add scaffold-route \
  --project ./apps/my-app \
  --vars '{"routePath":"about","pageTitle":"About Us"}'

主要特性：

• 🎁 自动下载模板：init命令可从GitHub自动下载官方模板
• 🔗 支持GitHub子目录：可从仓库的特定文件夹添加模板
• 🌐 多种传输模式：支持stdio（MCP）、HTTP、SSE或独立的命令行模式
• 📦 内置模板：包含Next.js 15搭配Drizzle ORM、Storybook等模板

如需详细使用说明，请参阅scaffold-mcp文档。

模板管理

init命令可自动从AgiFlow仓库下载官方模板：

# 初始化并自动下载官方模板
scaffold-mcp init

# 跳过自动下载
scaffold-mcp init --no-download

# 指定自定义模板路径
scaffold-mcp init --path ./custom-templates

从GitHub添加其他模板（支持子目录）：

# 从完整仓库添加
scaffold-mcp add --name my-template --url https://github.com/user/repo

# 从仓库子目录添加
scaffold-mcp add \
  --name nextjs-template \
  --url https://github.com/user/repo/tree/main/templates/nextjs

当前可用模板：

• nextjs-15-drizzle：Next.js 15 + 应用路由 + TypeScript + Tailwind CSS 4 + Storybook + 可选的Drizzle ORM
  • 模板：完整的应用程序设置
  • 功能：路由、组件、API路由、身份验证、服务等

✨ 主要特性

1. 🏗️ 脚手架模板

将模板与大语言模型（LLMs）相结合，生成遵循内部规范的标准化代码，同时降低维护成本。

2. 🎨 架构与设计模式

遵循约定优于配置的原则进行扩展。如同Ruby on Rails或Angular，有倾向性的方法能让代码更具可预测性，无论是对人类开发者还是AI代理而言。

3. ✅ 规则

飞行前指导 + 飞行后验证 = 一致的输出。规则提供程序化检查（定量或定性），以执行你的流程。

💻 使用示例

基础用法

# 安装依赖
pnpm install

# 构建所有包
pnpm build

# 构建特定包
pnpm exec nx build scaffold-mcp

# 运行测试
pnpm test
pnpm exec nx test scaffold-mcp

# 代码检查和格式化
pnpm lint              # 检查问题
pnpm lint:fix          # 自动修复问题
pnpm format            # 格式化代码
pnpm format:check      # 检查格式化情况

# 类型检查
pnpm typecheck
pnpm exec nx typecheck scaffold-mcp

# 可视化项目图
pnpm exec nx graph

高级用法

# 预览发布（试运行）
pnpm release:dry-run

# 发布到npm
pnpm release

📚 详细文档

Scaffold MCP

• Scaffold MCP指南 - 脚手架MCP服务器的完整指南
• 如何使用命令提示 - 使用斜杠命令提示的分步指南

Architect MCP

• Architect MCP指南 - 架构和规则MCP服务器的完整指南
• 设计模式概述 - 设计模式系统的高级解释
• 规则概述 - 编码规则系统的详细指南

通用文档

• 贡献指南 - 如何为该项目做出贡献
• 发布指南 - 发布和版本控制工作流程

🔧 技术细节

开发工作流程

AI代码工具包的各个包协同工作，为AI编码代理创建了一个完整的开发工作流程。以下是它们的集成方式：

完整工作流程：从项目创建到代码审查

1. 项目初始化 (scaffold-mcp)
   ↓
   scaffold-mcp boilerplate create → 使用模板创建项目
   ↓
   结果: 项目包含来自模板的architect.yaml + RULES.yaml

2. 获取设计指导 (architect-mcp)
   ↓
   architect-mcp get-file-design-pattern → 显示文件的设计模式
   ↓
   结果: AI代理了解要遵循的架构模式

3. 编写代码 (AI代理)
   ↓
   代理按照设计模式编写代码
   ↓
   结果: 代码实现

4. 代码审查 (architect-mcp)
   ↓
   architect-mcp review-code-change → 根据规则进行验证
   ↓
   结果: 识别违规情况并提供反馈

5. 添加功能 (scaffold-mcp)
   ↓
   scaffold-mcp scaffold add → 添加新功能/组件
   ↓
   结果: 遵循模式的一致代码

它们如何协同工作

scaffold-mcp 和 architect-mcp 相互补充：

集成点：

1. 共享模板：两者使用相同的模板结构

   templates/nextjs-15/
   ├── scaffold.yaml         ← scaffold-mcp: 定义模板/功能
   ├── architect.yaml        ← architect-mcp: 定义设计模式
   └── RULES.yaml            ← architect-mcp: 定义编码规则
   

2. 项目配置：项目通过 project.json 引用模板

   {
     "name": "my-app",
     "sourceTemplate": "nextjs-15"
   }
   

3. 工作流程阶段：

   • 编码前：scaffold-mcp生成模板 → architect-mcp显示模式
   • 编码过程中：architect-mcp提供指导 → AI代理编写代码
   • 编码后：architect-mcp审查代码 → 识别违规情况
   • 迭代：scaffold-mcp添加功能 → architect-mcp验证

示例：构建Next.js应用程序

步骤1：创建项目

scaffold-mcp boilerplate create scaffold-nextjs-app \
  --vars '{"appName":"my-store","withDrizzle":true}'

结果：使用Next.js结构、architect.yaml和RULES.yaml创建项目

步骤2：理解模式（在编写自定义代码之前）

architect-mcp get-file-design-pattern apps/my-store/src/app/products/page.tsx

结果：显示 "Next.js应用路由模式" 和适用规则

步骤3：添加功能（标准功能）

scaffold-mcp scaffold add scaffold-nextjs-route \
  --project apps/my-store \
  --vars '{"routePath":"products","pageTitle":"Products"}'

结果：按照模板模式创建路由

步骤4：编写自定义代码（AI代理编写业务逻辑）

// AI代理按照显示的模式添加产品获取逻辑
export default async function ProductsPage() {
  const products = await fetchProducts(); // 自定义逻辑
  return <div>{/* 渲染产品 */}</div>;
}

步骤5：代码审查

architect-mcp review-code-change apps/my-store/src/app/products/page.tsx

结果：根据RULES.yaml进行验证（命名导出、错误处理等）

这种方法为何有效

1. 模板作为单一事实来源：两个工具都从相同的模板定义中读取
2. 关注点分离：
   • scaffold-mcp：生成重复性代码
   • architect-mcp：指导独特代码
3. 渐进式增强：
   • 从脚手架开始（快速、一致）
   • 添加自定义逻辑（AI辅助、模式指导）
   • 验证输出（自动化审查）
4. 反馈循环：审查为未来的脚手架和模式提供信息

与AI编码代理一起使用

Claude Desktop配置（两个MCP服务器）：

{
  "mcpServers": {
    "scaffold-mcp": {
      "command": "npx",
      "args": ["-y", "@agiflowai/scaffold-mcp", "mcp-serve", "--admin-enable"]
    },
    "architect-mcp": {
      "command": "npx",
      "args": [
        "-y", "@agiflowai/architect-mcp", "mcp-serve",
        "--admin-enable",
        "--design-pattern-tool", "claude-code",
        "--review-tool", "claude-code"
      ]
    }
  }
}

代理说明（在CLAUDE.md或类似文件中）：

创建新功能时：
1. 如果存在标准功能，使用scaffold-mcp生成模板
2. 在编写自定义代码之前，使用architect-mcp理解模式
3. 在提交代码之前，使用architect-mcp审查代码

更新模式时：
1. 使用architect-mcp管理工具更新architect.yaml和RULES.yaml
2. 使用scaffold-mcp管理工具更新scaffold.yaml模板

📦 安装指南

包介绍

@agiflowai/scaffold-mcp

用于使用模板和功能生成器搭建应用程序的MCP服务器。

主要特性：

• 🚀 从模板创建项目
• 🎯 为现有项目添加功能（页面、组件、服务）
• 📦 模板管理（初始化、从仓库添加）
• 🔧 内置模板：Next.js 15、Vite + React
• 🌐 多种传输模式：stdio、HTTP、SSE
• 💻 独立命令行模式
• 🎙️ 为AI编码代理提供斜杠命令提示

查看完整文档 →

@agiflowai/architect-mcp

用于软件架构设计、代码质量强制执行和设计模式指导的MCP服务器。

主要特性：

• 🎨 为特定文件提供设计模式指导
• ✅ 根据模板特定规则进行代码审查
• 📐 架构模式 (architect.yaml)
• 📋 编码标准和规则 (RULES.yaml)
• 🤖 可选的使用Claude Code CLI进行大语言模型驱动的分析
• 🌐 多种传输模式：stdio、HTTP、SSE
• 💻 独立命令行模式
• 🔧 用于模式和规则管理的管理工具

查看完整文档 →

📄 许可证

AGPL-3.0 © AgiflowIO

由AgiflowIO团队用心打造

• 🐛 报告问题
• 💬 讨论
• 🌐 网站