Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Run any Relay model (image, video, audio, LLM), poll tasks, upload files and search Relay's docs.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
RELAY_API_KEY, X-API-Keyค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
ที่อยู่นี้ต้องใส่ key ใน header ของคำขอ ซึ่งเมนูเพิ่ม connector ใส่ให้ไม่ได้ ใช้ Claude Code, Cursor หรือ VS Code แทน
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"relaygpu": {
"command": "npx",
"args": [
"-y",
"@relaygpu/mcp"
],
"env": {
"RELAY_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add --transport http relaygpu https://mcp.relaygpu.com/mcp --header 'X-API-Key: ใส่ค่าของคุณ'claude mcp add relaygpu --env RELAY_API_KEY='ใส่ค่าของคุณ' -- npx -y @relaygpu/mcpเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"relaygpu": {
"url": "https://mcp.relaygpu.com/mcp",
"headers": {
"X-API-Key": "ใส่ค่าของคุณ"
}
}
}
}วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"relaygpu": {
"command": "npx",
"args": [
"-y",
"@relaygpu/mcp"
],
"env": {
"RELAY_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"relaygpu": {
"type": "http",
"url": "https://mcp.relaygpu.com/mcp",
"headers": {
"X-API-Key": "ใส่ค่าของคุณ"
}
}
}
}วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"relaygpu": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@relaygpu/mcp"
],
"env": {
"RELAY_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ที่อยู่นี้ต้องใส่ key ใน header ของคำขอ ซึ่งเมนูเพิ่ม connector ใส่ให้ไม่ได้ ใช้ Claude Code, Cursor หรือ VS Code แทน
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
X-API-Key ความลับ จำเป็น HTTP headerค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
ยังไม่ได้อ่านรายการเครื่องมือของตัวนี้ เราตรวจ endpoint ทีละชุดวนไป
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 7 พ.ย. 2569
ชื่อใน registry ยืนยันโดเมน relaygpu.com แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป
ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป
ยังไม่ได้ตรวจ เราอ่านรายการเครื่องมือตอนตรวจ endpoint
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: RELAY_API_KEY, X-API-Key
ได้ทั้งสองแบบ จะลงในเครื่องหรือต่อผ่านคลาวด์ก็ได้
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.1.8) เข้า registry 13 วันที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต่อผ่าน URL จึงใช้กับโปรแกรมที่รับ remote MCP ได้ เช่น ChatGPT ที่เปิดโหมดนักพัฒนา
ในหมวดเดียวกันมี 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
Relay's MCP server. Your agent can find a Relay model, read its input schema, run it, poll long tasks, upload files, run workflows and search the Relay docs, all from Claude Code, Cursor, VS Code or Claude Desktop. It is built on @relaygpu/client. The tools are generic and take the model as a string, so a model added to Relay works without a new release.
Connect to the hosted server, or run it locally:
| How | Credential | |
|---|---|---|
| Hosted (Streamable HTTP) | https://mcp.relaygpu.com/mcp, nothing to install | X-API-Key: relay_sk_... header, or Authorization: Bearer |
| Local (stdio) | npx -y @relaygpu/mcp (Node ≥ 20) | RELAY_API_KEY=relay_sk_... in its environment; optional RELAY_BASE_URL (default https://relaygpu.com) |
The server never stores your key: the hosted one reads it from each request and uses it for that request only, the local one reads it from its environment.
Claude Code, Codex, Cursor and VS Code connect to the hosted server: no Node, no npx. Claude Desktop accepts remote servers only through OAuth, which v0 does not offer yet, so it uses the local server through a one-click bundle. Every client can also run the local server; see Local server.
Terminal, in the CLI or the VS Code / JetBrains extension alike:
claude mcp add --transport http --scope user relay https://mcp.relaygpu.com/mcp --header "X-API-Key: relay_sk_..."
--scope user makes it available in every project; without it the server exists only in the directory you ran the command in. Check it with /mcp in a new session. If the terminal answers command not found: claude, the extension is installed but the CLI is not: install it with curl -fsSL https://claude.ai/install.sh | bash (or npm install -g @anthropic-ai/claude-code).
Codex sends the key as a Bearer token from an environment variable, so the key stays out of config.toml. Set RELAY_API_KEY in your shell profile, then:
codex mcp add relay --url https://mcp.relaygpu.com/mcp --bearer-token-env-var RELAY_API_KEY
The button installs the entry below with a placeholder key; replace relay_sk_... in Cursor's MCP settings afterwards. By hand: ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (one project).
{
"mcpServers": { "relay": { "url": "https://mcp.relaygpu.com/mcp", "headers": { "X-API-Key": "relay_sk_..." } } } }
This installs the server for VS Code's own agent (Copilot Chat). Using Claude Code inside VS Code? Use the Claude Code command instead: the Claude Code extension does not read VS Code's MCP config.
VS Code asks for the key once and keeps it in its secret storage. By hand, in .vscode/mcp.json (one workspace) or with MCP: Open User Configuration (every workspace):
{
"inputs": [{ "type": "promptString", "id": "relay-key", "description": "Relay API key (relay_sk_...)", "password": true }], "servers": { "relay": { "type": "http", "url": "https://mcp.relaygpu.com/mcp", "headers": { "X-API-Key": "${input:relay-key}" } } } }
relay.mcpb.The bundle runs on Claude Desktop's built-in Node, so nothing else needs to be installed. get_credits and get_usage read the account, so they take a dashboard JWT or a custom-tier superkey, never a plain key; every other tool works with a plain key.
By hand instead: Settings → Developer → Edit Config opens claude_desktop_config.json in your default editor. Add the block below at the top level, save, then quit Claude Desktop (⌘Q) and reopen it:
{
"mcpServers": { "relay": { "command": "npx", "args": ["-y", "@relaygpu/mcp"], "env": { "RELAY_API_KEY": "relay_sk_..." } } } }
Any client can run the server on your machine instead; it needs Node 20 or newer on the PATH the client sees (see Troubleshooting).
claude mcp add relay --scope user --env RELAY_API_KEY=relay_sk_... -- npx -y @relaygpu/mcp
codex mcp add relay --env RELAY_API_KEY=relay_sk_... -- npx -y @relaygpu/mcp
Cursor (~/.cursor/mcp.json) and VS Code take the same command / args / env entry as the Claude Desktop block above; VS Code adds "type": "stdio" and lists it under "servers".
Ready-to-copy files are in examples/.
"command": run which npx in a terminal and paste the result (for example /Users/you/.nvm/versions/node/v22.22.0/bin/npx)."command" at a newer npx.npx, use "command": "cmd" with "args": ["/c", "npx", "-y", "@relaygpu/mcp"].npx downloads the package once (about 5 s); later starts take about 1 s.Tools marked *keyless* work without a credential on the local server. Keyless tools answer the public catalog; with a credential, search_models, get_model, get_pricing, estimate_cost and run_model's model lookup answer your account's: the models your tier and grants can run appear and run. The others are billed or account tools and need one. A hosted server with OAuth on (see Self-hosting) takes no request without a credential, keyless tools included.
| Tool | What it does | Example |
|---|---|---|
search_models *keyless* | Find models by tag and/or text; image-to-image also lists every image model that takes an input image (accepts: ["image"]) | "Find a text-to-video model from Kling" → {tag: "text-to-video", query: "kling"} |
get_model *keyless* | Route, request schema, example, pricing and status of one model | {model: "Qwen/qwen-image"} |
get_pricing *keyless* | Prices (public; your account's with a credential) for one model or all of them, including the media_storage SKUs | {model: "KlingTeam/v3-T2V"} |
estimate_cost *keyless* | Estimate from the price list (public; your account's with a credential; not an invoice) | {model: "KlingTeam/v3-T2V", usage: {duration_seconds: 5, quality_mode: "std"}} |
run_model | Run any model by name and wait up to 45 s | {model: "Qwen/qwen-image", input: {prompt: "a red fox", size: "512x512"}} |
check_task *keyless* | Poll a task (waits up to 30 s) | {task_id: "direct:…", wait_seconds: 30} |
upload_file | Host a file and get a URL for any *_url input (or an image editor's image), or a one-time upload slot for a local file on the hosted server | {path: "./clip.mp4", retention: "relay1d"} · {slot: true} |
list_workflows | List the workflow templates | "Which workflows can I run?" |
run_workflow | Start a workflow run, wait up to 45 s | {workflow_id: "script-voiceover", inputs: {messages: [{role: "user", content: "a lighthouse at dusk"}], voice: "Cherry"}} |
check_workflow_run *keyless* | Poll a run (waits up to 30 s) | {run_id: "…", wait_seconds: 30} |
cancel_workflow_run | Cancel a run that is still in progress | {run_id: "…"} |
get_credits | Credit balance, promos and consumption (JWT or custom-tier superkey) | "How many credits do I have left?" |
get_usage | Usage analytics (JWT or custom-tier superkey) | {period: "7d"} |
search_docs *keyless* | Search the Relay docs | {query: "idempotency key"} |
The hosted server cannot read files on your computer. How a local file reaches a model, per client:
| Client | Local file → model |
|---|---|
| Claude Code, Cursor, VS Code, Codex (hosted server) | upload_file({slot: true}) returns a curl line; the agent runs it in your shell with the file's path (no key in the shell, single use, 10 minutes) and it prints the file's url; pass that url to run_model (for example as image). |
| claude.ai, Claude Desktop, ChatGPT | upload_file({slot: true}) returns a link: open the link in your browser, pick the photo, and paste the link the page shows back into the chat; the model passes it to run_model. No key leaves the chat, single use, 10 minutes. A public URL of the file works too. |
| Local server (stdio), any client | upload_file({path: "./photo.png"}) uploads the file and returns its url. |
Image editors: search_models({tag: "image-to-image"}) lists every image model that takes an input image, each with accepts: ["image"].
tools/list and the keyless tools answer without a credential. A hosted server with OAuth on answers every /mcp request without a credential with 401 and WWW-Authenticate: Bearer resource_metadata="…", scope="relay", which is how clients start the "Connect Relay" sign-in; X-API-Key and Authorization: Bearer keep working there. A billed tool called without one returns a MISSING_CREDENTIALS tool error that names what to set: the X-API-Key header (hosted) or RELAY_API_KEY (stdio). Errors from Relay come back as tool errors that include the error class, code, requestId and the server's detail. Your key never appears in a tool result or a log line.run_model waits up to 45 s (wait_seconds, 0–45). If the task is still running after that, it returns the task_id and the line "Do not resubmit: call check_task with this task_id". Every submit carries an Idempotency-Key, so a retry does not bill twice. Pass your own idempotency_key if your agent might send the same submit again. Since 0.1.7 every model whose input schema takes async (image, video, audio) is submitted as a task, so a long image run returns a task_id, never a 524; chat models still answer inline.store_output with a media_storage SKU from get_pricing (for example relay7d). That SKU adds a per-file fee.urls); the server returns those links in place of the base64, for 1 h or the store_output lifetime. A result that carries base64 without a Relตัดมาแค่ช่วงต้น อ่านต่อใน repo