Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Generate og:image social cards and signed ogmake.com image URLs from your AI assistant.
使っているAIアプリを選んで、設定をコピーしてください。
チェック 3/3 合格 · あなたのパソコンで動きます · ✓ コマンド確認済み 2026年11月14日
まず:どの AI を使っていますか?
使っているアプリを選ぶと、下に手順が表示されます。
Claude につなげますが、先に準備が必要です
先にパソコンへ Node.js を入れてください(1 回だけ) · パソコン版 Claude アプリ(Windows または Mac)のみ。Web やスマホでは使えません
SettingsDeveloperEdit Config
{
"mcpServers": {
"ogmake": {
"command": "npx",
"args": [
"-y",
"ogmake-mcp"
]
}
}
}Ogmake MCP を使って、私に何ができるか教えて、1 つやってみせて✓ Claude が Ogmake MCP を使っていると言うか、回答に Ogmake MCP のツール名が出れば接続成功です
上のコマンドはこれらがなくても動きます。変えたいときだけ作者の説明に沿って追加してください。
OGMAKE_API_KEY ogmake.com API key. Optional: without it render_image uses the free watermarked endpoint.説明は英語の原文のままです。
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
ChatGPT はまだ Ogmake MCP につなげません
Ogmake MCP はパソコンに入れて使うものですが、ChatGPT は Web 上で動くサーバーにしかつなげません
A · Ogmake MCP につなげるアプリを使う
B · デザイン・画像・音声 の中で ChatGPT につなげる別のサーバー
同じカテゴリでよく使われているものから、キーなしでアドレスだけでつなげるものを選びました
Claude Code につなげますが、先に準備が必要です
先にパソコンへ Node.js を入れてください(1 回だけ)
Mac:Command+スペースで Terminal と入力 · Windows:PowerShell を開く
claude mcp add --scope user ogmake -- npx -y ogmake-mcpOgmake MCP が一覧にあり、接続済みと表示されれば OK です
Ogmake MCP を使って、私に何ができるか教えて、1 つやってみせて✓ Claude Code が Ogmake MCP を使っていると言うか、回答に Ogmake MCP のツール名が出れば接続成功です
上のコマンドはこれらがなくても動きます。変えたいときだけ作者の説明に沿って追加してください。
OGMAKE_API_KEY ogmake.com API key. Optional: without it render_image uses the free watermarked endpoint.説明は英語の原文のままです。
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Cursor につなげますが、先に準備が必要です
先にパソコンへ Node.js を入れてください(1 回だけ)
Ogmake MCP を使って、私に何ができるか教えて、1 つやってみせて✓ Cursor が Ogmake MCP を使っていると言うか、回答に Ogmake MCP のツール名が出れば接続成功です
上のコマンドはこれらがなくても動きます。変えたいときだけ作者の説明に沿って追加してください。
OGMAKE_API_KEY ogmake.com API key. Optional: without it render_image uses the free watermarked endpoint.説明は英語の原文のままです。
メニュー名は 2026年11月11日 に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
VS Code につなげますが、先に準備が必要です
先にパソコンへ Node.js を入れてください(1 回だけ)
Ogmake MCP を使って、私に何ができるか教えて、1 つやってみせて✓ VS Code が Ogmake MCP を使っていると言うか、回答に Ogmake MCP のツール名が出れば接続成功です
上のコマンドはこれらがなくても動きます。変えたいときだけ作者の説明に沿って追加してください。
OGMAKE_API_KEY ogmake.com API key. Optional: without it render_image uses the free watermarked endpoint.説明は英語の原文のままです。
メニュー名は 2026年11月11日 に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Windsurf、Zed、Gemini CLI など MCP を使える他のアプリは追加方法がそれぞれ違います。アプリ一覧で確認してください
JSON 設定は下の「開発者向け」にあります
Claude Code
claude mcp add --scope user ogmake -- npx -y ogmake-mcpClaude Desktop (claude_desktop_config.json)
{
"mcpServers": {
"ogmake": {
"command": "npx",
"args": [
"-y",
"ogmake-mcp"
]
}
}
}Cursor (~/.cursor/mcp.json)
{
"mcpServers": {
"ogmake": {
"command": "npx",
"args": [
"-y",
"ogmake-mcp"
]
}
}
}VS Code (mcp.json)
{
"servers": {
"ogmake": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"ogmake-mcp"
]
}
}
}OGMAKE_API_KEY 秘密 env説明は英語の原文のままです。
この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
npm: ogmake-mcpこのサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。
パソコン上で動かせるアプリ
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月14日にチェック
レジストリ名はドメイン ogmake.com で確認済みです(レジストリがドメインの所有を確認しています)
コードの最終更新:35 日前
MITを使用
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。
まだレビューはありません
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック3項目のうち3項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は35 日前、最新バージョン(0.1.2)がレジストリに届いたのは35 日前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。
同じカテゴリには: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、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
Local stdio MCP server for ogmake.com og:image generation. Run it with npx -y ogmake-mcp.
OGMAKE_API_KEY).OGMAKE_API_KEY set: renders template (+ optional params, format, preset, scale, v, bg, font — a Google Fonts family) via the authenticated API and returns its hosted URL plus the image bytes.OGMAKE_API_KEY: renders a watermarked free image from title (+ optional description, site) and returns image bytes only — no hosted URL (the free endpoint never stores one).POST /v1/batch); returns a batch_id immediately. Optional webhookUrl (https) gets a signed batch.completed event. Needs OGMAKE_API_KEY.OGMAKE_API_KEY.template without rendering it.OGMAKE_SIGNING_SECRET + OGMAKE_SIGNING_KEY_ID set: signs the URL locally (HMAC-SHA256) — the signing secret never leaves your machine and is never sent to the model.OGMAKE_PUBLIC_KEY_ID set: builds an unsigned /p/:keyId/:template URL (the key must be marked public and allow-list that template on ogmake.com).og:image/twitter:image meta tag snippet for a given framework (html, hugo, jekyll, rails, laravel, django, wordpress, ghost) and image URL.OGMAKE_API_KEY account. Requires OGMAKE_API_KEY.Every secret (OGMAKE_API_KEY, OGMAKE_SIGNING_SECRET) stays local: it is read from the environment once at startup and is never echoed back in a tool result, error message, or log line.
| Variable | Required for |
|---|---|
OGMAKE_API_KEY | authenticated render_image, render_html, create_batch, get_batch, get_usage |
OGMAKE_BASE_URL | optional — override the API origin (defaults to https://ogmake.com) |
OGMAKE_SIGNING_SECRET | local signing in build_image_url (base64url) |
OGMAKE_SIGNING_KEY_ID | local signing in build_image_url (paired with the secret above) |
OGMAKE_PUBLIC_KEY_ID | unsigned /p URLs in build_image_url |
claude mcp add ogmake --env OGMAKE_API_KEY=og_live_... -- npx -y ogmake-mcp
Or add to .mcp.json (project scope) / ~/.claude.json (user scope); Cursor takes the same block in ~/.cursor/mcp.json:
{
"mcpServers": { "ogmake": { "command": "npx", "args": ["-y", "ogmake-mcp"], "env": { "OGMAKE_API_KEY": "og_live_..." } } } }
Without OGMAKE_API_KEY only list_templates, watermarked free render_image, build_image_url and og_snippet work.
Support: support@ogmake.com · License: MIT
pnpm --filter ogmake-mcp run test # unit tests, 100% coverage
pnpm --filter ogmake-mcp run test:e2e # spawns the packed CLI over stdio against a local wrangler dev pnpm --filter ogmake-mcp run build # tsup bundle -> dist/index.js pnpm --filter ogmake-mcp run pack # build + npm pack -> pack-out/*.tgz
vendor/ holds the SDK and request-signing helper this server bundles, so the repository builds standalone: npm install && npm run build && npm test.