GarenCode Design

GarenCode Design MCP Server provides an AI-driven design workflow that lets you analyze requirements, decompose components, generate implementation code, and integrate modules into a cohesive frontend design. It enables you to run design-related tasks locally or remotely via MCP clients, using private component libraries and multi-model AI support to boost consistency and productivity.

How to use

You connect your MCP client to the GarenCode Design MCP Server to start an end‑to‑end design workflow. Begin by submitting a user need or design request through your MCP client. The server analyzes the request, breaks it into manageable design blocks, generates tailored design strategies, and then produces code across blocks that you can assemble into a complete page or feature. You can iterate on blocks, test integration, and obtain a deliverable that fits your private component library and design system.

Typical usage pattern with an MCP client: you request a component or page design, the server returns structured design blocks and code, you refine prompts or constraints, and finally you integrate the generated blocks into your application. You can reuse private components and ensure consistency with your design tokens and repository standards.

How to install

Prerequisites you need to prepare before installation: Node.js and npm (or pnpm) installed on your system, a Git client, and access to the terminal. Ensure you have a suitable environment for running MCP services locally.

Step 1: Clone the project and install dependencies. Execute these commands in your terminal.

git clone https://github.com/lyw405/mcp-garendesign.git
cd mcp-garendesign

npm install
# or use pnpm
pnpm install

How to install (continued)

Step 2: Configure AI models and private component library if needed. Copy example configuration files and edit them with your keys and preferences.

cp data/config.example.json data/config.json
cp data/codegens.example.json data/codegens.json

# Open and edit data/config.json to add your API keys and model choices.

How to install (continued)

Step 3: Start the MCP server. You have two practical options depending on how you prefer to run the service.

# Option A: use the provided startup script if you want a quick standalone run
chmod +x scripts/start-standalone.sh
./scripts/start-standalone.sh

# Option B: build and run manually
npm run build
npm run mcp:dev

Configuration and running

The server exposes an MCP configuration for a local stdio-based run. Use the following configuration to connect a local MCP client via stdio. This starts a shell that changes to your project directory and runs the MCP development command.

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

Available tools

design_component

Design a frontend component by supplying a textual prompt. The tool returns a structured design output and generated code tailored to the specified framework and language.

design_block

Design a complex page or section by decomposing it into manageable blocks based on your prompt. The tool outputs block definitions and integration guidance.

query_component

Query details about a specific component, such as its API, props, or usage scenarios, to inform further design or integration steps.