Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Image, video, chat and speech models with one account — local (npx) or hosted with OAuth sign-in.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
APIMODELS_API_KEY, APIMODELS_BASE_URL, APIMODELS_WAIT_SECONDS, APIMODELS_TIMEOUT_MSค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
ใช้ได้ทั้ง Claude บนเว็บ แอปคอมพิวเตอร์ และมือถือ:
https://api.apimodels.app/mcpเปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"apimodels": {
"command": "npx",
"args": [
"-y",
"apimodels-mcp"
],
"env": {
"APIMODELS_API_KEY": "ใส่ค่าของคุณ",
"APIMODELS_BASE_URL": "ใส่ค่าของคุณ",
"APIMODELS_WAIT_SECONDS": "ใส่ค่าของคุณ",
"APIMODELS_TIMEOUT_MS": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add --transport http apimodels https://api.apimodels.app/mcpclaude mcp add apimodels --env APIMODELS_API_KEY='ใส่ค่าของคุณ' --env APIMODELS_BASE_URL='ใส่ค่าของคุณ' --env APIMODELS_WAIT_SECONDS='ใส่ค่าของคุณ' --env APIMODELS_TIMEOUT_MS='ใส่ค่าของคุณ' -- npx -y apimodels-mcpเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"apimodels": {
"url": "https://api.apimodels.app/mcp"
}
}
}วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"apimodels": {
"command": "npx",
"args": [
"-y",
"apimodels-mcp"
],
"env": {
"APIMODELS_API_KEY": "ใส่ค่าของคุณ",
"APIMODELS_BASE_URL": "ใส่ค่าของคุณ",
"APIMODELS_WAIT_SECONDS": "ใส่ค่าของคุณ",
"APIMODELS_TIMEOUT_MS": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"apimodels": {
"type": "http",
"url": "https://api.apimodels.app/mcp"
}
}
}วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"apimodels": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"apimodels-mcp"
],
"env": {
"APIMODELS_API_KEY": "ใส่ค่าของคุณ",
"APIMODELS_BASE_URL": "ใส่ค่าของคุณ",
"APIMODELS_WAIT_SECONDS": "ใส่ค่าของคุณ",
"APIMODELS_TIMEOUT_MS": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ChatGPT ต่อได้เฉพาะ server ที่อยู่บนอินเทอร์เน็ต:
https://api.apimodels.app/mcpชื่อเมนูอาจต่างกันเล็กน้อยตามแพ็กเกจและรุ่นของแอป
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
APIMODELS_BASE_URL envAPIMODELS_WAIT_SECONDS envAPIMODELS_TIMEOUT_MS envค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
ยังไม่ได้อ่านรายการเครื่องมือของตัวนี้ เราตรวจ endpoint ทีละชุดวนไป
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 7 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub stimQQ ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป
ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป
ยังไม่ได้ตรวจ เราอ่านรายการเครื่องมือตอนตรวจ endpoint
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: APIMODELS_API_KEY
ได้ทั้งสองแบบ จะลงในเครื่องหรือต่อผ่านคลาวด์ก็ได้
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.7.0) เข้า registry 28 วันที่ผ่านมา
โปรแกรมที่รองรับ 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
MCP server for apimodels.app — call image, video, LLM chat and text-to-speech models with one API key, from Claude Desktop, Cursor, or any MCP client.
One key unlocks GPT-6.1, Claude, Gemini, GLM, DeepSeek, Qwen, Seedance, Veo, Kling, gpt-image-2, Gemini Image, MiniMax speech and more — billed in USD, you only pay for successful generations.
Coding agents are good at planning — scripts, shot lists, prompts, editing with ffmpeg. The apimodels plugin gives them the part they cannot do: rendering the video, images and voice-over. It bundles this MCP server plus a skill that teaches the agent when to use it, how to pick a model, how to wait for long renders and when to ask before spending.
npx -y apimodels-mcp login
Your browser opens apimodels.app; click Authorize. A key named CLI · is created for this machine and stored in ~/.apimodels/credentials.json, where every client finds it — including desktop apps that do not see your shell's environment variables. Nothing to copy or paste, and the agent can run this step for you. On a machine without a browser use --no-browser (prints the link) or --paste (paste a key from https://apimodels.app/console/api-keys).
/plugin install apimodels --marketplace stimQQ/apimodels-mcp Older versions: /plugin marketplace add stimQQ/apimodels-mcp, then /plugin install apimodels@apimodels.bash codex plugin marketplace add stimQQ/apimodels-mcp codex plugin add apimodels@apimodels Only have the Codex desktop app and no codex command? Use npx -y @openai/codex in place of codex — it runs the official CLI on the fly and shares the app's config. Then restart Codex. Codex asks you to approve each call that spends credits (generate_video, generate_image, text_to_speech, chat, review_image); checking progress, the model list and the balance never asks.No Node.js yet? Install the plugin anyway and ask for a video: the skill has the agent check for Node.js and, with your OK, install the official LTS for you (winget on Windows, Apple's installer on macOS).
The same tools run at `https://api.apimodels.app/mcp` (Streamable HTTP). Nothing to install and no key to copy: add the URL to your client and it asks you to sign in to apimodels.app and click Authorize. The access token it gets is a dedicated API key named MCP · · ; delete that key in the console to disconnect.
~/.codex/config.toml, then run codex mcp login apimodels: [mcp_servers.apimodels]
url = "https://api.apimodels.app/mcp"
- **Claude Code** — `claude mcp add --transport http apimodels https://api.apimodels.app/mcp`, then `/mcp` → apimodels → Authenticate.
Differences from the local server: the hosted one cannot read files on your machine — the agent calls get_upload_url, uploads the file with curl -T and passes the returned URL instead (local paths are refused with that hint) — and each call waits at most 50 seconds before handing back a task id for get_task. Signed in with a plain API key instead? Send it as Authorization: Bearer sk_….
| Tool | What it does |
|---|---|
get_balance | Your apimodels balance in USD — the agent checks it before a batch. |
list_models | List available model ids (chat / image / video / audio). |
chat | Chat / text completion with any LLM (gpt-6.1-sol, claude-opus-5-5, gemini-3-pro-preview, …). |
generate_image | Text-to-image or image edit; returns the image URL(s) plus a downscaled preview the model can look at. With doubao-seedream-5-0-flash it can also keep a transparent background (background: "transparent") or split one image into a base plus up to 16 transparent layers with names and positions (layer_decomposition: true, billed per output image). |
review_image | A vision model critiques an image against your brief and proposes a revised prompt. |
generate_video | Text-to-video (optional reference image); returns the video URL(s), or a task id if it is not done within wait_seconds. |
get_task | Wait for / check on a task that generate_image, generate_video or text_to_speech handed back as still running. |
get_upload_url | Hosted server only: a 15-minute link to curl -T a local file to; returns its public URL. |
text_to_speech | Text-to-speech (MiniMax voices); returns the audio URL. ElevenLabs TTS is not exposed here — it streams raw bytes from POST /v1/tts/stream rather than returning a URL. |
Every generation is asynchronous on apimodels, and video is slow: a median of about 2.5 minutes, 9 in 10 within 8 minutes (production, week to 2026-09-22). Images take about 50 seconds. Meanwhile Codex aborts an MCP tool call after 60 seconds by default, and the MCP SDK's own client timeout is 60 seconds too. A tool that blocks until the video is ready therefore gets killed mid-wait — the task keeps running, the account is billed when it finishes, and the assistant never sees the URL. Versions up to 0.2.x did exactly that.
Since 0.3.0 the generation tools wait at most wait_seconds (default 50) and then return the task id with a "still running" note; the assistant calls get_task, which waits up to another wait_seconds and returns the URL(s) — with the image preview for image tasks — or "still running" again. Nothing is resubmitted and nothing is billed twice. The assistant does this on its own; you just ask for the video.
tool_timeout_sec for this server in config.toml and pass a larger wait_seconds.wait_seconds: 600 on generate_video gets the URL in one call. APIMODELS_WAIT_SECONDS=600 in the server's env makes that the default.Ask for an image and let the assistant iterate until it is right — "make a 16:9 banner that says SAVE 10%, check the spelling, fix it if needed":
generate_image returns the URL and a preview of the image itself (max 1024px JPEG). Clients that pass tool-result images to the model — Claude Desktop, Claude Code, Cursor — let it see what it made. Pass return_image: false to skip the preview.review_image works everywhere, including clients that show tool-result images to you but not to the model (Cherry Studio is one). It sends the image and your brief to a vision model and returns what matches, what is wrong (garbled text, composition, aspect ratio, artifacts) and a revised prompt. One review costs well under $0.01 on the default gpt-5.6-luna.The assistant picks aspect_ratio and resolution itself from what you ask for, so "make it 16:9" in plain words is enough.
image_url on generate_image and generate_video takes any of these:
https://… URL — passed through untouched/Users/me/photo.png, ./ref.jpg, ~/Pictures/x.webphttp://127.0.0.1:8000/photo.png, http://localhost:3000/…data:image/png;base64,… URIThe last three are uploaded for you first, and the resulting public URL is what gets generated from. This has to happen here rather than server-side: the file exists only on your machine, and 127.0.0.1 means *our* server when our server resolves it — which is why passing one to the REST API directly fails with private/reserved IP addresses not allowed. This MCP server runs next to your files, so it can do what our servers cannot.
Uploads land in your account's R2 space and are auto-deleted after 30 days.
npx -y apimodels-mcp login and click Authorize in the browser — or create a key at https://apimodels.app/console/api-keys (it looks like sk_…) and put it in the server's environment as APIMODELS_API_KEY, as the examples below do.npx -y apimodels-mcp status shows which key is in use and your balance.Edit claude_desktop_config.json (Settings → Developer → Edit Config):
{
"mcpServers": { "apimodels": { "command": "npx", "args": ["-y", "apimodels-mcp"], "env": { "APIMODELS_API_KEY": "sk_your_key_here" } } } }
Restart Claude Desktop. You can now ask it to "generate an image of …" or "make a 5-second video of …".
Settings → MCP → Add new MCP server, or add to ~/.cursor/mcp.json:
{
"mcpServers": { "apimodels": { "command": "npx", "args": ["-y", "apimodels-mcp"], "env": { "APIMODELS_API_KEY": "sk_your_key_here" } } } }
Add to ~/.codex/config.toml:
[mcp_servers.apimodels]
command = "npx" args = ["-y", "apimodels-mcp"] env = { APIMODELS_API_KEY = "sk_your_key_here" }
Two things to know in Codex:
list_models and get_task are marked read-only, so waiting on a video no longer prompts on every check; the tools that bill your account (generate_video, generate_image, text_to_speech, chat, review_image) still ask once per call. To skip those prompts as well, add default_tools_approval_mode = "approve" under [mcp_servers.apimodels].In Settings → MCP Servers, add a new server of type stdio:
npx-y apimodels-mcpAPIMODELS_API_KEY=sk_your_key_hereEnable the server, then select it for your conversation from the MCP control under the chat box. Use a chat model that supports tool calls (Claude, GPT, Gemini …) as the conversation model — it calls the image model for you. Cherry Studio needs Node.js installed for npx; on Windows install it from https://nodejs.org.
Any other MCP client works the same way — run npx -y apimodels-mcp over stdio with APIMODELS_API_KEY in the environment.
Everything the tools call is documented on apimodels.app:
ตัดมาแค่ช่วงต้น อ่านต่อใน repo