Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者提供的说明(英文原文)
MCP server for Google Nano Banana (Gemini) image generation
这三项永远不会合并成一个分数:意见、测量和人气是不同的东西。
我们还没有为它写通俗的介绍。下面是我们从注册中心读取到的事实。
选择你使用的 AI 应用,然后复制设置。
GEMINI_API_KEY你需要
你用的是哪个应用?
在上方选择你的应用。我们会记住它,下次按钮会显示“安装到 …”。
打开 Claude Desktop → Settings → Developer → Edit Config,把下面的内容粘贴到 claude_desktop_config.json
{
"mcpServers": {
"nano-banana": {
"command": "npx",
"args": [
"-y",
"mcp-nano-banana"
],
"env": {
"GEMINI_API_KEY": "your-value"
}
}
}
}在终端中运行这条命令
claude mcp add nano-banana --env GEMINI_API_KEY=your-value -- npx -y mcp-nano-banana运行前请先填写空着的值。
粘贴到项目中的 .cursor/mcp.json,或 ~/.cursor/mcp.json
{
"mcpServers": {
"nano-banana": {
"command": "npx",
"args": [
"-y",
"mcp-nano-banana"
],
"env": {
"GEMINI_API_KEY": "your-value"
}
}
}
}浏览器会先询问是否打开应用,然后应用会显示设置并请你确认。密钥的值会留空,由你自己填写。
粘贴到项目中的 .vscode/mcp.json
{
"servers": {
"nano-banana": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"mcp-nano-banana"
],
"env": {
"GEMINI_API_KEY": "your-value"
}
}
}
}浏览器会先询问是否打开应用,然后应用会显示设置并请你确认。密钥的值会留空,由你自己填写。
这个服务器在你的电脑上运行,而 ChatGPT 只能连接互联网上的服务器。请选择其他应用。
你的选择通过 Cookie 保存在这台设备上,无需账户。
GEMINI_API_KEY env这些设置是根据作者在注册中心的条目生成的。如果 README 的写法不同,请以 README 为准。
它在你的电脑上运行;安装后,工具列表会显示在你的 AI 应用中。
我们检查的是任何人都能看到的信息;我们没有阅读代码。不适用的检查项不计入总数。 · 检查于 2026年11月9日
注册名称已通过 GitHub 账户 codeFi 验证,该账户拥有此仓库
我们还没有从 GitHub 读取这个仓库
我们还没有从 GitHub 读取这个仓库
它在你的电脑上运行,没有互联网端点
在你的电脑上运行,改用本地设置
它在你的电脑上运行;我们只能读取互联网端点的工具列表
与注册中心里这个分类中所有活跃的服务器比较。只有当发布者拥有该仓库时,星标数才计入。
它在 1 项适用的基础检查中通过了 1 项。我们没有阅读代码。在添加密钥或令牌之前,请先看看这个服务器要求哪些权限,并使用只具备所需权限的密钥。
注册中心没有列出必需的密钥,不过有些服务器会在首次使用时要求你登录。
它在你的电脑上运行。你的 AI 应用会在需要时启动它,数据不会经过作者的服务器(除非它自己调用在线服务)。
GitHub 仓库最后更新于–,最新版本(1.2.2)于5个月前进入注册中心。
支持 MCP 的应用,例如 Claude Desktop、Claude Code、Cursor 和 VS Code。你的电脑上还需要有 Node.js。
同一分类中有:Figma Context MCP, Claude Real Video, Figma MCP Server
同一分类中其他作者的服务器,按星标数排序。
如何看卡片:↓ 每周下载量i★ GitHub 星标i三大支柱:评价 · 检查 · 使用情况i更新 = 最新版本发布到注册中心的时间i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Let any LLM watch a video locally — and search everything it has ever watched.
The Figma MCP server brings Figma design context directly into your AI workflow.
按原文从作者的仓库复制。PopNx MCP 没有审查或背书其内容。HTML、图片和脚本已被移除。链接会离开本站。
MCP server for AI-powered image generation using Google Gemini Nano Banana models. Generate, edit, and combine images from text prompts — directly from your AI coding assistant.
npm install -g mcp-nano-banana
Set your API key:
export GEMINI_API_KEY=your-api-key
For MCP Registry publication metadata, the registry name is io.github.codeFi/mcp-nano-banana.
codex mcp add nano-banana --env GEMINI_API_KEY=your-api-key -- npx -y mcp-nano-banana@latest
Or add manually to ~/.codex/config.toml:
[mcp_servers.nano-banana]
command = "npx" args = ["-y", "mcp-nano-banana@latest"]
[mcp_servers.nano-banana.env] GEMINI_API_KEY = "your-api-key"
Add to ~/.qwen/settings.json:
{
"mcpServers": { "nano-banana": { "command": "npx", "args": ["-y", "mcp-nano-banana@latest"], "env": { "GEMINI_API_KEY": "your-api-key" } } } }
claude mcp add nano-banana -e GEMINI_API_KEY=your-api-key -- npx -y mcp-nano-banana@latest
Or add manually to ~/.claude/claude_desktop_config.json:
{
"mcpServers": { "nano-banana": { "command": "npx", "args": ["-y", "mcp-nano-banana@latest"], "env": { "GEMINI_API_KEY": "your-api-key" } } } }
For CLIs and desktop clients that use the standard mcpServers JSON format, register:
{
"mcpServers": { "nano-banana": { "command": "npx", "args": ["-y", "mcp-nano-banana@latest"], "env": { "GEMINI_API_KEY": "your-api-key" } } } }
git clone https://github.com/codeFi/mcp-nano-banana.git
cd mcp-nano-banana npm install npm run build
Then register with your MCP client:
{
"mcpServers": { "nano-banana": { "command": "node", "args": ["/path/to/mcp-nano-banana/dist/index.js"], "env": { "GEMINI_API_KEY": "your-api-key" } } } }
| Model | MCP Name | Description | Max Ref Images |
|---|---|---|---|
gemini-3-pro-image-preview | Nano Banana Pro | High quality, thinking mode, professional assets | 6 object + 5 character |
gemini-3.1-flash-image-preview | Nano Banana 2 | Fast, high-efficiency, 1:4/4:1/1:8/8:1 ratios | 10 object + 4 character |
gemini-2.5-flash-image | Nano Banana | Fastest, optimized for high-volume tasks | - |
The server defaults to Nano Banana Pro for best quality and automatically falls back to Flash on rate limits.
| Value | Approx. Pixels | Supported Models |
|---|---|---|
"512" | ~512px | Nano Banana 2 only |
"1K" | ~1024px | All models |
"2K" | ~2048px | All models |
"4K" | ~4096px | All models |
Default: "1K"
| Value | Dimensions at 1K | Common Use Case |
|---|---|---|
1:1 | 1024×1024 | Social posts, icons |
16:9 | 1344×768 | Headers, presentations |
9:16 | 768×1344 | Stories, mobile |
4:3 | 1152×896 | Desktop, photos |
3:4 | 896×1152 | Portraits |
2:3 | ~896×1344 | Print, magazines |
3:2 | ~1344×896 | Photos |
4:5 | ~896×1120 | Instagram posts |
5:4 | ~1120×896 | Instagram landscape |
21:9 | ~2048×878 | Ultra-wide banners |
1:4 | ~512×2048 | Nano Banana 2 only — tall strips |
4:1 | ~2048×512 | Nano Banana 2 only — wide strips |
1:8 | ~512×4096 | Nano Banana 2 only — extra tall |
8:1 | ~4096×512 | Nano Banana 2 only — extra wide |
generate_imageGenerate or edit images from text prompts.
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
prompt | string | ✅ Yes | — | Text description or editing instructions |
imagePaths | string[] | No | — | Reference image paths on disk (up to 14) |
model | string | No | gemini-3-pro-image-preview | Model to use |
aspectRatio | string | No | 1:1 | See table above for all options |
resolution | string | No | 1K | 512, 1K, 2K, or 4K |
outputFormat | string | No | png | png, jpeg, webp |
outputPath | string | No | — | Save image to this file path |
Generate from text:
{
"prompt": "A sunset over mountains with dramatic lighting", "aspectRatio": "16:9", "resolution": "2K", "outputPath": "/Users/currentUser/Desktop/sunset.png" }
Edit an existing image:
{
"prompt": "Change the background to a coffee shop interior", "imagePaths": ["/Users/currentUser/photo.jpg"], "outputPath": "/Users/currentUser/edited.png" }
Combine multiple images:
{
"prompt": "Put these glasses on this person's face", "imagePaths": ["/path/to/face.jpg", "/path/to/glasses.jpg"], "outputPath": "/path/to/result.png" }
High-res wallpaper:
{
"prompt": "A futuristic cityscape at night with neon lights and rain", "aspectRatio": "16:9", "resolution": "4K", "outputPath": "/path/to/wallpaper.png" }
generate_faviconsGenerate a complete favicon package from a prompt or existing image.
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
prompt | string | No\* | — | Icon description (required if imagePath not set) |
imagePath | string | No\* | — | Path to existing master icon image |
model | string | No | gemini-3-pro-image-preview | Model for prompt generation |
outputDir | string | No | — | Directory for individual favicon files |
outputPath | string | No | — | Save ZIP package to this path |
returnZipBase64 | boolean | No | false | Return ZIP as base64 text |
appName | string | No | My App | Manifest name |
shortName | string | No | App | Manifest short_name |
themeColor | string | No | #ffffff | Manifest theme color |
backgroundColor | string | No | #ffffff | Manifest background color |
includeReadme | boolean | No | true | Include README.md in package |
{
"prompt": "A minimalist banana icon with a soft gradient", "outputDir": "/path/to/favicon", "outputPath": "/path/to/favicon.zip", "appName": "MyBrand", "shortName": "Brand", "themeColor": "#1a1a2e", "backgroundColor": "#ffffff" }
Generated files:
favicon.ico — Multi-size icon (16/32/48px)favicon-16x16.png — Browser tabsfavicon-32x32.png — Higher-res tabsapple-touch-icon.png — iOS home screenandroid-chrome-192x192.png — Androidandroid-chrome-512x512.png — Android HDsite.webmanifest — PWA manifestHTML snippet (included in response):
<link rel="icon" href="/favicon.ico" sizes="any">
Image generation requires a paid Google AI Studio account. Approximate costs:
| Model | 1K | 2K | 4K |
|---|---|---|---|
| Nano Banana 2 | ~$0.04 | ~$0.08 | ~$0.15 |
| Nano Banana Pro | ~$0.06 | ~$0.13 | ~$0.24 |
You only pay for what you generate — no monthly minimum.
Input (reference images): png, jpg, jpeg, webp, gif Output: png, jpeg, webp
# Build TypeScript
npm run build
npm run dev
npm test
node dist/index.js
| Issue | Solution |
|---|---|
GEMINI_API_KEY is not set | Export the env var or add it to your MCP config |
429 Too Many Requests | Server auto-falls back to Flash model. Add billing to your account. |
403/402 Quota exceeded | Enable billing at Google Cloud Console |
503 Unavailable | High demand — retry in a moment. Common with 4K requests. |
| Image not updating after edit | Make sure you rebuilt the TypeScript (npm run build) |
imagePaths not found | Use absolute paths. Relative paths may not resolve correctly. |
AI Assistant (MCP Client)
│ (MCP Protocol over stdio) ▼ mcp-nano-banana Server │ (HTTPS POST) ▼ Google Gemini API │ ▼ Generated Image → saved to outputPath (or returned inline base64)
MIT