MCP Garendesign

🚀 GarenCode Design - AI駆動のインテリジェントコンポーネント設計プラットフォーム

🎯 要件からコードまで、AI駆動のインテリジェント設計パイプライン
⚡ すべての開発者がコンポーネント設計の達人になれるように

📋 目次

• 🌟 プロジェクト紹介
• 🎨 設計フロー
• ⚙️ プロジェクト設定
• 🔧 IDE 統合
• 🚀 クイックスタート
• 📚 使用ガイド
• 🔮 将来の計画
• 🏗️ プロジェクトアーキテクチャ

🌟 プロジェクト紹介

🎯 核心理念

GarenCode Design は、MCP (Model Context Protocol) をベースとしたAI駆動のコンポーネント設計プラットフォームです。要件分析からコード生成まで、すべての開発者が簡単に高品質のフロントエンドコンポーネントを作成できるように、全行程をインテリジェント化しています。

✨ 主要機能

🏆 技術的な優位性

• 🚀 開発効率を50%以上向上 - 要件からコードまでの自動化パイプラインにより、開発効率を大幅に向上させます。
• 🎯 設計の一貫性 - 統一されたコンポーネントライブラリと設計規範により、設計の一貫性を保ちます。
• 🔧 高い保守性 - 標準化されたコード構造とAPI設計により、コードの保守性を向上させます。
• ⚡ 多モデルサポート - Claude、GPT、DeepSeek、Ollamaなどの主流AIモデルをサポートします。

🎨 設計フロー

🔄 核心ワークフロー

graph LR
    A[🎤 ユーザー要件] --> B[🔍 要件分析]
    B --> C[🧩 コンポーネント分解]
    C --> D[🎨 設計戦略]
    D --> E[⚡ コード生成]
    E --> F[🔗 モジュール統合]
    F --> G[🚀 最終交付]

    style A fill:#ff6b6b,stroke:#333,stroke-width:3px
    style B fill:#4ecdc4,stroke:#333,stroke-width:3px
    style C fill:#45b7d1,stroke:#333,stroke-width:3px
    style D fill:#96ceb4,stroke:#333,stroke-width:3px
    style E fill:#feca57,stroke:#333,stroke-width:3px
    style F fill:#ff9ff3,stroke:#333,stroke-width:3px
    style G fill:#5f27cd,stroke:#333,stroke-width:3px

📝 詳細フロー説明

1️⃣ 要件分析フェーズ 🔍

// AIがユーザー要件をインテリジェントに分析
const analysis = await analyzeRequirement({
  userInput: '创建一个用户管理页面',
  context: '企业级后台管理系统',
  constraints: ['Vue 3', 'TypeScript', '私有组件库'],
});

2️⃣ 複雑度評価 📊

// コンポーネントの複雑度を自動評価
const complexity = await assessComplexity({
  requirements: analysis.requirements,
  businessLogic: analysis.businessLogic,
  uiComplexity: analysis.uiComplexity,
});
// 出力: { level: "complex", estimatedBlocks: 5, estimatedTokens: 8000 }

3️⃣ インテリジェント分解 🧩

// 複雑な要件を管理可能な設計ブロックに分解
const blocks = await decomposeToBlocks({
  requirements: analysis.requirements,
  complexity: complexity,
  designStrategy: 'block-based',
});
// 出力: [
//   { id: "user-list", type: "data-display", priority: "high" },
//   { id: "user-form", type: "form", priority: "medium" },
//   { id: "user-detail", type: "detail-view", priority: "low" }
// ]

4️⃣ 設計戦略生成 🎨

// 詳細な設計戦略を生成
const strategy = await generateDesignStrategy({
  blocks: blocks,
  componentLibrary: 'private-components',
  designSystem: 'garen-design-system',
});

5️⃣ ブロック単位の開発 ⚡

// 設計ブロックを1つずつ開発
for (const block of blocks) {
  const design = await designBlock({
    block: block,
    strategy: strategy,
    aiModel: getRecommendedModel('DESIGN'),
  });

  const code = await generateCode({
    design: design,
    framework: 'vue3',
    typescript: true,
  });
}

6️⃣ インテリジェント統合 🔗

// すべての設計ブロックを完全なページに統合
const integration = await integrateDesign({
  blocks: completedBlocks,
  layout: 'responsive',
  dataFlow: 'centralized',
});

⚙️ プロジェクト設定

📁 設定ファイル構造

data/
├── config.json              # 🎯 AIモデル設定（実際に使用）
├── config.example.json      # 📝 AI設定サンプル（機密情報を除く）
├── codegens.json            # 🧩 プライベートコンポーネントライブラリ設定（実際に使用）
└── codegens.example.json    # 📚 コンポーネントライブラリ設定サンプル

🔑 AIモデル設定

1. 設定ファイルのコピー

# サンプル設定ファイルをコピー
cp data/config.example.json data/config.json
cp data/codegens.example.json data/codegens.json

2. AIプロバイダーの設定

data/config.json を編集：

{
  "defaultModels": {
    "ANALYSIS": "claude-3-7-sonnet-latest",
    "DESIGN": "claude-3-5-sonnet-latest",
    "QUERY": "claude-3-5-sonnet-latest",
    "INTEGRATION": "claude-3-7-sonnet-latest"
  },
  "providers": [
    {
      "provider": "anthropic",
      "models": [
        {
          "model": "claude-3-5-sonnet-latest",
          "title": "Claude 3.5 Sonnet",
          "baseURL": "https://api.302.ai/v1",
          "features": ["reasoning", "creativity"],
          "apiKey": "sk-your-anthropic-api-key-here"
        }
      ]
    },
    {
      "provider": "openai",
      "models": [
        {
          "model": "gpt-4o",
          "title": "GPT-4o",
          "baseURL": "https://api.openai.com/v1",
          "features": ["vision", "reasoning", "creativity"],
          "apiKey": "sk-your-openai-api-key-here"
        }
      ]
    }
  ]
}

3. サポートされるAIプロバイダー

4. 設定の検証

# AI設定を検証
node scripts/validate-config.js

# モデル接続をテスト
node scripts/test-model-recommendation.js

🧩 プライベートコンポーネントライブラリ設定

data/codegens.json には、完全なプライベートコンポーネントライブラリの設定が含まれています：

[
  {
    "title": "Private Component Codegen",
    "description": "基于私有组件的代码生成器",
    "fullStack": "Vue",
    "rules": [
      {
        "type": "private-components",
        "description": "私有组件使用规则",
        "docs": {
          "组件名称": {
            "purpose": "使用目的",
            "usage": "项目中经常使用的场景描述",
            "props": {
              // props 参数相关
              "type": "",
              "size": ""
              ...
            }
          }
        }
      }
    ]
  }
]

🔧 IDE 統合

📝 MCP 設定ファイル

mcp-config.json ファイルを作成：

{
  "mcpServers": {
    "garencode-design": {
      "command": "/bin/zsh",
      "args": ["-c", "cd /path/to/your/project && npm run mcp:dev"]
    }
  }
}

🎯 使用方法

1. Cursor での使用

// Cursor で MCP ツールを呼び出す
const result = await mcp.callTool({
  name: 'design_component',
  arguments: {
    prompt: [
      {
        type: 'text',
        text: '创建一个用户管理页面，包含用户列表、搜索、新增/编辑功能',
      },
    ],
  },
});

2. VS Code での使用

// settings.json
{
  "mcp.servers": {
    "garencode-design": {
      "command": "node",
      "args": ["dist/mcp-server.js"],
      "cwd": "/path/to/garencode-design"
    }
  }
}

🚀 クイックスタート

1️⃣ 環境の準備

# プロジェクトをクローン
git clone https://github.com/lyw405/mcp-garendesign.git
cd mcp-garendesign

# 依存関係をインストール
npm install
# または pnpm を使用
pnpm install

2️⃣ 設定の設定

# 設定ファイルをコピー
cp data/config.example.json data/config.json
cp data/codegens.example.json data/codegens.json

# 設定ファイルを編集し、APIキーを入力
vim data/config.json

3️⃣ サービスの起動

# 起動スクリプトを使用
chmod +x scripts/start-standalone.sh
./scripts/start-standalone.sh

# または手動で起動
npm run build
npm run mcp:dev

4️⃣ インストールの検証

# 設定を検証
node scripts/validate-config.js

# モデル推薦をテスト
node scripts/test-model-recommendation.js

📚 使用ガイド

🎨 コンポーネント設計ツール

design_component

フロントエンドコンポーネントを設計：

{
  "name": "design_component",
  "arguments": {
    "prompt": [
      {
        "type": "text",
        "text": "创建一个产品卡片组件，包含图片、标题、价格和购买按钮"
      }
    ]
  }
}

design_block

複雑なページの単一ブロックを設計：

{
  "name": "design_block",
  "arguments": {
    "prompt": [
      {
        "type": "text",
        "text": "设计用户列表管理块，包含表格、搜索、分页功能"
      }
    ]
  }
}

query_component

コンポーネントの詳細情報を照会：

{
  "name": "query_component",
  "arguments": {
    "componentName": "das-button"
  }
}

🔄 完全なワークフローのサンプル

import { MCPClient } from '@modelcontextprotocol/sdk/client';

const client = new MCPClient({
  name: 'GarenCode Design Client',
  version: '1.0.0',
});

// サービスに接続
await client.connect({
  type: 'stdio',
  command: 'tsx',
  args: ['src/mcp-server.ts'],
});

// コンポーネントを設計
const result = await client.callTool({
  name: 'design_component',
  arguments: {
    prompt: [
      {
        type: 'text',
        text: '创建一个登录表单组件，包含用户名、密码输入框和登录按钮',
      },
    ],
  },
});

console.log('🎉 コンポーネント設計完了:', result);

🔮 将来の計画

🎯 現在の能力

✅ プライベートコンポーネントの再利用 - 完全なプライベートコンポーネントライブラリをサポートします。
✅ インテリジェント設計フロー - AI駆動のコンポーネント設計を実現します。
✅ 多モデルサポート - Claude、GPT、DeepSeek、Ollama をサポートします。
✅ 型安全 - 完全な TypeScript サポートを提供します。
✅ 設定管理 - 柔軟なAIモデル設定をサポートします。

🚀 近日公開予定

1️⃣ プライベートステート管理 🔄

// 将来の機能：自動ステート管理
const stateConfig = {
  globalState: {
    user: 'UserState',
    theme: 'ThemeState',
    language: 'LanguageState',
  },
  localState: {
    form: 'FormState',
    modal: 'ModalState',
  },
};

// AIが自動でステート管理コードを生成
const stateCode = await generateStateManagement({
  components: designedComponents,
  stateConfig: stateConfig,
  framework: 'pinia', // または vuex, zustand
});

2️⃣ グローバル属性の自動化 ⚙️

// 将来の機能：グローバル属性の自動注入
const globalProps = {
  theme: 'light | dark',
  language: 'zh-CN | en-US',
  permissions: 'admin | user | guest',
  device: 'desktop | mobile | tablet',
};

// AIが自動でコンポーネントにグローバル属性を注入
const enhancedComponents = await injectGlobalProps({
  components: designedComponents,
  globalProps: globalProps,
  injectionStrategy: 'automatic',
});

3️⃣ インテリジェントコード最適化 🧠

// 将来の機能：コードパフォーマンスの最適化
const optimization = await optimizeCode({
  components: generatedComponents,
  optimizationTargets: [
    'bundle-size',
    'runtime-performance',
    'memory-usage',
    'accessibility',
  ],
});

4️⃣ 設計システムの統合 🎨

// 将来の機能：設計システムの自動同期
const designSystem = await syncDesignSystem({
  components: designedComponents,
  designTokens: {
    colors: 'design-tokens/colors.json',
    typography: 'design-tokens/typography.json',
    spacing: 'design-tokens/spacing.json',
  },
  syncStrategy: 'real-time',
});

📅 開発ロードマップ

🏗️ プロジェクトアーキテクチャ

📁 ディレクトリ構造

mcp-garendesign/
├── 📁 src/
│   ├── 🚀 mcp-server.ts          # MCP サーバーのエントリーポイント
│   ├── 🛠️ tools/                 # MCP ツールの実装
│   │   ├── design/
│   │   │   ├── component.ts      # コンポーネント設計ツール
│   │   │   └── block.ts          # ブロック設計ツール
│   │   └── query/
│   │       └── component.ts      # コンポーネント照会ツール
│   ├── 🧠 core/                  # コアビジネスロジック
│   │   ├── design/               # 設計エンジン
│   │   │   ├── complexity-analyzer.ts
│   │   │   ├── strategy/
│   │   │   ├── blocks/
│   │   │   └── integration/
│   │   └── query/                # 照会エンジン
│   ├── ⚙️ config/                # 設定管理
│   │   ├── ai-client-adapter.ts  # AI クライアントアダプター
│   │   ├── model-manager.ts      # モデルマネージャー
│   │   ├── config-validator.ts   # 設定検証器
│   │   └── types.ts              # 設定タイプ定義
│   ├── 🎨 utils/                 # ユーティリティ関数
│   │   └── formatters/           # フォーマットツール
│   ├── 📚 resources/             # MCP リソース
│   └── 🏷️ types/                 # タイプ定義
├── 📁 data/                      # 設定ファイル
│   ├── config.json               # AI モデル設定
│   ├── config.example.json       # 設定サンプル
│   ├── codegens.json             # プライベートコンポーネントライブラリ設定
│   └── codegens.example.json     # コンポーネントライブラリ設定サンプル
├── 📁 scripts/                   # スクリプトファイル
├── 📁 docs/                      # ドキュメント
└── 📄 package.json

🔧 新しいツールの追加

1. ツールファイルの作成

// src/tools/design/new-tool.ts
export async function newTool(args: NewToolArgs): Promise<ToolResult> {
  // ツールの実装ロジック
  return {
    content: [
      {
        type: 'text',
        text: '工具执行结果',
      },
    ],
  };
}

2. ツールの登録

// src/mcp-server.ts
import { newTool } from './tools/design/new-tool.js';

// ツールリストに登録
tools: [
  // ... 他のツール
  {
    name: 'new_tool',
    description: '新工具描述',
    inputSchema: {
      type: 'object',
      properties: {
        // 入力パラメータ定義
      },
    },
  },
];

📚 新しいリソースの追加

1. リソース関数の作成

// src/resources/index.ts
export function getNewResource() {
  return {
    contents: [
      {
        type: 'text',
        text: '资源内容',
      },
    ],
  };
}

2. リソースの登録

// src/mcp-server.ts
import { getNewResource } from './resources/index.js';

// リソースリストに登録
resources: [
  // ... 他のリソース
  {
    uri: 'garencode://resources/new-resource',
    name: 'new_resource',
    description: '新资源描述',
    mimeType: 'text/plain',
  },
];

🧪 テスト

# テストを実行
npm test

# 設定を検証
node scripts/validate-config.js

# モデル推薦をテスト
node scripts/test-model-recommendation.js

🤝 コントリビューションガイド

すべての形式のコントリビューションを歓迎します！

🐛 問題の報告

問題を発見した場合は、Issueを作成 してください。

💡 機能リクエストの提出

新しい機能のアイデアがある場合は、Feature Requestを作成 してください。

🔧 コードの提出

1. プロジェクトをForkする
2. 機能ブランチを作成 (git checkout -b feature/amazing-feature)
3. 変更をコミット (git commit -m 'Add amazing feature')
4. ブランチにプッシュ (git push origin feature/amazing-feature)
5. Pull Requestを作成

📄 ライセンス

このプロジェクトは MIT ライセンス の下で公開されています。