Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Content studio MCP for coding agents: BYO keys, deterministic video rendering, draft-first posting
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
OPENAI_API_KEY, GEMINI_API_KEY, BLUESKY_IDENTIFIER, BLUESKY_APP_PASSWORD, MASTODON_ACCESS_TOKEN, X_API_KEY, X_API_SECRET, X_ACCESS_TOKEN, X_ACCESS_TOKEN_SECRETค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"broll": {
"command": "npx",
"args": [
"-y",
"broll-mcp"
],
"env": {
"OPENAI_API_KEY": "ใส่ค่าของคุณ",
"GEMINI_API_KEY": "ใส่ค่าของคุณ",
"BLUESKY_IDENTIFIER": "ใส่ค่าของคุณ",
"BLUESKY_APP_PASSWORD": "ใส่ค่าของคุณ",
"MASTODON_ACCESS_TOKEN": "ใส่ค่าของคุณ",
"X_API_KEY": "ใส่ค่าของคุณ",
"X_API_SECRET": "ใส่ค่าของคุณ",
"X_ACCESS_TOKEN": "ใส่ค่าของคุณ",
"X_ACCESS_TOKEN_SECRET": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add broll --env OPENAI_API_KEY='ใส่ค่าของคุณ' --env GEMINI_API_KEY='ใส่ค่าของคุณ' --env BLUESKY_IDENTIFIER='ใส่ค่าของคุณ' --env BLUESKY_APP_PASSWORD='ใส่ค่าของคุณ' --env MASTODON_ACCESS_TOKEN='ใส่ค่าของคุณ' --env X_API_KEY='ใส่ค่าของคุณ' --env X_API_SECRET='ใส่ค่าของคุณ' --env X_ACCESS_TOKEN='ใส่ค่าของคุณ' --env X_ACCESS_TOKEN_SECRET='ใส่ค่าของคุณ' -- npx -y broll-mcpเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"broll": {
"command": "npx",
"args": [
"-y",
"broll-mcp"
],
"env": {
"OPENAI_API_KEY": "ใส่ค่าของคุณ",
"GEMINI_API_KEY": "ใส่ค่าของคุณ",
"BLUESKY_IDENTIFIER": "ใส่ค่าของคุณ",
"BLUESKY_APP_PASSWORD": "ใส่ค่าของคุณ",
"MASTODON_ACCESS_TOKEN": "ใส่ค่าของคุณ",
"X_API_KEY": "ใส่ค่าของคุณ",
"X_API_SECRET": "ใส่ค่าของคุณ",
"X_ACCESS_TOKEN": "ใส่ค่าของคุณ",
"X_ACCESS_TOKEN_SECRET": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"broll": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"broll-mcp"
],
"env": {
"OPENAI_API_KEY": "ใส่ค่าของคุณ",
"GEMINI_API_KEY": "ใส่ค่าของคุณ",
"BLUESKY_IDENTIFIER": "ใส่ค่าของคุณ",
"BLUESKY_APP_PASSWORD": "ใส่ค่าของคุณ",
"MASTODON_ACCESS_TOKEN": "ใส่ค่าของคุณ",
"X_API_KEY": "ใส่ค่าของคุณ",
"X_API_SECRET": "ใส่ค่าของคุณ",
"X_ACCESS_TOKEN": "ใส่ค่าของคุณ",
"X_ACCESS_TOKEN_SECRET": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
BLUESKY_IDENTIFIER envค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 7 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub luke-fairbanks ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: OPENAI_API_KEY, GEMINI_API_KEY, BLUESKY_APP_PASSWORD, MASTODON_ACCESS_TOKEN, X_API_KEY, X_API_SECRET, X_ACCESS_TOKEN, X_ACCESS_TOKEN_SECRET
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.1.1) เข้า registry 4 เดือนที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย
ในหมวดเดียวกันมี 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
The content studio MCP for coding agents. broll gives Claude Code, Codex, and any MCP client real hands for content work: generate media with *your own* API keys, render videos and carousels deterministically with code, and publish through a draft-first outbox.
The model plans. Code renders. Nothing posts without confirmation.
Every developer running a coding agent hits the same wall: the agent can write the marketing plan, but it can't *make* the carousel, cut the video, or post it. Existing tools are credit-metered schedulers built for social media managers. broll is built for developers:
OPENAI_API_KEY / GEMINI_API_KEY directly. broll never proxies your inference or resells credits. A built-in mock provider keeps every workflow runnable before you add any keys.publish_post requires confirm: true, validates per-platform rules (char limits, media counts, file sizes) before anything leaves the machine, and reports per-platform results. The export platform always works: it writes a ready-to-post bundle.Requires Node 20+ and ffmpeg (brew install ffmpeg).
cd broll
npm install && npm run build
Register with Claude Code (or use the checked-in .mcp.json when working inside this repo):
claude mcp add broll -- node /path/to/broll/dist/index.js
Optional environment:
| Variable | Purpose |
|---|---|
OPENAI_API_KEY | gpt-image-1 image generation |
GEMINI_API_KEY | Imagen images + Veo video generation |
BLUESKY_IDENTIFIER / BLUESKY_APP_PASSWORD | live Bluesky posting (use an app password) |
MASTODON_ACCESS_TOKEN (+ optional MASTODON_INSTANCE) | live Mastodon posting — no app review, any instance |
X_API_KEY / X_API_SECRET / X_ACCESS_TOKEN / X_ACCESS_TOKEN_SECRET | live X posting (free API tier works) |
BROLL_HOME | workspace location (default ~/.broll) |
BROLL_FFMPEG / BROLL_FFPROBE | explicit binary paths |
Brand kit: drop a broll.config.json next to where the server runs (see this repo's for an example) — name, handle, colors, font, logo. Every render picks it up automatically.
| Tool | What it does |
|---|---|
broll_status | Workspace, ffmpeg, provider + platform readiness. Call first. |
generate_image / generate_video | BYO-key generation → workspace assets (mock fallback when keyless) |
import_asset / list_assets / probe_asset | Bring in and inspect media |
render_video | Declarative RenderPlan → mp4: clips (video/image/color), trims, cover/contain fits, burned-in titles + timed captions, music bed, 9:16 / 1:1 / 4:5 / 16:9 |
render_carousel | Branded slide sets (the Instagram/LinkedIn format): kicker, headline, body, accent bar, page numbers, watermark — layout is 100% code |
extract_frame | Pull a PNG frame so the agent can visually QA its own render |
create_post_draft | Text + media + platforms → validated, reviewable draft in the outbox |
list_drafts / publish_post | Inspect the outbox; publish with explicit confirm: true |
npm run smoke
drives the real server through a real MCP client: generates a background, renders a 3-slide carousel and a 9:16 teaser video with captions, extracts a QA frame, then drafts and "publishes" an export bundle — all into ./.broll/.
The local server you're looking at stays MIT and free. broll cloud adds the parts a local server can't do well: the app-review-walled platforms (Instagram, LinkedIn, TikTok) through broll's own approved credentials, schedules that run while your laptop is closed, and a swipe-to-approve inbox on your phone. ~$29/mo when it ships.
[Join the waitlist → 👍 issue #1](https://github.com/luke-fairbanks/broll/issues/1) — subscribers get the launch note; comments set the platform build order.
publish_post hard-requires confirm: true — agents are instructed to obtain the user's explicit go-ahead.Early but real: 96 tests including real-ffmpeg integration renders and a full MCP round trip.
npx broll-mcp distributionnpm test # unit + integration (real ffmpeg)
npm run typecheck npm run smoke # end-to-end artifact check
MIT.