Basecoat UI

Basecoat MCP サーバー

AI アシスタントに Basecoat UI のコンポーネントライブラリ全体（React を使わず、プレーンな HTML と Tailwind で shadcn/ui のデザインを実現）を提供し、クラス名を推測させるのではなく、正しい Basecoat マークアップを生成できるようにします。

Basecoat のリリースに合わせて常に最新の状態に保っています。 Basecoat 1.0.2 では互換性を損なう API 変更があり、この MCP は同日に対応しました。

開発の経緯

趣味のプロジェクトとして、古いデバイスをデジタルフォトフレームに変えるものを作っていた際、UI コンポーネントに苦労しました。ShadCN UI の HTML 版である Basecoat CSS を使いたかったのですが、AI を活用したコーディングでコンポーネントやドキュメントを簡単に取り込める MCP サーバーがありませんでした。

そこで作りました。
これは初めて作った MCP サーバーです。誰もが Basecoat（および ShadCN スタイルのコンポーネント）を簡単に使えるようにするために公開しています。フィードバックや貢献を歓迎します！

---

Basecoat CSS のコンポーネントと、その使用方法のドキュメントにプログラムからアクセスできる Model Context Protocol（MCP）サーバーです。このサーバーにより、AI アシスタントは Basecoat CSS フレームワークを使った HTML インターフェースの構築を開発者に支援できます。

特長

• Basecoat 1.0.2：すべてのマークアップは 1.0 API（class="btn" data-variant="outline"、.field、メソッドベースの JS）に準拠しています。
• 90 種類以上のコンポーネントバリエーション：ボタン、フィールド、入力グループ、カード、ダイアログ、コマンドメニュー、ドロワー、チャートなど。
• 使用方法のドキュメント：JS の要件や 0.x からの移行に関する注意事項を含む、30 個のコンポーネントの実装ガイド。
• セットアップスクリプト：すべてのスタイルパック（Vega、Nova、Maia、Lyra、Mira、Luma、Sera、Rhea）とテーマスクリプトの CDN リンク。
• 検索と探索：名前またはカテゴリーでコンポーネントを検索できます。
• アクセシビリティ対応：すべてのコンポーネントに ARIA 属性とセマンティック HTML が含まれています。

クイックスタート

インストールは不要です。すべてのクライアントで npx を使ってサーバーを実行できます。

Claude Code

claude mcp add basecoat-ui -- npx -y basecoat-ui-mcp

Claude Desktop

claude_desktop_config.json に追加します：

{
  "mcpServers": {
    "basecoat-ui": {
      "command": "npx",
      "args": ["-y", "basecoat-ui-mcp"]
    }
  }
}

Cursor

上の Install in Cursor をクリックするか、~/.cursor/mcp.json に追加します：

{
  "mcpServers": {
    "basecoat-ui": {
      "command": "npx",
      "args": ["-y", "basecoat-ui-mcp"]
    }
  }
}

VS Code（GitHub Copilot）

上の Install in VS Code をクリックするか、.vscode/mcp.json に追加します：

{
  "servers": {
    "basecoat-ui": {
      "command": "npx",
      "args": ["-y", "basecoat-ui-mcp"]
    }
  }
}

Windsurf

~/.codeium/windsurf/mcp_config.json に追加します：

{
  "mcpServers": {
    "basecoat-ui": {
      "command": "npx",
      "args": ["-y", "basecoat-ui-mcp"]
    }
  }
}

Codex CLI

~/.codex/config.toml に追加します：

[mcp_servers.basecoat-ui]
command = "npx"
args = ["-y", "basecoat-ui-mcp"]

その他の MCP クライアント

npx -y basecoat-ui-mcp を stdio サーバーとして実行します。

試してみる

アシスタントに、次のように依頼してみてください。

Basecoat を使って、GitHub／Google のボタン、メールアドレスとパスワードの入力欄、ダークモードの切り替えを備えたカード形式のサインアップページを作成してください。

get_setup を呼び出して、該当するコンポーネントと使用方法のドキュメントを取得し、実際の Basecoat 1.0 API を使用した HTML を返します。

ローカル開発

git clone https://github.com/Sorbh/basecoat-ui-mcp.git
cd basecoat-ui-mcp
npm install

クライアントの接続先をローカルコピーに設定します。

{
  "mcpServers": {
    "basecoat-ui": {
      "command": "node",
      "args": ["/path/to/basecoat-ui-mcp/server.js"]
    }
  }
}

利用可能なツール

ツール	説明	パラメーター
get_component	特定のコンポーネントバリアントの HTML コードを取得します	name：コンポーネント名（例：「button-outline」、「field」、「command」）。区別が必要な場合はカテゴリを先頭に付けます（例：「layout/pagination」）
list_components	カテゴリ別に整理されたすべての利用可能なコンポーネントを一覧表示します	なし
get_usage	コンポーネントの使用方法に関するドキュメントを取得します	component：コンポーネント名（例：「button」、「combobox」）。バリアント名を指定した場合は、基本ドキュメントが返されます（「button-primary」→「button」）
get_setup	CDN リンク付きの Basecoat CSS セットアップコードを取得します	style（任意）：vega（デフォルト）、nova、maia、lyra、mira、luma、sera、rhea
get_theme_script	ダークモード／ライトモード用のテーマ切り替えスクリプトを取得します	なし
search_components	名前またはカテゴリでコンポーネントを検索します	query：検索語（例：「button」、「form」、「navigation」）
get_category	特定のカテゴリに含まれるすべてのコンポーネントを取得します	category：combine、feedback、forms、interactive、layout、navigation

コンポーネントのカテゴリ

フォーム

• ボタン：デフォルト、セカンダリ、アウトライン、ゴースト、リンク、破壊的、サイズ、アイコン、アイコン付き、読み込み中
• ボタングループ：横並び、縦並び
• フィールド／フィールドセット：ラベル、説明、無効状態、フィールドのグループ化
• 入力／入力グループ：基本、ラベル付き、無効、アイコン付き、ボタン付き
• セレクト：ネイティブセレクト、JS セレクト
• チェックボックス、ラジオグループ、スイッチ：ラベルと説明付き
• スライダー、テキストエリア、ラベル、フォームコンテナー

ナビゲーション

• タブ、アコーディオン、パンくずリスト、サイドバー

フィードバック

• アラート：デフォルト、成功、エラー
• アラートダイアログ、ダイアログ：確認用およびモーダルフォーム
• バッジ：プライマリ、セカンダリ、破壊的、アウトライン
• トースト、空状態、進行状況、スピナー

インタラクティブ

• コマンド：インラインおよびダイアログのパレット
• コンボボックス：入力優先の検索可能なセレクト
• ドロップダウンメニュー、ポップオーバー、ツールチップ
• ドロワー（ベータ）：下部および側面
• テーマスイッチャー

レイアウト

• カード、アバター、アイテム、Kbd、スクロールエリア
• スケルトン、テーブル、ページネーション
• チャート（ベータ）

組み合わせ

組み合わせた例：チャット、ログイン、設定、インタラクティブなページネーション。

この MCP の 1.x からのアップグレード

この MCP のバージョン 2.0.0 は Basecoat 1.0.2 を対象としており、Basecoat 0.3.x からの破壊的変更が含まれます。

• バリアントクラスがデータ属性になりました：btn-outline → class="btn" data-variant="outline"、btn-sm-icon → data-size="icon-sm"。
• .form ラッパーが削除されました。各ラベルとコントロールを <div class="field"> で囲んでください。
• ドキュメントイベント（basecoat:toast、basecoat:sidebar、basecoat:theme）がメソッドに置き換えられました：toaster.toast()、sidebar.toggle()、window.basecoat.theme.toggle()。
• dialog-alert は alert-dialog に名称変更されました。

プロジェクトにまだ 0.x のマークアップが残っている場合は、移行中に Basecoat の互換性スタイルシートを Basecoat の後に読み込んでください（@import "basecoat-css/compat";）。移行ガイドの全内容については、style-guide.md を参照してください。

ディレクトリ構造

basecoat-mcp/
├── components/           # HTML component files
│   ├── combine/         # Composed page examples
│   ├── feedback/        # Alerts, badges, dialogs, toasts
│   ├── forms/           # Buttons, fields, inputs, selects
│   ├── interactive/     # Command, combobox, dropdowns, tooltips
│   ├── layout/          # Cards, tables, avatars, items
│   └── navigation/      # Tabs, accordion, sidebar
├── usage/               # Usage documentation (same categories)
├── scripts/             # Setup and theme scripts
├── style-guide.md       # Full Basecoat 1.0 style and migration guide
├── server.js            # MCP server implementation
├── package.json
└── README.md

カテゴリはディスクから読み込まれるため、components/ または usage/ の下にフォルダーを追加するだけで利用できるようになります。

Basecoat CSS について

Basecoat CSS は、以下を提供する包括的な CSS フレームワークです。

• アクセシブルでセマンティックなコンポーネント
• ダーク／ライトテーマのサポート
• Tailwind CSS との統合
• JavaScript で拡張されたインタラクション
• モバイル対応のデザイン

詳しくは basecoatui.com をご覧ください。

ライセンス

MIT ライセンスです。詳細については LICENSE ファイルを参照してください。

貢献

1. リポジトリをフォークします
2. フィーチャーブランチを作成します：git checkout -b feature/amazing-feature
3. コーディング規約に従って変更を加えます
4. 変更を十分にテストします
5. 明確なメッセージを付けてコミットします：git commit -m 'Add amazing feature'
6. ブランチにプッシュします：git push origin feature/amazing-feature
7. プルリクエストを作成します

サポート

• 課題：GitHub Issues

---

Claude Code で ❤️ を込めて開発 — Saurabh K. Sharma が監視・プロンプト設定