Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者による説明(英語の原文)
MCP server that provides architecture design expertise to AI coding agents
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
GENERATOR_API_KEY, GENERATOR_PROVIDER, GENERATOR_MODEL, GENERATOR_BASE_URL, PATTERN_DIRECTORY, EMBEDDER_PROVIDER, EMBEDDER_BASE_URL, EMBEDDER_API_KEY, RERANKER_BASE_URL「秘密」と表示された値は、あなたのアカウントの鍵です。絶対に人に教えたり、チャットに貼り付けたりしないでください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"architecture-pattern": {
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"-e",
"GENERATOR_API_KEY",
"-e",
"GENERATOR_PROVIDER",
"-e",
"GENERATOR_MODEL",
"-e",
"GENERATOR_BASE_URL",
"-e",
"PATTERN_DIRECTORY",
"-e",
"EMBEDDER_PROVIDER",
"-e",
"EMBEDDER_BASE_URL",
"-e",
"EMBEDDER_API_KEY",
"-e",
"RERANKER_BASE_URL",
"docker.io/olkowa/architecture-pattern-mcp:1.1.3",
"--transport",
"stdio"
],
"env": {
"GENERATOR_API_KEY": "your-value",
"GENERATOR_PROVIDER": "your-value",
"GENERATOR_MODEL": "your-value",
"GENERATOR_BASE_URL": "your-value",
"PATTERN_DIRECTORY": "your-value",
"EMBEDDER_PROVIDER": "your-value",
"EMBEDDER_BASE_URL": "your-value",
"EMBEDDER_API_KEY": "your-value",
"RERANKER_BASE_URL": "your-value"
}
}
}
}ターミナルでこれを実行します
claude mcp add architecture-pattern --env GENERATOR_API_KEY=your-value --env GENERATOR_PROVIDER=your-value --env GENERATOR_MODEL=your-value --env GENERATOR_BASE_URL=your-value --env PATTERN_DIRECTORY=your-value --env EMBEDDER_PROVIDER=your-value --env EMBEDDER_BASE_URL=your-value --env EMBEDDER_API_KEY=your-value --env RERANKER_BASE_URL=your-value -- docker run -i --rm -e GENERATOR_API_KEY -e GENERATOR_PROVIDER -e GENERATOR_MODEL -e GENERATOR_BASE_URL -e PATTERN_DIRECTORY -e EMBEDDER_PROVIDER -e EMBEDDER_BASE_URL -e EMBEDDER_API_KEY -e RERANKER_BASE_URL docker.io/olkowa/architecture-pattern-mcp:1.1.3 --transport stdio動かす前に、空欄の値を入力してください。
プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"architecture-pattern": {
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"-e",
"GENERATOR_API_KEY",
"-e",
"GENERATOR_PROVIDER",
"-e",
"GENERATOR_MODEL",
"-e",
"GENERATOR_BASE_URL",
"-e",
"PATTERN_DIRECTORY",
"-e",
"EMBEDDER_PROVIDER",
"-e",
"EMBEDDER_BASE_URL",
"-e",
"EMBEDDER_API_KEY",
"-e",
"RERANKER_BASE_URL",
"docker.io/olkowa/architecture-pattern-mcp:1.1.3",
"--transport",
"stdio"
],
"env": {
"GENERATOR_API_KEY": "your-value",
"GENERATOR_PROVIDER": "your-value",
"GENERATOR_MODEL": "your-value",
"GENERATOR_BASE_URL": "your-value",
"PATTERN_DIRECTORY": "your-value",
"EMBEDDER_PROVIDER": "your-value",
"EMBEDDER_BASE_URL": "your-value",
"EMBEDDER_API_KEY": "your-value",
"RERANKER_BASE_URL": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"architecture-pattern": {
"type": "stdio",
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"-e",
"GENERATOR_API_KEY",
"-e",
"GENERATOR_PROVIDER",
"-e",
"GENERATOR_MODEL",
"-e",
"GENERATOR_BASE_URL",
"-e",
"PATTERN_DIRECTORY",
"-e",
"EMBEDDER_PROVIDER",
"-e",
"EMBEDDER_BASE_URL",
"-e",
"EMBEDDER_API_KEY",
"-e",
"RERANKER_BASE_URL",
"docker.io/olkowa/architecture-pattern-mcp:1.1.3",
"--transport",
"stdio"
],
"env": {
"GENERATOR_API_KEY": "your-value",
"GENERATOR_PROVIDER": "your-value",
"GENERATOR_MODEL": "your-value",
"GENERATOR_BASE_URL": "your-value",
"PATTERN_DIRECTORY": "your-value",
"EMBEDDER_PROVIDER": "your-value",
"EMBEDDER_BASE_URL": "your-value",
"EMBEDDER_API_KEY": "your-value",
"RERANKER_BASE_URL": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
GENERATOR_PROVIDER envGENERATOR_MODEL envGENERATOR_BASE_URL envPATTERN_DIRECTORY envEMBEDDER_PROVIDER envこの設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月6日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント olk で確認済みです
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
入力が必要なもの:GENERATOR_API_KEY, EMBEDDER_BASE_URL, EMBEDDER_API_KEY, RERANKER_BASE_URL
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(1.1.5)がレジストリに届いたのは28 日前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにDockerも必要です。
同じカテゴリには:Figma Context MCP, Claude Real Video, Figma MCP Server
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:★ 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、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
An MCP (Model Context Protocol) server that provides architecture design expertise to AI coding agents. Given a requirements string and a domain, it analyses the problem, selects matching architecture patterns (from 128 built-in patterns), generates a concrete architecture design with components, relationships, API contracts, data models, and event contracts, and evaluates it against quality attributes (maintainability, scalability, reliability, security, performance).
# 1. Clone
git clone https://github.com/olk/architecture-pattern-mcp.git && cd architecture-pattern-mcp
export GENERATOR_API_KEY=your_key_here
docker compose -f docker/docker-compose.yml up --build
make client-analyze
Server starts on streamable-http at http://localhost:8820/mcp (dev compose host port; systemd uses 8810). Then connect your agent below.
To have an AI coding agent install the Docker stack from prebuilt images (no local build), point it at [INSTALL.md](INSTALL.md) — the non-interactive agent runbook (copy-paste commands, expected outputs, verification probes).
Clone this repo, then follow INSTALL.md Path A (compose stack, port 8820).
My generator API key is: sk-...
Pick one path in INSTALL.md:
:8820): evaluating / developing, no sudo needed. Own TEI sidecar copies.:8810): persistent host service, starts at boot, needs sudo. Uses the shared pattern-tei-infra TEI stack.The agent needs a repo clone, Docker ≥ v2.20 with group membership, ~5 GB free, a MINIMAXAI_API_KEY (or another provider per INSTALL.md#switching-the-generator-llm), and linux/amd64 (on arm64 it builds locally via make docker-build-all). After install, continue with Connect Your Agent below.
# Install (one-time)
uv pip install -e .
claude mcp add architecture-pattern \ -e GENERATOR_API_KEY=your_key \ -e GENERATOR_PROVIDER=openai \ -- architecture-pattern-mcp --transport stdio
Or add to your project for the whole team:
claude mcp add --scope project architecture-pattern \
-e GENERATOR_API_KEY=your_key \ -- architecture-pattern-mcp --transport stdio
OpenCode uses HTTP transport. Start the server first, then configure opencode:
# Terminal 1: start the server
docker compose -f docker/docker-compose.yml up --build
uv run python -m src.main --port 8050
{
"$schema": "https://opencode.ai/config.json", "mcp": { "architecture-pattern": { "type": "remote", "url": "http://localhost:8820/mcp" } } }
Note:
GENERATOR_API_KEYis read from the server's config file (~/.config/architecture-pattern-mcp/config.json), not from opencode's environment.
# Install (one-time)
uv pip install -e .
Add to ~/.codex/config.toml:
[mcp_servers.architecture-pattern]
command = "architecture-pattern-mcp" args = ["--transport", "stdio"]
[mcp_servers.architecture-pattern.env] GENERATOR_API_KEY = "your_key" GENERATOR_PROVIDER = "openai"
Or via CLI:
codex mcp add architecture-pattern \
-e GENERATOR_API_KEY=your_key \ -- architecture-pattern-mcp --transport stdio
The SKILL in skills/architecture-pattern-mcp/ is written for Oh My Pi (OMP), where this server's tools are reached as xd://mcp__architecture_pattern_* devices and every MCP request is bounded by a deadline (OMP_MCP_TIMEOUT_MS → per-server timeout → 30 s). It teaches the agent which entry point fits that deadline, how to read the results, and the full workflow recipes.
skills/architecture-pattern-mcp/
├── SKILL.md # OMP constraints, entry-point decision guide, device quick reference └── references/ ├── tools.md # 11 tool signatures, output schemas, error codes, design-dict shape └── workflows.md # 5 recipes, result interpretation, OMP troubleshooting
Install for OMP — copy the skill directory into the user skills root, or point skills.customDirectories at this repository's skills/ directory in OMP's config:
cp -r skills/architecture-pattern-mcp ~/.omp/agent/skills/
The skill then tells the agent:
design_architecture only after raising the server's timeout (analyze_architecture alone measured 66 s, evaluate_architecture 197 s)requirements, domain, and style as separate structured argumentsfinal_quality_score, attempts > 1, and evaluation.recommendationsread mcp://pattern://… is ambiguous while the sibling agent-pattern server is connected, so the tool route (get_architecture_pattern) is authoritativeThe tool schemas, error codes and design-dict shape in references/ are client-agnostic; only the deadline/device guidance is OMP-specific.
All tools accept requirements (free text) and domain (e.g. data-processing, microservices, e-commerce) as arguments. The examples below show the exact tool call shape so you can use them in any MCP client or API consumer.
In Claude Code (or any MCP client), paste the natural-language instruction:
Build a scalable ETL pipeline for IoT sensor data: ingest 10k events/sec
from Kafka, parse JSON, enrich with geolocation from Redis, write to InfluxDB and S3.
Your agent calls design_architecture internally. The server returns a full architecture design: components (Kafka source, JSON parser filter, geolocation enricher, InfluxDB sink, S3 sink), quality attribute scores (scalability: 9.1, maintainability: 8.2, …), and specific recommendations.
That is the design path: the server's LLM generates the design artifact for you, which is why a call takes minutes. If your agent writes the code itself and only needs the pattern expertise, call analyze_architecture instead — it returns the recommended style, selected patterns with scores, requirement weights, quality metrics and matched domains without generating a design. Two measured facts from the committed benchmark corpus: generate + evaluate are ~92 % of a design call's wall clock (benchmarks/base-noreasoning/), and the two paths agree on the style in all 31 completed records (15 base + 16 no-reasoning; the one remaining base record is a design call that failed with a malformed-JSON validation error and produced no design) — a design call buys the artifact, not a better pattern choice.
Or call tools directly from your agent:
Call analyze_architecture with:
requirements: "Real-time data processing pipeline for 10k events/sec IoT sensor data" domain: "data-processing"
Call generate_architecture with: requirements: "ETL pipeline: Kafka → JSON parse → Redis geo-enrich → InfluxDB + S3" domain: "data-processing" selected_patterns: ["pipe-and-filter"]
Call evaluate_architecture with: architecture: { ... paste a design dict here ... } criteria: "scalability, reliability"
Call list_architecture_patterns() # all 128 patterns Call list_architecture_patterns(category="messaging") # filter by category Call get_architecture_pattern(name="event-driven") # full pattern JSON
submit_architecture_design_job + get_architecture_design_statusONLY for clients with short request timeouts (Cursor, Claude Desktop, TS-SDK). The default is design_architecture with heartbeat defence. submit_architecture_design_job returns a job_id immediately; poll get_architecture_design_status until done:
# Step 1: start the job
Call submit_architecture_design_job with: requirements: "ETL pipeline for IoT: Kafka → JSON → Redis geo-enrich → InfluxDB + S3" domain: "data-processing"
Call get_architecture_design_status with: job_id: " "
In Python (via the MCP HTTP API directly — see examples/architecture_client_async.py):
import asyncio, aiohttp
SERVER = "http://localhost:8820/mcp" POLL_EVERY = 15 # seconds
async def main(): async with aiohttp.ClientSession() as sess:
async with sess.post(SERVER, json={ "jsonrpc": "2.0", "method": "tools/call", "params": { "name": "submit_architecture_design_job", "arguments": { "requirements": "ETL pipeline for IoT: Kafka → JSON → Redis → InfluxDB + S3", "domain": "data-processing", } }, "id": 1 }) as resp: job_id = (await resp.json())"result"0["job_id"]
print(f"Job started: {job_id}")
while True: await asyncio.sleep(POLL_EVERY) async with sess.post(SERVER, json={ "jsonrpc": "2.0", "method": "tools/call", "params": {"name": "get_architecture_design_status", "arguments": {"job_id": job_id}}, "id": 2 }) as resp: result = (await resp.json())"result"0 print(f" status={result['status']}") if result["status"] in ("completed", "failed", "cancelled"): break
print(result.get("result", result)) # full design when completed
See examples/architecture_client_async.py for the complete runnable example. Run it with:
docker compose -f docker/docker-compose.yml up --build # Terminal冒頭だけを表示しています。続きはリポジトリで読めます