ui-mcp

Forge Space エコシステムの一部です。

アーキテクチャ

@forgespace/ui-mcp は軽量なプロトコルアダプターです。AI／生成ロジックはすべて @forgespace/siza-gen にあります。

@forgespace/ui-mcp (~355 KB)       @forgespace/siza-gen (~1.8 MB)
├── src/index.ts (MCP server)      ├── ml/        (embeddings, quality, training)
├── tools/     (22 tool defs)      ├── generators/ (react, vue, angular, svelte, html)
├── services/  (figma, analysis)   ├── registry/   (502 snippets, compositions, packs)
├── resources/ (MCP resources)     ├── feedback/   (self-learning, pattern promotion)
└── lib/       (browser, image)    └── quality/    (anti-generic rules, diversity)

クイックスタート

# NPX (instant)
npx -y @forgespace/ui-mcp@latest

# Global install
npm install -g @forgespace/ui-mcp && forgespace-ui-mcp

# Docker
docker build -t forgespace-ui-mcp . && docker run --rm -i forgespace-ui-mcp

IDE との連携

MCP 設定に追加します（Claude Code、Windsurf、Cursor、VS Code）：

{
  "mcpServers": {
    "forgespace-ui-mcp": {
      "command": "npx",
      "args": ["-y", "@forgespace/ui-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

ツール

ツール	カテゴリ	説明
scaffold_full_application	コード	プロジェクト全体のボイラープレート（React/Next.js/Vue/Angular/HTML + Tailwind）
generate_ui_component	コード	スタイル監査付きの UI コンポーネント。shadcn/ui、Radix、Headless UI、Material、PrimeVue に対応
generate_form	コード	Zod/Yup による検証、マルチステップのフロー、アクセシブルなマークアップを備えた本番環境向けフォーム
generate_page_template	コード	すぐに使えるページ（ランディングページ、ダッシュボード、認証、料金、CRUD）
generate_prototype	デザイン	ナビゲーション付きのインタラクティブな HTML プロトタイプ
generate_design_image	デザイン	UI 画面の SVG/PNG モックアップ
image_to_component	コード	スクリーンショット／ワイヤーフレームからフレームワーク固有のコンポーネントを生成
refine_component	コード	自然言語によるフィードバックを通じてコンポーネントを改善
generate_api_route	バックエンド	検証、認証、エラー処理を備えた API ルート
generate_backend_module	バックエンド	ルート、サービス、ミドルウェアを含む機能モジュール全体
scaffold_backend	バックエンド	認証、DB、監視機能を備えたバックエンドプロジェクト全体
generate_from_template_pack	コード	厳選されたパック（SaaS、ランディングページ、AI チャット）から複数ページのアプリを生成
figma_context_parser	コンテキスト	Figma ファイルを読み込み、トークンを抽出して Tailwind にマッピング
figma_push_variables	デザイン	デザイントークンを Figma に書き戻す
fetch_design_inspiration	コンテキスト	URL から視覚的なメタデータを抽出
analyze_design_references	コンテキスト	デザインの参考資料を分析し、パターンを検出
analyze_design_image	ML	トレーニングデータ用にデザイン画像を分析
analyze_component_library	コンテキスト	コンポーネントライブラリのパターンを分析
audit_accessibility	品質	WCAG 2.1 監査と修正案
submit_feedback	品質	今後の出力を改善するためのフィードバックを送信
payments_refund	バックエンド	Zod で検証されたパラメーター（payment_id、amount、reason、currency）を使用して、支払いの返金をリクエスト
manage_training	ML	トレーニングデータの取り込みとファインチューニング

フレームワークとライブラリのサポート

ライブラリ	React	Vue	Angular	Svelte	HTML
shadcn/ui	shadcn/ui	shadcn-vue	Tailwind	bits-ui	Tailwind
Radix	@radix-ui/react	@radix-ui/vue	Tailwind	@radix-ui/svelte	Tailwind
Headless UI	@headlessui/react	@headlessui/vue	Tailwind	@headlessui/svelte	Tailwind
Material	@mui/material	Vuetify	@angular/material	@smui/material	Tailwind
PrimeVue	Headless UI	primevue	primeng	Tailwind	Tailwind
none	Tailwind CSS	Tailwind CSS	Tailwind CSS	Tailwind CSS	Tailwind CSS

ブランドアイデンティティの統合

すべての生成ツールは、オプションの brand_identity パラメーターを受け付けます。これは branding-mcp の generate_brand_identity ツールが返す JSON 文字列です。指定すると、ブランドカラー、タイポグラフィ、スペーシングがデザインコンテキストに 適用されます。

環境変数

変数	必須	説明
FIGMA_ACCESS_TOKEN	Figma ツールでのみ必要	Figma Settings のトークン
SENTRY_DSN	任意	エラー報告用の Sentry DSN（捕捉されなかった例外と未処理の拒否）

配布

• npm — 次の名前で公開されています。 @forgespace/ui-mcp
• MCP Registry のメタデータ — リポジトリには、レジストリへの登録に必要な server.json と mcpName メタデータが含まれています
• タグリリースの自動化 — v* をプッシュすると、プロベナンス付きで npm に公開され、 その後 GitHub OIDC 経由で同じバージョンが MCP Registry に公開されます
• 週次のレジストリ運用 — .github/workflows/mcp-registry-status.yml が、npm および MCP Registry の差異、公開状況、次のアクションをまとめた 1 件の Issue を 更新します
• GitHub — ソース、Issue、リリース、ディスカッションは Forge Space にあります

開発

npm install && npm run build
npm test                  # 437 tests, 35 suites
npm run validate          # lint + format + typecheck + test

コミュニティ

• ドキュメント
• GitHub ディスカッション
• Issue トラッカー

GitHub ワークフロー

このリポジトリは、Forge Space 共通の GitHub 作業管理の基本方針に従っています。

• アイデア、RFC、Q&A、告知にはディスカッションを使用します
• 実行可能な作業には Issue を使用します
• ロードマップの可視化と複数リポジトリにまたがるレポートには Projects を使用します

組織全体に適用される取り決めについては、 Forge-Space/.github GOVERNANCE.md をご覧ください。

CodeQL を実行するスケジュール監視の実行には、SARIF のアップロードに必要な、ジョブ単位の security-events: write 権限が必要です。

スケジュール実行される Security Monitoring ワークフローでは、サードパーティアクションの ダウンロードが不安定なことで誤ったアラートが発生するのを減らすため、Codecov へのアップロードを意図的にスキップし、 ローカルでのカバレッジ概要の生成を利用します。

ライセンス

MIT