Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
MCP server for image/video understanding & generation (Gemini/OpenAI/Grok)
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
UNDERSTAND_MODELS, GEMINI_API_KEY, OPENAI_API_KEY, XAI_API_KEYค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"imagine": {
"command": "uvx",
"args": [
"imagine-mcp"
],
"env": {
"UNDERSTAND_MODELS": "ใส่ค่าของคุณ",
"GEMINI_API_KEY": "ใส่ค่าของคุณ",
"OPENAI_API_KEY": "ใส่ค่าของคุณ",
"XAI_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add imagine --env UNDERSTAND_MODELS='ใส่ค่าของคุณ' --env GEMINI_API_KEY='ใส่ค่าของคุณ' --env OPENAI_API_KEY='ใส่ค่าของคุณ' --env XAI_API_KEY='ใส่ค่าของคุณ' -- uvx imagine-mcpเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"imagine": {
"command": "uvx",
"args": [
"imagine-mcp"
],
"env": {
"UNDERSTAND_MODELS": "ใส่ค่าของคุณ",
"GEMINI_API_KEY": "ใส่ค่าของคุณ",
"OPENAI_API_KEY": "ใส่ค่าของคุณ",
"XAI_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"imagine": {
"type": "stdio",
"command": "uvx",
"args": [
"imagine-mcp"
],
"env": {
"UNDERSTAND_MODELS": "ใส่ค่าของคุณ",
"GEMINI_API_KEY": "ใส่ค่าของคุณ",
"OPENAI_API_KEY": "ใส่ค่าของคุณ",
"XAI_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
UNDERSTAND_MODELS envค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 8 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub n24q02m ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: GEMINI_API_KEY, OPENAI_API_KEY, XAI_API_KEY
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (1.11.6) เข้า registry 2 เดือนที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Python (uv), Docker ในเครื่องด้วย
ในหมวดเดียวกันมี Figma Context MCP, Claude Real Video, Figma MCP Server
server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว
อ่านการ์ด:↓ ดาวน์โหลดต่อสัปดาห์i★ ดาว 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
ARCHIVED 2026-09-13 — This repository is no longer maintained. Use your image provider's native API instead of this MCP server. Existing installations keep working but receive no updates or support.
mcp-name: io.github.n24q02m/imagine-mcp
Image and video understanding + generation for AI agents -- across Gemini, OpenAI, and Grok.
Sister projects from n24q02m (click to expand)
| Project | Tagline | Tag |
|---|---|---|
| agent-chat-plugin | Peer AI agents chat in a shared folder — no human relay, no orchestrator, wor... | Tooling |
| better-code-review-graph | Knowledge graph for token-efficient code reviews -- semantic search and call-... | MCP |
| better-drive | 2-way Google Drive sync with .driveignore filter — rclone engine, Windows tray | Tooling |
| better-email-mcp | IMAP/SMTP email for AI agents -- read, send, organize folders, and manage att... | MCP |
| better-godot-mcp | Composite MCP server for Godot Engine -- 17 composite tools for AI-assisted g... | MCP |
| better-notion-mcp | Markdown-first Notion for AI agents -- pages, databases, blocks, and comments... | MCP |
| better-semantic-release | Drop-in python-semantic-release fork with built-in release-safety guards (orp... | Tooling |
| better-telegram-mcp | Telegram for AI agents -- messages, chats, media, and contacts across both bo... | MCP |
| better-workspace-mcp | Google Workspace MCP server (Docs/Drive/Calendar/Gmail/Sheets/Slides/Tasks/Ch... | MCP |
| claude-plugins | Claude Code plugin marketplace for the n24q02m MCP servers -- install web sea... | Marketplace |
| imagine-mcp | Image and video understanding + generation for AI agents -- across Gemini, Op... | MCP |
| jules-task-archiver | Chrome Extension for bulk operations on Jules tasks via batchexecute API -- a... | Tooling |
| mcp-core | Shared foundation for building MCP servers -- Streamable HTTP transport, OAut... | MCP |
| mnemo-mcp | Persistent AI memory with hybrid search and embedded sync. Open, free, unlimi... | MCP |
| qwen3-embed | Lightweight Qwen3 text embedding and reranking via ONNX Runtime and GGUF | Library |
| skret | Secrets without the server. | CLI |
| tacet | A self-distilling neuro-symbolic cascade that amortises LLM cost across knowl... | Tooling |
| web-core | Shared web infrastructure package for search, scraping, HTTP security, and st... | Library |
| wet-mcp | Open-source MCP server for AI agents: web search, content extraction, and lib... | MCP |
gemini / openai / grok at poor (cheap/fast) or rich (high quality); swap via parameterprovider/model, or configure an ordered model chain (no hardcoded catalog)understand responses with configurable TTLRun with uvx (no install step) or pull the container image:
# uvx -- recommended, runs the published PyPI package
uvx imagine-mcp
docker run -it --rm ghcr.io/n24q02m/imagine-mcp:latest
Add it to an MCP client by pointing the client at the uvx imagine-mcp command and supplying at least one provider key (see Configuration):
{
"mcpServers": { "imagine": { "command": "uvx", "args": ["imagine-mcp"], "env": { "GEMINI_API_KEY": "AIza..." } } } }
For per-client snippets (Claude Code, Codex, Gemini CLI, Cursor, Windsurf) and the browser-based HTTP setup, see the Setup docs.
Install with an AI agent -- paste this to your AI coding agent:
Install MCP server
imagine-mcpfollowing the steps at
https://raw.githubusercontent.com/n24q02m/claude-plugins/main/plugins/imagine-mcp/setup-with-agent.md
imagine-mcp ships a smithery.yaml so it can be installed and run through Smithery. The entry launches the published PyPI package over stdio (uvx --python 3.13 imagine-mcp) with an empty config schema -- no setup fields are required at deploy time. Provider keys are supplied at runtime through the server's own credential flow (env vars in stdio mode, or the browser setup form in HTTP mode; see Configuration).
Two transports (default stdio; opt into http with --http, MCP_TRANSPORT=http, or TRANSPORT_MODE=http):
127.0.0.1 by default, or multi-user remote (per-JWT-sub credential isolation) when PUBLIC_URL + MCP_DCR_SERVER_SECRET are set. In HTTP mode credentials are entered through a browser form at /authorize.All optional -- the server starts in degraded mode and surfaces whichever providers have a key. Set at least one.
| Env var | Provider | Get a key at |
|---|---|---|
GEMINI_API_KEY | Gemini (image + video) | aistudio.google.com/apikey |
OPENAI_API_KEY | OpenAI (image) | platform.openai.com/api-keys |
XAI_API_KEY | Grok / xAI (image + video) | console.x.ai |
When a tool is called without an explicit provider, the first key present wins in the order XAI_API_KEY -> OPENAI_API_KEY -> GEMINI_API_KEY.
Model choice passes straight through to litellm (understand) or the native provider SDK (generate) -- there is no hardcoded model catalog. Each chain is a CSV of litellm provider/model entries; the order is the fallback order.
| Env var | Purpose |
|---|---|
UNDERSTAND_MODELS | Ordered model chain for understand (litellm fallback). Empty and no explicit model -> understand fails loud (no built-in default). |
GENERATE_MODELS | Ordered model chain for generate. The first entry selects the native provider + model. Empty -> the provider's own minimal built-in default. |
GENERATE_PROVIDER_PRIORITY | CSV of provider names reordering generation auto-fallback. Defaults to grok,openai,gemini. |
Understanding is routed through litellm (provider/model passthrough), so any litellm provider works -- supply that provider's _API_KEY. Generation stays on the native provider SDKs (Gemini, OpenAI, Grok). Example:
{
"mcpServers": { "imagine": { "command": "uvx", "args": ["imagine-mcp"], "env": { "UNDERSTAND_MODELS": "gemini/ ,openai/ ", "GEMINI_API_KEY": "AIza...", "OPENAI_API_KEY": "sk-..." } } } }
config(action="set", key=..., value=...) adjusts log_level, default_provider, default_tier, and cache_ttl_seconds at runtime.
The imagine-mcp console command installed by the package takes no subcommands -- it starts the MCP server directly. Transport is selected by a single flag or its environment-variable equivalents:
imagine-mcp # stdio transport (default); reads provider keys from env vars
imagine-mcp --http # HTTP daemon; credentials via the browser setup form
| Invocation | Equivalent env | Result |
|---|---|---|
imagine-mcp | MCP_TRANSPORT unset | stdio, single-user, env-var credentials |
imagine-mcp --http | MCP_TRANSPORT=http (or TRANSPORT_MODE=http) | HTTP daemon -- local 127.0.0.1 self-host, or multi-user remote when PUBLIC_URL + MCP_DCR_SERVER_SECRET are set |
In stdio mode the server exits if none of the provider keys are set. The remote HTTP bind knobs (MCP_HOST, MCP_PORT) apply only when PUBLIC_URL is set; see Configuration.
An HTTP deployment serves clients that support remote HTTP MCP servers. It is OAuth-gated -- an unauthenticated request returns 401 with a WWW-Authenticate: Bearer challenge -- and credentials are provisioned through the browser setup form. Point an HTTP-capable MCP client at https:// /mcp and complete the OAuth flow to connect. To stand one up, see Deploy to Cloudflare.
Full docs at **[mcp.n24q02m.com/servers/imagine-mcp/setup/](https://mcp.n24q02m.com/servers
ตัดมาแค่ช่วงต้น อ่านต่อใน repo