home / mcp / gemini ui design mcp server

Gemini UI Design MCP Server

Gemini MCP server with custom json config for integration with Warp Terminal

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "bobvasic-gemini-mcp-server": {
      "command": "node",
      "args": [
        "${HOME}/gemini-ui-design-server/index.js"
      ],
      "env": {
        "GEMINI_API_KEY": "YOUR_API_KEY_HERE"
      }
    }
  }
}

You can use the Gemini UI Design Server to collaborate with Gemini 2.5 PRO for enterprise-grade UI/UX design, component generation, and production-ready frontend code. It acts as an MCP server that connects Claude AI in Warp Terminal to deliver design guidance, architecture advice, and generated frontend artifacts in a secure, production-ready workflow.

How to use

You interact with the Gemini UI Design Server through an MCP client to request design components, review implementations for accessibility and quality, generate frontend code, and get architecture guidance. Start a session, pick a tool, and provide detailed requirements. The server returns structured outputs that you can directly integrate into your frontend projects or design systems.

How to install

Prerequisites: Node.js version 18 or newer, Warp Terminal, and a Gemini API key.

1) Clone the project to your workstation.

2) Install dependencies.

3) Make the launcher script executable.

4) Prepare the MCP configuration as described in the setup steps.

Configuration and startup

# Automated setup (preferred if you have your Gemini API key)
./setup.sh YOUR_GEMINI_API_KEY
```

```
# Manual Warp MCP configuration (JSON payload is shown below)
{
  "mcpServers": {
    "gemini-ui-designer": {
      "command": "node",
      "args": ["${HOME}/gemini-ui-design-server/index.js"],
      "env": {
        "GEMINI_API_KEY": "YOUR_API_KEY_HERE"
      }
    }
  }
}
```

Restart Warp Terminal to activate the MCP server. You can replace YOUR_GEMINI_API_KEY with your actual Gemini API key.

Security and testing

The server enforces environment isolation, validates API keys at startup, sanitizes errors, and audits dependencies to reduce vulnerabilities. If you need to report security concerns, contact the provided security channel.

To verify installation, set the Gemini API key in your environment and start the server. You should see a ready message indicating the MCP server is running on stdio.

Usage scenarios

Component Library: design_ui_component -> generate_frontend_code -> review_ui_implementation.

Design System: brand_identity_design -> ui_architecture_consultation -> generate_frontend_code.

Code Optimization: review_ui_implementation -> (refactor) -> review_ui_implementation.

Architecture Planning: ui_architecture_consultation -> design_ui_component -> generate_frontend_code.

Troubleshooting

If the server fails to start, ensure the GEMINI_API_KEY environment variable is set, the index.js path exists, and your Node.js version is at least 18.0.0.

Available tools

design_ui_component

Enterprise-grade component design with accessibility-first methodology including brand alignment and WCAG considerations.

review_ui_implementation

Expert code review with WCAG compliance verification and performance/UX analysis.

generate_frontend_code

Production-ready frontend code generation with TypeScript support and configurable styling approaches.

ui_architecture_consultation

Strategic frontend architecture guidance for scalable systems, covering components, state management, and design systems.

brand_identity_design

Cohesive brand identity and design system creation including color, typography, components, and spacing.