Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者による説明(英語の原文)
MCP server for OpenAI Images/Videos and Google GenAI (Veo) media generation.
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
OPENAI_API_KEY, GEMINI_API_KEY, GOOGLE_API_KEY, GOOGLE_GENAI_USE_VERTEXAI, GOOGLE_CLOUD_PROJECT, GOOGLE_CLOUD_LOCATION, AZURE_OPENAI_API_KEY, AZURE_OPENAI_ENDPOINT, OPENAI_API_VERSION, AZURE_OPENAI_DEPLOYMENT, MEDIA_GEN_DIRS, MEDIA_GEN_URLS, MEDIA_GEN_MCP_URL_PREFIXES, MEDIA_GEN_MCP_TEST_SAMPLE_DIR「秘密」と表示された値は、あなたのアカウントの鍵です。絶対に人に教えたり、チャットに貼り付けたりしないでください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"media-gen": {
"command": "npx",
"args": [
"-y",
"@strato-space/media-gen-mcp"
],
"env": {
"OPENAI_API_KEY": "your-value",
"GEMINI_API_KEY": "your-value",
"GOOGLE_API_KEY": "your-value",
"GOOGLE_GENAI_USE_VERTEXAI": "your-value",
"GOOGLE_CLOUD_PROJECT": "your-value",
"GOOGLE_CLOUD_LOCATION": "your-value",
"AZURE_OPENAI_API_KEY": "your-value",
"AZURE_OPENAI_ENDPOINT": "your-value",
"OPENAI_API_VERSION": "your-value",
"AZURE_OPENAI_DEPLOYMENT": "your-value",
"MEDIA_GEN_DIRS": "your-value",
"MEDIA_GEN_URLS": "your-value",
"MEDIA_GEN_MCP_URL_PREFIXES": "your-value",
"MEDIA_GEN_MCP_TEST_SAMPLE_DIR": "your-value"
}
}
}
}ターミナルでこれを実行します
claude mcp add media-gen --env OPENAI_API_KEY=your-value --env GEMINI_API_KEY=your-value --env GOOGLE_API_KEY=your-value --env GOOGLE_GENAI_USE_VERTEXAI=your-value --env GOOGLE_CLOUD_PROJECT=your-value --env GOOGLE_CLOUD_LOCATION=your-value --env AZURE_OPENAI_API_KEY=your-value --env AZURE_OPENAI_ENDPOINT=your-value --env OPENAI_API_VERSION=your-value --env AZURE_OPENAI_DEPLOYMENT=your-value --env MEDIA_GEN_DIRS=your-value --env MEDIA_GEN_URLS=your-value --env MEDIA_GEN_MCP_URL_PREFIXES=your-value --env MEDIA_GEN_MCP_TEST_SAMPLE_DIR=your-value -- npx -y @strato-space/media-gen-mcp動かす前に、空欄の値を入力してください。
プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"media-gen": {
"command": "npx",
"args": [
"-y",
"@strato-space/media-gen-mcp"
],
"env": {
"OPENAI_API_KEY": "your-value",
"GEMINI_API_KEY": "your-value",
"GOOGLE_API_KEY": "your-value",
"GOOGLE_GENAI_USE_VERTEXAI": "your-value",
"GOOGLE_CLOUD_PROJECT": "your-value",
"GOOGLE_CLOUD_LOCATION": "your-value",
"AZURE_OPENAI_API_KEY": "your-value",
"AZURE_OPENAI_ENDPOINT": "your-value",
"OPENAI_API_VERSION": "your-value",
"AZURE_OPENAI_DEPLOYMENT": "your-value",
"MEDIA_GEN_DIRS": "your-value",
"MEDIA_GEN_URLS": "your-value",
"MEDIA_GEN_MCP_URL_PREFIXES": "your-value",
"MEDIA_GEN_MCP_TEST_SAMPLE_DIR": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"media-gen": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@strato-space/media-gen-mcp"
],
"env": {
"OPENAI_API_KEY": "your-value",
"GEMINI_API_KEY": "your-value",
"GOOGLE_API_KEY": "your-value",
"GOOGLE_GENAI_USE_VERTEXAI": "your-value",
"GOOGLE_CLOUD_PROJECT": "your-value",
"GOOGLE_CLOUD_LOCATION": "your-value",
"AZURE_OPENAI_API_KEY": "your-value",
"AZURE_OPENAI_ENDPOINT": "your-value",
"OPENAI_API_VERSION": "your-value",
"AZURE_OPENAI_DEPLOYMENT": "your-value",
"MEDIA_GEN_DIRS": "your-value",
"MEDIA_GEN_URLS": "your-value",
"MEDIA_GEN_MCP_URL_PREFIXES": "your-value",
"MEDIA_GEN_MCP_TEST_SAMPLE_DIR": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
GOOGLE_GENAI_USE_VERTEXAI envGOOGLE_CLOUD_PROJECT envGOOGLE_CLOUD_LOCATION envAZURE_OPENAI_ENDPOINT envOPENAI_API_VERSION envAZURE_OPENAI_DEPLOYMENT envMEDIA_GEN_DIRS envMEDIA_GEN_URLS envMEDIA_GEN_MCP_URL_PREFIXES envMEDIA_GEN_MCP_TEST_SAMPLE_DIR envこの設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月9日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント strato-space で確認済みです
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
入力が必要なもの:OPENAI_API_KEY, GEMINI_API_KEY, GOOGLE_API_KEY, AZURE_OPENAI_API_KEY
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(1.0.4)がレジストリに届いたのは11 か月前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。
同じカテゴリには:Figma Context MCP, Claude Real Video, Figma MCP Server
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:↓ 週あたりのダウンロードi★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i
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.
The Figma MCP server brings Figma design context directly into your AI workflow.
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
Media Gen MCP is a strict TypeScript Model Context Protocol (MCP) server for OpenAI Images (gpt-image-1.5, gpt-image-1), OpenAI Videos (Sora), and Google GenAI Videos (Veo): generate/edit images, create/remix video jobs, and fetch media from URLs or disk with smart resource_link vs inline image outputs and optional sharp processing. Production-focused (full strict typecheck, ESLint + Vitest CI). Works with fast-agent, Claude Desktop, ChatGPT, Cursor, VS Code, Windsurf, and any MCP-compatible client.
Design principle: spec-first, type-safe image tooling – strict OpenAI Images API + MCP compliance with fully static TypeScript types and flexible result placements/response formats for different clients.
gpt-image-1.5 model (with gpt-image-1 compatibility and DALL·E support planned in future versions).sora-2, sora-2-pro) with job create/remix/list/retrieve/delete and asset downloads.resource_link/resource outputs.test-images tool that mirrors production result placement (content, structuredContent, toplevel).CallToolResult objects from the latest MCP schema, including: content items (text, image, resource_link, resource), optional structuredContent, optional top-level files, and the isError flag for failures.openai-images-generate mirrors the OpenAI Images create API for gpt-image-1.5 (and gpt-image-1) (background, moderation, size, quality, output_format, output_compression, n, user, etc.).openai-images-edit mirrors the OpenAI Images createEdit API for gpt-image-1.5 (and gpt-image-1) (image, mask, n, quality, size, user).openai-videos-create mirrors videos/create and can optionally wait for completion.openai-videos-remix mirrors videos/remix.openai-videos-list mirrors videos/list.openai-videos-retrieve mirrors videos/retrieve.openai-videos-delete mirrors videos/delete.openai-videos-retrieve-content mirrors videos/content and downloads video / thumbnail / spritesheet assets to disk, returning MCP resource_link (default) or embedded resource blocks (via tool_result).google-videos-generate starts a long-running operation (ai.models.generateVideos) and can optionally wait for completion and download .mp4 outputs. Veo model referencegoogle-videos-retrieve-operation polls an existing operation.google-videos-retrieve-content downloads an .mp4 from a completed operation, returning MCP resource_link (default) or embedded resource blocks (via tool_result).fetch-images tool loads images from HTTP(S) URLs or local file paths with optional, user-controlled compression (disabled by default). Supports parallel processing of up to 20 images.fetch-videos tool lists local videos or downloads remote video URLs to disk and returns MCP resource_link (default) or embedded resource blocks (via tool_result).fetch-document tool downloads remote files or reuses local paths and returns MCP resource_link (default) or embedded resource blocks (via tool_result).openai-images-edit accepts image as a single string or an array of 1–16 file paths/base64 strings, matching the OpenAI spec for GPT Image models (gpt-image-1.5, gpt-image-1) image edits.file when the total response size exceeds a safe threshold.output_ _media-gen__ _ . filenames (images/documents use a generated UUID; videos use the OpenAI video_id) and exposed to MCP clients via content[] depending on tool_result (resource_link/image for images, resource_link/resource for video/document downloads).test-images reads sample images from a configured directory and returns them using the same result-building logic as production tools. Use tool_result and response_format parameters to test how different MCP clients handle content[] and structuredContent.isError: true and content: [{ type: "text", text: }], making failures easy to parse and surface in MCP clients.git clone https://github.com/strato-space/media-gen-mcp.git
cd media-gen-mcp
npm install npm run build
Build modes:
npm run build – strict TypeScript build with all strict flags enabled, including skipLibCheck: false. Incremental builds via .tsbuildinfo (~2-3s on warm cache).npm run esbuild – fast bundling via esbuild (no type checking, useful for rapid iteration).For development or when TypeScript compilation fails due to memory constraints:
npm run dev # Uses tsx to run TypeScript directly
npm run lint # ESLint with typescript-eslint
npm run typecheck # Strict tsc --noEmit npm run test # Unit tests (vitest) npm run test:watch # Watch mode for TDD npm run ci # lint + typecheck + test
The project uses vitest for unit testing. Tests are located in test/.
Covered modules:
| Module | Tests | Description |
|---|---|---|
compression | 12 | Image format detection, buffer processing, file I/O |
helpers | 31 | URL/path validation, output resolution, result placement, resource links |
env | 19 | Configuration parsing, env validation, defaults |
logger | 10 | Structured logging + truncation safety |
pricing | 5 | Sora pricing estimate helpers |
schemas | 69 | Zod schema validation for all tools, type inference |
fetch-images (integration) | 3 | End-to-end MCP tool call behavior |
fetch-videos (integration) | 3 | End-to-end MCP tool call behavior |
Test categories:
isCompressionAvailable, detectImageFormat, processBufferWithCompression, readAndProcessImageisHttpUrl, isAbsolutePath, isBase64Image, ensureDirectoryWritable, resolveOutputPath, getResultPlacement, buildResourceLinksMEDIA_GEN_* / MEDIA_GEN_MCP_* settingsopenai-images-*, openai-videos-*, fetch-images, fetch-videos, test-images inputs, boundary testing (prompt length, image count limits, path validation)npm run test
You can also run the server straight from a remote repo using npx:
npx -y github:strato-space/media-gen-mcp --env-file /path/to/media-gen.env
The --env-file argument tells the server which env file to load (e.g. when you keep secrets outside the cloned directory). The file should contain OPENAI_API_KEY, optional Azure variables, and any MEDIA_GEN_MCP_* settings.
secrets.yaml (optional)You can keep API keys (and optional Google Vertex AI settings) in a secrets.yaml file (compatible with the fast-agent secrets template):
openai:
api_key: anthropic: api_key: google: api_key: vertex_ai: enabled: true project_id: your-gcp-project-id location: europe-west4
media-gen-mcp loads `secr
冒頭だけを表示しています。続きはリポジトリで読めます