Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
MCP server for OpenAI Images/Videos and Google GenAI (Veo) media generation.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
OPENAI_API_KEY, GEMINI_API_KEY, GOOGLE_API_KEY, GOOGLE_GENAI_USE_VERTEXAI, GOOGLE_CLOUD_PROJECT, GOOGLE_CLOUD_LOCATION, AZURE_OPENAI_API_KEY, AZURE_OPENAI_ENDPOINT, OPENAI_API_VERSION, AZURE_OPENAI_DEPLOYMENT, MEDIA_GEN_DIRS, MEDIA_GEN_URLS, MEDIA_GEN_MCP_URL_PREFIXES, MEDIA_GEN_MCP_TEST_SAMPLE_DIRค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"media-gen": {
"command": "npx",
"args": [
"-y",
"@strato-space/media-gen-mcp"
],
"env": {
"OPENAI_API_KEY": "ใส่ค่าของคุณ",
"GEMINI_API_KEY": "ใส่ค่าของคุณ",
"GOOGLE_API_KEY": "ใส่ค่าของคุณ",
"GOOGLE_GENAI_USE_VERTEXAI": "ใส่ค่าของคุณ",
"GOOGLE_CLOUD_PROJECT": "ใส่ค่าของคุณ",
"GOOGLE_CLOUD_LOCATION": "ใส่ค่าของคุณ",
"AZURE_OPENAI_API_KEY": "ใส่ค่าของคุณ",
"AZURE_OPENAI_ENDPOINT": "ใส่ค่าของคุณ",
"OPENAI_API_VERSION": "ใส่ค่าของคุณ",
"AZURE_OPENAI_DEPLOYMENT": "ใส่ค่าของคุณ",
"MEDIA_GEN_DIRS": "ใส่ค่าของคุณ",
"MEDIA_GEN_URLS": "ใส่ค่าของคุณ",
"MEDIA_GEN_MCP_URL_PREFIXES": "ใส่ค่าของคุณ",
"MEDIA_GEN_MCP_TEST_SAMPLE_DIR": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add media-gen --env OPENAI_API_KEY='ใส่ค่าของคุณ' --env GEMINI_API_KEY='ใส่ค่าของคุณ' --env GOOGLE_API_KEY='ใส่ค่าของคุณ' --env GOOGLE_GENAI_USE_VERTEXAI='ใส่ค่าของคุณ' --env GOOGLE_CLOUD_PROJECT='ใส่ค่าของคุณ' --env GOOGLE_CLOUD_LOCATION='ใส่ค่าของคุณ' --env AZURE_OPENAI_API_KEY='ใส่ค่าของคุณ' --env AZURE_OPENAI_ENDPOINT='ใส่ค่าของคุณ' --env OPENAI_API_VERSION='ใส่ค่าของคุณ' --env AZURE_OPENAI_DEPLOYMENT='ใส่ค่าของคุณ' --env MEDIA_GEN_DIRS='ใส่ค่าของคุณ' --env MEDIA_GEN_URLS='ใส่ค่าของคุณ' --env MEDIA_GEN_MCP_URL_PREFIXES='ใส่ค่าของคุณ' --env MEDIA_GEN_MCP_TEST_SAMPLE_DIR='ใส่ค่าของคุณ' -- npx -y @strato-space/media-gen-mcpเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"media-gen": {
"command": "npx",
"args": [
"-y",
"@strato-space/media-gen-mcp"
],
"env": {
"OPENAI_API_KEY": "ใส่ค่าของคุณ",
"GEMINI_API_KEY": "ใส่ค่าของคุณ",
"GOOGLE_API_KEY": "ใส่ค่าของคุณ",
"GOOGLE_GENAI_USE_VERTEXAI": "ใส่ค่าของคุณ",
"GOOGLE_CLOUD_PROJECT": "ใส่ค่าของคุณ",
"GOOGLE_CLOUD_LOCATION": "ใส่ค่าของคุณ",
"AZURE_OPENAI_API_KEY": "ใส่ค่าของคุณ",
"AZURE_OPENAI_ENDPOINT": "ใส่ค่าของคุณ",
"OPENAI_API_VERSION": "ใส่ค่าของคุณ",
"AZURE_OPENAI_DEPLOYMENT": "ใส่ค่าของคุณ",
"MEDIA_GEN_DIRS": "ใส่ค่าของคุณ",
"MEDIA_GEN_URLS": "ใส่ค่าของคุณ",
"MEDIA_GEN_MCP_URL_PREFIXES": "ใส่ค่าของคุณ",
"MEDIA_GEN_MCP_TEST_SAMPLE_DIR": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"media-gen": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@strato-space/media-gen-mcp"
],
"env": {
"OPENAI_API_KEY": "ใส่ค่าของคุณ",
"GEMINI_API_KEY": "ใส่ค่าของคุณ",
"GOOGLE_API_KEY": "ใส่ค่าของคุณ",
"GOOGLE_GENAI_USE_VERTEXAI": "ใส่ค่าของคุณ",
"GOOGLE_CLOUD_PROJECT": "ใส่ค่าของคุณ",
"GOOGLE_CLOUD_LOCATION": "ใส่ค่าของคุณ",
"AZURE_OPENAI_API_KEY": "ใส่ค่าของคุณ",
"AZURE_OPENAI_ENDPOINT": "ใส่ค่าของคุณ",
"OPENAI_API_VERSION": "ใส่ค่าของคุณ",
"AZURE_OPENAI_DEPLOYMENT": "ใส่ค่าของคุณ",
"MEDIA_GEN_DIRS": "ใส่ค่าของคุณ",
"MEDIA_GEN_URLS": "ใส่ค่าของคุณ",
"MEDIA_GEN_MCP_URL_PREFIXES": "ใส่ค่าของคุณ",
"MEDIA_GEN_MCP_TEST_SAMPLE_DIR": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
GOOGLE_GENAI_USE_VERTEXAI envGOOGLE_CLOUD_PROJECT envGOOGLE_CLOUD_LOCATION envAZURE_OPENAI_ENDPOINT envOPENAI_API_VERSION envAZURE_OPENAI_DEPLOYMENT envMEDIA_GEN_DIRS envMEDIA_GEN_URLS envMEDIA_GEN_MCP_URL_PREFIXES envMEDIA_GEN_MCP_TEST_SAMPLE_DIR envค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 8 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub strato-space ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: OPENAI_API_KEY, GEMINI_API_KEY, GOOGLE_API_KEY, AZURE_OPENAI_API_KEY
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (1.0.4) เข้า registry 11 เดือนที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย
ในหมวดเดียวกันมี 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
Media Gen MCP is a strict TypeScript Model Context Protocol (MCP) server for OpenAI Images (gpt-image-1.5, gpt-image-1), OpenAI Videos (Sora), and Google GenAI Videos (Veo): generate/edit images, create/remix video jobs, and fetch media from URLs or disk with smart resource_link vs inline image outputs and optional sharp processing. Production-focused (full strict typecheck, ESLint + Vitest CI). Works with fast-agent, Claude Desktop, ChatGPT, Cursor, VS Code, Windsurf, and any MCP-compatible client.
Design principle: spec-first, type-safe image tooling – strict OpenAI Images API + MCP compliance with fully static TypeScript types and flexible result placements/response formats for different clients.
gpt-image-1.5 model (with gpt-image-1 compatibility and DALL·E support planned in future versions).sora-2, sora-2-pro) with job create/remix/list/retrieve/delete and asset downloads.resource_link/resource outputs.test-images tool that mirrors production result placement (content, structuredContent, toplevel).CallToolResult objects from the latest MCP schema, including: content items (text, image, resource_link, resource), optional structuredContent, optional top-level files, and the isError flag for failures.openai-images-generate mirrors the OpenAI Images create API for gpt-image-1.5 (and gpt-image-1) (background, moderation, size, quality, output_format, output_compression, n, user, etc.).openai-images-edit mirrors the OpenAI Images createEdit API for gpt-image-1.5 (and gpt-image-1) (image, mask, n, quality, size, user).openai-videos-create mirrors videos/create and can optionally wait for completion.openai-videos-remix mirrors videos/remix.openai-videos-list mirrors videos/list.openai-videos-retrieve mirrors videos/retrieve.openai-videos-delete mirrors videos/delete.openai-videos-retrieve-content mirrors videos/content and downloads video / thumbnail / spritesheet assets to disk, returning MCP resource_link (default) or embedded resource blocks (via tool_result).google-videos-generate starts a long-running operation (ai.models.generateVideos) and can optionally wait for completion and download .mp4 outputs. Veo model referencegoogle-videos-retrieve-operation polls an existing operation.google-videos-retrieve-content downloads an .mp4 from a completed operation, returning MCP resource_link (default) or embedded resource blocks (via tool_result).fetch-images tool loads images from HTTP(S) URLs or local file paths with optional, user-controlled compression (disabled by default). Supports parallel processing of up to 20 images.fetch-videos tool lists local videos or downloads remote video URLs to disk and returns MCP resource_link (default) or embedded resource blocks (via tool_result).fetch-document tool downloads remote files or reuses local paths and returns MCP resource_link (default) or embedded resource blocks (via tool_result).openai-images-edit accepts image as a single string or an array of 1–16 file paths/base64 strings, matching the OpenAI spec for GPT Image models (gpt-image-1.5, gpt-image-1) image edits.file when the total response size exceeds a safe threshold.output_ _media-gen__ _ . filenames (images/documents use a generated UUID; videos use the OpenAI video_id) and exposed to MCP clients via content[] depending on tool_result (resource_link/image for images, resource_link/resource for video/document downloads).test-images reads sample images from a configured directory and returns them using the same result-building logic as production tools. Use tool_result and response_format parameters to test how different MCP clients handle content[] and structuredContent.isError: true and content: [{ type: "text", text: }], making failures easy to parse and surface in MCP clients.git clone https://github.com/strato-space/media-gen-mcp.git
cd media-gen-mcp
npm install npm run build
Build modes:
npm run build – strict TypeScript build with all strict flags enabled, including skipLibCheck: false. Incremental builds via .tsbuildinfo (~2-3s on warm cache).npm run esbuild – fast bundling via esbuild (no type checking, useful for rapid iteration).For development or when TypeScript compilation fails due to memory constraints:
npm run dev # Uses tsx to run TypeScript directly
npm run lint # ESLint with typescript-eslint
npm run typecheck # Strict tsc --noEmit npm run test # Unit tests (vitest) npm run test:watch # Watch mode for TDD npm run ci # lint + typecheck + test
The project uses vitest for unit testing. Tests are located in test/.
Covered modules:
| Module | Tests | Description |
|---|---|---|
compression | 12 | Image format detection, buffer processing, file I/O |
helpers | 31 | URL/path validation, output resolution, result placement, resource links |
env | 19 | Configuration parsing, env validation, defaults |
logger | 10 | Structured logging + truncation safety |
pricing | 5 | Sora pricing estimate helpers |
schemas | 69 | Zod schema validation for all tools, type inference |
fetch-images (integration) | 3 | End-to-end MCP tool call behavior |
fetch-videos (integration) | 3 | End-to-end MCP tool call behavior |
Test categories:
isCompressionAvailable, detectImageFormat, processBufferWithCompression, readAndProcessImageisHttpUrl, isAbsolutePath, isBase64Image, ensureDirectoryWritable, resolveOutputPath, getResultPlacement, buildResourceLinksMEDIA_GEN_* / MEDIA_GEN_MCP_* settingsopenai-images-*, openai-videos-*, fetch-images, fetch-videos, test-images inputs, boundary testing (prompt length, image count limits, path validation)npm run test
You can also run the server straight from a remote repo using npx:
npx -y github:strato-space/media-gen-mcp --env-file /path/to/media-gen.env
The --env-file argument tells the server which env file to load (e.g. when you keep secrets outside the cloned directory). The file should contain OPENAI_API_KEY, optional Azure variables, and any MEDIA_GEN_MCP_* settings.
secrets.yaml (optional)You can keep API keys (and optional Google Vertex AI settings) in a secrets.yaml file (compatible with the fast-agent secrets template):
openai:
api_key: anthropic: api_key: google: api_key: vertex_ai: enabled: true project_id: your-gcp-project-id location: europe-west4
media-gen-mcp loads `secr
ตัดมาแค่ช่วงต้น อ่านต่อใน repo