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
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
PEXELS_API_KEY, UNSPLASH_ACCESS_KEY「秘密」と表示された値は、あなたのアカウントの鍵です。絶対に人に教えたり、チャットに貼り付けたりしないでください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"image-resolver": {
"command": "npx",
"args": [
"-y",
"@ahmaddioxide/mcp-image-resolver"
],
"env": {
"PEXELS_API_KEY": "your-value",
"UNSPLASH_ACCESS_KEY": "your-value"
}
}
}
}ターミナルでこれを実行します
claude mcp add image-resolver --env PEXELS_API_KEY=your-value --env UNSPLASH_ACCESS_KEY=your-value -- npx -y @ahmaddioxide/mcp-image-resolver動かす前に、空欄の値を入力してください。
プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"image-resolver": {
"command": "npx",
"args": [
"-y",
"@ahmaddioxide/mcp-image-resolver"
],
"env": {
"PEXELS_API_KEY": "your-value",
"UNSPLASH_ACCESS_KEY": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"image-resolver": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@ahmaddioxide/mcp-image-resolver"
],
"env": {
"PEXELS_API_KEY": "your-value",
"UNSPLASH_ACCESS_KEY": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月6日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント ahmaddioxide で確認済みです
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
入力が必要なもの:PEXELS_API_KEY, UNSPLASH_ACCESS_KEY
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(0.2.0)がレジストリに届いたのは8 か月前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。
同じカテゴリには:Figma Context MCP, Claude Real Video, Figma MCP Server
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:★ GitHubスターi3つの柱:レビュー · チェック · 利用状況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、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
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.