Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Generate and edit images with Labnana through a local MCP server with MCP Apps previews.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
LABNANA_API_KEY, LABNANA_OUTPUT_DIRค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"labnana": {
"command": "npx",
"args": [
"-y",
"@exoticknight/labnana-mcp"
],
"env": {
"LABNANA_API_KEY": "ใส่ค่าของคุณ",
"LABNANA_OUTPUT_DIR": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add labnana --env LABNANA_API_KEY='ใส่ค่าของคุณ' --env LABNANA_OUTPUT_DIR='ใส่ค่าของคุณ' -- npx -y @exoticknight/labnana-mcpเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"labnana": {
"command": "npx",
"args": [
"-y",
"@exoticknight/labnana-mcp"
],
"env": {
"LABNANA_API_KEY": "ใส่ค่าของคุณ",
"LABNANA_OUTPUT_DIR": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"labnana": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@exoticknight/labnana-mcp"
],
"env": {
"LABNANA_API_KEY": "ใส่ค่าของคุณ",
"LABNANA_OUTPUT_DIR": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
LABNANA_OUTPUT_DIR envค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 8 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub exoticknight ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: LABNANA_API_KEY
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (2.2.0) เข้า registry 17 วันที่ผ่านมา
โปรแกรมที่รองรับ 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
An MCP server for the Labnana OpenAPI. It enables Claude, Claude Code, and other MCP clients to generate and edit images with Labnana.
Current OpenAPI models (product names mapped to the model parameter):
| Product name | model | Provider | Resolutions | Best for |
|---|---|---|---|---|
| Nano Banana Pro | gemini-3-pro-image | 1K / 2K / 4K | In-image text, character consistency, high-fidelity output | |
| Nano Banana 2 | gemini-3.1-flash-image | 1K / 2K / 4K | Fast iteration and extreme aspect ratios | |
| GPT-Image-2 | gpt-image-2 | OpenAI | 1K / 2K / 4K | Spec-driven generation, layout control, illustration |
| GPT-Image-2.5 Flare | gpt-image-2.5-flare | OpenAI | 1K / 2K / 4K | Faster generation |
| GPT-Image-2.5 Sunburst | gpt-image-2.5-sunburst | OpenAI | 1K / 2K / 4K | Detail-dense images |
| Wan2.7 Image Pro | wan2.7-image-pro | Alibaba | 1K / 2K / 4K¹ | Photoreal and poster-style images |
| Wan2.7 Image | wan2.7-image | Alibaba | 1K / 2K | Lower-cost everyday generation |
| Seedream 5.0 Pro | seedream-5-0-pro | ByteDance | 1K / 2K | Coordinate-driven region editing and Chinese instructions |
¹ wan2.7-image-pro supports 4K only for text-to-image; generations with reference images are limited to 2K. The OpenAPI reference lists GPT-Image-2.5 Flare and Sunburst; the model directory lists 1K / 2K / 4K and 10 aspect ratios, while the integration guide has not yet added the variants to its model list. Both variants support up to four reference images and cost the same. Check estimate_credits for the current price before generation.
GitHub · npm · MCP Registry · Glama · 中文文档
Requires Node.js 20.9 or later.
LABNANA_API_KEY available in the environment used by Claude Code.claude mcp add labnana -- npx -y @exoticknight/labnana-mcp
The package can also be started directly with:
npx -y @exoticknight/labnana-mcp
Add the server through DSH's official MCP client plugin. Pin 2.2.0 when you want the version shown by initialize to identify this MCP Apps-capable build:
- id: mcp-labnana
name: '@deepseek-ai/dsh-mcp-client' config: serverName: labnana transport: stdio command: npx args: ['-y', '@exoticknight/labnana-mcp@2.2.0'] env: LABNANA_API_KEY: !!js process.env.LABNANA_API_KEY
DSH's MCP bridge can project supported ImageContent into the calling vision model. Version 2.1 also publishes a standard MCP Apps single-file View for generate_image and get_generation_task. An MCP Apps-capable DSH Web host renders the preview inline; a stock generic DSH tool card may still show the JSON fallback even though the model received the image. This is a client presentation limitation, not a lost generation result.
For a local source checkout, use the same row with command: node, an absolute args path to dist/index.js, and cwd set to this repository. Current stock DSH builds bridge MCP tools but do not consume MCP resources in the generic tool card. Without an MCP Apps host, model vision still works and the card falls back to JSON.
One-click install (replace the placeholder API key after installing):
Use an equivalent mcpServers configuration:
{
"mcpServers": { "labnana": { "command": "npx", "args": ["-y", "@exoticknight/labnana-mcp"], "env": { "LABNANA_API_KEY": "lh_xxxxxxxxx" } } } }
npm install
npm run build
Then configure the server with the generated dist/index.js:
claude mcp add labnana -- node <path-to-repo>/dist/index.js
On Windows, use an absolute path such as:
claude mcp add labnana -- node C:/path/to/labnana-mcp/dist/index.js
The server reads the following environment variable:
| Variable | Required | Description |
|---|---|---|
LABNANA_API_KEY | Yes | Labnana API key. |
LABNANA_OUTPUT_DIR | No | Default directory for saved images. Falls back to labnana-images/ under the working directory. |
The command-line options below are also supported:
| Option | Description |
|---|---|
--api-key | Provide the API key for a local process. |
--base-url | Override the default API endpoint, https://api.labnana.com. |
--output-dir | Default directory for saved images. |
Environment variables are recommended because command-line arguments may be visible in the local process list.
| Tool | Description |
|---|---|
generate_image | One-stop text-to-image / image-to-image / editing. Saves the original and returns a bounded MCP image preview, structured metadata, and JSON fallback by default; 4K requests poll internally. |
estimate_credits | Estimate the credits required for a generation without generating an image. |
get_subscription | Get subscription status, credit balances, and free usage information. |
list_generation_tasks | List generation task history with pagination and optional status filtering. |
get_generation_task | Get task details and public image URLs (useful after a generate_image timeout). |
{
"name": "generate_image", "arguments": { "model": "gemini-3-pro-image", "prompt": "Change the background of the image to the grasslands of Inner Mongolia", "referenceImages": [ { "fileData": { "fileUri": "https://cdn.labnana.com/xxx.png", "mimeType": "image/png" } } ], "imageConfig": { "imageSize": "2K", "aspectRatio": "16:9" } } }
The default is outputMode=hybrid: the full original is saved to disk while a bounded MCP image preview, structuredContent, and equivalent JSON text are returned together. This provides progressive compatibility across Codex, Claude Code, Claude Desktop, and other MCP clients. Use saveDir to choose the target directory.
All 1K, 2K, 4K, and get_generation_task results use the same envelope:
{
"schemaVersion": 1, "status": "succeeded", "taskId": "task-123", "images": [ { "index": 0, "mimeType": "image/png", "width": 4096, "height": 4096, "byteLength": 18442231, "sha256": "...", "url": "https://.../original.png", "filePath": "C:\\...\\labnana.png", "preview": { "included": true, "mimeType": "image/jpeg", "width": 1600, "height": 1600 } } ] }
Image base64 appears only in standard MCP ImageContent, never duplicated into text or structured metadata. Full 4K originals are not inlined; previews have a maximum 1600-pixel edge and target a 2 MiB byte ceiling, while filePath/url locate the original.
Use referenceImages for image-to-image generation and editing. fileData.fileUri supports gs:// and https://; small images can be passed as base64 through inlineData.data.
4K requests automatically run as asynchronous tasks: the server creates the task, polls with rate-limit backoff, downloads and saves originals, and creates previews. If the wait exceeds timeoutSeconds (default 300), the result has status=pending and a taskId; this is not treated as generation failure. Fetch the final preview and original URL later with get_generation_task.
{
"name": "estimate_credits", "arguments": { "prompt": "A Shiba Inu running through a snowy landscape", "imageConfig": { "imageSize": "4K" } } }
model (default: gemini-3-pro-image): gemini-3-pro-image, gemini-3.1-flash-image, gpt-image-2, gpt-image-2.5-flare, gpt-image-2.5-sunburst, wan2.7-image-pro, wan2.7-image, or seedream-5-0-pro. The provider is derived from the model automatically. Use estimate_credits to confirm a GPT-Image-2.5 size and cost before generation.imageConfig.imageSize: 1K, 2K, or 4K. wan2.7-image and seedream-5-0-pro do not support 4K; wan2.7-image-pro also disallows 4K when reference images are present.imageConfig.aspectRatio: 1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9, 1:4, 4:1, 1:8, or 8:1. GPT-Image-2 may omit this field and let the service choose; GPT-Image-2.5 supports the ten ratios from 1:1 through 21:9; Wan2.7 supports only 1:1, 16:9, 9:16, 4:3, and 3:4.referenceImages: OpenAPI allows up to 14 for Gemini, 4 for GPT-Image-2 / GPT-Image-2.5, 9 for Wan2.7, and 10 for Seedream. These are API limits, not the separate upload limits of the web generator.referenceImages and describe the target region and change in prompt using absolute coordinates from the top-left origin. OpenAPI has no separate mask or region parameter.outputMode (generate_image only): hybrid (default, save originals and inline bounded previews), file (save originals and return metadata only), or inline (do not save to saveDir; return a bounded preview, and persist the original to the default recovery directory only when the upstream response has no original URL).saveDir / timeoutSeconds (generate_image only): target directory for hybrid/file mode, and the maximum wait for async (4K) generations.| Model | 1K | 2K | 4K |
|---|---|---|---|
gemini-3-pro-image | 15 | 15 | 30 |
gemini-3.1-flash-image | 10 | 10 | 20 |
gpt-image-2 | 4 | 6 | 10 |
wan2.7-image-pro | 6 | 8 | 12 (text-to-image only) |
wan2.7-image | 4 | 6 | Not supported |
seedream-5-0-pro | 6 | 15 | Not supported |
GPT-Image-2.5 Flare and Sunburst have the same price, but the integration guide does not list their size-specific credit values. Call estimate_credits with the intended model and imageConfig for the current
ตัดมาแค่ช่วงต้น อ่านต่อใน repo