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.
使っているAIアプリを選んで、設定をコピーしてください。
チェック 4/4 合格 · 質問内容は提供元のサーバー(app.userstoriesbot.com)を通ります · ✓ コマンド確認済み 2026年11月13日
まず:どの AI を使っていますか?
使っているアプリを選ぶと、下に手順が表示されます。
Claude につなげます · 約 5 分
User Stories Bot のキーが必要です(提供元のサイトで作成) · claude.ai かデスクトップアプリで一度設定すれば、チャットで使えます · 無料アカウントは 1 つまで · Team/Enterprise はオーナー(Owner)が追加
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
CustomizeConnectors
ここからコピーして Claude の同じ名前の欄に貼り付け、Continue を押します
User Stories Bothttps://app.userstoriesbot.com/api/mcpRequest headers に、この名前と値を追加
AuthorizationBearer <ここにキーを貼り付け>キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
Claude が検出したサインイン設定の画面で Continue を押す · Authentication は作者の説明どおり(Sign in now・Sign in when needed・No sign in)を選び Add を押します
+ConnectorsUser Stories Bot
User Stories Bot を使って、私に何ができるか教えて、1 つやってみせて✓ Claude が User Stories Bot を使っていると言うか、回答に User Stories Bot のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
ChatGPT はまだ User Stories Bot につなげません
User Stories Bot は接続時に自分のキーが必要ですが、OpenAI のヘルプページは OAuth ログインしか説明しておらず、確認できたキー入力方法がありません
A · User Stories Bot につなげるアプリを使う
B · デザイン・画像・音声 の中で ChatGPT につなげる別のサーバー
同じカテゴリでよく使われているものから、キーなしでアドレスだけでつなげるものを選びました
Claude Code につなげます · 約 5 分
User Stories Bot のキーが必要です(提供元のサイトで作成)
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
Mac:Command+スペースで Terminal と入力 · Windows:PowerShell を開く
claude mcp add --transport http --scope user userstoriesbot https://app.userstoriesbot.com/api/mcp --header 'Authorization: Bearer {usb_mcp_key}'Enter の前に「your-value」を自分のキーに書き換えてください
キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
User Stories Bot が一覧にあり、接続済みと表示されれば OK です
User Stories Bot を使って、私に何ができるか教えて、1 つやってみせて✓ Claude Code が User Stories Bot を使っていると言うか、回答に User Stories Bot のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Cursor につなげます · 約 5 分
User Stories Bot のキーが必要です(提供元のサイトで作成)
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
User Stories Bot の設定で Authorization が空です。自分のキーを入れて保存します
キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
User Stories Bot を使って、私に何ができるか教えて、1 つやってみせて✓ Cursor が User Stories Bot を使っていると言うか、回答に User Stories Bot のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
VS Code につなげます · 約 5 分
User Stories Bot のキーが必要です(提供元のサイトで作成)
提供元のサイトで登録し、次の手順で使う API キーを作ります。料金や無料プランは提供元のサイトで確認してください。
User Stories Bot の設定で Authorization が空です。自分のキーを入れて保存します
キーはアプリの入力欄にだけ貼り付け、チャットに貼ったり人に送ったりしないでください
User Stories Bot を使って、私に何ができるか教えて、1 つやってみせて✓ VS Code が User Stories Bot を使っていると言うか、回答に User Stories Bot のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Claude Code
claude mcp add --transport http --scope user userstoriesbot https://app.userstoriesbot.com/api/mcp --header 'Authorization: Bearer {usb_mcp_key}'Cursor (~/.cursor/mcp.json)
{
"mcpServers": {
"userstoriesbot": {
"url": "https://app.userstoriesbot.com/api/mcp",
"headers": {
"Authorization": "Bearer {usb_mcp_key}"
}
}
}
}VS Code (mcp.json)
{
"servers": {
"userstoriesbot": {
"type": "http",
"url": "https://app.userstoriesbot.com/api/mcp",
"headers": {
"Authorization": "Bearer {usb_mcp_key}"
}
}
}
}この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
このサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。
インターネット経由でつなげるアプリ
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast
このサーバーは、ツール一覧を表示する前にサインインを求めます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月13日にチェック
レジストリ名はドメイン userstoriesbot.com で確認済みです(レジストリがドメインの所有を確認しています)
コードの最終更新:5 日前
対象外:userstoriesbot.com の所有者が自ら運営するクラウドのサーバーで、リポジトリのコードを実行しません
234ミリ秒で応答(HTTP 401)
OAuthでのサインインに対応しているため、AIアプリがログイン画面へ案内してくれます
まだチェックしていません。エンドポイントをチェックするときにツール一覧を読み取ります
質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。
まだレビューはありません
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック4項目のうち4項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
入力が必要なもの:Authorization
作者のクラウドで動きます。インストール不要でインターネット経由でつながりますが、送った内容は作者のサーバーを通ります。
GitHubリポジトリの最終更新は5 日前、最新バージョン(0.1.1)がレジストリに届いたのは4 日前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。URL で接続するので、リモート MCP を受け付けるアプリでも使えます。例:Web 版 ChatGPT(Business 以上はフル MCP、Pro は読み取りのみ)。
同じカテゴリには:Figma Context MCP, AutoClip, Next AI Draw.io
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:↓ 週あたりのダウンロードi★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
作者のリポジトリから書かれたとおりにコピーしたものです。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.