Which integrations are available for this server?

Scaffolds Angular projects and generates Angular UI components. Scaffolds React projects and generates React UI components. Scaffolds Remix projects and generates Remix UI components. Generates Storybook files for component variants. Scaffolds SvelteKit projects and generates SvelteKit UI components.

How do I use gemini-designer-mcp?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@gemini-designer-mcp Generate a React button component with variants" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

gemini-designer-mcp

by Pape45

Overview Schema Related Servers Score Discussions

TypeScript

Hybrid

Gemini Designer MCP

AI-powered UI design and code generation for your coding assistant

npm version License: MIT

An MCP server that gives your AI coding assistant 17 tools for UI design, repo intelligence, and frontend code generation.

Install

npx gemini-designer init --local

That's it. The CLI will:

Detect your MCP clients (Cursor, Gemini CLI, VS Code, Claude, Codex, Windsurf, Zed, Antigravity)
Let you choose which to configure
Set up Gemini Designer automatically

Related MCP server: Components Build MCP

Tools

Tool	What it does
`generate_vibes`	Design tokens, themes, color palettes
`scaffold_project`	Plan + scaffold multi-file project structure (React/Next/Vue/SvelteKit/Remix/Angular)
`ui_generate`	Unified generator that returns a multi-file `FileBundle` (no writing)
`modify_ui`	Edit existing UI code (supports multi-file targets)
`generate_component_variants`	Add variants (+ optional Storybook file)
`ui_review`	Screenshot + target files → patchable `FileBundle`
`analyze_tokens`	Extract tokens from CSS
`sync_design_tokens`	Convert tokens between CSS/Tailwind/Tokens Studio
`detect_ui_stack`	Auto-detect framework & libraries
`catalog_components`	Index your components
`repo_tree`	Fast filtered repo file listing
`repo_read_files`	Read multiple files safely (truncation + sha256)
`repo_get_file_meta`	File metadata (exists/size/mtime + optional sha256)
`repo_search`	Text search (ripgrep-powered)
`apply_file_bundle`	Generic writer tool to apply multi-file bundles
`validate_project`	Run allowlisted scripts (lint/typecheck/build) (disabled by default)
`prompting_guide`	High-signal prompting templates

Usage

Local mode is free and uses your own Gemini API key:

npx gemini-designer init --local

The server also retains a remote mode for compatible self-hosted gateways. The former hosted Gemini Designer service is currently unavailable and is not required for local use.

Auto-Detected Clients

The CLI automatically detects and configures these MCP clients:

Client	Config Path
Cursor	`~/.cursor/mcp.json`
Gemini CLI	`~/.gemini/settings.json`
VS Code	`~/.vscode/settings.json`
Claude Code	`~/.claude/mcp.json`
OpenAI Codex	`~/.codex/config.toml`
Windsurf	`~/.codeium/windsurf/mcp_config.json`
Zed	`~/.config/zed/settings.json`
Antigravity	`~/.gemini/antigravity/mcp_config.json`

Docs

Maintainer/agent docs live in this repo under docs/.

License

MIT

This server cannot be installed

license - permissive license

quality - not tested

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

–Releases (12mo)

Commit activity

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

WebSee MCP Server
Browser Automation Developer Tools Testing & QA Tools
1AQuantum
F
license
-
quality
-
maintenance
Provides AI assistants with advanced frontend debugging capabilities through 36 specialized tools for inspecting React/Vue/Angular/Svelte applications. Uses Playwright browser automation and source map intelligence to analyze components, network requests, bundle optimization, and resolve production errors.
Last updated 2025-11-06
Components Build MCP
Developer Tools Documentation Access Code Analysis
getlokiui
A
license
B
quality
D
maintenance
Provides AI assistants with tools to grade, generate, and validate UI components against the components.build specification. Supports searching documentation, checking compliance, and generating framework-agnostic accessible components.
Last updated 2025-12-03
11
29
Apache 2.0
mcpsystem.design MCP Server
Developer Tools Software Architecture Content Management Systems
heyadam
A
license
-
quality
D
maintenance
Provides AI assistants with access to a production-ready design system including Tailwind CSS component patterns, style guides (colors, typography, spacing), and Web Components specifications for consistent UI development.
Last updated 2026-06-04
36
MIT
MCP Frontend Tools Server
Developer Tools Code Analysis Design Tools
ashios15
F
license
A
quality
C
maintenance
Provides AI assistants with frontend development tools including component scaffolding, bundle analysis, accessibility checks, and responsive design guidance. Enables automated generation of React components with tests and stories, bundle optimization recommendations, and WCAG compliance fixes.
Last updated 2026-05-21
6

View all related MCP servers

Related MCP Connectors

Visily UI Design
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
GitHub
Connect AI assistants to GitHub - manage repos, issues, PRs, and workflows through natural language.
Designesy
Design-system contract verification, scoring, and review tools for AI agents.

View all MCP Connectors

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Pape45/gemini-designer-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server