gemini-mcp-server

@bobvasic/gemini-mcp-server

0 Stars 8 次浏览 bobvasic 更新于 2026-08-23

MCP 服务配置

复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用

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

服务介绍

Gemini UI Design Server

Enterprise-Grade UI/UX Design & Frontend Implementation Expert

MCP Server Gemini 2.5 PRO Enterprise Architecture

 SPECIALIZED AI AGENT FOR UI/UX DESIGN & FRONTEND ARCHITECTURE

Integrates Google Gemini 2.5 PRO as a world-class UI designer
accessible via MCP protocol from Claude AI in Warp Terminal

Architecture Overview

Purpose-Built MCP Server providing enterprise-grade UI/UX design expertise through Gemini 2.5 PRO. Architected for seamless Claude-to-Gemini inter-agent communication within Warp Terminal's agentic development environment.

Core Capabilities


  GEMINI 2.5 PRO UI DESIGN SPECIALIST                        

   Design UI Components      - Enterprise-grade components  
   Review Implementations    - WCAG AAA compliance          
   Generate Frontend Code    - Production-ready artifacts   
   Architecture Consultation - Scalable system design       
   Brand Identity Design     - Cohesive visual systems

Quick Start

Prerequisites

Node.js 18.0.0
Warp Terminal (latest)
Gemini API Key Get Key

Installation

git clone https://github.com/bobvasic/gemini-ui-design-server.git
cd gemini-ui-design-server
npm install
chmod +x index.js setup.sh

Configuration

Method 1: Automated Setup

./setup.sh YOUR_GEMINI_API_KEY

Method 2: Manual Warp MCP Configuration

Add to ~/.config/warp/mcp.json:

{
  "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.

Tool Reference

`design_ui_component`

Enterprise-grade component design with accessibility-first methodology

{
  component_type: string;      // button, form, card, navigation, hero
  requirements: string;         // Detailed specs, brand, accessibility
  framework?: string;           // React, Vue, Angular, Svelte
  design_system?: string;       // Material, Tailwind, Custom
}

`review_ui_implementation`

Expert code review with WCAG compliance verification

{
  code: string;                 // Frontend code to analyze
  framework?: string;           // React, Vue, Angular
  review_focus?: enum;          // accessibility | performance | ux | visual-design | responsive | all
}

`generate_frontend_code`

Production-ready code generation with TypeScript support

{
  specification: string;        // Detailed implementation requirements
  framework?: string;           // React, Vue, Angular, Svelte
  styling_approach?: string;    // Tailwind, CSS Modules, Styled Components
  typescript?: boolean;         // Default: true
}

`ui_architecture_consultation`

Strategic frontend architecture guidance for scalable systems

{
  project_context: string;              // Scale, team, constraints
  consultation_topic: enum;             // component-architecture | state-management 
                                        // design-system | performance | testing | deployment
}

`brand_identity_design`

Cohesive brand identity and design system creation

{
  brand_requirements: string;           // Values, audience, industry, emotions
  deliverables?: string;                // color-palette,typography,components,spacing
}

Technical Specifications

Protocol Architecture

MCP SDK 1.0.4
Stdio Transport Layer
JSON Schema Validation
Async/Await Event Loop

AI Model Configuration

Model: gemini-2.5-pro
Temperature: 0.7
Max Tokens: 8192
Optimized Prompt Engineering

Integration Pattern

      MCP Protocol      
   Claude AI     Gemini 2.5 PRO 
  (Warp IDE)     UI/UX Consultation     (UI Designer)  
                         
                                                  
  Development                            Design Specifications
  Implementation                         Component Architecture
  Code Generation                        Brand Systems

Prompt Engineering

Gemini 2.5 PRO prompts are architecturally designed following Google's official best practices:

Structured Role Definition - Clear expert persona establishment
Contextual Specifications - Comprehensive requirement framing
Deliverable Taxonomy - Explicit output structure definition
Constraint Declaration - WCAG, performance, framework requirements
Quality Gates - Enterprise-grade, production-ready mandates

Security Architecture

Zero Credential Hardcoding - Environment variable isolation
API Key Validation - Startup verification with fail-fast
Error Sanitization - No sensitive data in error messages
Dependency Auditing - 0 vulnerabilities (verified)

Security Contact: info@cyberlinksec.com

Documentation

SECURITY.md - Security policy and best practices
CONTRIBUTING.md - Contribution guidelines
AUDIT_REPORT.md - Production readiness certification

Use Cases

Scenario	Tool Chain
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`

Testing

# Verify installation
export GEMINI_API_KEY="your-key"
npm start
# Expected: "Gemini MCP Server running on stdio"

# Test via Claude in Warp
# Call tool: gemini-ui-designer/design_ui_component

Support

Technical Issues GitHub Issues
Security Concerns info@cyberlinksec.com
Enterprise Consulting CyberLink Security

License

Built for Enterprise-Grade UI/UX Development

Engineered by CyberLink Security | Powered by Gemini 2.5 PRO

查看源码项目主页