Pudge UI
What it does
Query pudge-ui — 93 skeuomorphic 2000s-era UI component specs — for coding-agent context.
- Connects パソコンで動く
- Account or key No key needed
- Category 開発者ツール
インストール
使っているAIアプリを選んで、設定をコピーしてください。
チェック 3/3 合格 · あなたのパソコンで動きます
まず：どの AI を使っていますか？
使っているアプリを選ぶと、下に手順が表示されます。
Claude につなげますが、先に準備が必要です
先にパソコンへ Node.js を入れてください（1 回だけ） · パソコン版 Claude アプリ（Windows または Mac）のみ。Web やスマホでは使えません
パソコン版 Claude アプリの設定ファイルを開く
SettingsDeveloperEdit Config
この設定を貼り付けて保存
コマンドを確認中 · 確認が通るとコピーボタンが出ます
Claude を終了してもう一度開く
試してみる
Pudge UI を使って、私に何ができるか教えて、1 つやってみせて✓ Claude が Pudge UI を使っていると言うか、回答に Pudge UI のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
ChatGPT はまだ Pudge UI につなげません
Pudge UI はパソコンに入れて使うものですが、ChatGPT は Web 上で動くサーバーにしかつなげません
代わりにできること
A · Pudge UI につなげるアプリを使う
- 先にパソコンへ Node.js を入れてください（1 回だけ） · パソコン版 Claude アプリ（Windows または Mac）のみ。Web やスマホでは使えません
- 先にパソコンへ Node.js を入れてください（1 回だけ）
- 先にパソコンへ Node.js を入れてください（1 回だけ）
- 先にパソコンへ Node.js を入れてください（1 回だけ）
B · 開発者ツール の中で ChatGPT につなげる別のサーバー
同じカテゴリでよく使われているものから、キーなしでアドレスだけでつなげるものを選びました
- Sentry✓ ChatGPT
- Compiler Explorer✓ ChatGPT
- GitDiagram✓ ChatGPT
Claude Code につなげますが、先に準備が必要です
先にパソコンへ Node.js を入れてください（1 回だけ）
ターミナルを開く
Mac：Command+スペースで Terminal と入力 · Windows：PowerShell を開く
このコマンドを貼り付けて Enter
コマンドを確認中 · 確認が通るとコピーボタンが出ます
Claude Code で /mcp と入力
Pudge UI が一覧にあり、接続済みと表示されれば OK です
試してみる
Pudge UI を使って、私に何ができるか教えて、1 つやってみせて✓ Claude Code が Pudge UI を使っていると言うか、回答に Pudge UI のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
Cursor につなげますが、先に準備が必要です
先にパソコンへ Node.js を入れてください（1 回だけ）
このボタンで Cursor を開く
コマンドを確認中 · 確認が通るとコピーボタンが出ます
Cursor の AI チャットを Agent モードで開く
試してみる
Pudge UI を使って、私に何ができるか教えて、1 つやってみせて✓ Cursor が Pudge UI を使っていると言うか、回答に Pudge UI のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
VS Code につなげますが、先に準備が必要です
先にパソコンへ Node.js を入れてください（1 回だけ）
このボタンで VS Code を開く
コマンドを確認中 · 確認が通るとコピーボタンが出ます
VS Code の AI チャットを Agent モードで開く
試してみる
Pudge UI を使って、私に何ができるか教えて、1 つやってみせて✓ VS Code が Pudge UI を使っていると言うか、回答に Pudge UI のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
開発者向け：ターミナルのコマンドと JSON 設定
パソコンにインストール
Claude Code
コマンドを確認中 · 確認が通るとコピーボタンが出ます
Claude Desktop (claude_desktop_config.json)
コマンドを確認中 · 確認が通るとコピーボタンが出ます
Cursor (~/.cursor/mcp.json)
コマンドを確認中 · 確認が通るとコピーボタンが出ます
VS Code (mcp.json)
コマンドを確認中 · 確認が通るとコピーボタンが出ます
この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
ひと目でわかる
- 週あたりのダウンロードi
- 59/週
- 接続方法
- パソコンで動く
- 最新バージョンi
- 0.2.0
- レジストリ公開日i
- 2026年6月30日
- コードの最終更新i
- 2026年9月20日
- 作者
- pudge-studio
- パッケージ
npm: @pudge-ui/mcp-server- ウェブサイト
- ui.pudgestudio.com
- レジストリでの状態
- 有効
使えるアプリ
このサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。
パソコン上で動かせるアプリ
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
できること
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
基本チェックi
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月13日にチェック
- ✓ 合格
作者とリポジトリが一致
レジストリ名は、リポジトリを所有するGitHubアカウント pudge-studio で確認済みです
- ✓ 合格
今もメンテナンスされている
コードの最終更新：2 か月前
- ✓ 合格
ライセンスがある
MITを使用
- – 対象外
エンドポイントが応答する
これはパソコンで動くため、インターネット上のエンドポイントはありません
- – 対象外
OAuthでサインイン
パソコンで動き、代わりにローカルの設定を使います
- … 未チェック
ツールの説明に隠れた指示がない
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
話し合い
質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。
ユーザーレビュー
まだレビューはありません
開発者ツールのほかのサーバーとの比較i
- このカテゴリのほかの5821件のうち77%よりスターが多い
- このカテゴリのほかの5821件のうち18%より最近レジストリに公開
- 基本チェックの結果が、このカテゴリのほかの5821件のうち100%と同じかそれ以上
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
よくある質問
Pudge UIは安全ですか？
当てはまる基本チェック3項目のうち3項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
どんなキーやコードが必要ですか？
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
パソコンで動きますか、それともクラウドですか？
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません（サーバー自体がオンラインサービスを呼び出す場合を除きます）。
今もメンテナンスされていますか？
GitHubリポジトリの最終更新は2 か月前、最新バージョン（0.2.0）がレジストリに届いたのは5 か月前です。
どのアプリで使えますか？
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。
代わりに使えるものは？
同じカテゴリには：REA, GitHub, Serena MCP: the IDE for your agent
同じカテゴリのほかの候補
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方：↓ 週あたりのダウンロードi★ GitHubスターi3つの柱：レビュー · チェック · 利用状況i更新＝最新バージョンをレジストリに公開した日i
GitHub
Connect AI assistants to GitHub - manage repos, issues, PRs, and workflows through natural language.
Serena MCP: the IDE for your agent
A powerful toolkit for coding, providing semantic retrieval and editing capabilities.
作者のREADME
READMEを開く
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
@pudge-ui/mcp-server
MCP server for the pudge-ui design system. Lets coding agents query component specs programmatically.
Installation
Add to your MCP client config (e.g. Claude Desktop, Claude Code):
{"mcpServers": { "pudge-ui": { "command": "npx", "args": ["-y", "@pudge-ui/mcp-server"] } } }
For local development:
{"mcpServers": { "pudge-ui": { "command": "npx", "args": ["tsx", "src/index.ts"], "cwd": "/path/to/pudge-ui/packages/mcp-server" } } }
Available Tools
| Tool | Description |
|---|---|
list_components | List all components, optionally filtered by category |
search_components | Fuzzy search components by name, description, or tags |
get_foundation | Get foundation spec docs (core 5 or extended 9) |
get_component | Get full spec for a single component (foundation + spec) |
get_components | Get specs for multiple components (foundation included once) |
get_composition | Get a composition spec with all referenced component specs |
Examples
list_components({ category: "buttons" })search_components({ query: "volume slider audio" }) get_component({ name: "push-button" }) get_components({ names: ["rotary-encoder", "vu-meter", "vertical-fader"] }) get_composition({ name: "audio-mixer-strip" }) get_foundation({ extended: true })
All tools are read-only (annotated with readOnlyHint) — the server never writes to your filesystem or makes network calls. Specs are bundled in the package.
Development
npm installnpm run dev # run with tsx npm run build # compile + copy spec npm run typecheck # type-check only npm test # run the test suite
Versioning & stability
This server tracks pudge-ui's versioning and is pre-1.0. The component catalog grows between releases, but tool names and input shapes are stable — any change to a tool signature will come with a minor/major version bump and a CHANGELOG entry. Pin a version if you need byte-for-byte reproducibility.