Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Narrated demo videos of a branch: your agent records, polls and fetches the video and stories.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
Authorizationค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
ที่อยู่นี้ต้องใส่ key ใน header ของคำขอ ซึ่งเมนูเพิ่ม connector ใส่ให้ไม่ได้ ใช้ Claude Code, Cursor หรือ VS Code แทน
พิมพ์คำสั่งนี้ใน Terminal
claude mcp add --transport http userstoriesbot https://app.userstoriesbot.com/api/mcp --header 'Authorization: Bearer {usb_mcp_key}'เติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"userstoriesbot": {
"url": "https://app.userstoriesbot.com/api/mcp",
"headers": {
"Authorization": "Bearer {usb_mcp_key}"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"userstoriesbot": {
"type": "http",
"url": "https://app.userstoriesbot.com/api/mcp",
"headers": {
"Authorization": "Bearer {usb_mcp_key}"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ที่อยู่นี้ต้องใส่ key ใน header ของคำขอ ซึ่งเมนูเพิ่ม connector ใส่ให้ไม่ได้ ใช้ Claude Code, Cursor หรือ VS Code แทน
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
Authorization ความลับ จำเป็น HTTP headerค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
server ให้ล็อกอินก่อนจึงจะแสดงรายการเครื่องมือ
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 9 พ.ย. 2569
ชื่อใน registry ยืนยันโดเมน userstoriesbot.com แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตอบกลับใน 143 ms (HTTP 401)
ประกาศวิธีล็อกอินแบบ OAuth ให้โปรแกรม AI พาไปล็อกอินเอง
ยังไม่ได้ตรวจ เราอ่านรายการเครื่องมือตอนตรวจ endpoint
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 3 จาก 3 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: Authorization
รันบนคลาวด์ของผู้ทำ ต่อผ่านอินเทอร์เน็ตได้เลย ไม่ต้องลงโปรแกรม แต่ข้อมูลที่ส่งให้จะผ่านเซิร์ฟเวอร์ของผู้ทำ
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.1.1) เข้า registry วันนี้
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต่อผ่าน URL จึงใช้กับโปรแกรมที่รับ remote MCP ได้ เช่น ChatGPT ที่เปิดโหมดนักพัฒนา
ในหมวดเดียวกันมี 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
Let your agents record the demo. User Stories Bot records narrated demo videos of your app; its MCP server opens that pipeline to your AI agents. An MCP-capable agent asks for a narrated demo of a branch, follows the recording and hands the finished video, captions and user stories to your reviewers, with no pull request needed.
This repository holds documentation only. The server is hosted by User Stories Bot; its source is not in this repository and there is nothing to install or run locally.
https://app.userstoriesbot.com/api/mcp (Streamable HTTP, POST)Authorization: Bearer demo_record, run_status, videos_list, stories_getcom.userstoriesbot/mcpPaid plans; one API key per agent. An org admin creates API keys in the dashboard; they work on the Pro and Team plans. Each key belongs to the org whose GitHub App installation covers the repository, so install the User Stories Bot GitHub App on the repository first: https://github.com/apps/userstoriesbot-com
Put your own key where a snippet shows , or export it as USB_MCP_KEY where a snippet reads ${USB_MCP_KEY}. Never commit the key.
| Tool | What it does | Input | Output |
|---|---|---|---|
demo_record | Record a narrated demo of a branch from a short brief and get a run id back. | repo (owner/repo), branch, brief (at most 1000 characters), optional idempotencyKey (at most 128 characters) | runId, status: "queued", dashboardUrl |
run_status | Follow a run stage by stage, from sandbox start to the finished video. Read only. | runId | runId, status (queued, provisioning, running, succeeded, failed, cancelled, refused), stage, outcome (videos, no_demo, unsupported_stack), reason, createdAt, finishedAt, videos (name, url, captionsUrl, posterUrl), dashboardUrl, setupBrief |
videos_list | List the finished videos of a repository with their share links and captions. Read only. | repo, optional limit (1 to 50, default 20) and cursor | repo, videos (kind guide or run, name, title, url, captionsUrl, posterUrl, durationSec, runId, recordedAt, public), nextCursor |
stories_get | Fetch the user stories and demo steps a run covered, as structured JSON. Read only. | runId | runId, stories (file, id, title, markdown), steps (spec, title, segments of marker and text) |
Every result carries the output above as structured content plus a one-line text summary. A refused call returns a reason instead of a run.
The brief says what to show, in plain words. It passes the same checks as a rerun request: no links, no commands, no instructions to the bot.
The server URL is the same for every client.
VS Code asks for the key in a password prompt; in Cursor, replace the placeholder with your key; in Visual Studio, add the Authorization header afterwards.
.vscode/mcp.json (Visual Studio reads it too), where VS Code asks for the key in a password prompt:
{ "servers": { "userstoriesbot": { "type": "http", "url": "https://app.userstoriesbot.com/api/mcp", "headers": { "Authorization": "Bearer ${input:usb_mcp_key}" } } }, "inputs": [{ "type": "promptString", "id": "usb_mcp_key", "description": "User Stories Bot API key", "password": true }] }
claude mcp add --transport http userstoriesbot https://app.userstoriesbot.com/api/mcp --header "Authorization: Bearer <USB_MCP_KEY>"
Or a .mcp.json file at the project root:
{ "mcpServers": { "userstoriesbot": { "type": "http", "url": "https://app.userstoriesbot.com/api/mcp", "headers": { "Authorization": "Bearer ${USB_MCP_KEY}" } } } }
.cursor/mcp.json:
{ "mcpServers": { "userstoriesbot": { "url": "https://app.userstoriesbot.com/api/mcp", "headers": { "Authorization": "Bearer ${env:USB_MCP_KEY}" } } } }
copilot mcp add --transport http userstoriesbot https://app.userstoriesbot.com/api/mcp --header "Authorization: Bearer <USB_MCP_KEY>"
Copilot CLI and VS Code also read the portable ~/.copilot/mcp-config.json:
{ "mcpServers": { "userstoriesbot": { "type": "http", "url": "https://app.userstoriesbot.com/api/mcp", "headers": { "Authorization": "Bearer ${USB_MCP_KEY}" }, "tools": ["*"] } } }
In the repository settings (Code, planning, and automation, then Copilot, then MCP servers), store the key as a secret named COPILOT_MCP_USB_KEY and add:
{ "mcpServers": { "userstoriesbot": { "type": "http", "url": "https://app.userstoriesbot.com/api/mcp", "headers": { "Authorization": "Bearer $COPILOT_MCP_USB_KEY" }, "tools": ["demo_record", "run_status", "videos_list", "stories_get"] } } }
run_status, videos_list and stories_get are marked read only; demo_record is not, because it starts a run.
export USB_MCP_KEY="<USB_MCP_KEY>"
codex mcp add userstoriesbot --url https://app.userstoriesbot.com/api/mcp --bearer-token-env-var USB_MCP_KEY
Or the ~/.codex/config.toml table (shared by the Codex CLI, the desktop app, the IDE extension and the Codex agent in Xcode):
[mcp_servers.userstoriesbot]
url = "https://app.userstoriesbot.com/api/mcp" bearer_token_env_var = "USB_MCP_KEY"
Any MCP client that supports Streamable HTTP with an Authorization header can connect. Most read this shape:
{ "mcpServers": { "userstoriesbot": { "url": "https://app.userstoriesbot.com/api/mcp", "headers": { "Authorization": "Bearer <USB_MCP_KEY>" } } } }
The guide at https://userstoriesbot.com/docs/mcp covers JetBrains Junie and AI Assistant, Devin, Antigravity, Zed, Kiro, claude.ai custom connectors and Xcode.
The MCP Inspector lists the tools your key can call:
npx --yes @modelcontextprotocol/inspector@2 --cli --transport http --server-url https://app.userstoriesbot.com/api/mcp --header "Authorization: Bearer <USB_MCP_KEY>" --method tools/list --format json
Push the branch to GitHub first, then ask your agent, for example:
Record a demo of this branch with User Stories Bot: show the new checkout flow. Wait for the run to finish, then give me the video link, the captions and the story titles.
A typical session: the agent calls demo_record with the repository, the branch and a short brief, polls run_status until it finishes, then fetches videos_list and stories_get.
demo_record with { "repo": "acme/app", "branch": "feature/checkout", "brief": "Show the new checkout flow." } answers run queued; poll run_status with the runId and the dashboardUrl.run_status with { "runId": " " }, every 30 seconds, until the status is succeeded, failed, cancelled or refused. On succeeded, each entry of videos carries the video url and its captionsUrl. On failed, no_demo or unsupported_stack, a setupBrief tells your coding agent what to change in the repository.stories_get with { "runId": " " } returns the user stories and the demo steps the run covered; videos_list with { "repo": "acme/app" } lists the repository's guides and earlier runs.Use one idempotencyKey per request: a retry with the same key returns the earlier run (already requested) instead of starting a new one.
A run started over MCP uses the credits of your plan like a run from a pull request. Calls are rate limited per key and per org; the limits for your plan are shown on the API keys page of the dashboard. An HTTP 401 means the key is missing or revoked; an HTTP 429 means wait a minute and retry.