MCP Tailwind Gemini

🚀 MCP Tailwind Gemini Server

Advanced Model Context Protocol (MCP) サーバーで、Tailwind CSS と Gemini AI を統合し、主要な開発環境すべてでのインテリジェントなデザイン支援に クロスプラットフォーム対応 しています。

🚀 クイックスタート

このセクションでは、MCP Tailwind Gemini Server の基本的な使い方を紹介します。

✨ 主な機能

🤖 AI 駆動のデザイン

• インテリジェントなコンポーネント生成：Gemini AI を使用して高度な Tailwind コンポーネントを作成します。
• スマートな最適化：AI 駆動のクラス最適化と競合解消を行います。
• デザイン分析：包括的なデザイン品質評価と改善提案を提供します。
• テーマ作成：AI の支援を受けて一貫性のあるデザインシステムを生成します。

🎨 Tailwind CSS ツール

• コンポーネントジェネレーター：ボタン、カード、フォーム、ナビゲーション、モーダル、およびカスタムコンポーネントを作成します。
• クラスオプティマイザー：冗長なクラスをクリーンアップし、競合を解消します。
• CSS コンバーター：既存の CSS/SCSS を Tailwind クラスに変換します。
• レイアウトジェネレーター：ダッシュボード、ランディングページ、ブログなどのレスポンシブレイアウトを構築します。
• テーマクリエーター：カスタムカラーパレット、タイポグラフィ、およびデザイントークンを生成します。
• プレビュージェネレーター：スクリーンショット機能付きの視覚的なコンポーネントプレビューを生成します。

🌐 クロスプラットフォーム統合

• マルチフレームワークサポート：React、Vue、Svelte、Angular を自動コンポーネント変換でサポートします。
• ビルドツール統合：Vite、Webpack、Next.js、Nuxt、SvelteKit プロジェクトの生成をサポートします。
• IDE 拡張機能：VS Code、WebStorm のプラグインでライブアシスタントを提供します。
• デザインツール同期：Figma プラグインでデザインからコードへの変換を行います。
• ユニバーサルデプロイメント：CLI ツール、ブラウザ拡張機能、および API 統合をサポートします。

🚀 高度な機能

• フレームワークアダプター：フレームワーク間の自動コンポーネント変換を行います。
• ユニバーサルプロジェクト生成：任意のテックスタックでフルスタックアプリケーションを作成します。
• マルチプラットフォームデプロイメント：開発環境、本番環境、およびデザインツールにデプロイします。
• 外部 API 統合：Gemini、OpenAI、Claude、Figma を統合して AI 機能を強化します。
• レスポンシブデザイン：モバイルファーストアプローチでブレークポイント最適化を行います。
• アクセシビリティ：WCAG コンプライアンスチェックと改善提案を提供します。
• パフォーマンス：バンドルサイズ最適化とレンダリングパフォーマンス分析を行います。
• ビジュアルプレビュー：コンポーネントの可視化のためのスクリーンショット生成を行います。

📦 インストール

前提条件

• Node.js 18 以上
• npm または yarn パッケージマネージャー
• Docker（コンテナ化デプロイメント用）
• （オプション）AI 機能のための Gemini API キー

Docker を使用したクイックスタート

1. リポジトリをクローンします：

git clone https://github.com/Tai-DT/mcp-tailwind-gemini.git
cd mcp-tailwind-gemini

2. 環境を設定します：

# 環境テンプレートをコピー
cp env.example .env

# .env ファイルを API キーで編集
# GEMINI_API_KEY=your_actual_api_key_here

3. Docker でデプロイします：

# 本番用コンテナをビルドして実行
docker-compose -f docker-compose.prod.yml up -d

# ステータスを確認
docker ps | grep mcp-tailwind-server

ローカル開発環境のセットアップ

1. 依存関係をインストールします：

npm install

2. プロジェクトをビルドします：

npm run build

3. 環境を設定します：

# 環境テンプレートをコピー
cp env.example .env

# API キーで編集
# GEMINI_API_KEY=your_actual_api_key_here

4. 開発サーバーを起動します：

npm run dev

Claude Desktop の設定

claude_desktop_config.json に追加します：

{
  "mcpServers": {
    "tailwind-gemini": {
      "command": "npx",
      "args": ["mcp-gemini-cli", "--allow-npx"],
      "env": {
        "GEMINI_API_KEY": "your-api-key-here"
      }
    }
  }
}

設定ファイルの場所：

• macOS：~/Library/Application Support/Claude/claude_desktop_config.json
• Windows：%APPDATA%\\Claude\\claude_desktop_config.json
• Linux：~/.config/Claude/claude_desktop_config.json

代替設定（npm 使用）：

{
  "mcpServers": {
    "mcp-tailwind-gemini": {
      "command": "npm",
      "args": ["run", "start"],
      "cwd": "/path/to/your/mcp-tailwind-gemini",
      "env": {
        "GEMINI_API_KEY": "your_gemini_api_key_here"
      }
    }
  }
}

Cursor IDE の場合

~/.cursor/mcp.json に追加します：

{
  "mcpServers": {
    "mcp-tailwind-gemini": {
      "command": "node",
      "args": ["/path/to/your/mcp-tailwind-gemini/dist/index.js"],
      "env": {
        "GEMINI_API_KEY": "your_gemini_api_key_here"
      }
    }
  }
}

💻 使用例

基本的な使用法

コンポーネント生成

{
  "tool": "generate_component",
  "description": "Create a responsive button component",
  "type": "button",
  "variant": "primary",
  "size": "lg",
  "framework": "react",
  "responsive": true,
  "accessibility": true
}

クラス最適化

{
  "tool": "optimize_classes", 
  "html": "<div class=\"p-4 px-4 py-4 text-blue-500 text-blue-600\">Content</div>",
  "removeRedundant": true,
  "mergeConflicts": true
}

テーマ作成

{
  "tool": "create_theme",
  "brandColor": "#3B82F6",
  "style": "modern",
  "colorCount": 9,
  "includeConfig": true
}

デザイン分析

{
  "tool": "analyze_design",
  "html": "<div>...</div>",
  "checkAccessibility": true,
  "checkResponsive": true,
  "checkPerformance": true
}

プレビュー生成

{
  "tool": "generate_preview",
  "html": "<button class=\"bg-blue-500 text-white px-4 py-2 rounded\">Button</button>",
  "width": 800,
  "height": 600
}

CSS 変換

{
  "tool": "convert_to_tailwind",
  "code": ".button { padding: 1rem; background: #3B82F6; }",
  "format": "css",
  "optimize": true
}

AI 提案

{
  "tool": "suggest_improvements",
  "html": "<div>...</div>",
  "context": "E-commerce product card",
  "focusAreas": ["accessibility", "performance", "ux"]
}

レイアウト生成

{
  "tool": "create_layout",
  "type": "dashboard",
  "sections": ["header", "sidebar", "main", "footer"],
  "complexity": "medium",
  "framework": "react"
}

高度な使用法

マルチフレームワーク開発

// Convert HTML component to any framework
{
  "tool": "generate_component",
  "description": "Modern button component",
  "framework": "react", // or "vue", "svelte", "angular"
  "typescript": true,
  "features": ["loading-state", "variant-support"]
}

ユニバーサルプロジェクト生成

// Create full-stack project with any tech stack
{
  "tool": "create_project",
  "name": "My App",
  "framework": "react",
  "buildTool": "vite", // or "webpack", "nextjs", "nuxt"
  "features": ["typescript", "tailwind", "testing", "deployment"]
}

プラットフォーム統合

# VS Code Extension
code --install-extension tailwind-mcp-assistant

# WebStorm Plugin  
# Install from JetBrains Marketplace: "Tailwind MCP Assistant"

# Figma Plugin
# Search "Tailwind MCP" in Figma Community

# CLI Tool
npm install -g tailwind-mcp-cli
tmcp generate --framework react --description "Product card"

# Browser Extension
# Install from Chrome Web Store: "Tailwind MCP Assistant"

クロスプラットフォームワークフロー

# 1. Design in Figma → Extract with plugin
# 2. Convert to multiple frameworks  
tmcp convert --from figma --to react,vue,svelte

# 3. Generate optimized projects
tmcp create-project --framework react --build vite
tmcp create-project --framework vue --build nuxt

# 4. Deploy to multiple platforms
tmcp deploy --platforms vercel,netlify,aws

コード移行

既存の CSS を Tailwind に変換します：

• レガシー CSS をユーティリティクラスに変換します。
• 他のフレームワークから移行します。
• クラスの使用パターンを最適化します。
• 視覚的な一貫性を維持します。

🔧 技術詳細

ローカルでの実行

# ホットリロード付きの開発モード
npm run dev

# 本番用にビルド
npm run build

# 本番サーバーを起動
npm start

MCP サーバーのテスト

1. エコーコマンドでテスト：

echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/list"}' | node dist/index.js

2. 単純なツール呼び出しでテスト：

echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "generate_component", "arguments": {"description": "A simple button", "type": "button"}}}' | node dist/index.js

3. 環境変数でテスト：

GEMINI_API_KEY="your_key" node dist/index.js

環境変数

• GEMINI_API_KEY：Google Gemini API キー（オプション）
• NODE_ENV：環境モード（開発/本番）

プロジェクト構造

src/
├── index.ts              # Main MCP server
├── tools/                # MCP tool implementations
│   ├── component-generator.ts
│   ├── class-optimizer.ts
│   ├── theme-creator.ts
│   ├── design-analyzer.ts
│   ├── preview-generator.ts
│   ├── css-converter.ts
│   ├── ai-suggestions.ts
│   └── layout-generator.ts
└── utils/
    └── gemini.ts          # Gemini AI integration

🤝 コントリビューション

貢献を歓迎します！詳細については、コントリビューションガイドラインを参照してください。

開発環境のセットアップ

1. リポジトリをフォークします。
2. 機能ブランチを作成します。
3. 変更を加えます。
4. 適用可能な場合はテストを追加します。
5. プルリクエストを送信します。

📄 ライセンス

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

🐳 Docker デプロイメント

クイック Docker セットアップ

# 本番用イメージをビルド
docker build -f Dockerfile.runtime -t mcp-tailwind-runtime:latest .

# コンテナを実行
docker run -d \
  --name mcp-tailwind-server \
  --env-file .env \
  --restart unless-stopped \
  mcp-tailwind-runtime:latest

Docker Compose（推奨）

# 本番用スタックを起動
docker-compose -f docker-compose.prod.yml up -d

# ログを表示
docker-compose -f docker-compose.prod.yml logs -f

# サービスを停止
docker-compose -f docker-compose.prod.yml down

セキュリティのベストプラクティス

1. 環境変数：

# .env ファイルを使用（Git にコミットしない）
cp env.example .env
# 実際の API キーで .env を編集

2. コンテナセキュリティ：

# リソース制限付きで実行
docker run -d \
  --name mcp-tailwind-server \
  --env-file .env \
  --memory=512m \
  --cpus=1.0 \
  --restart unless-stopped \
  mcp-tailwind-runtime:latest

3. ネットワーク分離：

# 分離されたネットワークを作成
docker network create mcp-network

# カスタムネットワークで実行
docker run -d \
  --name mcp-tailwind-server \
  --network mcp-network \
  --env-file .env \
  --restart unless-stopped \
  mcp-tailwind-runtime:latest

詳細な Docker とセキュリティガイドについては、DOCKER-SECURITY-GUIDE.md を参照してください。

🔧 トラブルシューティング

一般的な問題

1. MCP サーバーが起動しない場合：

   • まず npm run build を実行したことを確認してください。
   • dist/index.js が存在することを確認してください。
   • Node.js のバージョンが 18 以上であることを確認してください。

2. Gemini API エラーの場合：

   • GEMINI_API_KEY 環境変数を設定してください。
   • API キーが有効で、適切な権限を持っていることを確認してください。
   • インターネット接続を確認してください。

3. Docker コンテナの問題の場合：

# コンテナのログを確認
docker logs mcp-tailwind-server

# 環境を確認
docker exec mcp-tailwind-server env | grep GEMINI

# コンテナを再起動
docker restart mcp-tailwind-server

4. Claude Desktop が接続しない場合：

   • 設定を更新した後に Claude Desktop を再起動してください。
   • 設定ファイルのパスが正しいことを確認してください。
   • JSON 構文が有効であることを確認してください。

5. ビルドエラーの場合：

# クリーンアップして再ビルド
rm -rf dist/ node_modules/
npm install
npm run build

デバッグモード

# デバッグログ付きで実行
DEBUG=mcp:* node dist/index.js

# Docker デバッグ
docker run -it --rm \
  --env-file .env \
  mcp-tailwind-runtime:latest npm run dev

🙋‍♂️ サポート

• 問題報告：GitHub Issues
• ドキュメント：この README の例を確認してください。
• ディスカッション：GitHub Discussions

Built with ❤️ for the Tailwind CSS and AI community