gemini-design-mcp 3.6.13 → 3.6.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -86
- package/build/index.js +0 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,100 +1,27 @@
|
|
|
1
1
|
# gemini-design-mcp
|
|
2
2
|
|
|
3
|
-
MCP server that uses **Google Gemini 3
|
|
3
|
+
MCP server that uses **Google Gemini 3** for frontend/design code generation.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Combine your favorite AI (Claude, GPT, etc.) with Gemini's design capabilities while keeping full conversation context.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Get Started
|
|
8
8
|
|
|
9
|
-
**
|
|
9
|
+
Visit **[gemini-design-mcp.com](https://gemini-design-mcp.com)** for:
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
```json
|
|
16
|
-
{
|
|
17
|
-
"mcpServers": {
|
|
18
|
-
"gemini-design": {
|
|
19
|
-
"command": "npx",
|
|
20
|
-
"args": ["-y", "gemini-design-mcp"],
|
|
21
|
-
"env": {
|
|
22
|
-
"GEMINI_API_KEY": "your-api-key-here"
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
Get your Gemini API key at: https://aistudio.google.com/app/apikey
|
|
11
|
+
- Documentation & setup guide
|
|
12
|
+
- Create your free account
|
|
13
|
+
- Get your API key
|
|
14
|
+
- Pricing plans
|
|
30
15
|
|
|
31
16
|
## Tools
|
|
32
17
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
**Parameters:**
|
|
38
|
-
- `request` (required): What to create (e.g., "A hero section with gradient background")
|
|
39
|
-
- `context` (nullable): Existing code for style reference. Pass `null` for new projects.
|
|
40
|
-
- `techStack` (optional): Tech stack (e.g., "React + Tailwind", "Vue + CSS", "Next.js + shadcn")
|
|
41
|
-
- `preferences` (optional): Style preferences (e.g., "dark mode", "glassmorphism", "minimal")
|
|
42
|
-
|
|
43
|
-
### improve_frontend
|
|
44
|
-
|
|
45
|
-
Improve existing frontend code.
|
|
46
|
-
|
|
47
|
-
**Parameters:**
|
|
48
|
-
- `code` (required): Current code to improve
|
|
49
|
-
- `feedback` (required): What to improve (e.g., "Make it more modern", "Add hover effects")
|
|
50
|
-
- `context` (optional): Additional context for consistency
|
|
51
|
-
|
|
52
|
-
### suggest_design
|
|
53
|
-
|
|
54
|
-
Get design suggestions without generating code. Saves tokens.
|
|
55
|
-
|
|
56
|
-
**Parameters:**
|
|
57
|
-
- `description` (required): What you're designing
|
|
58
|
-
- `currentApproach` (optional): Current approach or constraints
|
|
59
|
-
|
|
60
|
-
## How Context Works
|
|
61
|
-
|
|
62
|
-
The calling agent (Claude, Codex) is responsible for passing relevant context:
|
|
63
|
-
|
|
64
|
-
- **New project**: Pass `context: null`, Gemini creates from scratch
|
|
65
|
-
- **Existing project**: Agent reads relevant components and passes them as context
|
|
66
|
-
|
|
67
|
-
This ensures design consistency without requiring any user configuration.
|
|
68
|
-
|
|
69
|
-
## Example Usage
|
|
70
|
-
|
|
71
|
-
```
|
|
72
|
-
Agent: "Create a pricing card component"
|
|
73
|
-
|
|
74
|
-
→ Calls generate_frontend({
|
|
75
|
-
request: "A pricing card with 3 tiers, toggle for monthly/yearly",
|
|
76
|
-
context: "<existing Button and Card components>",
|
|
77
|
-
techStack: "React + Tailwind",
|
|
78
|
-
preferences: "glassmorphism, dark mode"
|
|
79
|
-
})
|
|
80
|
-
|
|
81
|
-
← Returns complete, production-ready component code
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
## Development
|
|
85
|
-
|
|
86
|
-
```bash
|
|
87
|
-
# Clone and install
|
|
88
|
-
git clone <repo>
|
|
89
|
-
cd gemini-design-mcp
|
|
90
|
-
npm install
|
|
18
|
+
- **create_frontend** - Generate complete responsive views
|
|
19
|
+
- **modify_frontend** - Make surgical edits to existing components
|
|
20
|
+
- **snippet_frontend** - Create standalone UI components
|
|
91
21
|
|
|
92
|
-
|
|
93
|
-
npm run build
|
|
22
|
+
## Compatibility
|
|
94
23
|
|
|
95
|
-
|
|
96
|
-
GEMINI_API_KEY=your-key node build/index.js
|
|
97
|
-
```
|
|
24
|
+
Works with Claude Code, Cursor, VS Code, Windsurf, Zed, JetBrains AI, Neovim, and more.
|
|
98
25
|
|
|
99
26
|
## License
|
|
100
27
|
|
package/build/index.js
CHANGED
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "gemini-design-mcp",
|
|
3
|
-
"version": "3.6.
|
|
3
|
+
"version": "3.6.14",
|
|
4
4
|
"description": "MCP server that uses Gemini 3 Pro for frontend/design code generation",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"bin": {
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"build": "tsc",
|
|
12
12
|
"dev": "tsc --watch",
|
|
13
13
|
"start": "node build/index.js",
|
|
14
|
-
"prepublishOnly": "
|
|
14
|
+
"prepublishOnly": "echo 'Publishing...'"
|
|
15
15
|
},
|
|
16
16
|
"keywords": [
|
|
17
17
|
"mcp",
|