Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
AI image generation and editing with Google Gemini. Structured JSON editing.
Pick the AI app you use, then copy the settings.
Passed 1/2 checks · Runs on your computer
First: which AI do you use?
Pick your app and the steps appear below.
Works with Claude, with some setup first
You need a Gemini Image Studio key (create it on the maker’s site) · Install Node.js on your computer first (one time) · Only the Claude desktop app (Windows or Mac), not the web or phone
One time only; it works for every server that needs Node.js
Open the maker’s site, sign up and create an API key for the next step. Check the maker’s site for pricing and free plans.
How to get a key is in the maker’s README below
SettingsDeveloperEdit Config
{
"mcpServers": {
"gemini-image-studio": {
"command": "npx",
"args": [
"-y",
"gemini-image-studio-mcp"
],
"env": {
"GEMINI_API_KEY": "your-value"
}
}
}
}Paste the key only into the app’s field, never into a chat or to anyone
Use Gemini Image Studio and tell me what you can do for me, then show me one thing✓ If Claude says it is using Gemini Image Studio or shows a Gemini Image Studio tool in the answer, you are connected
Menu names checked against Anthropic’s help page on Nov 11, 2026 · your screen may differ slightly by app version
ChatGPT cannot connect Gemini Image Studio yet
Gemini Image Studio runs on your computer, but ChatGPT can only connect servers that run on the web
A · Use an app that can connect Gemini Image Studio
B · Others in Design, images & audio that work with ChatGPT
Picked from the most used in the same category, only ones that connect by address with no key
Works with Claude Code, with some setup first
You need a Gemini Image Studio key (create it on the maker’s site) · Install Node.js on your computer first (one time)
One time only; it works for every server that needs Node.js
Open the maker’s site, sign up and create an API key for the next step. Check the maker’s site for pricing and free plans.
How to get a key is in the maker’s README below
Mac: press Command+Space and type Terminal · Windows: open PowerShell
claude mcp add --scope user gemini-image-studio --env GEMINI_API_KEY=your-value -- npx -y gemini-image-studio-mcpReplace “your-value” with your key before pressing Enter
Paste the key only into the app’s field, never into a chat or to anyone
You should see Gemini Image Studio listed as connected
Use Gemini Image Studio and tell me what you can do for me, then show me one thing✓ If Claude Code says it is using Gemini Image Studio or shows a Gemini Image Studio tool in the answer, you are connected
Menu names checked against Anthropic’s help page on Nov 11, 2026 · your screen may differ slightly by app version
Works with Cursor, with some setup first
You need a Gemini Image Studio key (create it on the maker’s site) · Install Node.js on your computer first (one time)
One time only; it works for every server that needs Node.js
Open the maker’s site, sign up and create an API key for the next step. Check the maker’s site for pricing and free plans.
How to get a key is in the maker’s README below
In the Gemini Image Studio settings, GEMINI_API_KEY is empty; add your key and save
Paste the key only into the app’s field, never into a chat or to anyone
Use Gemini Image Studio and tell me what you can do for me, then show me one thing✓ If Cursor says it is using Gemini Image Studio or shows a Gemini Image Studio tool in the answer, you are connected
Menu names checked against Cursor’s help page on Nov 11, 2026 · your screen may differ slightly by app version
Works with VS Code, with some setup first
You need a Gemini Image Studio key (create it on the maker’s site) · Install Node.js on your computer first (one time)
One time only; it works for every server that needs Node.js
Open the maker’s site, sign up and create an API key for the next step. Check the maker’s site for pricing and free plans.
How to get a key is in the maker’s README below
In the Gemini Image Studio settings, GEMINI_API_KEY is empty; add your key and save
Paste the key only into the app’s field, never into a chat or to anyone
Use Gemini Image Studio and tell me what you can do for me, then show me one thing✓ If VS Code says it is using Gemini Image Studio or shows a Gemini Image Studio tool in the answer, you are connected
Menu names checked against VS Code’s help page on Nov 11, 2026 · your screen may differ slightly by app version
Other apps that use MCP, such as Windsurf, Zed or Gemini CLI, each add servers differently. See how in the app list.
JSON settings are under “For developers” below
Claude Code
claude mcp add --scope user gemini-image-studio --env GEMINI_API_KEY=your-value -- npx -y gemini-image-studio-mcpClaude Desktop (claude_desktop_config.json)
{
"mcpServers": {
"gemini-image-studio": {
"command": "npx",
"args": [
"-y",
"gemini-image-studio-mcp"
],
"env": {
"GEMINI_API_KEY": "your-value"
}
}
}
}Cursor (~/.cursor/mcp.json)
{
"mcpServers": {
"gemini-image-studio": {
"command": "npx",
"args": [
"-y",
"gemini-image-studio-mcp"
],
"env": {
"GEMINI_API_KEY": "your-value"
}
}
}
}VS Code (mcp.json)
{
"servers": {
"gemini-image-studio": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"gemini-image-studio-mcp"
],
"env": {
"GEMINI_API_KEY": "your-value"
}
}
}
}GEMINI_API_KEY secret required envThese settings are generated from the maker’s registry entry. If the README says otherwise, follow the README.
Based on how this server connects and on each app’s own docs, checked Nov 10, 2026.
Run on your computer in
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
Runs on your computer; the tool list appears in your AI app after you install it.
We check information anyone can see; we have not read the code. Checks that do not apply are left out of the count. · Checked Nov 12, 2026
The registry name was verified with the GitHub account udhaykumarbala, which owns the repo
Code last changed 7 months ago, more than 6 months ago
We have not read this repo from GitHub yet
This one runs on your computer; there is no internet endpoint
Runs on your computer and uses local settings instead
Runs on your computer; we can only read tool lists from internet endpoints
Ask, share a tip or report that it does not work. Sorted by what people marked helpful.
No posts yet. Be the first to ask or share.
Posts here are written by users, not the PopNx team.
No reviews yet
Compared with every active server in this category in the registry. Stars count only when the publisher owns the repo.
It passed 1 of 2 applicable basic checks. We have not read the code. Before adding a key or token, see what access the server asks for and use a key with only the permissions you need.
You need to fill in: GEMINI_API_KEY
It runs on your computer. Your AI app starts it when needed, and data does not pass through the maker’s servers (unless it calls an online service itself).
The GitHub repo last changed 7 months ago, and the latest version (1.0.2) reached the registry 8 months ago.
Apps that support MCP, such as Claude Desktop, Claude Code, Cursor and VS Code. You also need Node.js on your computer.
In the same category: Figma Context MCP, AutoClip, Next AI Draw.io
Servers in the same category from other makers, sorted by stars.
Reading a card:↓ Downloads per weeki★ GitHub starsiThree pillars: reviews · checks · usageiUpdated = latest version published to the registryi
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Clip long videos into short clips with covers and captions. Local CLI and MCP.
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
Copied from the maker’s repo as written. PopNx MCP has not reviewed or endorsed it. HTML, images and scripts are removed. Links lead off this site.
MCP server for AI image generation and editing with Google Gemini. Create web assets, ad creatives, and brand visuals — with structured JSON editing for precise, repeatable control.
Most Gemini image MCP servers are basic text-to-image wrappers. This one adds a structured editing pipeline:
subject[0].hair.color: "platinum_blonde" — and regeneratingThis means precise, isolated changes without affecting the rest of the image. Change a hair color without touching the background. Swap clothing without altering the pose. All through dot-notation JSON paths.
Get one free at Google AI Studio.
npm install -g gemini-image-studio-mcp
claude mcp add gemini-image-studio-mcp -e GEMINI_API_KEY=your-key-here -- gemini-image-studio-mcp
Or add to your project's .claude/mcp.json:
{
"mcpServers": { "gemini-image-studio-mcp": { "command": "npx", "args": ["-y", "gemini-image-studio-mcp"], "env": { "GEMINI_API_KEY": "your-key-here" } } } }
Ask Claude to generate images:
"Create a Facebook ad for a coffee shop with warm lighting"
"Generate a hero image for a tech startup landing page"
"Edit the hero image — change the background to a sunset beach"
generate_imageCreate a new image from text or structured JSON prompts.
| Parameter | Type | Required | Description | ||
|---|---|---|---|---|---|
prompt | string | Yes | Text description or JSON prompt | ||
prompt_format | "text" \ | "json" | No | Prompt format (default: "text") | |
preset | string | No | Asset preset (e.g., "facebook_ad", "hero_image") | ||
aspect_ratio | string | No | Override ratio ("1:1", "16:9", "9:16", etc.) | ||
image_size | "1K" \ | "2K" \ | "4K" | No | Resolution (default: "1K") |
model | "flash" \ | "pro" | No | Gemini model (default: "flash") | |
reference_images | string[] | No | Paths to reference images for consistency | ||
output_name | string | No | Custom filename | ||
enable_search_grounding | boolean | No | Use Google Search for accuracy |
decompose_imageAnalyze an image into a structured JSON blueprint — the first step of the edit workflow.
| Parameter | Type | Required | Description | ||
|---|---|---|---|---|---|
image_path | string | Yes | Path to the image | ||
detail_level | "basic" \ | "detailed" \ | "exhaustive" | No | Granularity (default: "detailed") |
Returns a full blueprint with subject, scene, technical, composition, text_rendering, style_modifiers, and meta sections — each field precisely describing the image's visual components.
edit_imageEdit an image using JSON changes or natural language.
| Parameter | Type | Required | Description | |
|---|---|---|---|---|
image_path | string | Yes | Path to the image | |
edit_type | "json" \ | "natural_language" | Yes | Edit mode |
changes | object | For JSON edits | Dot-notation paths to change | |
instruction | string | For NL edits | Natural language instruction | |
blueprint | object | No | Blueprint (auto-loaded from cache if omitted) | |
model | "flash" \ | "pro" | No | Model (default: "flash") |
output_name | string | No | Custom filename |
JSON edit example — change hair color and add sunglasses:
{
"image_path": "/output/portrait.png", "edit_type": "json", "changes": { "subject[0].hair.color": "platinum_blonde", "subject[0].accessories": [ { "item": "sunglasses", "material": "metal", "color": "#C0C0C0" } ] } }
Natural language edit example:
{
"image_path": "/output/portrait.png", "edit_type": "natural_language", "instruction": "Change the background to a tropical beach at sunset. Keep the person exactly the same." }
get_presetsList available asset presets with dimensions, tips, and conventions.
| Parameter | Type | Required | Description | |||
|---|---|---|---|---|---|---|
category | "ad" \ | "web" \ | "social" \ | "all" | No | Filter (default: "all") |
list_generatedBrowse previously generated images.
| Parameter | Type | Required | Description |
|---|---|---|---|
filter | string | No | Search by filename |
limit | number | No | Max results (default: 20) |
include_blueprints | boolean | No | Include cached blueprints |
The key differentiator — precise, field-level image editing:
Step 1: Generate
generate_image(prompt: "Professional headshot, navy blazer", preset: "linkedin_post") → /output/headshot.png
Step 2: Decompose decompose_image(image_path: "/output/headshot.png") → JSON blueprint with every visual component mapped
Step 3: Edit (precise) edit_image( image_path: "/output/headshot.png", edit_type: "json", changes: { "subject[0].clothing[0].color": "#8B0000", "scene.lighting.type": "studio_softbox" } ) → /output/headshot-edit-1.png (blazer changed to dark red, lighting adjusted)
Step 4: Edit (creative) edit_image( image_path: "/output/headshot-edit-1.png", edit_type: "natural_language", instruction: "Add warm bokeh to the background" ) → /output/headshot-edit-1-edit-1.png
subject[0].hair.color → Hair color
subject[0].hair.style → Hair style subject[0].clothing[0].color → First clothing item color subject[0].accessories → Add/change accessories scene.lighting.type → Lighting type scene.location → Location/background text_rendering.text_content → Text in image technical.lens → Camera lens composition.framing → Shot framing style_modifiers.aesthetic → Aesthetic style
| Preset | Category | Aspect Ratio | Dimensions | Best For |
|---|---|---|---|---|
facebook_ad | Ad | 1:1 | 1080x1080 | Facebook/Instagram feed ads |
instagram_story_ad | Ad | 9:16 | 1080x1920 | Instagram/Facebook story ads |
google_display_banner | Ad | 16:9 | 1200x628 | Google Display Network |
hero_image | Web | 21:9 | 2560x1080 | Above-the-fold hero sections |
og_image | Web | 16:9 | 1200x630 | Social share / link previews |
product_card | Web | 4:5 | 800x1000 | E-commerce product grids |
email_header | Web | 3:1 | 600x200 | Email marketing headers |
linkedin_post | Social | 1:1 | 1080x1080 | LinkedIn feed posts |
twitter_post | Social | 16:9 | 1200x675 | Twitter/X posts |
youtube_thumbnail | Social | 16:9 | 1280x720 | YouTube thumbnails |
| Variable | Required | Default | Description |
|---|---|---|---|
GEMINI_API_KEY | Yes | — | Google AI Studio API key |
OUTPUT_DIR | No | ./output | Where generated images are saved |
claude mcp add gemini-image-studio-mcp -e GEMINI_API_KEY=your-key -- gemini-image-studio-mcp
Add to .cursor/mcp.json:
{
"mcpServers": { "gemini-image-studio-mcp": { "command": "npx", "args": ["-y", "gemini-image-studio-mcp"], "env": { "GEMINI_API_KEY": "your-key-here" } } } }
GEMINI_API_KEY=your-key npx gemini-image-studio-mcp
The server communicates over stdio using the Model Context Protocol.
This server also exposes:
| Model | ID | Best For |
|---|---|---|
| Flash (default) | gemini-3.1-flash-image-preview | Fast generation, high volume, cost-effective |
| Pro | gemini-3-pro-image-preview | Best quality, complex scenes, professional assets |
Contributions welcome! Please:
git checkout -b feature/my-feature)npm test)