Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Image understanding for AI agents — analyze and describe any image via the three.ws pipeline.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
THREE_WS_BASE, THREE_WS_TIMEOUT_MS, THREE_WS_API_KEYต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"vision": {
"command": "npx",
"args": [
"-y",
"@three-ws/vision-mcp"
],
"env": {
"THREE_WS_BASE": "ใส่ค่าของคุณ",
"THREE_WS_TIMEOUT_MS": "ใส่ค่าของคุณ",
"THREE_WS_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add vision --env THREE_WS_BASE='ใส่ค่าของคุณ' --env THREE_WS_TIMEOUT_MS='ใส่ค่าของคุณ' --env THREE_WS_API_KEY='ใส่ค่าของคุณ' -- npx -y @three-ws/vision-mcpเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"vision": {
"command": "npx",
"args": [
"-y",
"@three-ws/vision-mcp"
],
"env": {
"THREE_WS_BASE": "ใส่ค่าของคุณ",
"THREE_WS_TIMEOUT_MS": "ใส่ค่าของคุณ",
"THREE_WS_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"vision": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@three-ws/vision-mcp"
],
"env": {
"THREE_WS_BASE": "ใส่ค่าของคุณ",
"THREE_WS_TIMEOUT_MS": "ใส่ค่าของคุณ",
"THREE_WS_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
THREE_WS_BASE envTHREE_WS_TIMEOUT_MS envTHREE_WS_API_KEY envค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 6 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub nirholas ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.1.2) เข้า registry 27 วันที่ผ่านมา
โปรแกรมที่รองรับ 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
@three-ws/vision-mcp
Let any AI agent see — analyze and describe images through the three.ws vision pipeline, free-first and no key required.
A Model Context Protocol server that gives any AI assistant image understanding over stdio. Pass an image as a public URL or base64 and the agent can read the text in a screenshot, identify what's in a scene, critique a 3D/avatar render, or write alt-text — all live, read-only, no key required.
Every answer comes from the three.ws vision pipeline: free NVIDIA NIM vision models lead every request, with an automatic server-side paid backstop behind them. The caller never pays and needs no provider key — point THREE_WS_BASE at a deployment and go.
npm install @three-ws/vision-mcp
Or run with npx (no install):
npx @three-ws/vision-mcp
Claude Code, one line:
claude mcp add vision -- npx -y @three-ws/vision-mcp
Claude Desktop / Cursor (claude_desktop_config.json or mcp.json):
{
"mcpServers": { "vision": { "command": "npx", "args": ["-y", "@three-ws/vision-mcp"] } } }
Inspect the surface with the MCP Inspector:
npx -y @modelcontextprotocol/inspector npx @three-ws/vision-mcp
| Tool | Type | What it does |
|---|---|---|
analyze_image | read-only | Answer a prompt about an image — visual Q&A, OCR (read a screenshot), classification, or critiquing a render. |
describe_image | read-only | Natural-language description for alt text or a caption, steerable by detail level and focus. |
get_vision_status | read-only | Report whether a vision provider is live and which image formats are accepted. No image, no cost. |
All three tools are read-only — they look at an image, they never store or mutate anything. A VLM is non-deterministic and the live provider chain moves, so none are idempotent.
`analyze_image` — prompt (required), and exactly one of imageUrl (public https) or image (base64 / data URI). Optional imageType (for raw base64), maxTokens (16–2048, default 512).
`describe_image` — exactly one of imageUrl or image. Optional imageType, detail (brief | standard | detailed, default standard), focus (an aspect to emphasize).
`get_vision_status` — no parameters.
// analyze_image: read the text in a logo image
{ "imageUrl": "https://three.ws/logo.png", "prompt": "What does this logo say?" }
{ "ok": true, "text": "The logo reads \"three.ws\".", "provider": "nvidia", "model": "nvidia/nemotron-nano-12b-v2-vl", "prompt": "What does this logo say?", "image_source": "url" }
// describe_image — alt text from a base64 image
{ "image": "data:image/png;base64,iVBORw0KG...", "detail": "brief" }
{ "ok": true, "description": "A seagull in profile against a blurred coastal background.", "detail": "brief", "provider": "nvidia", "model": "nvidia/nemotron-nano-12b-v2-vl", "image_source": "base64" }
// get_vision_status — gate a "describe this" affordance
{}
{ "ok": true, "configured": true, "image_types": ["image/jpeg", "image/png", "image/webp", "image/gif"], "max_image_mb": 12 }
Runnable, key-free examples live in examples/:
node examples/list-tools.mjs # every tool with its full input schema
node examples/read-an-image.mjs # status + alt text + OCR on a live image
Both spawn this server over stdio and call the real vision pipeline. Every tool is read-only, so nothing is stored and nothing is paid. See examples/README.md for expected output.
Images may be JPEG, PNG, WebP, or GIF, up to 12 MB. Base64 inputs are size-checked locally before upload; imageUrl must be a public https URL (the vision server fetches it, so private/loopback hosts are rejected).
There is no charge to the caller and no key is needed. The platform runs every request against free NVIDIA NIM vision lanes first and falls back to a paid model only on its own infrastructure — that cost is the platform's, transparent to you.
The endpoint is rate-limited per IP. To raise your limit to the per-user tier, set the optional THREE_WS_API_KEY (a three.ws API key); it is sent as a bearer token. It is never required to use the free model.
https://three.ws (or your own THREE_WS_BASE).| Variable | Required | Default | Purpose |
|---|---|---|---|
THREE_WS_BASE | no | https://three.ws | Which deployment to call. |
THREE_WS_TIMEOUT_MS | no | 30000 | Per-request timeout (a call may chain across free lanes). |
THREE_WS_API_KEY | no | — | Optional bearer token to raise the rate limit to per-user. |
Part of the three.ws SDK suite — 3D AI agents, on-chain identity, and agent payments.
Website · Changelog · GitHub