MCP Server Test 03

🚀 Popmelt MCP コンポーネント生成ツール

このリポジトリは、Popmeltモデルコンテキストプロトコル（MCP）を利用して、自然言語コマンドでスタイル付きのReactコンポーネントを動的に生成するツールを提供しています。

✨ 主な機能

1. MCP カーソル統合：自然言語コマンドを使用して、直接Cursor内でコンポーネントを生成します。
2. フロントエンドサンドボックス：コンポーネント生成をテストするためのWebベースのsandboxです。
3. コマンドラインツール：コマンドラインからコンポーネントを生成するスクリプトです。

📦 インストール

前提条件

• Node.js 14+ をインストールする
• MCPサーバーを http://localhost:3000 で実行する

クイックスタート

1. MCPサーバーを起動する

まず、MCPサーバーが実行されていることを確認してください。

npm run dev

これにより、http://localhost:3000 でサーバーが起動します。

2. ツールを選択する

A. フロントエンドサンドボックスを使用する

フロントエンドサンドボックスは、コンポーネント生成を視覚的にテストする方法を提供します。

# サンドボックスディレクトリに移動する
cd sandbox

# 依存関係をインストールし、サンドボックスを起動する
npm install
npm start

これにより、ブラウザでサンドボックスが開き、以下の操作ができます。

• 自然言語コマンドを入力してコンポーネントを生成する
• 生成されたコンポーネントのリアルタイムプレビューを表示する
• TypeScriptとCSSのコードをコピーして、自分のプロジェクトで使用する
• 生成されたコンポーネントの履歴を保存する

詳細については、サンドボックスREADME を参照してください。

B. Cursor統合を使用する

Cursor統合を使用すると、直接Cursorエディタ内でコンポーネントを生成できます。

1. 統合をインストールする：

node setup-cursor-mcp.js

2. Cursor内で使用する：

• Cmd+Shift+G（Mac）または Ctrl+Shift+G（Windows/Linux）を押す
• 「olivia grayのボタンコンポーネントを作成する」と入力する
• コンポーネントが生成され、Cursor内で開きます

詳細については、Cursor MCP README を参照してください。

C. コマンドラインツールを使用する

コマンドラインから直接コンポーネントを生成することもできます。

# NLP生成器を使用する
node cursor-nlp-component-generator.js "olivia grayのボタンコンポーネントを作成する"

# よりシンプルな生成器を使用する
node generate-component.js button olivia-gray

💻 使用例

基本的な使用法

import React from 'react';
import Button from './components/Button';

function App() {
  return (
    <div className="app">
      <h1>私のアプリケーション</h1>
      <Button variant="primary" onClick={() => alert('クリックされました！')}>
        クリックしてください
      </Button>
    </div>
  );
}

自然言語コマンド

システムは、さまざまな表現をサポートしています。

• 「olivia grayのボタンコンポーネントを作成する」
• 「oliviaスタイルのカードコンポーネントを生成する」
• 「grayスタイルのテキストコンポーネントを作成する」

サポートされるコンポーネントタイプ

• button：インタラクティブなボタンコンポーネント
• card：コンテンツコンテナカード
• heading：さまざまなサイズのテキスト見出し
• text：汎用テキスト要素
• input：フォーム入力要素
• nav：ナビゲーションコンポーネント
• badge：インジケーターバッジ要素
• modal：ダイアログモーダルコンポーネント
• alert：メッセージ通知コンポーネント
• table：データテーブルコンポーネント

サポートされる設定ファイル

現在サポートされているのは、「olivia gray」（指定されない場合はデフォルト）です。

生成されるコンポーネント

すべてのコンポーネントは、以下のように生成されます。

• プロパティ用のTypeScriptインターフェース
• 最新のReact関数型コンポーネント
• すべてのプロパティの正しい型
• 一貫したディレクトリ構造

プロジェクト構造

project/
├── src/
│   ├── components/       # コンポーネントディレクトリ
│   │   └── Button.tsx    # 生成されたボタンコンポーネント
│   └── App.tsx          # サンプルアプリケーション
└── package.json         # プロジェクトの依存関係ファイル

📚 ドキュメント

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

git clone https://github.com/your-repository.git
cd your-repository
npm install

2. 開発サーバーを起動する：

npm run dev

3. ブラウザで http://localhost:3000 を開く

コントリビューションガイド

コントリビューションを歓迎します！ 詳細については、CONTRIBUTING.md を参照してください。

📄 ライセンス

LICENSE

連絡先

何か質問がある場合は、your-email@example.com までお問い合わせください。