Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
ยังไม่มีคำอธิบายภาษาไทย ดูข้อเท็จจริงด้านล่าง หรือเปิดคำอธิบายต้นฉบับจากผู้ทำ
MCP server for Clipkit — gives AI agents a video toolbox via the Clipkit schema.เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
ผลตรวจผ่าน 4/4 · สิ่งที่คุณถามผ่านเซิร์ฟเวอร์ของผู้ทำ (www.clipkit.dev) · ✓ ตรวจคำสั่งแล้ว 13 พ.ย. 2569
ขั้นแรก: คุณใช้ AI ตัวไหน
เลือกแอปที่คุณใช้ ขั้นตอนจะขึ้นด้านล่าง
ต่อกับ Claude ได้ · ประมาณ 2 นาที
ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม · ตั้งครั้งเดียวที่ claude.ai หรือแอปบนคอม แล้วใช้ในแชตได้ · บัญชีฟรีเพิ่มได้ 1 ตัว · แผน Team/Enterprise ให้เจ้าของ (Owner) เป็นคนเพิ่ม
CustomizeConnectors
คัดลอกจากที่นี่ไปวางในช่องชื่อเดียวกันบนหน้าจอของ Claude แล้วกด Continue
Clipkithttps://www.clipkit.dev/mcpกด Continue ผ่านหน้าตรวจการล็อกอินที่ Claude ตรวจเจอ · หัวข้อ Authentication เลือกตามที่ผู้ทำบอก (Sign in now, Sign in when needed หรือ No sign in) แล้วกด Add
+ConnectorsClipkit
ใช้ Clipkit บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า Claude บอกว่ากำลังใช้ Clipkit หรือมีชื่อเครื่องมือของ Clipkit ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
ต่อกับ ChatGPT ได้ ขึ้นกับแผน
MCP แบบเต็ม: ChatGPT Business, Enterprise หรือ Edu บนเว็บ · Pro: ต่อได้ด้วยสิทธิ์อ่านและดึงข้อมูล เครื่องมือที่แก้ข้อมูลอาจใช้ไม่ได้ · Plus: เอกสารยังไม่ยืนยัน ถ้าเห็นเมนูเพิ่ม MCP แบบกำหนดเองในหน้าปลั๊กอิน ลองตามขั้นตอนได้ · ใช้บนเว็บเท่านั้น
Plugins+Add custom MCP server
ใส่ชื่อ แล้ววางที่อยู่ใต้ Connection ติ๊กยอมรับคำเตือน แล้วกด Create as a plugin
Clipkithttps://www.clipkit.dev/mcpเปิดแชตใหม่แล้วเลือก Clipkit จากรายการปลั๊กอินก่อนพิมพ์
ใช้ Clipkit บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า ChatGPT บอกว่ากำลังใช้ Clipkit หรือมีชื่อเครื่องมือของ Clipkit ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ OpenAI เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
ต่อกับ Claude Code ได้ · ประมาณ 2 นาที
ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม
Mac: กด Command+Space พิมพ์ Terminal · Windows: เปิด PowerShell
claude mcp add --transport http --scope user clipkit https://www.clipkit.dev/mcpต้องเห็น Clipkit ในรายการและขึ้นว่าเชื่อมต่อแล้ว
ใช้ Clipkit บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า Claude Code บอกว่ากำลังใช้ Clipkit หรือมีชื่อเครื่องมือของ Clipkit ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
ต่อกับ Cursor ได้ · ประมาณ 2 นาที
ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม
ใช้ Clipkit บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า Cursor บอกว่ากำลังใช้ Clipkit หรือมีชื่อเครื่องมือของ Clipkit ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Cursor เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
ต่อกับ VS Code ได้ · ประมาณ 2 นาที
ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม
ใช้ Clipkit บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า VS Code บอกว่ากำลังใช้ Clipkit หรือมีชื่อเครื่องมือของ Clipkit ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ VS Code เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
โปรแกรมอื่นที่ใช้ MCP ได้ เช่น Windsurf, Zed หรือ Gemini CLI มีวิธีเพิ่มต่างกัน ดูวิธีของแต่ละตัวในหน้ารวมโปรแกรม
ที่อยู่สำหรับโปรแกรมที่ต่อผ่านเว็บ
https://www.clipkit.dev/mcpค่าตั้งแบบไฟล์ JSON อยู่ในหัวข้อ “สำหรับคนเขียนโค้ด” ด้านล่าง
Claude Code
claude mcp add --transport http --scope user clipkit https://www.clipkit.dev/mcpCursor (~/.cursor/mcp.json)
{
"mcpServers": {
"clipkit": {
"url": "https://www.clipkit.dev/mcp"
}
}
}VS Code (mcp.json)
{
"servers": {
"clipkit": {
"type": "http",
"url": "https://www.clipkit.dev/mcp"
}
}
}ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
ดูจากแบบการต่อของ server ตัวนี้ และเอกสารของผู้ทำโปรแกรมแต่ละตัว ตรวจเมื่อ 10 พ.ย. 2569
ต่อผ่านคลาวด์ได้ใน
ClaudeChatGPTGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast
ชื่อและคำอธิบายเครื่องมือตามที่ server ตอบมาเมื่อ 12 พ.ย. 2569 ผู้ทำเป็นคนเขียน ไม่ใช่เรา แสดงเป็นข้อความล้วน
read_docsReturn a canonical Clipkit doc as text. topic "card" = the ~8KB compact authoring card — the recommended context for authoring; "pattern-lighting" = the shine/neon/glow technique rigs; "pattern-data-viz" / "pattern-cinematic-ui" / "pattern-ui-screencast" / "pattern-promo-teaser"
get_schemaReturn the authoritative JSON Schema for a Clipkit Source — exact field names, types, and enums, generated from the protocol. Call with no argument for the full Source schema, or with element_type (e.g. "text", "shape", "particles") for just that element's fields (much smaller).
create_projectCreate a new, blank Clipkit project with the given dimensions and duration, and return its project_id. Defaults: 1920×1080, 10 seconds, 30 fps, output_format "mp4". Call this first when starting a new video. Pass an existing project_id to reset that project to blank; omit it to s
get_projectReturn the full current Clipkit source as JSON. Use this to inspect the project, pass it to a render pipeline, or compose follow-up edits.
describe_projectReturn a compact, human-readable summary of the current project — dimensions, fps, duration, an element breakdown by type, a per-track timeline (paint order low→high), and render-time warnings. Much cheaper to read than get_project's full JSON; use it to orient yourself or sanity
set_projectReplace the entire project with the given source JSON, returning its project_id. This is the PRIMARY way to build: use it to create a composition or to add/change many elements at once. (To tweak a single element in an existing project, use edit_element / add_element / delete_ele
add_elementAppend a single element to an existing project — a TWEAK, e.g. dropping in one more caption or shape. By default it is added at the top level; pass parent_id to add it INTO a group (nested). The element is any valid schema element: video, image, text, shape, audio, group, caption
edit_elementChange fields on the element with the given id by merging in a partial element — only the keys you include change. The id may be any element ANYWHERE in the tree, including one nested inside a group (or its mask). Pass a whole nested value (e.g. a new `keyframe_animations` array)
delete_elementDelete the element with the given id, anywhere in the tree (including one nested inside a group or its mask) — a tweak to an existing composition. (The project must keep at least one top-level element.)
validate_projectRun the @clipkit/protocol validator against the current project AND surface render-time warnings even when the JSON is valid — things that pass the schema but the runtime will silently drop or clip: emoji / non-ASCII text (the runtime font atlas is ASCII-only), elements that run
preview_stillRender a single frame of the current project to a PNG and return it as an image you can look at. This is how you check your work — in chat there is no other way to see what a composition actually looks like. Use it liberally: after composing, after edits, and at different times t
create_promoAssemble a designed-looking promo/intro/product/data video from the Clipkit pattern library: give an ordered list of SCENES and the words, and it bakes in the camera, glass, lighting, motion blur, timing, and layout, then returns an editor link. This is a FAST option when a conve
open_in_editorValidate the current project and create a link that opens it in the Clipkit web editor, where the user can preview and refine it. This shares the PROJECT (nothing is rendered — that's render_video). Use after composing or editing. Returns a URL.
ingest_assetFetch a remote media URL (image/video/audio) and HOST it on Clipkit, returning a stable asset_url to put in an element's `url`. Use this so the project's media survives — the original link may rot, be private, or block hotlinking. Anonymous projects allow up to 5 hosted assets /
load_projectImport a previously shared project as the current project, by its share id or its editor URL (e.g. https://clipkit.dev/editor?id=…), returning its project_id. Use this to continue working on a project the user opened in the editor or shared earlier — the round-trip for open_in_ed
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 13 พ.ย. 2569
ชื่อใน registry ยืนยันโดเมน clipkit.dev แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)
มีการแก้โค้ดล่าสุด 3 เดือนที่ผ่านมา
ไม่เกี่ยว: server บนคลาวด์ของเจ้าของ clipkit.dev เอง คุณไม่ได้รันโค้ดจากรีโป
ไม่ต้องล็อกอิน
อ่านคำอธิบายเครื่องมือ 15 ตัวแล้ว ไม่พบคำสั่งแอบแฝงถึง AI
ถาม แชร์เคล็ดลับ หรือแจ้งว่าใช้ไม่ได้ เรียงตามที่คนกดว่ามีประโยชน์
ยังไม่มีใครโพสต์ ถามหรือแชร์เป็นคนแรกได้เลย
ข้อความในส่วนนี้เขียนโดยผู้ใช้ ไม่ใช่ทีม PopNx
ยังไม่มีรีวิว
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 4 จาก 4 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
รันบนคลาวด์ของผู้ทำ ต่อผ่านอินเทอร์เน็ตได้เลย ไม่ต้องลงโปรแกรม แต่ข้อมูลที่ส่งให้จะผ่านเซิร์ฟเวอร์ของผู้ทำ
repo บน GitHub มีการแก้โค้ดล่าสุด 3 เดือนที่ผ่านมา และส่งรุ่นล่าสุด (1.0.0) เข้า registry 4 เดือนที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต่อผ่าน URL จึงใช้กับโปรแกรมที่รับ remote MCP ได้ เช่น ChatGPT บนเว็บ (แบบเต็มในแผน Business ขึ้นไป · Pro แบบอ่านอย่างเดียว)
ในหมวดเดียวกันมี Figma Context MCP, AutoClip, Next AI Draw.io
server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว
อ่านการ์ด:↓ ดาวน์โหลดต่อสัปดาห์i★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Clip long videos into short clips with covers and captions. Local CLI and MCP.
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
An MCP server that exposes the Clipkit schema as tools, letting AI agents compose video projects programmatically. The Clipkit schema is the protocol — agents don't speak a custom DSL, they construct schema-valid JSON.
npx -y @clipkit/mcp-server
Or wire it into a host like Claude Desktop:
{
"mcpServers": { "clipkit": { "command": "npx", "args": ["-y", "@clipkit/mcp-server"], "env": { "CLIPKIT_API_URL": "https://clipkit.dev", "CLIPKIT_API_KEY": "ck_live_…" } } } }
| Var | Purpose |
|---|---|
CLIPKIT_API_URL | Host for create_promo / open_in_editor links. Defaults to https://clipkit.dev. Set to http://localhost:3000 when developing against a local web app. |
CLIPKIT_API_KEY | Optional dashboard key (ck_live_…, from Settings → API keys). When set, projects are owned by your team (permanent on paid plans) and sent as Authorization: Bearer. Without it, projects are anonymous and expire after 7 days. |
| Tool | Description |
|---|---|
create_promo | Fastest path to a designed promo: an ordered list of scenes → composed via the pattern library → returns a shareable editor link. |
create_project | Reset to a blank source. Optional dimensions, duration, fps, output format. |
set_project | Replace the entire source with a validated JSON object. The primary way to build (a composition, or many elements at once). |
add_element / edit_element / delete_element | Tweak a *single* element in an existing composition. edit_element merges a partial element (only the keys you pass change). |
get_project | Return the current Clipkit source JSON. |
describe_project | Plain-language summary — dimensions, timeline by track, element counts, render-time warnings. Cheaper to read than the full JSON. |
validate_project | Schema validation plus render-time warnings even when valid (emoji/non-ASCII dropped by the font atlas, elements past the end, missing duration). |
preview_still | Render one frame to a PNG and return it as an image — how a chat-mode agent *sees* its work. Free + rate-limited. |
transcribe_to_captions | Transcribe a media url (or local path) into a word-timestamped caption element. Whisper in-process — no key, no upload. |
open_in_editor | Validate the current project and return a link that opens it in the Clipkit editor (free). |
load_project | Re-import a shared project by share id or editor URL — the round-trip for open_in_editor. |
render_video | Render the current project to a finished MP4 in the cloud (paid — consumes credits, needs CLIPKIT_API_KEY). |
Every mutation goes through @clipkit/protocol's validator before being applied. Invalid edits return a structured error with the offending path; valid edits are committed atomically.
create_promo for a designed video, or write a full source JSON and call set_project.preview_still to look at a frame; validate_project / describe_project for a structural read-back. Loop: edit → preview_still → fix.add_element / edit_element / delete_element for single-element changes to a large composition.open_in_editor for a free editor link (and load_project to re-import it later), or render_video for a finished MP4.State is in-memory per server session. Each MCP connection gets a fresh project. There is no persistence; agents that want to save a project should call get_project and store the JSON externally.
See @clipkit/protocol for the full element type catalog (video, image, text, shape, audio, composition, caption) and their fields.