Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Descripción del creador (original en inglés)
AI image generation and editing MCP server. Gemini + OpenAI, iterative editing, undo/redo.
Estos tres nunca se combinan en una sola puntuación: las opiniones, las mediciones y la popularidad son cosas distintas.
Todavía no escribimos un resumen sencillo para este. Abajo están los datos que leímos del registro.
Elige la app de IA que usas y copia la configuración.
GEMINI_API_KEY, OPENAI_API_KEYLos valores marcados como secretos son llaves de tu cuenta. Nunca los compartas ni los pegues en un chat.
Necesitas
¿Qué app usas?
Elige tu app arriba. La recordamos, así que la próxima vez el botón dirá “Instalar en …”.
Abre Claude Desktop → Settings → Developer → Edit Config y pega esto en claude_desktop_config.json
{
"mcpServers": {
"imgx": {
"command": "npx",
"args": [
"-y",
"imgx-mcp"
],
"env": {
"GEMINI_API_KEY": "your-value",
"OPENAI_API_KEY": "your-value"
}
}
}
}Ejecuta esto en tu terminal
claude mcp add imgx --env GEMINI_API_KEY=your-value --env OPENAI_API_KEY=your-value -- npx -y imgx-mcpCompleta los valores vacíos antes de ejecutarlo.
Pégalo en .cursor/mcp.json de tu proyecto, o en ~/.cursor/mcp.json
{
"mcpServers": {
"imgx": {
"command": "npx",
"args": [
"-y",
"imgx-mcp"
],
"env": {
"GEMINI_API_KEY": "your-value",
"OPENAI_API_KEY": "your-value"
}
}
}
}Tu navegador te pide permiso para abrir la app; luego la app muestra la configuración y te pide confirmar. Los valores de las claves quedan vacíos para que los completes tú.
Pégalo en .vscode/mcp.json de tu proyecto
{
"servers": {
"imgx": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"imgx-mcp"
],
"env": {
"GEMINI_API_KEY": "your-value",
"OPENAI_API_KEY": "your-value"
}
}
}
}Tu navegador te pide permiso para abrir la app; luego la app muestra la configuración y te pide confirmar. Los valores de las claves quedan vacíos para que los completes tú.
Este se ejecuta en tu computadora, y ChatGPT solo puede conectarse a servidores en internet. Elige otra app.
Tu elección se guarda en una cookie en este dispositivo; no necesitas cuenta.
Esta configuración se genera a partir de la ficha del creador en el registro. Si el README dice otra cosa, sigue el README.
Se ejecuta en tu computadora; la lista de herramientas aparece en tu app de IA después de instalarlo.
Revisamos información que cualquiera puede ver; no hemos leído el código. Las revisiones que no aplican no se cuentan. · Revisado el 10 nov 2026
El nombre en el registro se verificó con la cuenta de GitHub somacoffeekyoto, dueña del repo
Todavía no hemos leído este repo en GitHub
Todavía no hemos leído este repo en GitHub
Este se ejecuta en tu computadora; no hay endpoint en internet
Se ejecuta en tu computadora y usa ajustes locales en su lugar
Se ejecuta en tu computadora; solo podemos leer listas de herramientas de endpoints en internet
Comparado con todos los servidores activos de esta categoría en el registro. Las estrellas solo cuentan cuando quien lo publica es dueño del repo.
Superó 1 de 1 revisiones básicas aplicables. No hemos leído el código. Antes de agregar una clave o un token, revisa qué acceso pide el servidor y usa una clave que tenga solo los permisos que necesitas.
Debes completar: GEMINI_API_KEY, OPENAI_API_KEY
Se ejecuta en tu computadora. Tu app de IA lo inicia cuando hace falta, y los datos no pasan por los servidores del creador (a menos que el propio servidor llame a un servicio en línea).
El repo de GitHub cambió por última vez –, y la última versión (1.6.1) llegó al registro hace 8 meses.
Las apps compatibles con MCP, como Claude Desktop, Claude Code, Cursor y VS Code. También necesitas Node.js en tu computadora.
En la misma categoría: Figma Context MCP, Claude Real Video, Figma MCP Server
Servidores de la misma categoría hechos por otros creadores, ordenados por estrellas.
Cómo leer una tarjeta:↓ Descargas por semanai★ Estrellas de GitHubiTres pilares: reseñas · revisiones · usoiActualizado = fecha en que se publicó la última versión en el registroi
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.
Copiado tal cual del repo del creador. PopNx MCP no lo ha revisado ni lo respalda. Se quitaron HTML, imágenes y scripts. Los enlaces llevan fuera de este sitio.
AI image generation and editing MCP server. Works with Claude Code, Gemini CLI, Cursor, Windsurf, and any MCP-compatible tool.
Generate images from text, edit existing images with text instructions, iterate on results — all from your AI coding environment.
Add to your tool's MCP config (.mcp.json, settings.json, etc.):
{
"mcpServers": { "imgx": { "command": "npx", "args": ["--package=imgx-mcp", "-y", "imgx-mcp"], "env": { "GEMINI_API_KEY": "your-key" } } } }
That's it. Your AI agent can now generate and edit images.
Windows: Replace
"command": "npx"with"command": "cmd"and prepend"/c"to the args array.
For Claude Code users, imgx-mcp includes an image-generation skill — a guided prompt that teaches Claude how to use the MCP tools effectively. With the skill installed, type /image-generation to start a guided workflow.
Copy the skill directory from the npm package or GitHub repository to your project:
# From npm (after npx has cached the package)
cp -r $(npm root -g)/imgx-mcp/skills .claude/skills
curl -sL https://raw.githubusercontent.com/somacoffeekyoto/imgx-mcp/main/skills/image-generation/SKILL.md \ -o .claude/skills/image-generation/SKILL.md --create-dirs curl -sL https://raw.githubusercontent.com/somacoffeekyoto/imgx-mcp/main/skills/image-generation/references/providers.md \ -o .claude/skills/image-generation/references/providers.md --create-dirs
Or place skill files manually:
your-project/
.mcp.json ← MCP server config (Quick start above) .claude/ skills/ image-generation/ SKILL.md ← skill prompt references/ providers.md ← provider reference
The skill files are included in the npm package under skills/ and in the GitHub repository.
Personal skill (all projects): Place in
~/.claude/skills/image-generation/instead of.claude/skills/.
Claude Desktop supports skills via ZIP upload:
image-generation-skill.zip from the repository (or find it in the npm package under dist/)Update the skill by re-downloading and re-uploading the ZIP after new releases.
The MCP server gives the AI the *ability* to generate and edit images. The Skill adds the *knowledge* of how to use those tools well — so you don't need to learn prompt syntax, model specifications, or service-specific parameters.
The image generation models already have these capabilities. The Skill is what makes them accessible without specialized knowledge.
| MCP server | Skill | |
|---|---|---|
| What it does | Exposes image tools to AI agents | Guided prompt for using the tools |
| Works with | Any MCP-compatible tool | Claude Code, Claude Desktop |
| Install | Add to .mcp.json | Copy skill files to project |
| Team sharing | Commit .mcp.json to repo | Commit .claude/skills/ to repo |
Recommended: Set up the MCP server (Quick start) + install the skill if you use Claude Code.
| Tool | Description |
|---|---|
generate_image | Generate an image from a text prompt |
edit_image | Edit an existing image with text instructions |
edit_last | Edit the last generated/edited image (no input path needed) |
undo_edit | Undo the last edit, reverting to the previous image in the session |
redo_edit | Redo a previously undone edit |
edit_history | Show all sessions and their edit history with metadata |
switch_session | Switch to a different editing session |
clear_history | Clear project history (optionally delete image files) |
set_output_dir | Change the default output directory (optionally move existing files) |
list_providers | List available providers and capabilities |
The .imgx/ directory holds both edit history and default image output. Its location depends on project root detection:
| Project root | .imgx/ location | History |
|---|---|---|
| Detected | /.imgx/ | /.imgx/output-history.json |
| Not detected | ~/Pictures/imgx/ (images only) | ~/.config/imgx/output-history.json (global) |
All clients that resolve to the same project root share the same history. Each session gets its own subdirectory. File paths are returned in the response. Inline image preview is included in MCP responses (base64).
The edit_last tool uses the output of the previous generate_image or edit_image call as input. This enables a conversational workflow:
"Generate a coffee shop interior" → generate_image
"Make the lighting warmer" → edit_last "Add a person reading a book" → edit_last
No need to specify file paths between steps.
Each generate_image call starts a new session. Subsequent edit_last calls are added to the same session, forming an edit chain. Each session has its own output directory.
Undo / Redo — Step backward and forward through the edit chain:
generate → edit_last → edit_last → edit_last
↑ current ← undo_edit ↑ current redo_edit → ↑ current
After undo, calling edit_last branches from the current position (abandoned entries and their files are deleted from disk).
File naming — edit_last generates sequential filenames based on the origin file:
generate_image → cover.png
edit_last → cover-1.png edit_last → cover-2.png
generate_image (no output) → imgx-a1b2c3d4.png edit_last → imgx-a1b2c3d4-1.png
Session switching — Use edit_history to see all sessions, then switch_session to resume a previous session. The edit_last tool will use the current position in the switched session.
Output directory — edit_last inherits the output directory from the session. If generate_image was called with output_dir, all subsequent edit_last calls in that session output to the same directory. The output_dir path is recorded as session metadata in output-history.json. This only affects where image files are saved — history always stays in .imgx/ (or the global config directory).
Set up at least one provider:
Gemini — get a key from Google AI Studio (free tier available for gemini-2.5-flash-image):
imgx config set api-key YOUR_GEMINI_API_KEY --provider gemini
OpenAI — get a key from OpenAI Platform:
imgx config set api-key YOUR_OPENAI_API_KEY --provider openai
Keys are stored in ~/.config/imgx/config.json (Linux/macOS) or %APPDATA%\imgx\config.json (Windows). Alternatively, pass keys via the env section in your MCP config, or set environment variables:
export GEMINI_API_KEY="your-api-key"
export OPENAI_API_KEY="your-api-key"
Only include the API keys for providers you want to use. At least one is required.
.mcp.json in your project root:
{
"mcpServers": { "imgx": { "command": "npx", "args": ["--package=imgx-mcp", "-y", "imgx-mcp"], "env": { "GEMINI_API_KEY": "your-key", "OPENAI_API_KEY": "your-key" } } } }
~/.gemini/settings.json:
{
"mcpServers": { "imgx": { "command": "npx", "args": ["--package=imgx-mcp", "-y", "imgx-mcp"], "env": { "GEMINI_API_KEY": "your-key", "OPENAI_API_KEY": "your-key" } } } }
claude_desktop_config.json:
macOS / Linux:
{
"mcpServers": { "imgx": { "command": "npx", "args": ["--package=imgx-mcp", "-y", "imgx-mcp"], "env": { "GEMINI_API_KEY": "your-key", "OPENAI_API_KEY": "your-key", "IMGX_PROJECT_ROOT": "" } } } }
Windows:
{
"mcpServers": { "imgx": { "command": "cmd", "args": ["/c", "npx", "--package=imgx-mcp", "-y", "imgx-mcp"], "env": { "GEMINI_API_KEY": "your-key", "OPENAI_API_KEY": "your-key", "IMGX_PROJECT_ROOT": "" } } } }
IMGX_PROJECT_ROOT — Set to your project path to save images inside the project (e.g. "C:\\Users\\you\\my-project"). Leave empty to use the global default (~/Pictures/imgx).
Config file location: %APPDATA%\Claude\claude_desktop_config.json (Windows) or ~/Library/Application Support/Claude/claude_desktop_config.json (macOS). After editing, restart Claude Desktop.
Note: Claude Desktop does not support auto-detection (MCP roots / CWD-based
.imgxrcsearch). UseIMGX_PROJECT_ROOTin the config above (per-client), or runimgx config set project-root /path/to/project(shared across all clients).
.codex/config.toml:
[mcp_servers.imgx]
command = "npx" args = ["--package=imgx-mcp", "-y", "imgx-mcp"] env = { GEMINI_API_KEY = "your-key", OPENAI_API_KEY = "your-key" }
The same npx pattern works with Cursor, Windsurf, Continue.dev, Cline, Zed, and other MCP-compatible tools. On Windows, use cmd /c npx instead of npx directly.
| Provider | Models | Capabilities |
|---|
| Gemini | gemini-2.5-flash-image (Nano Banana — **fre
Solo se muestra el principio; lee el resto en el repo