jpisnice/shadcn-ui-mcp-server
Developer toolsこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
MCPサーバーは、LLMSがshadcnのUIコンポーネント構造、使用法、インストールに関するコンテキストを把握し、react、svelte 5、vue、React Nativeと互換性があります
概要
モデルコンテキストプロトコル(MCP)サーバーで、AIアシスタントにshadcn/ui v4のコンポーネント、ブロック、デモ、メタデータへの包括的なアクセスを提供します。AI搭載の開発ワークフローで、React、Svelte、Vue、React Nativeの実装をシームレスに取得できます。 - - React、Svelte、Vue、React Native実装 - - 最新のshadcn/ui v4 TypeScriptソース - - 実装例と使用パターン - - 完全なブロック実装(ダッシュボード、カレンダー、フォーム) - - 依存関係、説明、設定詳細 - - リポジトリ構造の探索 - - 速度制限処理を伴う効率的なGitHub API統合 - - マルチクライアント展開のためのサーバー送信イベントサポート - Docker Composeによる本番対応コンテナ化 .mcpbファイルをダウンロードしてダブルクリックすると、即時インストールが可能です: 1. リリースからshadcn-ui-mcp-server.mcpbをダウンロードする 2.ファイルをダブルクリックする - Claude Desktopが自動的に開く 3.GitHubトークンの入力(任意で、より高いレート制限の場合は) 4.
概要（AI 翻訳）
** 🚀 Shadcn/UIコンポーネントをAIワークフローに最速で統合する方法**
モデルコンテキストプロトコル(MCP)サーバーで、AIアシスタントにshadcn/ui v4のコンポーネント、ブロック、デモ、メタデータへの包括的なアクセスを提供します。AI搭載の開発ワークフローで、React、Svelte、Vue、React Nativeの実装をシームレスに取得できます。
✨ 主な特徴
- ** 🎯 マルチフレームワークサポート** - React、Svelte、Vue、React Native実装
- ** 📦 コンポーネントソースコード** - 最新のshadcn/ui v4 TypeScriptソース
- ** 🎨 コンポーネントデモ** - 実装例と使用パターン
- ** 🏗️ ブロックサポート** - 完全なブロック実装(ダッシュボード、カレンダー、フォーム)
- ** 📋 メタデータアクセス** - 依存関係、記述、設定の詳細
- ** 🔍 ディレクトリブラウジング** - リポジトリ構造の探索
- ** ⚡ スマートキャッシュ** - レート制限処理と効率的なGitHub API統合、リストおよび読み取り結果に対するプロトコルキャッシュヒント(
ttlMs/cacheScope)を提供 - ** ⌨️ 引数補完** - プロンプトおよびリソーステンプレート引数(コンポーネント名、パッケージマネージャ、ビルドツールなど)のオートコンプリート
このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。
README
以下は原文 README の抜粋です。原文を見る。
Shadcn UI v4 MCP Server
🚀 The fastest way to integrate shadcn/ui components into your AI workflow
A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. Seamlessly retrieve React, Svelte, Vue, and React Native implementations for your AI-powered development workflow.
✨ Key Features
- 🎯 Multi-Framework Support - React, Svelte, Vue, and React Native implementations
- 📦 Component Source Code - Latest shadcn/ui v4 TypeScript source
- 🎨 Component Demos - Example implementations and usage patterns
- 🏗️ Blocks Support - Complete block implementations (dashboards, calendars, forms)
- 📋 Metadata Access - Dependencies, descriptions, and configuration details
- 🔍 Directory Browsing - Explore repository structures
- ⚡ Smart Caching - Efficient GitHub API integration with rate limit handling, plus protocol cache hints (
ttlMs/cacheScope) on list and read results - ⌨️ Argument Completion - Autocomplete for prompt and resource-template arguments (component names, package managers, build tools, and more)
- 🌐 Streamable HTTP Transport - Stateless
/mcpendpoint for multi-client deployments (MCP spec 2026-07-28) - 🐳 Docker Ready - Production-ready containerization with Docker Compose
🚀 Quick Start
# Basic usage (60 requests/hour)
npx @jpisnice/shadcn-ui-mcp-server
# With GitHub token (5000 requests/hour) - Recommended
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
# Switch frameworks
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
# Use Base UI instead of Radix (React only)
npx @jpisnice/shadcn-ui-mcp-server --ui-library base
🎯 Get your GitHub token in 2 minutes: docs/getting-started/github-token.md
📦 One-Click Installation (Claude Desktop)
Download and double-click the .mcpb file for instant installation:
- Download
shadcn-ui-mcp-server.mcpbfrom Releases - Double-click the file - Claude Desktop opens automatically
- Enter your GitHub token (optional, for higher rate limits)
- Click Install - tools are available immediately
インストール
npx @jpisnice/shadcn-ui-mcp-server