Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Link previews and OG images: scan pages, render templates, create short links, read click stats.
使っているAIアプリを選んで、設定をコピーしてください。
チェック 3/3 合格 · あなたのパソコンで動きます
まず:どの AI を使っていますか?
使っているアプリを選ぶと、下に手順が表示されます。
Claude につなげますが、先に準備が必要です
先にパソコンへ Node.js を入れてください(1 回だけ) · パソコン版 Claude アプリ(Windows または Mac)のみ。Web やスマホでは使えません
SettingsDeveloperEdit Config
{
"mcpServers": {
"previewglow": {
"command": "npx",
"args": [
"-y",
"@reneturcios/previewglow",
"mcp"
]
}
}
}Previewglow を使って、私に何ができるか教えて、1 つやってみせて✓ Claude が Previewglow を使っていると言うか、回答に Previewglow のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
ChatGPT はまだ Previewglow につなげません
Previewglow はパソコンに入れて使うものですが、ChatGPT は Web 上で動くサーバーにしかつなげません
A · Previewglow につなげるアプリを使う
B · デザイン・画像・音声 の中で ChatGPT につなげる別のサーバー
同じカテゴリでよく使われているものから、キーなしでアドレスだけでつなげるものを選びました
Claude Code につなげますが、先に準備が必要です
先にパソコンへ Node.js を入れてください(1 回だけ)
Mac:Command+スペースで Terminal と入力 · Windows:PowerShell を開く
claude mcp add --scope user previewglow -- npx -y @reneturcios/previewglow mcpPreviewglow が一覧にあり、接続済みと表示されれば OK です
Previewglow を使って、私に何ができるか教えて、1 つやってみせて✓ Claude Code が Previewglow を使っていると言うか、回答に Previewglow のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Cursor につなげますが、先に準備が必要です
先にパソコンへ Node.js を入れてください(1 回だけ)
Previewglow を使って、私に何ができるか教えて、1 つやってみせて✓ Cursor が Previewglow を使っていると言うか、回答に Previewglow のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
VS Code につなげますが、先に準備が必要です
先にパソコンへ Node.js を入れてください(1 回だけ)
Previewglow を使って、私に何ができるか教えて、1 つやってみせて✓ VS Code が Previewglow を使っていると言うか、回答に Previewglow のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Claude Code
claude mcp add --scope user previewglow -- npx -y @reneturcios/previewglow mcpClaude Desktop (claude_desktop_config.json)
{
"mcpServers": {
"previewglow": {
"command": "npx",
"args": [
"-y",
"@reneturcios/previewglow",
"mcp"
]
}
}
}Cursor (~/.cursor/mcp.json)
{
"mcpServers": {
"previewglow": {
"command": "npx",
"args": [
"-y",
"@reneturcios/previewglow",
"mcp"
]
}
}
}VS Code (mcp.json)
{
"servers": {
"previewglow": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@reneturcios/previewglow",
"mcp"
]
}
}
}この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
このサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。
パソコン上で動かせるアプリ
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月12日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント CloudCorpRecords で確認済みです
コードの最終更新:7 日前
MITを使用
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。
まだレビューはありません
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック3項目のうち3項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は7 日前、最新バージョン(0.1.0)がレジストリに届いたのは7 日前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.js, Dockerも必要です。
同じカテゴリには: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、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
previewglow is a small local bridge to the hosted Shareglow MCP server, which looks after link previews and Open Graph images. Point it at a public page and it reports the page's preview metadata, the per-platform previews, and any problems it finds, with suggestions for fixing them. It can render a 1200x630 OG image from one of the workspace's templates, design a fresh template from a site's own brand, mint short links that carry their own previews, report how those links are being clicked, and force the social platforms to re-fetch a page whose tags have just changed.
The bridge keeps no preview data of its own. It serves the upstream server's tool list locally, exactly as captured from the live endpoint, and forwards each tool call upstream, returning the result untouched. Everything here acts on the caller's own Shareglow workspace or on public pages the caller names; there is no sending, payment, or messaging tool in the surface.
scan_url — scan a public page and report its link-preview (Open Graph / Twitter Card) metadata, previews per platform, and issues with fix suggestions. Required: url.generate_og_image — render a 1200x630 Open Graph image from a template. Required: templateId. Optional: params (text values such as title and subtitle) and exp (Unix seconds; makes the signed URL expire, paid plans). Returns the permanent image URL and whether it was already cached.create_template_from_url — use AI to design a new OG image template from a website's brand (logo, colors, fonts). Required: url. Returns the chosen layoutId, the variables to pass, and the extracted brand kit.list_templates — list the OG image templates the workspace can render (built-in and custom) with id, name, version and dimensions. Takes no arguments; call it before generate_og_image to pick a templateId.create_short_link — create a short link with its own link preview. Required: destination. Optional: slug and up to three A/B variants. Returns id, shortUrl and variants.get_link_stats — get click analytics for a short link: totals plus breakdowns by day, country, device, browser and referrer. Required: linkId. Optional: from / to dates (YYYY-MM-DD).refresh_preview — force social platforms to re-fetch a page's link preview after its OG tags or image changed. Required: url.SHAREGLOW_MCP_URL (optional) — override the upstream endpoint. Defaults to https://mcp.getshareglow.com/mcp. (The override hook is this rebuild's own labelled reconstruction.)SHAREGLOW_API_KEY (optional) — when set, every upstream request carries an Authorization: Bearer header, for the caller's own Shareglow key (an sk_live_... key created in the caller's Shareglow dashboard). When it is not set, no key header is sent. (The header name and the Bearer template are pinned by the original's registry record; forwarding the key from this env var is a labelled reconstruction — the original surface was captured keyless.)On the first tool call the client opens a streamable HTTP session with the upstream: a JSON-RPC initialize request (protocolVersion 2025-03-26, clientInfo name previewglow), then a notifications/initialized notification, then the tools/call request carrying the caller's arguments unchanged. When the upstream answers initialize with an Mcp-Session-Id header, that value rides on every later request of the session, which is reused for the life of the process. Replies may arrive as plain JSON or as server-sent events; both are read.
Successful upstream results pass through verbatim, including any isError flag the upstream sets. Failures — a JSON-RPC error, a non-2xx status, an unreadable response, or a request that cannot be completed — come back as an isError result whose text starts with previewglow error: (this rendering is this rebuild's own labelled reconstruction).
Each tool is also a subcommand taking one JSON argument string:
npx @reneturcios/previewglow scan_url '{"url":"https://example.com/landing"}'
npx @reneturcios/previewglow get_link_stats '{"linkId":"lnk_abc-123"}' npx @reneturcios/previewglow --version
Exit codes: 0 on success, 1 on an isError result, 2 on a usage error.
npx -y @reneturcios/previewglow mcp
MCP client config:
{
"mcpServers": { "previewglow": { "command": "npx", "args": ["-y", "@reneturcios/previewglow", "mcp"] } } }
docker run -i ghcr.io/cloudcorprecords/previewglow
docker run --rm ghcr.io/cloudcorprecords/previewglow --version
The container's default command is mcp, so the first form is a stdio MCP server; any other arguments reach the CLI normally.
npm install
npm run build npm test npm run dev
The test suite runs entirely against a stubbed JSON-RPC upstream — no live network calls.
MIT — see LICENSE.