webcomponents-react-mcp-server

UI5 Web Components for React MCP サーバー

UI5 Web Components for React の開発支援と API ドキュメントを提供する MCP サーバーです。

これは何ですか？

この MCP サーバーを利用すると、AI アシスタントが UI5 Web Components for React のドキュメント、コンポーネント API、ユーティリティ情報に直接アクセスできます。IDE を離れることなく、ライブラリに関する正確で最新の情報を開発者が得られるよう支援します。

セットアップ

このサーバーは MCP Registry で公開されており、対応するクライアントから直接インストールできます。

Claude Code

claude mcp add ui5-wcr -- npx @ui5/webcomponents-react-mcp@latest

VS Code / Cursor

.vscode/mcp.json に追加します。

{
  "servers": {
    "ui5-wcr": {
      "command": "npx",
      "args": ["@ui5/webcomponents-react-mcp@latest"]
    }
  }
}

特定のバージョンの固定

この MCP サーバーは @ui5/[email protected] 以降で利用できます。ライブラリと同じバージョン番号を使用し、その特定のリリースのドキュメントと API データをバンドルしています。プロジェクトに合わせてバージョンを固定すると、実際に使用しているコンポーネントと API に関する正確な情報を AI アシスタントが提供できます。

特定のバージョンをインストールするには、@<version> を追記します。@ui5/webcomponents-react を更新した後は、それに合わせて固定した MCP サーバーのバージョンも更新する必要があります。

npx @ui5/[email protected]

プロジェクトにインストールされている @ui5/webcomponents-react のバージョンに合わせるには、プロジェクトのルートから次を実行します。

これには、プロジェクトの node_modules に @ui5/webcomponents-react がインストールされている必要があります。

npx @ui5/webcomponents-react-mcp@$(node -p "require('@ui5/webcomponents-react/package.json').version")

トランスポート

このサーバーは 2 種類のトランスポートに対応しています。どちらも開発者のマシン上でローカルに実行されます。

stdio（デフォルト）

上記のセットアップ設定で使用します。クライアントがサーバーをサブプロセスとして起動し、stdin/stdout 経由で通信します。フラグは不要です。

HTTP（ストリーミング可能な HTTP）

HTTP 経由で接続する MCP クライアントもあります。ストリーミング可能な HTTP トランスポートを有効にするには、--http フラグを付けてサーバーを起動します。

npx @ui5/webcomponents-react-mcp@latest --http

サーバーは http://localhost:7427/mcp でリッスンします。--port（または PORT 環境変数）を使ってポートを変更できます。

npx @ui5/webcomponents-react-mcp@latest --http --port 7500

サーバーはステートレスで実行され、localhost のみにバインドされます。ローカル HTTP ポート経由で接続できますが、それ以外は stdio モードと同様に、ローカル限定でバージョンが固定されたサーバーです。HTTP ベースのクライアントをエンドポイントに接続します。

{
  "servers": {
    "ui5-wcr": {
      "url": "http://localhost:7427/mcp"
    }
  }
}

機能

ツール

1. create_app - 公式テンプレートから新しいアプリケーションをスキャフォールディングします

   • Vite（TypeScript）、Next.js App Router、Next.js Pages Router
   • degit を使用した手順ごとのセットアップ方法を返します

2. list_components - 利用可能なすべてのコンポーネントを参照します

   • カテゴリで絞り込み（データ表示、レイアウトとフロアプラン、入力、モーダルとポップオーバー、ユーザーフィードバック、チャート、AI コンポーネント、Web コンポーネント）
   • パッケージで絞り込み（@ui5/webcomponents-react、@ui5/webcomponents-react-charts、@ui5/webcomponents-ai-react）
   • 説明とインポート例が含まれます

3. get_component_api - コンポーネント API の完全なドキュメント

   • TypeScript の型、説明、デフォルト値を含む Props
   • イベント詳細のパラメーター（e.detail で利用できるフィールド）
   • Ref のメソッドと戻り値の型
   • シャドウ DOM のスタイル設定に使用する CSS ::part() セレクター
   • 複雑な Props のサブタイプに関するドキュメント（例：AnalyticalTable の列定義）
   • 複雑な動作ロジックを持つコンポーネントの上流ドキュメントへのリンク
   • 大文字と小文字を区別しないコンポーネント名の照合
   • 構造化された JSON 出力を返します

4. get_documentation - ドキュメント、ガイド、ナレッジベース

   • セクション名で参照するか、すべてのドキュメントからキーワードで検索します
   • はじめに、ナレッジベース（スタイル設定、i18n、SSR、スロット、FAQ、アクセシビリティなど）、プロジェクトテンプレート
   • バンドルされたローカルファイルからコンテンツ全体を読み込みます（ネットワーク接続は不要です）
   • 大きなドキュメントでは行範囲（startLine/endLine）を指定できます

5. get_public_utils - @ui5/webcomponents-react-base の公開ユーティリティ

   • Device API（デバイス検出、レスポンシブブレークポイント、リサイズ／向き変更ハンドラー）
   • useI18nBundle フック（国際化）
   • useViewportRange フック（レスポンシブブレークポイントの検出）
   • ThemingParameters（JavaScript の CSS 変数）

リソース

• llms.txt - 対象範囲、主要な概念、クイックリファレンスリンクを含む、LLM 向けのドキュメントインデックス

使い方

設定が完了すると、AI アシスタントはツールを利用できるようになります。次のような質問ができます。

作成：

• "UI5 Web Components for React を使って新しい Vite アプリを作成して"
• "シンプルなダッシュボードを備えた Next.js アプリをスキャフォールディングして"

ドキュメント：

• "コンポーネントのスタイルを設定するには？"
• "スロットはどのように機能しますか？"

コンポーネント：

• "利用可能なすべてのコンポーネントを一覧表示して"
• "チャートコンポーネントを表示して"
• "利用可能なレイアウトコンポーネントは？"
• "AnalyticalTable の API を表示して"
• "DynamicPage コンポーネントの使い方は？"

コントリビューション

開発環境のセットアップ、スクリプト、アーキテクチャ、ビルドパイプラインの詳細については、CONTRIBUTING.md を参照してください。