mcp-garendesign

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

From requirements to code: an intelligent automated pipeline 🎯

📋 Table of Contents

🎯 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

📝 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

🚀 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

Configuration files not found
# Ensure configuration files exist ls data/config.json ls data/codegens.json
Invalid API key
# Validate configuration npm run validate
Service failed to start
# Check dependencies npm install # Rebuild npm run build
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

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

Add a new resource

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

📄 License

MIT License

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

Install Server

HTTP connection URL

security – no known vulnerabilities

license - not found

quality - confirmed to work

How are these scores calculated?

Tools

Enables AI-driven frontend component design and code generation from natural language requirements. Supports Vue, React, and Angular with intelligent component decomposition, API design, and complete project generation.

Related MCP Servers

Magic Component Platform (MCP)
21st-dev
A
security
F
license
A
quality
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Last updated -
3
4,307
3,260
TypeScript
Magic Component Platform
oyasimi1209
A
security
F
license
A
quality
AI-driven tool that helps developers create beautiful UI components instantly through natural language descriptions, integrating with popular IDEs like Cursor, Windsurf, and VSCode.
Last updated -
3
2
21st.dev Magic AI Agent
zackbissell
A
security
F
license
A
quality
A powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions.
Last updated -
4
4,307
TypeScript
Browser Tools MCP Extension
Winds-AI
-
security
F
license
-
quality
Enables AI tools to interact with your browser for enhanced frontend development, providing context-rich capabilities like API call analysis, screenshot capture, element inspection, and API testing with automatic authentication.
Last updated -
3
JavaScript

View all related MCP servers