Flux Ui MCP

🚀 Flux UI MCP Server

Flux UIコンポーネントの参照情報を提供するMCPサーバーです。このサーバーは、Flux UIコンポーネントのドキュメントや使用例にAIアシスタントがアクセスできるようにするModel Context Protocol (MCP) サーバーを実装した、TypeScriptベースのサーバーです。

✨ 主な機能

ツール

• list_flux_components - 利用可能なすべてのFlux UIコンポーネントのリストを取得します。
• get_flux_component_details - 特定のコンポーネントの詳細情報を取得します。
• get_flux_component_examples - 特定のコンポーネントの使用例を取得します。
• search_flux_components - キーワードでコンポーネントを検索します。

機能性

このサーバーは以下のサイトから情報を収集し、キャッシュします。

• 公式Flux UIドキュメントサイト (https://fluxui.dev)

以下を含む構造化データを提供します。

• コンポーネントの説明
• 使用例
• プロパティ
• コードサンプル

📦 インストール

Claude Desktopの設定

Claude Desktopで使用する場合は、サーバーの設定を追加します。

MacOSの場合: ~/Library/Application Support/Claude/claude_desktop_config.json Windowsの場合: %APPDATA%/Claude/claude_desktop_config.json

オプション1: ローカルビルドを使用する

{
  "mcpServers": {
    "fluxui-server": {
      "command": "/path/to/fluxui-mcp-server/build/index.js"
    }
  }
}

オプション2: npxコマンドを使用する

{
  "mcpServers": {
    "fluxui-server": {
      "command": "npx",
      "args": ["-y", "fluxui-mcp-server"]
    }
  }
}

Windsurfの設定

./codeium/windsurf/model_config.jsonに以下を追加します。

{
  "mcpServers": {
    "fluxui-server": {
      "command": "npx",
      "args": ["-y", "fluxui-mcp-server"]
    }
  }
}

Cursorの設定

.cursor/mcp.jsonに以下を追加します。

{
  "mcpServers": {
    "fluxui-server": {
      "command": "npx",
      "args": ["-y", "fluxui-mcp-server"]
    }
  }
}

デバッグ

MCPサーバーは標準入出力を介して通信するため、デバッグは難しい場合があります。パッケージスクリプトとして利用可能なMCP Inspectorの使用をおすすめします。

npm run inspector

インスペクターは、ブラウザでデバッグツールにアクセスするためのURLを提供します。

🔧 開発

依存関係をインストールします。

npm install

サーバーをビルドします。

npm run build

自動再ビルドで開発する場合は、以下を実行します。

npm run watch