Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
MCP server for searching Pexels stock photos, videos, and curated collections.
使っているAIアプリを選んで、設定をコピーしてください。
チェック 3/3 合格 · あなたのパソコンで動きます
まず:どの AI を使っていますか?
使っているアプリを選ぶと、下に手順が表示されます。
Claude につなげますが、先に準備が必要です
Pexels のキーが必要です(提供元のサイトで作成) · 先にパソコンへ Node.js を入れてください(1 回だけ) · パソコン版 Claude アプリ(Windows または Mac)のみ。Web やスマホでは使えません
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
キーの取り方は下の提供元 README にあります
SettingsDeveloperEdit Config
{
"mcpServers": {
"pexels": {
"command": "npx",
"args": [
"-y",
"mcp-pexels"
],
"env": {
"PEXELS_API_KEY": "your-value"
}
}
}
}キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
Pexels を使って、私に何ができるか教えて、1 つやってみせて✓ Claude が Pexels を使っていると言うか、回答に Pexels のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
ChatGPT はまだ Pexels につなげません
Pexels はパソコンに入れて使うものですが、ChatGPT は Web 上で動くサーバーにしかつなげません
A · Pexels につなげるアプリを使う
B · デザイン・画像・音声 の中で ChatGPT につなげる別のサーバー
同じカテゴリでよく使われているものから、キーなしでアドレスだけでつなげるものを選びました
Claude Code につなげますが、先に準備が必要です
Pexels のキーが必要です(提供元のサイトで作成) · 先にパソコンへ Node.js を入れてください(1 回だけ)
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
キーの取り方は下の提供元 README にあります
Mac:Command+スペースで Terminal と入力 · Windows:PowerShell を開く
claude mcp add --scope user pexels --env PEXELS_API_KEY=your-value -- npx -y mcp-pexelsEnter の前に「your-value」を自分のキーに書き換えてください
キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
Pexels が一覧にあり、接続済みと表示されれば OK です
Pexels を使って、私に何ができるか教えて、1 つやってみせて✓ Claude Code が Pexels を使っていると言うか、回答に Pexels のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Cursor につなげますが、先に準備が必要です
Pexels のキーが必要です(提供元のサイトで作成) · 先にパソコンへ Node.js を入れてください(1 回だけ)
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
キーの取り方は下の提供元 README にあります
Pexels の設定で PEXELS_API_KEY が空です。自分のキーを入れて保存します
キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
Pexels を使って、私に何ができるか教えて、1 つやってみせて✓ Cursor が Pexels を使っていると言うか、回答に Pexels のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
VS Code につなげますが、先に準備が必要です
Pexels のキーが必要です(提供元のサイトで作成) · 先にパソコンへ Node.js を入れてください(1 回だけ)
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
キーの取り方は下の提供元 README にあります
Pexels の設定で PEXELS_API_KEY が空です。自分のキーを入れて保存します
キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
Pexels を使って、私に何ができるか教えて、1 つやってみせて✓ VS Code が Pexels を使っていると言うか、回答に Pexels のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Windsurf、Zed、Gemini CLI など MCP を使える他のアプリは追加方法がそれぞれ違います。アプリ一覧で確認してください
JSON 設定は下の「開発者向け」にあります
Claude Code
claude mcp add --scope user pexels --env PEXELS_API_KEY=your-value -- npx -y mcp-pexelsClaude Desktop (claude_desktop_config.json)
{
"mcpServers": {
"pexels": {
"command": "npx",
"args": [
"-y",
"mcp-pexels"
],
"env": {
"PEXELS_API_KEY": "your-value"
}
}
}
}Cursor (~/.cursor/mcp.json)
{
"mcpServers": {
"pexels": {
"command": "npx",
"args": [
"-y",
"mcp-pexels"
],
"env": {
"PEXELS_API_KEY": "your-value"
}
}
}
}VS Code (mcp.json)
{
"servers": {
"pexels": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"mcp-pexels"
],
"env": {
"PEXELS_API_KEY": "your-value"
}
}
}
}PEXELS_API_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月12日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント developer-ishan で確認済みです
コードの最終更新:6 か月前
MITを使用
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。
まだレビューはありません
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック3項目のうち3項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
入力が必要なもの:PEXELS_API_KEY
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は6 か月前、最新バージョン(1.0.2)がレジストリに届いたのは6 か月前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。
同じカテゴリには:Figma Context MCP, AutoClip, Next AI Draw.io
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:↓ 週あたりのダウンロードi★ GitHubスターi3つの柱:レビュー · チェック · 利用状況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、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
A [Model Context Protocol](https://modelcontextprotocol.io) server that exposes the [Pexels API](https://www.pexels.com/api/) — free stock photos, videos, and curated collections — as MCP tools that any compatible AI client (Claude Desktop, Claude Code, Cursor, Cline, Continue, etc.) can call directly from a chat.
📦 npm: mcp-pexels · 🏷 Latest release: v1.0.0 · 💻 Source: developer-ishan/mcp-pexels
Photos & videos provided by Pexels.
{
"mcpServers": { "pexels": { "command": "npx", "args": ["-y", "mcp-pexels"], "env": { "PEXELS_API_KEY": "your_key_here" } } } }
Paste into your MCP client's config, restart, and the nine pexels_* tools are live. Get a free key at https://www.pexels.com/api/.
Once mcp-pexels is connected to an AI client, the agent can pull royalty-free photos and videos straight into its workflow. A few concrete uses:
pexels_popular_videos with size and duration filters.color: "orange".lorem-pixel boxes.Because every response includes a _rateLimit object, the agent can self-throttle and respect the Pexels free-tier quota (200 req/hour, 20 000/month).
| Domain | Tool | What it does |
|---|---|---|
| Photos | pexels_search_photos | Search photos by query with orientation / size / color / locale filters. |
| Photos | pexels_curated_photos | Fetch the Pexels team's real-time curated photo feed. |
| Photos | pexels_get_photo | Retrieve a single photo by its numeric id. |
| Videos | pexels_search_videos | Search videos by query with orientation / size / locale filters. |
| Videos | pexels_popular_videos | Fetch popular videos with optional width / height / duration constraints. |
| Videos | pexels_get_video | Retrieve a single video by its numeric id. |
| Collections | pexels_featured_collections | List Pexels featured collections. |
| Collections | pexels_my_collections | List the authenticated user's own collections. |
| Collections | pexels_collection_media | Retrieve the photos and videos inside a specific collection. |
Each tool response is the raw Pexels JSON merged with a top-level _rateLimit field exposing limit, remaining, and reset (UNIX timestamp).
See docs/tools/ for per-tool parameter tables and example payloads.
All paths below use npx -y mcp-pexels — no global install required. Replace your_key_here with a real Pexels API key.
Option 1 — one-click `.mcpb` install (recommended). Download the latest mcp-pexels-*.mcpb from the Releases page, double-click the file, paste your Pexels API key when Claude Desktop prompts, and click Install.
Option 2 — manual JSON config. Edit claude_desktop_config.json:
~/Library/Application Support/Claude/claude_desktop_config.json%APPDATA%\Claude\claude_desktop_config.json~/.config/Claude/claude_desktop_config.json{
"mcpServers": { "pexels": { "command": "npx", "args": ["-y", "mcp-pexels"], "env": { "PEXELS_API_KEY": "your_key_here" } } } }
Restart Claude Desktop.
claude mcp add pexels -e PEXELS_API_KEY=your_key_here -- npx -y mcp-pexels
Or edit ~/.claude.json directly and add the same mcpServers block as above.
Edit ~/.cursor/mcp.json (global) or .cursor/mcp.json (per-project):
{
"mcpServers": { "pexels": { "command": "npx", "args": ["-y", "mcp-pexels"], "env": { "PEXELS_API_KEY": "your_key_here" } } } }
Open the Cline extension settings → MCP Servers → Edit Settings. Add:
{
"mcpServers": { "pexels": { "command": "npx", "args": ["-y", "mcp-pexels"], "env": { "PEXELS_API_KEY": "your_key_here" } } } }
In ~/.continue/config.json:
{
"experimental": { "modelContextProtocolServers": [ { "transport": { "type": "stdio", "command": "npx", "args": ["-y", "mcp-pexels"], "env": { "PEXELS_API_KEY": "your_key_here" } } } ] } }
If your client supports stdio MCP servers it just needs command, args, and env. Use the same shape as Cursor / Claude Desktop above. For inspector / debugging:
export PEXELS_API_KEY=your_key_here
npx -y @modelcontextprotocol/inspector npx -y mcp-pexels
This opens a browser UI where you can call each tool interactively.
Once connected, try prompts like:
The agent will pick the appropriate tool, send the right parameters, and include photographer/videographer credit as part of its answer.
| mcp-pexels | Raw Pexels REST API | Image-only general MCP servers | |
|---|---|---|---|
| Photos | ✅ | ✅ | varies |
| Videos | ✅ | ✅ | usually ❌ |
| Collections | ✅ | ✅ | ❌ |
| Rate-limit headers exposed to agent | ✅ | ❌ (raw headers, agent must parse) | ❌ |
| Zod-validated input | ✅ | ❌ | varies |
npx-installable, zero config | ✅ | ❌ | varies |
| Type-safe TS source | ✅ | n/a | varies |
| MIT-licensed | ✅ | n/a | varies |
If you only need photos and you already have a generic image MCP server wired up, that may be enough. If you want first-class video and collection support with rate-limit awareness, this is purpose-built for it.
Sign up at https://www.pexels.com/api/ — keys are issued instantly and the free tier allows 200 requests/hour and 20 000 requests/month.
No. The Pexels API is free, the npm package is free (MIT), and mcp-pexels itself does not call any paid service.
No — the server is a thin wrapper over the Pexels HTTPS API and requires network access.
Yes, per the Pexels license, but you must attribute the platform and (when possible) the photographer. See Attribution.
Claude.ai's web product doesn't yet support stdio MCP servers — only Claude Desktop, Claude Code, and the API do. Anthropic is rolling out browser MCP support, so this should change.
No. Run it locally via npx. Because Pexels API keys are per-user, hosting a shared instance doesn't make sense.
npx always fetches the latest published version. If you've installed globally, run npm update -g mcp-pexels.
The Pexels API surface is fully implemented (9/9 endpoints as of Pexels API v1). New endpoints will be added via PR — see Contributing.
@modelcontextprotocol/inspector?Yes:
export PEXELS_API_KEY=your_key_here
npx -y @modelcontextprotocol/inspector npx -y mcp-pexels
Every tool response includes a _rateLimit object with limit, remaining, and reset (UNIX timestamp). The agent can read this and self-throttle. If Pexels returns 429, the server surfaces it as a PexelsApiError so the agent sees the failure.
It is read from the PEXELS_API_KEY env var on the local process. It never leaves your machine except in Authorization headers to api.pexels.com. Nothing is logged.
fetch and --env-file)git clone https://github.com/developer-ishan/mcp-pexels.git
cd mcp-pexels npm install echo "PEXELS_API_KEY=your_key_here" > .env
npm test # 42 mocked vitest cases, no network npm run build # tsc → dist/ npm run dev # tsx watch npm run test:watch # vitest in watch mode npm start # node --env-file=.env dist/index.js
src/
├── index.ts # MCP server entrypoint (stdio) ├── http/ │ ├── client.ts # PexelsClient (injectable fetch for tests) │ └── types.ts # PexelsApiError, RateLimit, PexelsResponse ├── tools/ │ ├── index.ts # composes the three domain factories │ ├── photos.ts # 3 photo tools │ ├── videos.ts # 3 video tools │ └── collections.ts # 3 collection tools └── types/ ├── tool.ts # defineTool helper + ToolDefinition ├── photos.ts ├──