Its Just MCP

🚀 Cursor用のMCP its-just-uiサーバー

このサーバーは、Cursor IDE用に最適化されたモデルコンテキストプロトコル（MCP）サーバーです。エディタ内で直接、AIを活用したits-just-ui Reactコンポーネントの生成、カスタマイズ、およびドキュメント化を可能にします。

🎯 Cursorでこのサーバーを使用する理由

• ネイティブMCPサポート：Cursorはstdioを介してMCPサーバーを組み込みでサポートしています。
• AIによるコンポーネント生成：簡単なプロンプトで完全なits-just-uiコンポーネントを生成できます。
• コンテキスト認識：AIはプロジェクト構造と既存のコードを理解します。
• ゼロコンフィギュレーション：最小限のセットアップですぐに使用できます。

目次

• 🚀 Cursorのクイックスタート
• ⚙️ Cursorの設定
• 🛠️ Cursorで利用可能なツール
• 💡 Cursorの使用例
• 📚 代替案：Claude Desktop
• 開発
• トラブルシューティング
• ライセンス

🚀 Cursorのクイックスタート

オプション1：NPMパッケージ（推奨）

# Cursorの設定に追加するだけで、インストール不要！
# Cursorがnpxを介してすべてを処理します。

オプション2：ローカル開発

# クローンしてビルド
git clone https://github.com/its-just-ui/its-just-mcp.git
cd its-just-mcp
npm install && npm run build

⚙️ Cursorの設定

ステップ1：MCP設定の作成

プロジェクトレベル（推奨）

Reactプロジェクトのルートに.cursor/mcp.jsonを作成します：

{
  "mcpServers": {
    "its-just-ui": {
      "command": "npx",
      "args": ["-y", "its-just-mcp"],
      "env": {}
    }
  }
}

グローバル設定（すべてのプロジェクト）

~/.cursor/mcp.jsonを作成します：

{
  "mcpServers": {
    "its-just-ui": {
      "command": "npx",
      "args": ["-y", "its-just-mcp"],
      "env": {}
    }
  }
}

ローカル開発セットアップ

MCPサーバーをローカルで開発している場合：

{
  "mcpServers": {
    "its-just-ui": {
      "command": "node",
      "args": ["/absolute/path/to/its-just-mcp/dist/index.js"],
      "env": {}
    }
  }
}

ステップ2：Cursorを再起動

設定を追加した後、Cursorを再起動してMCPサーバーを読み込みます。

ステップ3：インストールの確認

Cursor内でAIに以下の質問をすることができます：

• "利用可能なMCPツールは何ですか？"
• "its-just-uiを使ってボタンコンポーネントを生成してください"

🎨 Cursor固有の機能

インラインコンポーネント生成

Cursor AIにコード内で直接コンポーネントを生成するように依頼できます：

"ここにローディング状態のプライマリボタンを追加してください"
"3列のカードグリッドレイアウトを作成してください"
"バリデーション付きのログインフォームを生成してください"

コンテキスト認識型の提案

MCPサーバーはプロジェクトのコンテキストを理解します：

• 既存のテーマ設定
• コンポーネントの使用パターン
• プロジェクト構造

Cursorのクイックコマンド

• 生成：⌘+K → "Generate [コンポーネント] with [props]"
• ドキュメント化：⌘+K → "Document this its-just-ui component"
• テーマ：⌘+K → "Configure dark theme for its-just-ui"
• フォーム：⌘+K → "Create a contact form with validation"

🛠️ Cursorで利用可能なツール

コンポーネント生成

テーマとスタイリング

フォームとドキュメント

💡 Cursorの使用例

例1：コンポーネントの生成

Cursor内で⌘+Kを押して以下のように質問します：

"ローディング状態のプライマリボタンを生成してください"

AIはMCPサーバーを使用して以下を生成します：

<Button variant="primary" loading={true}>
  Processing...
</Button>

例2：完全なフォームの作成

"メールアドレスとパスワードのバリデーション付きのログインフォームを作成してください"

結果：

<form onSubmit={handleSubmit}>
  <Input
    type="email"
    name="email"
    label="Email"
    required
    placeholder="Enter your email"
  />
  <Input
    type="password"
    name="password"
    label="Password"
    required
    minLength={8}
  />
  <Button type="submit" variant="primary">
    Login
  </Button>
</form>

例3：テーマの設定

"青いプライマリカラーのダークテーマを設定してください"

結果：

<ThemeProvider
  theme={{
    mode: "dark",
    colors: {
      primary: "#3b82f6",
      secondary: "#64748b"
    }
  }}
>
  {children}
</ThemeProvider>

📚 代替案：Claude Desktop

このサーバーはCursor用に最適化されていますが、Claude Desktopでも動作します：

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

{
  "mcpServers": {
    "its-just-ui": {
      "command": "npx",
      "args": ["-y", "its-just-mcp"],
      "env": {}
    }
  }
}

開発

# 依存関係のインストール
npm install

# 開発モードで実行
npm run dev

# 本番用にビルド
npm run build

# テストの実行
npm test

リントとフォーマット

# ESLint
npm run lint

# Prettier
npm run format

テスト

# Jest
npm test

# ウォッチモード
npm run test:watch

# カバレッジ
npm run test:coverage

プロジェクト構造

its-just-mcp/
├── src/
│   ├── index.ts              # メインサーバーのエントリーポイント
│   ├── components/
│   │   └── registry.ts       # コンポーネントの定義とメタデータ
│   └── tools/
│       ├── componentGenerator.ts  # コンポーネント生成ロジック
│       ├── themeManager.ts       # テーマ設定ツール
│       ├── utilityTools.ts       # ユーティリティとレイアウトツール
│       └── documentationTools.ts # ドキュメントとアクセシビリティ
├── dist/                      # コンパイルされた出力
├── package.json
├── tsconfig.json
└── README.md

コントリビューション

コントリビューションは大歓迎です！プルリクエストを送信してください。

推奨手順：

• リポジトリをフォークして機能ブランチを作成します。
• 新しい動作に対するテストを追加します。
• ローカルでリントとテストを実行します。
• 明確な説明と例を付けてPRを開きます。

ライセンス

MIT

サポート

問題や質問がある場合は、GitHubでイシューを開くか、メンテナに連絡してください。

関連リンク

• Cursor IDE - AIを中心としたコードエディタ
• Cursor MCPドキュメント
• its-just-uiライブラリ
• npmでのits-just-ui
• MCP SDKドキュメント

トラブルシューティング

Cursor固有の問題

一般的な修正方法

# Nodeバージョンを確認（18+が必要）
node --version

# ローカル開発の場合は再ビルド
cd /path/to/its-just-mcp
npm run build

# MCP設定が有効なJSONであることを確認
cat .cursor/mcp.json | jq .

# npxが失敗した場合はnpmキャッシュをクリア
npm cache clean --force

ヘルプの取得

• Cursorコンソールを確認：View → Output → MCP
• Cursor MCPドキュメント：https://cursor-docs.apidog.io/model-context-protocol
• イシューを開く：https://github.com/its-just-ui/its-just-mcp/issues