Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Turn footage into finished video: reframing, captions behind the subject, motion graphics, renders.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
ใช้ได้ทั้ง Claude บนเว็บ แอปคอมพิวเตอร์ และมือถือ:
https://api.cueframe.ai/v1/mcpพิมพ์คำสั่งนี้ใน Terminal
claude mcp add --transport http cueframe https://api.cueframe.ai/v1/mcpวางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"cueframe": {
"url": "https://api.cueframe.ai/v1/mcp"
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"cueframe": {
"type": "http",
"url": "https://api.cueframe.ai/v1/mcp"
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ChatGPT ต่อได้เฉพาะ server ที่อยู่บนอินเทอร์เน็ต:
https://api.cueframe.ai/v1/mcpชื่อเมนูอาจต่างกันเล็กน้อยตามแพ็กเกจและรุ่นของแอป
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
ยังไม่ได้อ่านรายการเครื่องมือของตัวนี้ เราตรวจ endpoint ทีละชุดวนไป
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 6 พ.ย. 2569
ชื่อใน registry ยืนยันโดเมน cueframe.ai แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป
ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป
ยังไม่ได้ตรวจ เราอ่านรายการเครื่องมือตอนตรวจ endpoint
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
รันบนคลาวด์ของผู้ทำ ต่อผ่านอินเทอร์เน็ตได้เลย ไม่ต้องลงโปรแกรม แต่ข้อมูลที่ส่งให้จะผ่านเซิร์ฟเวอร์ของผู้ทำ
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (1.2.0) เข้า registry 27 วันที่ผ่านมา
โปรแกรมที่รองรับ 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
CueFrame is a hosted service for composing, editing and rendering video. Connect your agent over MCP, automate an edit from the CLI, or integrate the REST API into your application. Each surface works with editable projects containing clips, captions and motion graphics, and renders them to MP4.
| Your workflow | Start here |
|---|---|
| Ask an agent to make or edit a video | MCP and agent plugin |
| Run video workflows from a terminal or script | CLI |
| Build video editing into an application | API and TypeScript SDK |
First render · Connection guide · Templates · API reference · Agent documentation index
*A frame from the Yosemite Peregrines template. Watch the video and try the same edit.*
For Claude Code, Codex, Cursor, VS Code, and other supported local agents, run this in your terminal with Node.js 24 or newer:
npx -y cueframe@0.12 install
The installer detects supported agents and adds the hosted CueFrame MCP endpoint to their configuration. It installs the skills in ~/.agents/skills and ~/.claude/skills, preserving locally modified skills by default. It can update multiple detected clients; use --dry-run to inspect the changes first.
Restart your agent session. Then ask:
Use CueFrame's get_account tool to check my connection and show my available credits.
Your client may prompt you to authenticate or open a browser. Sign in to CueFrame and authorize the connection; interactive OAuth clients need no API key. Cloud operations use credits. Check your balance and estimated costs before starting paid work; see cloud rates.
ChatGPT and Claude Desktop: use your client's hosted connector setup with https://api.cueframe.ai/v1/mcp, then authenticate. The terminal installer does not configure ChatGPT. See the connection guide and CueFrame connection skill for supported paths. Skills installation and hosted connector setup are separate steps.
Already connected? Skip installation and give your agent a video task. If CueFrame's tools do not appear, restart the client and check its MCP connection settings.
Try the Yosemite first-render walkthrough: render a template, change one word, and render again from the same project.
yosemite-peregrines.mp4. Use the original source, because the finished demo has its title baked in. Follow the source's download and reuse guidance.Use CueFrame to start the yosemite-peregrines template from cueframe-ai/cueframe-templates with this original video. Load template.cueframe and its prepared subject matte. Preview the editable project and estimate cloud costs. After I approve the render, return the MP4 link and project ID.
In that same project, replace the behind-subject title PHENOMENAL with EXTRAORDINARY. Preserve the footage, spoken captions, audio, timing, placement, and depth. Preview the changed title, estimate the render cost, and render after I approve.
The template selects 83.616–93.359 seconds of the original video. You should get two MP4s from one editable project. Uploading footage and running cloud operations use credits; the two renders are billed separately.
*The project stays editable: the desktop editor shows the title as a separate layer, alongside footage and captions. Watch the title change.*
flowchart LR
A[Your request + footage] --> B[Your agent + CueFrame skills] B --> C[Hosted CueFrame MCP] C --> D[Editable project + preview] D --> E[Render job → MP4 link]
The agent inspects available tools, checks your account, prepares media and the project, previews changes, and submits a render. Long-running operations return IDs; the agent waits for completion and gives you the result. You do not need to write the tool calls yourself. The detailed quickstart explains the individual calls.
Starting a new video or adding to an existing edit? See when to start a template versus insert a component for discovery, media bindings, exact selection, preview and render.
For your next video, describe the result and provide the inputs:
Turn this interview into a 20-second vertical clip with word-timed captions. Preview the strongest moment and show estimated costs before rendering.
Find an image-carousel component for these product photos. Show suitable choices and their required inputs before creating the video.
Change only the final title in this project. Keep the rest of the edit unchanged.
Choose one setup path. A plugin installs the skills and hosted MCP configuration together. A server-only connection adds tools; skills provide the workflow guidance.
Claude Code and Codex plugins
Claude Code:
claude plugin marketplace add cueframe-ai/cueframe-mcp
claude plugin install cueframe@cueframe
Codex:
codex plugin marketplace add cueframe-ai/cueframe-mcp
codex plugin add cueframe@cueframe
Restart the session, authenticate when prompted, and ask the agent to call get_account.
Gemini CLI and Agent Skills clients
Gemini CLI:
gemini extensions install https://github.com/cueframe-ai/cueframe-mcp
Install skills in any client that supports Agent Skills:
npx skills add cueframe-ai/cueframe-mcp
Skills alone do not connect the MCP server. Add the hosted endpoint through your client's MCP settings if it is not already connected.
MCP server only, manual setup, and headless clients
The hosted endpoint is `https://api.cueframe.ai/v1/mcp`, using Streamable HTTP. For example, in Claude Code:
claude mcp add --transport http cueframe https://api.cueframe.ai/v1/mcp
For Cursor and VS Code, use the one-click links in the connection guide. Configuration keys differ between clients. Per-client examples are in examples/.
Interactive clients can use browser sign-in. Headless clients send Authorization: Bearer cf_live_…; see llms-install.md for authentication and stdio bridge options. The glama/ shim executes no tools and cannot be used to make videos.
Skills teach the agent how to carry out video tasks. You describe the task; the agent selects the relevant guidance.
| Task | Skills |
|---|---|
| Plan and compose a new video | cueframe-storyboard, composing-video |
| Clip a podcast or interview | clip-a-talking-head |
| Make a launch film or social reel | launch-video, make-a-social-reel |
| Make a brand reel or change an existing brand | brand-reel, rebrand-a-video |
| Extract a visual style | extracting-brand-kits |
| Create a product demo | cueframe-brand-demo, cueframe-product-video |
| Customize motion graphics or make a 3D shot | cueframe-component-authoring, cueframe-scene-shot |
| Add music or adapt to more formats | add-music-bed, every-format-from-one-edit |
| Preview, refine, and check quality | cueframe-compose-loop, video-craft-standards |
| Connect or work through the CLI | cueframe-connect, cueframe-cli |
Claude Code's session hook and Cursor's rule help select the entry point. Other hosts load the installed skills through their own mechanisms. Scoped edits should preserve unrelated work.
Use the CLI for explicit video commands, shell scripts and structured JSON output. It connects to the hosted API; it does not run a local renderer. Requires Node.js 24 or newer.
npx -y cueframe@0.12 --help
npx -y cueframe@0.12 login npx -y cueframe@0.12 api GET /v1/me --json npx -y cueframe@0.12 describe --json
login opens the browser to authenticate. Headless scripts can supply CUEFRAME_API_KEY. The account request checks your connection and credits; describe lists command arguments and options without making an API call.
CLI guide · CLI walkthrough · Templates · npm package
Use the REST API to create projects, import media, change compositions and follow render jobs from your application. Requests go to `https://api.cueframe.ai` with an API key from your account. Check your account before metered operations; cloud rendering and processing use credits.
For TypeScript or JavaScript on Node.js 24+, install the typed client:
npm install @cueframe/sdk
import { account, createClient } from "@cueframe/sdk";
if (!process.env.CUEFRAME_API_KEY) throw new Error("Set CUEFRAME_API_KEY"); createClient({ baseUrl: "https://api.cueframe.ai", apiKey: process.env.CUEFRAME_API_KEY, }); const result = await account.getAccount(); console.log(result.plan, result.entitlements);
Other languages can call REST directly or generate a client from the versioned public OpenAPI contract. The SDK is a client for the hosted service, not the server implementation.
API walkthrough · API reference · SDK guide · Render example · npm package
This repository contains the agent plugin, developer toolkit, and registry files. The hosted MCP server is maintained separately in the application repository. You connect to CueFrame's hosted service; cloning this repository does not run that service locally.
| Area | What you can use or contribute |
|---|
| skills/, host manifests, hooks/, [`rules/
ตัดมาแค่ช่วงต้น อ่านต่อใน repo