MCP Garendesign

🚀 GarenCode Design - AI-Powered Intelligent Component Design Platform

⚔️ In the name of Garen, forge perfect designs ⚔️

🎯 From requirements to code, an AI-driven intelligent design pipeline
⚡ Empower every developer to become a component design master

📋 Table of Contents

• 🌟 Project Introduction
• 🎨 Design Process
• ⚙️ Project Configuration
• 🔧 IDE Integration
• 🚀 Quick Start
• 📚 Usage Guide
• 🔮 Future Plans
• 🏗️ Project Architecture

🌟 Project Introduction

🎯 Core Concept

GarenCode Design is an AI-driven component design platform based on MCP (Model Context Protocol). We are committed to enabling every developer to easily create high-quality front-end components, with full-process intelligence from requirement analysis to code generation.

✨ Core Features

🏆 Technical Advantages

• 🚀 Over 50% improvement in development efficiency - An automated pipeline from requirements to code.
• 🎯 Design consistency - A unified component library and design specifications.
• 🔧 High maintainability - Standardized code structure and API design.
• ⚡ Support for multiple models - Mainstream AI models such as Claude, GPT, DeepSeek, and Ollama.

🎨 Design Process

🔄 Core Workflow

graph LR
    A[🎤 User Requirements] --> B[🔍 Requirement Analysis]
    B --> C[🧩 Component Decomposition]
    C --> D[🎨 Design Strategy]
    D --> E[⚡ Code Generation]
    E --> F[🔗 Module Integration]
    F --> G[🚀 Final Delivery]

    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

📝 Detailed Process Explanation

1️⃣ Requirement Analysis Phase 🔍

// AI intelligently analyzes user requirements
const analysis = await analyzeRequirement({
  userInput: 'Create a user management page',
  context: 'Enterprise-level background management system',
  constraints: ['Vue 3', 'TypeScript', 'Private component library'],
});

2️⃣ Complexity Assessment 📊

// Automatically assesses component complexity
const complexity = await assessComplexity({
  requirements: analysis.requirements,
  businessLogic: analysis.businessLogic,
  uiComplexity: analysis.uiComplexity,
});
// Output: { level: "complex", estimatedBlocks: 5, estimatedTokens: 8000 }

3️⃣ Intelligent Decomposition 🧩

// Decomposes complex requirements into manageable design blocks
const blocks = await decomposeToBlocks({
  requirements: analysis.requirements,
  complexity: complexity,
  designStrategy: 'block-based',
});
// Output: [
//   { id: "user-list", type: "data-display", priority: "high" },
//   { id: "user-form", type: "form", priority: "medium" },
//   { id: "user-detail", type: "detail-view", priority: "low" }
// ]

4️⃣ Design Strategy Generation 🎨

// Generates a detailed design strategy
const strategy = await generateDesignStrategy({
  blocks: blocks,
  componentLibrary: 'private-components',
  designSystem: 'garen-design-system',
});

5️⃣ Block-by-Block Development ⚡

// Develops each design block
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️⃣ Intelligent Integration 🔗

// Integrates all design blocks into a complete page
const integration = await integrateDesign({
  blocks: completedBlocks,
  layout: 'responsive',
  dataFlow: 'centralized',
});

⚙️ Project Configuration

📁 Configuration File Structure

data/
├── config.json              # 🎯 AI model configuration (actual use)
├── config.example.json      # 📝 AI configuration example (sensitive information removed)
├── codegens.json            # 🧩 Private component library configuration (actual use)
└── codegens.example.json    # 📚 Component library configuration example

🔑 AI Model Configuration

1. Copy the configuration files

# Copy the example configuration files
cp data/config.example.json data/config.json
cp data/codegens.example.json data/codegens.json

2. Configure AI providers

Edit 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. Supported AI Providers

4. Validate the configuration

# Validate the AI configuration
node scripts/validate-config.js

# Test the model connection
node scripts/test-model-recommendation.js

🧩 Private Component Library Configuration

data/codegens.json contains the complete configuration for the private component library:

[
  {
    "title": "Private Component Codegen",
    "description": "Code generator based on private components",
    "fullStack": "Vue",
    "rules": [
      {
        "type": "private-components",
        "description": "Usage rules for private components",
        "docs": {
          "Component Name": {
            "purpose": "Purpose of use",
            "usage": "Description of frequently used scenarios in the project",
            "props": {
              // Related to props parameters
              "type": "",
              "size": ""
              ...
            }
          }
        }
      }
    ]
  }
]

🔧 IDE Integration

📝 MCP Configuration File

Create a mcp-config.json file:

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

🎯 Usage

1. Use in Cursor

// Call the MCP tool in Cursor
const result = await mcp.callTool({
  name: 'design_component',
  arguments: {
    prompt: [
      {
        type: 'text',
        text: 'Create a user management page, including a user list, search, and add/edit functions',
      },
    ],
  },
});

2. Use in VS Code

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

🚀 Quick Start

1️⃣ Environment Preparation

# Clone the project
git clone https://github.com/lyw405/mcp-garendesign.git
cd mcp-garendesign

# Install dependencies
npm install
# Or use pnpm
pnpm install

2️⃣ Configuration Settings

# Copy the configuration files
cp data/config.example.json data/config.json
cp data/codegens.example.json data/codegens.json

# Edit the configuration files and fill in your API keys
vim data/config.json

3️⃣ Start the Service

# Use the startup script
chmod +x scripts/start-standalone.sh
./scripts/start-standalone.sh

# Or start manually
npm run build
npm run mcp:dev

4️⃣ Verify the Installation

# Validate the configuration
node scripts/validate-config.js

# Test the model recommendation
node scripts/test-model-recommendation.js

📚 Usage Guide

🎨 Component Design Tools

design_component

Design front-end components:

{
  "name": "design_component",
  "arguments": {
    "prompt": [
      {
        "type": "text",
        "text": "Create a product card component, including an image, title, price, and purchase button"
      }
    ]
  }
}

design_block

Design a single block of a complex page:

{
  "name": "design_block",
  "arguments": {
    "prompt": [
      {
        "type": "text",
        "text": "Design a user list management block, including a table, search, and pagination functions"
      }
    ]
  }
}

query_component

Query detailed information about a component:

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

🔄 Complete Workflow Example

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

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

// Connect to the service
await client.connect({
  type: 'stdio',
  command: 'tsx',
  args: ['src/mcp-server.ts'],
});

// Design a component
const result = await client.callTool({
  name: 'design_component',
  arguments: {
    prompt: [
      {
        type: 'text',
        text: 'Create a login form component, including username and password input fields and a login button',
      },
    ],
  },
});

console.log('🎉 Component design completed:', result);

🔮 Future Plans

🎯 Current Capabilities

✅ Reuse of private components - Full support for a private component library.
✅ Intelligent design process - AI-driven component design.
✅ Support for multiple models - Claude, GPT, DeepSeek, Ollama.
✅ Type safety - Full support for TypeScript.
✅ Configuration management - Flexible AI model configuration.

🚀 Upcoming Features

1️⃣ Private State Management 🔄

// Future feature: Automatic state management
const stateConfig = {
  globalState: {
    user: 'UserState',
    theme: 'ThemeState',
    language: 'LanguageState',
  },
  localState: {
    form: 'FormState',
    modal: 'ModalState',
  },
};

// AI automatically generates state management code
const stateCode = await generateStateManagement({
  components: designedComponents,
  stateConfig: stateConfig,
  framework: 'pinia', // Or vuex, zustand
});

2️⃣ Global Attribute Automation ⚙️

// Future feature: Automatic injection of global attributes
const globalProps = {
  theme: 'light | dark',
  language: 'zh-CN | en-US',
  permissions: 'admin | user | guest',
  device: 'desktop | mobile | tablet',
};

// AI automatically injects global attributes into components
const enhancedComponents = await injectGlobalProps({
  components: designedComponents,
  globalProps: globalProps,
  injectionStrategy: 'automatic',
});

3️⃣ Intelligent Code Optimization 🧠

// Future feature: Code performance optimization
const optimization = await optimizeCode({
  components: generatedComponents,
  optimizationTargets: [
    'bundle-size',
    'runtime-performance',
    'memory-usage',
    'accessibility',
  ],
});

4️⃣ Design System Integration 🎨

// Future feature: Automatic synchronization of the design system
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',
});

📅 Development Roadmap

🏗️ Project Architecture

📁 Directory Structure

mcp-garendesign/
├── 📁 src/
│   ├── 🚀 mcp-server.ts          # MCP server entry
│   ├── 🛠️ tools/                 # MCP tool implementation
│   │   ├── design/
│   │   │   ├── component.ts      # Component design tool
│   │   │   └── block.ts          # Block design tool
│   │   └── query/
│   │       └── component.ts      # Component query tool
│   ├── 🧠 core/                  # Core business logic
│   │   ├── design/               # Design engine
│   │   │   ├── complexity-analyzer.ts
│   │   │   ├── strategy/
│   │   │   ├── blocks/
│   │   │   └── integration/
│   │   └── query/                # Query engine
│   ├── ⚙️ config/                # Configuration management
│   │   ├── ai-client-adapter.ts  # AI client adapter
│   │   ├── model-manager.ts      # Model manager
│   │   ├── config-validator.ts   # Configuration validator
│   │   └── types.ts              # Configuration type definition
│   ├── 🎨 utils/                 # Utility functions
│   │   └── formatters/           # Formatting tools
│   ├── 📚 resources/             # MCP resources
│   └── 🏷️ types/                 # Type definitions
├── 📁 data/                      # Configuration files
│   ├── config.json               # AI model configuration
│   ├── config.example.json       # Configuration example
│   ├── codegens.json             # Private component library configuration
│   └── codegens.example.json     # Component library configuration example
├── 📁 scripts/                   # Script files
├── 📁 docs/                      # Documentation
└── 📄 package.json

🔧 Adding New Tools

1. Create a tool file

// src/tools/design/new-tool.ts
export async function newTool(args: NewToolArgs): Promise<ToolResult> {
  // Tool implementation logic
  return {
    content: [
      {
        type: 'text',
        text: 'Tool execution result',
      },
    ],
  };
}

2. Register the tool

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

// Register in the tool list
tools: [
  // ... Other tools
  {
    name: 'new_tool',
    description: 'New tool description',
    inputSchema: {
      type: 'object',
      properties: {
        // Input parameter definition
      },
    },
  },
];

📚 Adding New Resources

1. Create a resource function

// src/resources/index.ts
export function getNewResource() {
  return {
    contents: [
      {
        type: 'text',
        text: 'Resource content',
      },
    ],
  };
}

2. Register the resource

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

// Register in the resource list
resources: [
  // ... Other resources
  {
    uri: 'garencode://resources/new-resource',
    name: 'new_resource',
    description: 'New resource description',
    mimeType: 'text/plain',
  },
];

🧪 Testing

# Run tests
npm test

# Validate the configuration
node scripts/validate-config.js

# Test the model recommendation
node scripts/test-model-recommendation.js

🤝 Contribution Guidelines

We welcome all forms of contribution!

🐛 Reporting Issues

If you find an issue, please create an Issue.

💡 Submitting Feature Requests

If you have an idea for a new feature, please create a Feature Request.

🔧 Submitting Code

1. Fork the project.
2. Create a feature branch (git checkout -b feature/amazing-feature).
3. Commit your changes (git commit -m 'Add amazing feature').
4. Push to the branch (git push origin feature/amazing-feature).
5. Create a Pull Request.

📄 License

This project is licensed under the MIT License.