Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
MCP server for context-aware royalty-free image search from Pexels and Unsplash
选择你使用的 AI 应用,然后复制设置。
通过 2/3 项检查 · 在你的电脑上运行
第一步:你用哪个 AI?
选择你用的应用,步骤会显示在下方。
可连接 Claude,但需要先准备
需要 Image Resolver 的密钥(在开发者网站创建) · 需要先在电脑上安装 Node.js(只需一次) · 仅限电脑上的 Claude 应用(Windows 或 Mac),网页和手机不可用
SettingsDeveloperEdit Config
正在检查命令 · 通过后才会显示复制按钮
只把密钥粘贴到应用的输入框里,不要粘贴到聊天中或发给任何人
用 Image Resolver 告诉我你能帮我做什么,然后做一件给我看✓ 如果 Claude 说正在使用 Image Resolver,或回答中出现 Image Resolver 的工具名称,就表示连接成功
菜单名称已于 2026年11月11日 对照 Anthropic 帮助页面核实 · 你的界面可能因版本略有不同
ChatGPT 暂时无法连接 Image Resolver
Image Resolver 需要安装在你的电脑上,而 ChatGPT 只能连接在网上运行的服务器
A · 使用能连接 Image Resolver 的应用
B · 设计、图片与音频 类中能连接 ChatGPT 的其他服务器
从同类中使用较多的里挑选,仅限用地址即可连接、无需密钥的
可连接 Claude Code,但需要先准备
需要 Image Resolver 的密钥(在开发者网站创建) · 需要先在电脑上安装 Node.js(只需一次)
打开开发者网站,注册账户并创建 API 密钥,下一步要用。价格和免费方案请看开发者网站。
获取密钥的方法见下方开发者的 README
Mac:按 Command+空格,输入 Terminal · Windows:打开 PowerShell
正在检查命令 · 通过后才会显示复制按钮
按 Enter 前,把“your-value”改成你的密钥
只把密钥粘贴到应用的输入框里,不要粘贴到聊天中或发给任何人
应能看到 Image Resolver 在列表中并显示已连接
用 Image Resolver 告诉我你能帮我做什么,然后做一件给我看✓ 如果 Claude Code 说正在使用 Image Resolver,或回答中出现 Image Resolver 的工具名称,就表示连接成功
菜单名称已于 2026年11月11日 对照 Anthropic 帮助页面核实 · 你的界面可能因版本略有不同
可连接 Cursor,但需要先准备
需要 Image Resolver 的密钥(在开发者网站创建) · 需要先在电脑上安装 Node.js(只需一次)
打开开发者网站,注册账户并创建 API 密钥,下一步要用。价格和免费方案请看开发者网站。
获取密钥的方法见下方开发者的 README
正在检查命令 · 通过后才会显示复制按钮
在 Image Resolver 的设置中,PEXELS_API_KEY, UNSPLASH_ACCESS_KEY 还是空的,填入你的密钥并保存
只把密钥粘贴到应用的输入框里,不要粘贴到聊天中或发给任何人
用 Image Resolver 告诉我你能帮我做什么,然后做一件给我看✓ 如果 Cursor 说正在使用 Image Resolver,或回答中出现 Image Resolver 的工具名称,就表示连接成功
菜单名称已于 2026年11月11日 对照 Cursor 帮助页面核实 · 你的界面可能因版本略有不同
可连接 VS Code,但需要先准备
需要 Image Resolver 的密钥(在开发者网站创建) · 需要先在电脑上安装 Node.js(只需一次)
打开开发者网站,注册账户并创建 API 密钥,下一步要用。价格和免费方案请看开发者网站。
获取密钥的方法见下方开发者的 README
正在检查命令 · 通过后才会显示复制按钮
在 Image Resolver 的设置中,PEXELS_API_KEY, UNSPLASH_ACCESS_KEY 还是空的,填入你的密钥并保存
只把密钥粘贴到应用的输入框里,不要粘贴到聊天中或发给任何人
用 Image Resolver 告诉我你能帮我做什么,然后做一件给我看✓ 如果 VS Code 说正在使用 Image Resolver,或回答中出现 Image Resolver 的工具名称,就表示连接成功
菜单名称已于 2026年11月11日 对照 VS Code 帮助页面核实 · 你的界面可能因版本略有不同
Claude Code
正在检查命令 · 通过后才会显示复制按钮
Claude Desktop (claude_desktop_config.json)
正在检查命令 · 通过后才会显示复制按钮
Cursor (~/.cursor/mcp.json)
正在检查命令 · 通过后才会显示复制按钮
VS Code (mcp.json)
正在检查命令 · 通过后才会显示复制按钮
PEXELS_API_KEY 机密 envUNSPLASH_ACCESS_KEY 机密 env这些设置是根据作者在注册中心的条目生成的。如果 README 的写法不同,请以 README 为准。
依据这个服务器的连接方式和各应用自己的文档,检查于 2026年11月10日。
在你的电脑上运行,适用于
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
它在你的电脑上运行;安装后,工具列表会显示在你的 AI 应用中。
我们检查的是任何人都能看到的信息;我们没有阅读代码。不适用的检查项不计入总数。 · 检查于 2026年11月13日
注册名称已通过 GitHub 账户 ahmaddioxide 验证,该账户拥有此仓库
代码最后更新于8个月前,已超过 6 个月
使用 MIT
它在你的电脑上运行,没有互联网端点
在你的电脑上运行,改用本地设置
它在你的电脑上运行;我们只能读取互联网端点的工具列表
提问、分享技巧或报告无法使用。按“有帮助”数量排序。
还没有评价
与注册中心里这个分类中所有活跃的服务器比较。只有当发布者拥有该仓库时,星标数才计入。
它在 3 项适用的基础检查中通过了 2 项。我们没有阅读代码。在添加密钥或令牌之前,请先看看这个服务器要求哪些权限,并使用只具备所需权限的密钥。
你需要填写:PEXELS_API_KEY, UNSPLASH_ACCESS_KEY
它在你的电脑上运行。你的 AI 应用会在需要时启动它,数据不会经过作者的服务器(除非它自己调用在线服务)。
GitHub 仓库最后更新于8个月前,最新版本(0.2.0)于8个月前进入注册中心。
支持 MCP 的应用,例如 Claude Desktop、Claude Code、Cursor 和 VS Code。你的电脑上还需要有 Node.js。
同一分类中有:Figma Context MCP, AutoClip, Next AI Draw.io
同一分类中其他作者的服务器,按星标数排序。
如何看卡片:↓ 每周下载量i★ GitHub 星标i三大支柱:评价 · 检查 · 使用情况i更新 = 最新版本发布到注册中心的时间i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
按原文从作者的仓库复制。PopNx MCP 没有审查或背书其内容。HTML、图片和脚本已被移除。链接会离开本站。
An MCP (Model Context Protocol) server that provides royalty-free image search for AI hosts like Cursor, Claude Desktop, VS Code, Windsurf, and more. Ask your AI assistant to find images by natural language—it uses the search_images tool and returns structured results from Pexels and Unsplash.
No cloning or building needed. Just add this config to your MCP client and it runs via npx automatically:
{
"mcpServers": { "image-resolver": { "command": "npx", "args": ["-y", "@ahmaddioxide/mcp-image-resolver"], "env": { "PEXELS_API_KEY": "your-pexels-api-key", "UNSPLASH_ACCESS_KEY": "your-unsplash-access-key" } } } }
At least one API key is required. Both are free — get them here:
┌─────────────────────────────────────────────────────────────────────────────┐
│ MCP Client (Cursor, Claude, VS Code, etc.) │ │ │ │ │ stdio (stdin/stdout) │ └─────────────────────────────────────┼───────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────────────────┐ │ MCP Image Resolver Server │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ index.ts MCP server entry, registers tools, stdio transport│ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ │ ▼ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ tools/search-images.ts Tool handler: search_images(query) │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ │ ▼ │ │ ┌──────────────────────┐ ┌──────────────────────┐ │ │ │ providers/pexels.ts │ │ providers/unsplash.ts │ │ │ │ Pexels API adapter │ │ Unsplash API adapter │──▶ ImageResult schema │ │ └──────────────────────┘ └──────────────────────┘ │ │ │ │ │ │ └────────────────────────┴────▶ utils/normalize.ts │ └─────────────────────────────────────┼───────────────────────────────────────┘ │ ┌─────────────────┴─────────────────┐ ▼ ▼ ┌──────────────────────────────┐ ┌──────────────────────────────────────────┐ │ Pexels API │ │ Unsplash API │ │ api.pexels.com │ │ api.unsplash.com │ └──────────────────────────────┘ └──────────────────────────────────────────┘
Flow: MCP client → stdio → index.ts (registers tools) → search-images.ts → Pexels and Unsplash providers (when keys are set). Results are merged (Pexels first, then Unsplash) and normalized to the unified ImageResult schema.
Add to .cursor/mcp.json (project) or ~/.cursor/mcp.json (global):
{
"mcpServers": { "image-resolver": { "command": "npx", "args": ["-y", "@ahmaddioxide/mcp-image-resolver"], "env": { "PEXELS_API_KEY": "your-pexels-api-key", "UNSPLASH_ACCESS_KEY": "your-unsplash-access-key" } } } }
Restart Cursor after config changes.
Add to your Claude config file:
~/Library/Application Support/Claude/claude_desktop_config.json%APPDATA%\Claude\claude_desktop_config.json~/.config/Claude/claude_desktop_config.jsonVia Settings: Developer → Edit Config
{
"mcpServers": { "image-resolver": { "command": "npx", "args": ["-y", "@ahmaddioxide/mcp-image-resolver"], "env": { "PEXELS_API_KEY": "your-pexels-api-key", "UNSPLASH_ACCESS_KEY": "your-unsplash-access-key" } } } }
Restart Claude Desktop completely after saving.
Add to .vscode/mcp.json (workspace) or your user profile mcp.json:
{
"servers": { "image-resolver": { "type": "stdio", "command": "npx", "args": ["-y", "@ahmaddioxide/mcp-image-resolver"], "env": { "PEXELS_API_KEY": "your-pexels-api-key", "UNSPLASH_ACCESS_KEY": "your-unsplash-access-key" } } } }
Note: VS Code uses
servers(notmcpServers) and requires"type": "stdio".
Add to ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": { "image-resolver": { "command": "npx", "args": ["-y", "@ahmaddioxide/mcp-image-resolver"], "env": { "PEXELS_API_KEY": "your-pexels-api-key", "UNSPLASH_ACCESS_KEY": "your-unsplash-access-key" } } } }
Refresh the MCP config after changes.
Any client that supports stdio MCP servers (Amp, Continue.dev, Amazon Q, etc.) can use this server:
npx["-y", "@ahmaddioxide/mcp-image-resolver"]{ "PEXELS_API_KEY": "your-key", "UNSPLASH_ACCESS_KEY": "your-key" } (at least one required)Once configured, ask your AI assistant to find images in natural language. It will call the search_images tool automatically.
Example prompts:
The tool returns image URLs and metadata. Use the links to view or download images.
| Tool | Params | Description |
|---|---|---|
| search_images | query, limit?, page?, orientation? | Search images from Pexels and Unsplash |
| extract_image_query | context | Extract search terms from free-form text |
| get_best_image | query, orientation? | Return a single best image |
| search_images_batch | queries, limit? | Run multiple searches in parallel |
| resolve_image_attribution | photographer, source, url? | Generate attribution text |
Response: JSON with results array of { url, source, width, height, photographer, tags }. Each result includes source ("Pexels" or "Unsplash") for attribution.
Note: When both providers are configured, results are merged with Pexels first, then Unsplash. Use limit: 20 or higher to see results from both providers in a single search.
Example prompts to verify the tools:
To contribute or run locally, clone the repo and build from source:
git clone https://github.com/ahmaddioxide/image-resolver-mcp.git
cd image-resolver-mcp npm install cp .env.example .env
npm run build
Or run in development mode without building, using tsx:
{
"mcpServers": { "image-resolver": { "command": "npx", "args": ["tsx", "/path/to/image-resolver-mcp/src/index.ts"], "env": { "PEXELS_API_KEY": "your-pexels-api-key", "UNSPLASH_ACCESS_KEY": "your-unsplash-access-key" } } } }
Images are sourced from Pexels and Unsplash. Per their API terms:
photographer and source; use resolve_image_attribution for compliant textContributions are welcome. Please read CONTRIBUTING.md for guidelines and CODE_OF_CONDUCT.md for community standards. See SECURITY.md for vulnerability reporting.
MIT — see LICENSE.