a2a mcp
Back to MCP Servers
shadcn MCP Server logo
mcp-server309

shadcn MCP Server

AIアシスタントが自然言語を使ってレジストリからshadcn/uiコンポーネントを直接閲覧・検索・インストールできる公式MCPサーバーで、ハルシネーションのないAI駆動UI開発を実現します。

XFacebookLinkedInRedditHacker News

概要

shadcn MCP Serverは、shadcn/uiのためのModel Context Protocol (MCP)の公式実装です 。AIアシスタントやエージェントがshadcn互換のコンポーネントレジストリに安全に接続し、利用可能なコンポーネントの閲覧、特定コンポーネントの検索、ソースコード・デモ・メタデータの取得、さらに自然言語の指示でプロジェクトへ直接インストールすることを可能にします。

これにより、最新のレジストリデータへライブかつ構造化されたアクセスを提供し、shadcn CLIと統合することで、古い情報や存在しないpropsを生成するなどのAI特有の問題を解消します。

特徴

  • レジストリの閲覧と検索: AIは任意のshadcn互換レジストリからコンポーネント、ブロック、チャートを一覧表示・検索できます。
  • 正確なデータ取得: 最新のTypeScriptソースコード、props/インターフェース、使用例、インストールコマンドを取得可能。
  • 直接インストール: 統合されたCLIブリッジを通じて、shadcn addコマンドをAIに自動実行させることができます。
  • フレームワーク非依存のレジストリ: ReactやTailwindベースのコンポーネントを含む、公式・カスタムを問わずあらゆるshadcnレジストリに対応。
  • セキュアなローカル実行: ローカルサーバー（通常はnpxまたはインストール済みパッケージ）として動作し、認証設定が可能。
  • IDEおよびツール統合: Cursor、Claude Desktop、ZedなどMCP対応ツールでネイティブサポート。

仕組み

  1. MCPサーバーをインストール（通常はnpxまたはプロジェクト設定経由）。
  2. components.jsonでレジストリを設定。
  3. AIアシスタントをローカルMCPエンドポイントに接続。
  4. 「shadcnのチャートで美しいダッシュボードを追加して」といった自然言語プロンプトを使用すると、AIがレジストリを検索し、コンポーネントを選択してインストールします。

ユースケース

  • CursorやClaude CodeでのAI駆動UIプロトタイピング。
  • 大規模コードベースでのコンポーネントインストールの自動化。
  • あるエージェントがコンポーネントを調査し、別のエージェントがUIを構築するマルチエージェントワークフロー。
  • エンタープライズ向けデザインシステムのカスタムレジストリ統合。

はじめに

公式ドキュメントを参照してください: https://ui.shadcn.com/docs/mcp

通常は以下で開始します:

npx shadcn@latest mcp

またはプロジェクトに設定し、対応するAIツールと併用します。

SvelteやVueなどのマルチフレームワーク対応のコミュニティフォークや拡張版も存在しますが、多くのユーザーにはshadcn/ui公式版が推奨されます。

Tags

shadcnmcpai-agentui-componentsregistrytypescriptreacttailwindclaudecursor

Related Entries

Keep exploring similar tools and resources in this category.

Browse MCP Servers
viewmax mcp logo

viewmax mcp

MCP Servers

ViewMax MCP is a hosted Streamable HTTP MCP server for generating AI video, images, music, speech, and sound effects, with tools for model discovery, task polling, and credit checks. Official setup is documented for Claude Web/Desktop, Claude Code, Cursor, Codex, and SDK clients.

DataForSEO MCP Server logo

DataForSEO MCP Server

MCP Servers

DataForSEO MCP Server is the official Model Context Protocol server for connecting AI clients to DataForSEO SEO, SERP, keyword, backlink, on-page, business, domain, content, merchant, and AI optimization data. It can be used as a hosted Streamable HTTP endpoint, a local npx package, a Docker container, or a source-built TypeScript server.

Cursor MCP logo

Cursor MCP

MCP Servers

Cursor MCP is Cursor's Model Context Protocol client support for connecting the Cursor editor and Cursor CLI agent to external MCP servers. Official docs cover stdio, SSE, Streamable HTTP, mcp.json configuration, OAuth, Marketplace plugins, and CLI management commands.

Higgsfield MCP logo

Higgsfield MCP

MCP Servers

Higgsfield MCP is Higgsfield AI's hosted MCP connector for generating images, videos, reusable characters, and creative assets from Claude or MCP-compatible agents. It uses a Higgsfield account and platform credits, with no API key documented for the official MCP connector.

vercel eve logo

vercel eve

MCP Servers

Vercel Eve is an open-source, filesystem-first TypeScript framework for building durable AI agents on Vercel. It organizes agent capabilities as files for instructions, tools, skills, channels, schedules, subagents, and connections, including integrations with external MCP and OpenAPI tools.

Agent Reach logo

Agent Reach

MCP Servers

Agent Reach is an open-source CLI and Agent Skill that installs, routes, and health-checks upstream tools for web, social, GitHub, video transcript, RSS, and search access. It is not documented as a standalone MCP server; some channels use MCP-backed upstream tools such as mcporter/Exa, xiaohongshu-mcp, and linkedin-scraper-mcp.