🚀 mcp-garendesign - AI-driven component design and code generation toolkit

<div align="center">

<img src="assets/garen.jpeg" alt="God-King Garen - mcp-garendesign project logo" width="400" /> <br> <em>God-King Garen - a symbol of powerful AI design capability</em>

From requirements to code: an intelligent automated pipeline 🎯

</div>

<div align="center">

</div>

---

📋 Table of Contents

• 🎯 Overview
• 🔄 Core Workflow
• 💡 Key Features
• 🏗️ Architecture
• 🚀 Getting Started
• 📚 Usage Guide

---

🎯 Overview

mcp-garendesign is an AI-driven component design service based on the Model Context Protocol (MCP). It focuses on intelligent design and generation of frontend components, enabling end-to-end automation from user requirements to a complete code project.

🌟 Core Value

• 🚀 Productivity: Improve development efficiency by 50%+
• 🎯 Quality: Use shared state and a shared component library
• 🔧 Maintainability: Standardized code structure and API design
• 🎨 Consistency: Unified design system and component library

---

🔄 Core Workflow

graph TD
    A[🎤 User Requirements] --> B[🔍 Requirement Analysis]
    B --> C[🧩 Decompose into Components]
    C --> D[🎨 Component Content & API Design]
    D --> E[⚡ IDE Code Generation]
    E --> F[🔄 Iterative API/Design Validation]
    F --> G[🔗 Module Integration Design]
    G --> H[🚀 IDE Code Integration]

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

📝 Workflow Details

1️⃣ User Requirements 🎤

Users describe their needs in natural language. The system extracts the core requirements.

2️⃣ Requirement Analysis 🔍

Analyze and structure requirements: functional, non-functional, user stories, and business logic.

3️⃣ Decomposition 🧩

Split into manageable components, determine component types, complexity, and dependencies.

4️⃣ Component Content & API Design 🎨

Design detailed specs for each component: Props, Events, Slots, and styles.

5️⃣ IDE Code Generation ⚡

Generate code from the design: component files, type definitions, styles, tests.

6️⃣ Iterative Validation 🔄

Monitor generation status, adjust polling intervals, handle timeouts and errors.

7️⃣ Module Integration 🔗

Integrate components into full pages: layout, data flow, and state management.

8️⃣ IDE Code Integration 🚀

Produce a complete project: structure, configs, build scripts, deployment.

---

💡 Key Features

🎯 Intelligent Requirement Understanding

• NLP: Understand user intent
• Context awareness: Map to business scenarios
• Requirement validation: Ensure completeness

🧩 Smart Component Decomposition

• Complexity analysis: Auto-evaluate component complexity
• Dependency management: Handle component dependencies smartly
• Token optimization: Efficient AI usage

⚡ Efficient Code Generation

• Multi-framework: Vue, React, Angular
• Type safety: Full TypeScript support
• Best practices: Industry standards

🔄 Intelligent Monitoring

• Adaptive polling: Auto-adjust frequency
• Error recovery: Retry mechanisms
• Performance: Resource optimization

🎨 Design System Integration

• Component libraries: Private library integration
• Design guidelines: Unified standards
• Theming: Multiple themes

---

🏗️ Architecture

graph TB
    subgraph "Frontend Layer"
        A[User Interface]
        B[IDE Plugin]
    end

    subgraph "Service Layer"
        C[MCP Server]
        D[Requirement Analysis Engine]
        E[Component Design Engine]
        F[Code Generation Engine]
        G[Polling Controller]
    end

    subgraph "AI Layer"
        H[AI Model Integration]
        I[Multi-model Support]
        J[Streaming]
    end

    subgraph "Data Layer"
        K[Component Knowledge Base]
        L[Design Template Library]
        M[Configuration Management]
    end

    A --> C
    B --> C
    C --> D
    C --> E
    C --> F
    C --> G
    D --> H
    E --> H
    F --> H
    G --> H
    H --> I
    H --> J
    D --> K
    E --> L
    F --> M

---

🚀 Getting Started

1. Install dependencies

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

# Install dependencies
npm install

# Or use pnpm
pnpm install

2. Configure environment

# Copy configuration files (note filenames)
cp data/config.exmple.json data/config.json
cp data/codegens.example.json data/codegens.json

3. Configure AI providers

Edit data/config.json:

{
  "providers": [
    {
      "provider": "anthropic",
      "models": [
        {
          "model": "claude-3-7-sonnet-latest",
          "title": "Claude 3.7 Sonnet",
          "baseURL": "https://api.anthropic.com",
          "features": [],
          "apiKey": "your-api-key"
        }
      ]
    }
  ]
}

Supported AI providers:

• Anthropic Claude: https://api.anthropic.com or proxies
• OpenAI GPT: https://api.openai.com/v1 or proxies
• DeepSeek: https://api.deepseek.com or proxies
• Ollama: http://localhost:11434 (local models)

4. Start the service

# Quick start
./scripts/start.sh

# Or run manually
npm run build
npm start

# Development mode
npm run dev

5. Use the workflow

import { WorkflowEngine } from '@mcp-garendesign/core';

const workflow = new WorkflowEngine();

const result = await workflow.process({
  requirement: 'Create a user management page',
  framework: 'vue',
  style: 'modern',
});

---

📚 Usage Guide

MCP Tools

design_component

Design frontend components from user requirements.

{
  "name": "design_component",
  "arguments": {
    "prompt": [
      {
        "type": "text",
        "text": "Create a product card component showing product image, name, price, and a buy button"
      }
    ]
  }
}

query_component

Query detailed information for a component.

{
  "name": "query_component",
  "arguments": {
    "componentName": "Button"
  }
}

Basic Example

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

const client = new MCPClient({
  name: 'My MCP 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' }],
  },
});

🗂️ Project Structure

mcp-garendesign/
├── src/
│   ├── mcp-server.ts          # MCP server entry
│   ├── tools/                 # MCP tools
│   │   ├── design-component.ts
│   │   └── query-component.ts
│   ├── core/                  # Core logic
│   │   ├── blocks/
│   │   ├── parsers/
│   │   ├── query/
│   │   └── strategy/
│   ├── shared/                # Shared utils
│   │   ├── config/
│   │   ├── formatters/
│   │   └── validators/
│   ├── types/                 # Type definitions
│   └── resources/             # MCP resources
├── data/                      # Configuration files
│   ├── codegens.json          # Component library config
│   └── config.json            # AI providers config
├── docs/                      # Documentation
│   └── GAREN_MCP_New_Version_Plan.md # Release plan
├── scripts/                   # Scripts
└── package.json

---

🔧 Troubleshooting

Common Issues

1. Configuration files not found

   # Ensure configuration files exist
   ls data/config.json
   ls data/codegens.json
   

2. Invalid API key

   # Validate configuration
   npm run validate
   

3. Service failed to start

   # Check dependencies
   npm install
   
   # Rebuild
   npm run build
   

4. Permission issues

   # Make the start script executable
   chmod +x scripts/start.sh
   

Debug mode

# Enable debug
export DEBUG=true
export LOG_LEVEL=debug

# Start the service
npm run dev

---

🛠️ Development Guide

Add a new tool

1. Create a tool file under src/tools/
2. Register it in src/mcp-server.ts
3. Update the tool handlers

Add a new resource

1. Add a resource function in src/resources/index.ts
2. Register it in src/mcp-server.ts
3. Update resource handlers

---

📄 License

MIT License

---

<div align="center">

mcp-garendesign - Make AI a powerful assistant for every engineering team 🤖

</div>