Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
MCP server for the Unsplash API: search & fetch photos with attribution + download tracking.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
UNSPLASH_ACCESS_KEY, UNSPLASH_APP_NAME, LOG_LEVELค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"unsplash": {
"command": "npx",
"args": [
"-y",
"@hanoak/unsplash-mcp-server"
],
"env": {
"UNSPLASH_ACCESS_KEY": "ใส่ค่าของคุณ",
"UNSPLASH_APP_NAME": "ใส่ค่าของคุณ",
"LOG_LEVEL": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add unsplash --env UNSPLASH_ACCESS_KEY='ใส่ค่าของคุณ' --env UNSPLASH_APP_NAME='ใส่ค่าของคุณ' --env LOG_LEVEL='ใส่ค่าของคุณ' -- npx -y @hanoak/unsplash-mcp-serverเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"unsplash": {
"command": "npx",
"args": [
"-y",
"@hanoak/unsplash-mcp-server"
],
"env": {
"UNSPLASH_ACCESS_KEY": "ใส่ค่าของคุณ",
"UNSPLASH_APP_NAME": "ใส่ค่าของคุณ",
"LOG_LEVEL": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"unsplash": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@hanoak/unsplash-mcp-server"
],
"env": {
"UNSPLASH_ACCESS_KEY": "ใส่ค่าของคุณ",
"UNSPLASH_APP_NAME": "ใส่ค่าของคุณ",
"LOG_LEVEL": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
UNSPLASH_APP_NAME envLOG_LEVEL envค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 7 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub hanoak ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: UNSPLASH_ACCESS_KEY
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (1.0.1) เข้า registry 3 เดือนที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย
ในหมวดเดียวกันมี Figma Context MCP, Claude Real Video, Figma MCP Server
server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว
อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi
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.
server ทางการของ Figma ส่งข้อมูลงานออกแบบให้ AI อ่าน เพื่อเปลี่ยนแบบเป็นโค้ดหรืออธิบายแบบได้ตรงขึ้น ต่อผ่านคลาวด์ของ Figma
ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
A production-ready Model Context Protocol (MCP) server for the Unsplash API. It gives AI assistants — Claude Desktop, Claude Code, Cursor, VS Code, Windsurf, and any MCP client — tools to search and fetch Unsplash photos, collections, topics, users, and stats, with Unsplash-guideline compliance built in (ready-to-use attribution and download tracking). Sign in once via OAuth to also manage your own profile, collections, and photo metadata.
[!IMPORTANT]
Unofficial project. This is not affiliated with, endorsed by, or sponsored by Unsplash. "Unsplash" is a trademark of its respective owner. You use it under your own Unsplash API account and are responsible for complying with the Unsplash API Terms & Guidelines.
me tools once you sign in.unsplash_track_download tool for the download-tracking guideline.content_filter=high by default on search and random photos.raw/full/regular/small/thumb sizes, plus a raw imgix base for custom sizes (?w=&h=&q=&fm=&fit=).isError results the model can recover from, plus retries/backoff, timeouts, 403 hourly-limit handling, and rate-limit surfacing.npx, no telemetry.Register an application at [unsplash.com/developers](https://unsplash.com/developers) → New Application → accept the API terms → copy its Access Key (not the Secret Key). New apps start on the Demo tier (50 requests/hour); the Production tier (5,000/hour) requires Unsplash's review from your app dashboard. See Rate limits.
Claude Desktop — edit claude_desktop_config.json:
~/Library/Application Support/Claude/claude_desktop_config.json%APPDATA%\Claude\claude_desktop_config.json{
"mcpServers": { "unsplash": { "command": "npx", "args": ["-y", "@hanoak/unsplash-mcp-server"], "env": { "UNSPLASH_ACCESS_KEY": "your_access_key", "UNSPLASH_APP_NAME": "your_registered_app_name" } } } }
Restart the client. See Configuration for every supported variable.
Other clients (Claude Code, Cursor, VS Code, Windsurf, generic stdio)
Claude Code (CLI):
claude mcp add unsplash \
--env UNSPLASH_ACCESS_KEY=your_access_key \ --env UNSPLASH_APP_NAME=your_registered_app_name \ -- npx -y @hanoak/unsplash-mcp-server
Cursor — ~/.cursor/mcp.json (global) or .cursor/mcp.json (per-project): use the exact same mcpServers block as Claude Desktop above.
Windsurf — ~/.codeium/windsurf/mcp_config.json: same mcpServers block as Claude Desktop above.
VS Code — .vscode/mcp.json (note the top-level key is servers, not mcpServers):
{
"servers": { "unsplash": { "command": "npx", "args": ["-y", "@hanoak/unsplash-mcp-server"], "env": { "UNSPLASH_ACCESS_KEY": "your_access_key", "UNSPLASH_APP_NAME": "your_registered_app_name" } } } }
Any other MCP client — run the server over stdio with:
UNSPLASH_ACCESS_KEY=your_access_key npx -y @hanoak/unsplash-mcp-server
Point your client's stdio transport at command: npx, args: ["-y", "@hanoak/unsplash-mcp-server"], and pass the key via env.
Restart your client and ask:
_"Find me a photo of mountains on Unsplash and show the attribution."_
A typical flow: the model calls unsplash_search_photos, picks a result, presents the image with its attribution, and calls unsplash_track_download when it actually uses the photo.
You: Find a landscape photo of a foggy pine forest and credit the photographer.
Assistant: _(calls
unsplash_search_photoswithquery: "foggy pine forest",orientation: "landscape", picks the best result, then callsunsplash_track_downloadwith itsdownload_location)_
Here's a great match — _Photo by Jane Doe on Unsplash_ — along with a ready-to-embed credit line and the image URL.
Each tool returns a compact JSON payload. Here's the shape of a single photo result (illustrative values):
Example tool output
{
"photo": { "id": "Dwu85P9SOIk", "description": "brown rocky mountain under blue sky during daytime", "width": 6000, "height": 4000, "color": "#734940", "blur_hash": "L6Pj0^i_.AyE_3t7t7R**0o#DgR4", "urls": { "raw": "https://images.unsplash.com/photo-1465…?ixid=…", "full": "https://images.unsplash.com/photo-1465…?ixid=…&q=85", "regular": "https://images.unsplash.com/photo-1465…?ixid=…&w=1080", "small": "https://images.unsplash.com/photo-1465…?ixid=…&w=400", "thumb": "https://images.unsplash.com/photo-1465…?ixid=…&w=200" }, "photo_page": "https://unsplash.com/photos/Dwu85P9SOIk", "download_location": "https://api.unsplash.com/photos/Dwu85P9SOIk/download?ixid=…", "photographer": { "name": "Jane Doe", "username": "janedoe", "profile": "https://unsplash.com/@janedoe" }, "attribution": { "text": "Photo by Jane Doe on Unsplash", "html": "Photo by Jane Doe on Unsplash ", "photographerName": "Jane Doe", "photographerUrl": "https://unsplash.com/@janedoe?utm_source=your_app&utm_medium=referral", "unsplashUrl": "https://unsplash.com/?utm_source=your_app&utm_medium=referral" } }, "rate_limit": { "limit": 50, "remaining": 49 } }
Every tool result includes a rate_limit object (limit, remaining) read from the Unsplash response headers. List/search tools wrap results in photos/collections/users/topics arrays with pagination fields (total, total_pages, count, page, per_page).
Configuration is entirely via environment variables — no config files, no flags for secrets.
| Environment variable | Required | Description | |||
|---|---|---|---|---|---|
UNSPLASH_ACCESS_KEY | yes | Your Unsplash API access key. The server exits at startup with a clear message if it is missing or blank. | |||
UNSPLASH_APP_NAME | recommended | Your registered Unsplash app name, used as the attribution utm_source. Defaults to a generic value (with a startup warning) if unset. | |||
UNSPLASH_SECRET_KEY | only for login | Your Unsplash app's secret key. Only needed to run login — see OAuth sign-in. | |||
UNSPLASH_OAUTH_REDIRECT_URI | only for login | Override the default http://localhost:8734/callback used by login. Must match the redirect URI registered on your Unsplash app. | |||
LOG_LEVEL | no | debug \ | info \ | warn \ | error (default info). All logs go to stderr; stdout carries only the MCP protocol. |
CLI flags: --version and --help are supported (e.g. npx @hanoak/unsplash-mcp-server --version). login/logout are subcommands, not flags — see below.
The 21 core tools work out of the box with just UNSPLASH_ACCESS_KEY. To also use the 8 write/`me` tools (update your profile, manage collections, edit photo metadata), sign in once via OAuth:
http://localhost:8734/callback as a redirect URI, and copy the Secret key.UNSPLASH_ACCESS_KEY and UNSPLASH_SECRET_KEY in your shell (not just the MCP client config — login runs from your terminal). npx @hanoak/unsplash-mcp-server login
This opens your browser to Unsplash's consent screen, captures the redirect on a short-lived local server, exchanges the code for a user access token, and saves it to ~/.config/unsplash-mcp-server/credentials.json (owner-only file permissions). Unsplash user access tokens don't expire, so this is a one-time step — no periodic re-auth.
me tools are now available; the 21 read-only tools are unaffected either way.Run npx @hanoak/unsplash-mcp-server logout at any time to remove the stored token. To revoke it server-side, regenerate your app's secret key from the Unsplash dashboard.
All tools are namespaced unsplash_*. Most are read-only (annotated readOnlyHint: true); the exceptions are unsplash_track_download (registers a download event) and the 8 write/me tools below, all marked non-read-only and gated behind OAuth sign-in. Parameters map to the Unsplash API; per_page and stats quantity are clamped to a max of 30, and page is 1-based.
| Domain | Tools
ตัดมาแค่ช่วงต้น อ่านต่อใน repo