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 "Deploy 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

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 deployed

RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

Maintenance

ActivityMaintained

ResponsivenessSyncing

Resources

GitHub Repository

Need Help?

Related Servers

Related MCP Connectors

Visily UI DesignOAuth
io.github.visily-app
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Design Tools AI & Machine Learning Developer Tools
25
design-system
app.zaklad
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
Design Tools Developer Tools
2
GitHubOAuth
io.github.github
Connect AI assistants to GitHub - manage repos, issues, PRs, and workflows through natural language.
Version Control Developer Tools CI/CD & DevOps
1232,851
SupernovaOAuth
io.supernova
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Design Tools Documentation Access Developer Tools
1

Related MCP Servers

WebSee MCP Server
Browser Automation Developer Tools Testing & QA Tools
1AQuantum
F
license
Not graded
quality
Not graded
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.
Updated 10 months ago (2025-11-06 17:26 UTC)
-
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.
Updated 9 months ago (2025-12-03 07:48 UTC)
11
7
Apache 2.0
mcpsystem.design MCP Server
Developer Tools Software Architecture Content Management Systems
heyadam
A
license
Not graded
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.
Updated 3 months ago (2026-06-04 11:52 UTC)
13
MIT
MCP Frontend Tools Server
Developer Tools Code Analysis Design Tools
ashios15
F
license
A
quality
D
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.
Updated 4 months ago (2026-05-21 14:42 UTC)
6
-