Aicode Toolkit

🚀 AIコードツールキット

スキャフォールディング、アーキテクチャパターン、検証ルールを使用して、AIコーディングエージェントの機能を拡張します。

このツールキットは、Model Context Protocol (MCP) のサーバーとツールのコレクションで、AIコーディングエージェントが一貫性を維持し、規約に従い、コードベースとともに拡張できるように支援します。

🚀 クイックスタート

前提条件

• Node.js: >= 18 (LTS推奨)
• パッケージマネージャー: 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: CLIとして使用する

# グローバルにインストールまたは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、またはスタンドアロンCLI。
• 📦 組み込みテンプレート: Next.js 15 with 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 + App Router + TypeScript + Tailwind CSS 4 + Storybook + オプションのDrizzle ORM
  • ボイラープレート: 完全なアプリケーションセットアップ
  • 機能: ルート、コンポーネント、APIルート、認証、サービスなど

✨ 主な機能

1. 🏗️ スキャフォールディングテンプレート

テンプレートと大規模言語モデル (LLM) を組み合わせて、内部規約に沿った標準化されたコードを生成し、メンテナンスオーバーヘッドを削減します。

2. 🎨 アーキテクチャ + デザインパターン

設定よりも規約を重視することで拡張性が向上します。Ruby on RailsやAngularのように、明確なアプローチにより、コードが予測可能になり、人間とAIエージェントの両方にとって使いやすくなります。

3. ✅ ルール

事前ガイダンスと事後検証により、一貫した出力を実現します。ルールは、プログラムによるチェック (定量的または定性的) を提供し、プロセスを強制実行します。

💻 使用例

基本的な使用法

# 新しいNext.jsプロジェクトの作成
scaffold-mcp boilerplate create scaffold-nextjs-app \
  --vars '{"appName":"my-store","withDrizzle":true}'

高度な使用法

# 既存のNext.jsプロジェクトにルートを追加
scaffold-mcp scaffold add scaffold-nextjs-route \
  --project apps/my-store \
  --vars '{"routePath":"products","pageTitle":"Products"}'

📚 ドキュメント

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が検証

📦 パッケージ

@agiflowai/scaffold-mcp

ボイラープレートテンプレートと機能ジェネレーターを使用してアプリケーションをスキャフォールディングするMCPサーバーです。 主要な機能:

• 🚀 ボイラープレートテンプレートからプロジェクトを作成
• 🎯 既存のプロジェクトに機能 (ページ、コンポーネント、サービス) を追加
• 📦 テンプレート管理 (初期化、リポジトリからの追加)
• 🔧 組み込みテンプレート: Next.js 15、Vite + React
• 🌐 複数のトランスポートモード: stdio、HTTP、SSE
• 💻 スタンドアロンCLIモード
• 🎙️ AIコーディングエージェント用のスラッシュコマンドプロンプト

完全なドキュメントを表示 →

@agiflowai/architect-mcp

ソフトウェアアーキテクチャ設計、コード品質の強制、デザインパターンのガイダンスを行うMCPサーバーです。 主要な機能:

• 🎨 特定のファイルのデザインパターンガイダンス
• ✅ テンプレート固有のルールに対するコードレビュー
• 📐 アーキテクチャパターン (architect.yaml)
• 📋 コーディング標準とルール (RULES.yaml)
• 🤖 Claude Code CLIを使用したオプションのLLMパワード分析
• 🌐 複数のトランスポートモード: stdio、HTTP、SSE
• 💻 スタンドアロンCLIモード
• 🔧 パターンとルール管理用の管理ツール

完全なドキュメントを表示 →

📄 ライセンス

AGPL-3.0 © AgiflowIO

AgiflowIOチームによる愛と情熱で作られました

• 🐛 問題の報告
• 💬 ディスカッション
• 🌐 ウェブサイト