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團隊用心打造

• 🐛 報告問題
• 💬 討論
• 🌐 網站