Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者提供的说明(英文原文)
MCP server for img-src.io Image CDN - upload, transform, and deliver images through AI assistants
这三项永远不会合并成一个分数:意见、测量和人气是不同的东西。
我们还没有为它写通俗的介绍。下面是我们从注册中心读取到的事实。
选择你使用的 AI 应用,然后复制设置。
IMG_SRC_API_KEY标为机密的值是你账户的钥匙。千万不要分享给别人,也不要粘贴到聊天里。
你需要
你用的是哪个应用?
在上方选择你的应用。我们会记住它,下次按钮会显示“安装到 …”。
打开 Claude Desktop → Settings → Developer → Edit Config,把下面的内容粘贴到 claude_desktop_config.json
{
"mcpServers": {
"img-src-io": {
"command": "npx",
"args": [
"-y",
"@img-src/mcp-server"
],
"env": {
"IMG_SRC_API_KEY": "your-value"
}
}
}
}在终端中运行这条命令
claude mcp add img-src-io --env IMG_SRC_API_KEY=your-value -- npx -y @img-src/mcp-server运行前请先填写空着的值。
粘贴到项目中的 .cursor/mcp.json,或 ~/.cursor/mcp.json
{
"mcpServers": {
"img-src-io": {
"command": "npx",
"args": [
"-y",
"@img-src/mcp-server"
],
"env": {
"IMG_SRC_API_KEY": "your-value"
}
}
}
}浏览器会先询问是否打开应用,然后应用会显示设置并请你确认。密钥的值会留空,由你自己填写。
粘贴到项目中的 .vscode/mcp.json
{
"servers": {
"img-src-io": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@img-src/mcp-server"
],
"env": {
"IMG_SRC_API_KEY": "your-value"
}
}
}
}浏览器会先询问是否打开应用,然后应用会显示设置并请你确认。密钥的值会留空,由你自己填写。
这个服务器在你的电脑上运行,而 ChatGPT 只能连接互联网上的服务器。请选择其他应用。
你的选择通过 Cookie 保存在这台设备上,无需账户。
这些设置是根据作者在注册中心的条目生成的。如果 README 的写法不同,请以 README 为准。
它在你的电脑上运行;安装后,工具列表会显示在你的 AI 应用中。
我们检查的是任何人都能看到的信息;我们没有阅读代码。不适用的检查项不计入总数。 · 检查于 2026年11月7日
注册名称已通过 GitHub 账户 img-src-io 验证,该账户拥有此仓库
我们还没有从 GitHub 读取这个仓库
我们还没有从 GitHub 读取这个仓库
它在你的电脑上运行,没有互联网端点
在你的电脑上运行,改用本地设置
它在你的电脑上运行;我们只能读取互联网端点的工具列表
与注册中心里这个分类中所有活跃的服务器比较。只有当发布者拥有该仓库时,星标数才计入。
它在 1 项适用的基础检查中通过了 1 项。我们没有阅读代码。在添加密钥或令牌之前,请先看看这个服务器要求哪些权限,并使用只具备所需权限的密钥。
你需要填写:IMG_SRC_API_KEY
它在你的电脑上运行。你的 AI 应用会在需要时启动它,数据不会经过作者的服务器(除非它自己调用在线服务)。
GitHub 仓库最后更新于–,最新版本(0.2.5)于9个月前进入注册中心。
支持 MCP 的应用,例如 Claude Desktop、Claude Code、Cursor 和 VS Code。你的电脑上还需要有 Node.js。
同一分类中有:Figma Context MCP, Claude Real Video, Figma MCP Server
同一分类中其他作者的服务器,按星标数排序。
如何看卡片:★ 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、图片和脚本已被移除。链接会离开本站。
Model Context Protocol (MCP) server for img-src.io image hosting API.
This server enables AI assistants like Claude to interact with your img-src.io account - uploading, searching, listing, and managing images directly through natural language.
pnpm add -g @img-src/mcp-server
Or run directly with pnpm dlx:
pnpm dlx @img-src/mcp-server
| Variable | Required | Description |
|---|---|---|
IMG_SRC_API_KEY | Yes | Your img-src.io API key (starts with imgsrc_) |
IMG_SRC_API_URL | No | API base URL (default: https://api.img-src.io) |
imgsrc_)Add to your Claude Desktop configuration (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):
{
"mcpServers": { "img-src": { "command": "npx", "args": ["@img-src/mcp-server"], "env": { "IMG_SRC_API_KEY": "imgsrc_your_api_key_here" } } } }
Add to your project's .mcp.json (project-scoped) or ~/.claude/mcp.json (global):
{
"mcpServers": { "img-src": { "command": "npx", "args": ["@img-src/mcp-server"], "env": { "IMG_SRC_API_KEY": "imgsrc_your_api_key_here" } } } }
Or add it via the CLI:
claude mcp add img-src -- npx @img-src/mcp-server
Then set the API key in your environment or .env file:
export IMG_SRC_API_KEY=imgsrc_your_api_key_here
Cmd+, on macOS / Ctrl+, on Windows/Linux)img-srccommandnpx @img-src/mcp-serverIMG_SRC_API_KEY with your API key.Alternatively, create or edit .cursor/mcp.json in your project root:
{
"mcpServers": { "img-src": { "command": "npx", "args": ["@img-src/mcp-server"], "env": { "IMG_SRC_API_KEY": "imgsrc_your_api_key_here" } } } }
Create .vscode/mcp.json in your workspace:
{
"servers": { "img-src": { "type": "stdio", "command": "npx", "args": ["@img-src/mcp-server"], "env": { "IMG_SRC_API_KEY": "imgsrc_your_api_key_here" } } } }
Or add via CLI:
code --add-mcp '{"name":"img-src","command":"npx","args":["@img-src/mcp-server"],"env":{"IMG_SRC_API_KEY":"imgsrc_your_api_key_here"}}'
Note: VS Code uses
"servers"(not"mcpServers") and requires"type": "stdio".
Add to ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": { "img-src": { "command": "npx", "args": ["@img-src/mcp-server"], "env": { "IMG_SRC_API_KEY": "imgsrc_your_api_key_here" } } } }
Open the Cline extension in VS Code, click the MCP Servers icon > Configure MCP Servers, then add:
{
"mcpServers": { "img-src": { "command": "npx", "args": ["@img-src/mcp-server"], "env": { "IMG_SRC_API_KEY": "imgsrc_your_api_key_here" } } } }
Add to your Zed settings (~/.config/zed/settings.json):
{
"context_servers": { "img-src": { "command": "npx", "args": ["@img-src/mcp-server"], "env": { "IMG_SRC_API_KEY": "imgsrc_your_api_key_here" } } } }
Note: Zed uses
"context_servers"as the key, embedded within the mainsettings.json.
In IntelliJ IDEA, WebStorm, PyCharm, or other JetBrains IDEs:
{
"mcpServers": { "img-src": { "command": "npx", "args": ["@img-src/mcp-server"], "env": { "IMG_SRC_API_KEY": "imgsrc_your_api_key_here" } } } }
Upload an image from a local file, URL, or base64 data to your img-src.io account.
Upload ~/Photos/sunset.jpg to img-src as photos/vacation/sunset.jpg
Parameters:
file_path (optional): Local file path to upload (recommended for large files)url (optional): URL of the image to uploaddata (optional): Base64-encoded image datamimeType (optional): MIME type of the image (required when using data)target_path (optional): Target path for organizing the imageNote: One of file_path, url, or data must be provided.
List images in your account, optionally within a specific folder.
List my img-src images in the photos/vacation folder
Parameters:
folder (optional): Folder path to listlimit (optional): Max items to return (default: 50)offset (optional): Items to skip for paginationSearch for images by filename or path.
Search for img-src images containing "beach"
Parameters:
query (required): Search querylimit (optional): Max results (default: 20)offset (optional): Results to skipGet detailed metadata for a specific image.
Get details for my img-src image at photos/vacation/sunset.jpg
Parameters:
id (required): Image ID (UUID) or filepathPermanently delete an image.
Delete my img-src image at photos/old/unused.jpg
Parameters:
id (required): Image ID (UUID) or filepath to deleteView your current usage statistics.
Show my img-src usage stats
Get your account settings and configuration.
What are my img-src account settings?
Generate a CDN URL with optional image transformations.
Generate an img-src CDN URL for john/photos/beach.jpg resized to 800x600
Parameters:
username (required): Image owner's usernamefilepath (required): Image pathwidth (optional): Resize widthheight (optional): Resize heightfit (optional): cover, contain, fill, scale-downquality (optional): 1-100 (default: 80)format (optional): webp, avif, jpeg, png, jxlThe MCP server exposes your images as resources that Claude can access directly:
imgsrc://images/{imageId}Claude can list and read these resources to understand what images you have and their properties.
Pre-built prompts for common workflows:
Upload an image and get shareable CDN URLs.
imageUrl (required), width (optional)Check account usage and storage status.
Search for images by keyword.
query (required)User: Upload ~/Photos/sunset.jpg to img-src and give me a resized URL
Claude: I'll upload that image and generate a CDN URL for you.
[Uses upload_image tool]
Image uploaded successfully! Here's a resized CDN URL:
https://img-src.io/i/yourname/sunset.webp?w=1200&q=85
User: Find all my beach photos
Claude: [Uses search_images with query "beach"]
Found 5 beach photos:
1. photos/vacation/beach-sunset.jpg
2. photos/summer/beach-party.png
...
User: How much storage am I using?
Claude: [Uses get_usage tool]
Your img-src.io usage:
- Storage: 245 MB / 500 MB (49%)
- Uploads: 67 / 100 this month
- Bandwidth: 1.2 GB / 1 GB (120% - consider upgrading!)
# Install dependencies
pnpm install
pnpm build
IMG_SRC_API_KEY=imgsrc_xxx pnpm start
pnpm type-check
pnpm test
MIT