UI MCP

Name: UI MCP
Author: Forge-Space

作者：Forge-Spaceバージョン 0.25.0i★ 2iパソコンで動く

レジストリ名io.github.Forge-Space/ui-mcp

インストール方法

What it does

Forge Space MCP server for UI and backend generation via stdio transport.

Connects パソコンで動く
Account or key No key needed
Category その他

インストール

使っているAIアプリを選んで、設定をコピーしてください。

チェック 2/3 合格 · あなたのパソコンで動きます

まず：どの AI を使っていますか？

ClaudeWeb · アプリ · スマホChatGPTWebClaude CodeターミナルCursorコードエディタVS Codeコードエディタその他その他のアプリ

使っているアプリを選ぶと、下に手順が表示されます。

Claude につなげますが、先に準備が必要です

先にパソコンへ Node.js を入れてください（1 回だけ） · パソコン版 Claude アプリ（Windows または Mac）のみ。Web やスマホでは使えません

Node.js を入れる
1 回だけ。Node.js が必要なすべてのサーバーで使えます
Node.js のダウンロードページを開く ↗
完了
パソコン版 Claude アプリの設定ファイルを開く
SettingsDeveloperEdit Config
完了

この設定を貼り付けて保存

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

完了

Claude を終了してもう一度開く
完了
試してみる
UI MCP を使って、私に何ができるか教えて、1 つやってみせて
✓ Claude が UI MCP を使っていると言うか、回答に UI MCP のツール名が出れば接続成功です

メニュー名は 2026年11月11日に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

ChatGPT はまだ UI MCP につなげません

UI MCP はパソコンに入れて使うものですが、ChatGPT は Web 上で動くサーバーにしかつなげません

代わりにできること

A · UI MCP につなげるアプリを使う

Claude の手順 →先にパソコンへ Node.js を入れてください（1 回だけ） · パソコン版 Claude アプリ（Windows または Mac）のみ。Web やスマホでは使えません
Claude Code の手順 →先にパソコンへ Node.js を入れてください（1 回だけ）
Cursor の手順 →先にパソコンへ Node.js を入れてください（1 回だけ）
VS Code の手順 →先にパソコンへ Node.js を入れてください（1 回だけ）

B · その他の中で ChatGPT につなげる別のサーバー

同じカテゴリでよく使われているものから、キーなしでアドレスだけでつなげるものを選びました

Hostinger✓ ChatGPT
World Monitor✓ ChatGPT
Svelte MCP✓ ChatGPT

Claude Code につなげますが、先に準備が必要です

先にパソコンへ Node.js を入れてください（1 回だけ）

Node.js を入れる
1 回だけ。Node.js が必要なすべてのサーバーで使えます
Node.js のダウンロードページを開く ↗
完了
ターミナルを開く
Mac：Command+スペースで Terminal と入力 · Windows：PowerShell を開く
完了

このコマンドを貼り付けて Enter

claude mcp add --scope user ui -- npx -y @forgespace/ui-mcp

完了

Claude Code で /mcp と入力
UI MCP が一覧にあり、接続済みと表示されれば OK です
完了
試してみる
UI MCP を使って、私に何ができるか教えて、1 つやってみせて
✓ Claude Code が UI MCP を使っていると言うか、回答に UI MCP のツール名が出れば接続成功です

メニュー名は 2026年11月11日に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

Cursor につなげますが、先に準備が必要です

先にパソコンへ Node.js を入れてください（1 回だけ）

Node.js を入れる
1 回だけ。Node.js が必要なすべてのサーバーで使えます
Node.js のダウンロードページを開く ↗
完了
このボタンで Cursor を開く
Cursor で開く
Cursor がインストールの確認をするので Install を押します
完了
Cursor の AI チャットを Agent モードで開く
完了
試してみる
UI MCP を使って、私に何ができるか教えて、1 つやってみせて
✓ Cursor が UI MCP を使っていると言うか、回答に UI MCP のツール名が出れば接続成功です

メニュー名は 2026年11月11日に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

VS Code につなげますが、先に準備が必要です

先にパソコンへ Node.js を入れてください（1 回だけ）

Node.js を入れる
1 回だけ。Node.js が必要なすべてのサーバーで使えます
Node.js のダウンロードページを開く ↗
完了
このボタンで VS Code を開く
VS Code で開く
VS Code がインストールの確認をするので Install を押します
完了
VS Code の AI チャットを Agent モードで開く
完了
試してみる
UI MCP を使って、私に何ができるか教えて、1 つやってみせて
✓ VS Code が UI MCP を使っていると言うか、回答に UI MCP のツール名が出れば接続成功です

メニュー名は 2026年11月11日に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

Windsurf、Zed、Gemini CLI など MCP を使える他のアプリは追加方法がそれぞれ違います。アプリ一覧で確認してください

MCP を使えるアプリをすべて見る →

JSON 設定は下の「開発者向け」にあります

つまずいたら？UI MCP を使っている人に聞いてみましょう💬 ディスカッション →

開発者向け：ターミナルのコマンドと JSON 設定

パソコンにインストール

Claude Code

claude mcp add --scope user ui -- npx -y @forgespace/ui-mcp

Claude Desktop (claude_desktop_config.json)

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

Cursor (~/.cursor/mcp.json)

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

VS Code (mcp.json)

{
  "servers": {
    "ui": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@forgespace/ui-mcp"
      ]
    }
  }
}

この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。

ひと目でわかる

GitHubスター i: 2
週あたりのダウンロードi: 66/週
ライセンス i: MIT
接続方法: パソコンで動く
トランスポート: stdio
最新バージョンi: 0.25.0
カテゴリi: その他
レジストリ公開日i: 2026年4月7日
コードの最終更新i: 2026年4月20日
作者: Forge-Space
パッケージ: npm: @forgespace/ui-mcp
リポジトリ: Forge-Space/ui-mcp
レジストリでの状態: 有効

使えるアプリ

このサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。

パソコン上で動かせるアプリ

Claude Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Raycast

すべてのアプリと長所・短所 →

できること

パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。

基本チェックi

誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月12日にチェック

✓ 合格
作者とリポジトリが一致
レジストリ名は、リポジトリを所有するGitHubアカウント Forge-Space で確認済みです
✕ 不合格
今もメンテナンスされている
1年以上コードの更新がないか、リポジトリがアーカイブされています
✓ 合格
ライセンスがある
MITを使用
– 対象外
エンドポイントが応答する
これはパソコンで動くため、インターネット上のエンドポイントはありません
– 対象外
OAuthでサインイン
パソコンで動き、代わりにローカルの設定を使います
… 未チェック
ツールの説明に隠れた指示がない
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです

話し合い

質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。

まだ投稿はありません。最初の質問や共有をどうぞ。

ここの投稿は利用者によるもので、PopNx チームのものではありません。

Google でログインして投稿

ユーザーレビュー

まだレビューはありません

Google でログインしてレビューを書く

その他のほかのサーバーとの比較i

このカテゴリのほかの19354件のうち91%よりスターが多い
このカテゴリのほかの19354件のうち4%より最近レジストリに公開
基本チェックの結果が、このカテゴリのほかの19354件のうち43%と同じかそれ以上

レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。

よくある質問

UI MCPは安全ですか？

当てはまる基本チェック3項目のうち2項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。

どんなキーやコードが必要ですか？

レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。

パソコンで動きますか、それともクラウドですか？

あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません（サーバー自体がオンラインサービスを呼び出す場合を除きます）。

今もメンテナンスされていますか？

GitHubリポジトリの最終更新は7 か月前、最新バージョン（0.25.0）がレジストリに届いたのは7 か月前です。

どのアプリで使えますか？

Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。

代わりに使えるものは？

同じカテゴリには：World Monitor, Claude Flow, Windmill

同じカテゴリのほかの候補

同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。

カードの見方：↓ 週あたりのダウンロードi★ GitHubスターi3つの柱：レビュー · チェック · 利用状況i更新＝最新バージョンをレジストリに公開した日i

World Monitor

Real-time global intelligence on conflict, markets, energy, trade, shipping and cyber. 104 tools.

作者：koala73広く使われている★ 9万今日更新

クラウドで動く✓ 提供元 · worldmonitor.app

インストール

Claude Flow

AI orchestration with hive-mind swarms, neural networks, and 87 MCP tools for enterprise dev.

作者：ruvnet広く使われている↓ 1.4万/週★ 8.2万14 か月前更新

パソコンで動く

インストール

Windmill

Run Windmill scripts and flows and manage jobs, schedules, resources and variables.

作者：windmill-labs広く使われている★ 1.9万今日更新

クラウドで動く

インストール

作者のREADME

READMEを開く

作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。

@forgespace/ui-mcp AI-driven UI and backend code generation via Model Context Protocol. 22 tools, 5 frameworks, brand-aware, npm-published, and MCP Registry-ready.

Part of the Forge Space ecosystem.

Architecture

@forgespace/ui-mcp is a thin protocol adapter. All AI/generation logic lives in @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)

Quick Start

# 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 Integration

Add to your MCP configuration (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" } } } }

Tools

Tool	Category	Description
`scaffold_full_application`	Code	Full project boilerplate (React/Next.js/Vue/Angular/HTML + Tailwind)
`generate_ui_component`	Code	UI components with style audit, supports shadcn/ui, Radix, Headless UI, Material, PrimeVue
`generate_form`	Code	Production forms with Zod/Yup validation, multi-step flows, accessible markup
`generate_page_template`	Code	Pre-built pages (landing, dashboard, auth, pricing, CRUD)
`generate_prototype`	Design	Interactive HTML prototypes with navigation
`generate_design_image`	Design	SVG/PNG mockups of UI screens
`image_to_component`	Code	Screenshot/wireframe to framework-specific component
`refine_component`	Code	Improve components via natural language feedback
`generate_api_route`	Backend	API routes with validation, auth, and error handling
`generate_backend_module`	Backend	Full feature modules with routes, services, middleware
`scaffold_backend`	Backend	Complete backend projects with auth, DB, monitoring
`generate_from_template_pack`	Code	Multi-page apps from curated packs (SaaS, Landing, AI Chat)
`figma_context_parser`	Context	Read Figma files, extract tokens, map to Tailwind
`figma_push_variables`	Design	Write design tokens back to Figma
`fetch_design_inspiration`	Context	Extract visual metadata from URLs
`analyze_design_references`	Context	Analyze design references, detect patterns
`analyze_design_image`	ML	Analyze design images for training data
`analyze_component_library`	Context	Analyze component library patterns
`audit_accessibility`	Quality	WCAG 2.1 audit with fix suggestions
`submit_feedback`	Quality	Submit feedback to improve future output
`payments_refund`	Backend	Request payment refund with Zod-validated params (payment_id, amount, reason, currency)
`manage_training`	ML	Training data ingestion and fine-tuning

Framework & Library Support

Library	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 Integration

All generation tools accept an optional brand_identity parameter — a JSON string from branding-mcp's generate_brand_identity tool. When provided, brand colors, typography, and spacing are injected into the design context.

Environment Variables

Variable	Required	Description
`FIGMA_ACCESS_TOKEN`	Only for Figma tools	Token from Figma Settings
`SENTRY_DSN`	Optional	Sentry DSN for error reporting (uncaught exceptions and unhandled rejections)

Distribution

npm — published as @forgespace/ui-mcp
MCP Registry metadata — repository includes server.json and mcpName metadata for registry submission
Tag release automation — pushing v* runs npm publish with provenance, then publishes the same version to the MCP Registry via GitHub OIDC
Weekly registry ops — .github/workflows/mcp-registry-status.yml refreshes one issue with npm and MCP Registry drift, visibility, and next actions
GitHub — source, issues, releases, and Discussions live under Forge Space

Development

npm install && npm run build

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

Community

GitHub Workflow

This repository follows the shared Forge Space GitHub work-management baseline:

Discussions for ideas, RFCs, Q&A, and announcements
Issues for actionable delivery work
Projects for roadmap visibility and cross-repo reporting

See Forge-Space/.github GOVERNANCE.md for the org-wide contract.

Scheduled monitoring runs that execute CodeQL require job-scoped security-events: write permission for SARIF upload.

The scheduled Security Monitoring workflow intentionally skips Codecov upload and relies on local coverage summary generation to reduce false alerting from third-party action download instability.

License

MIT

UI MCP

What it does

インストール

Node.js を入れる

パソコン版 Claude アプリの設定ファイルを開く

この設定を貼り付けて保存

Claude を終了してもう一度開く

試してみる

代わりにできること

Node.js を入れる

ターミナルを開く

このコマンドを貼り付けて Enter

Claude Code で /mcp と入力

試してみる

Node.js を入れる

このボタンで Cursor を開く

Cursor の AI チャットを Agent モードで開く

試してみる

Node.js を入れる

このボタンで VS Code を開く

VS Code の AI チャットを Agent モードで開く

試してみる

パソコンにインストール

ひと目でわかる

使えるアプリ

できること

基本チェックi

作者とリポジトリが一致

今もメンテナンスされている

ライセンスがある

エンドポイントが応答する

OAuthでサインイン

ツールの説明に隠れた指示がない

話し合い

ユーザーレビュー

その他のほかのサーバーとの比較i

よくある質問

同じカテゴリのほかの候補

World Monitor

Claude Flow

Windmill

作者のREADME

Architecture

Quick Start

Global install

Docker

IDE Integration

Tools

Framework & Library Support

Brand Identity Integration

Environment Variables

Distribution

Development

Community

GitHub Workflow

License