SAP UI5 MCPサーバーをClaude Codeに登録しUI5アプリを書かせる

UI5のMCPサーバー(@ui5/mcp-server)は、プロジェクトの雛形作成、API参照、lint、manifest検証をClaude Codeから呼べるようにする仕組みです。登録は1行のコマンドで済み、あとはCLAUDE.mdに規約を1節足せば使い始められます。

SAP全体の連携先をどう選ぶかはClaude SAP連携ガイドにまとめています。ここではUI5に絞ります。

UI5 MCPサーバーはClaude Codeに何を渡すか

UI5 MCPサーバーは、エージェント型AIツールでUI5を開発するときの体験を良くするためのサーバーです。READMEは主な機能を3つ挙げています。UI5プロジェクトの新規作成の補助、UI5固有のエラーの検出と修正の支援、UI5固有の情報の提供です。

ツールは10個あります。README記載の説明を、作業の段階ごとに並べ直すと次のとおりです。

run_ui5_linterが使うのは、UI5公式の静的解析ツール@ui5/linterです。生成したコードの確認を、モデルの自己申告ではなくlinterの出力で行えるのが、このサーバーを入れる主な理由になります。

Claude Codeに登録する

必要なのは、Node.js v20.17.0以上(v22系ならv22.9.0以上)とnpm v8.0.0以上です。MCPクライアントにClaude Codeが明記されています。

登録コマンドはREADMEにそのまま載っています。

claude mcp add --transport stdio --scope user \
  ui5-mcp-server -- npx -y @ui5/mcp-server

--より前がClaude Codeのオプション、後ろがサーバーを起動するコマンドです。--scope userを付けると~/.claude.jsonに保存され、どのプロジェクトでも使えます。省略するとlocalスコープになり、登録したプロジェクトの中でだけ有効です。UI5案件が1つに決まっているなら省略したほうが、他のプロジェクトのツール一覧を汚しません。

登録できたかは次のコマンドで確かめます。

claude mcp get ui5-mcp-server

claude mcp listなら全サーバーの状態を一覧でき、各サーバーの横に✔ Connectedか✘ Failed to connectが出ます。セッション内では/mcpでも確認でき、✔ Connectedと出ていれば準備完了です。

チームで共有するなら.mcp.json

リポジトリにコミットして全員で使うなら、プロジェクトスコープ(--scope project)にするか、プロジェクト直下の.mcp.jsonに書きます。READMEの標準設定をそのまま使った形は次のとおりです。

{
  "mcpServers": {
    "@ui5/mcp-server": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@ui5/mcp-server"]
    }
  }
}

.mcp.jsonのサーバーは、初回に承認が求められます。承認前はclaude mcp listにPending approvalと表示されます。

Windowsでの注意

ネイティブWindows(WSLではない環境)では、npxの前にcmd /cが必要になる場合があるとREADMEにあります。その場合の.mcp.jsonは次の形です。

{
  "mcpServers": {
    "@ui5/mcp-server": {
      "type": "stdio",
      "command": "cmd",
      "args": ["/c", "npx -y @ui5/mcp-server"]
    }
  }
}

CLAUDE.mdにUI5の規約を足す

サーバーを登録しただけでは、モデルがget_guidelinesを呼ぶとは限りません。READMEは、LLMにUI5 MCPサーバーを正しく使わせるルールをAGENTS.mdに足すよう案内していて、Claude Codeの場合はCLAUDE.mdに書くと明記しています。

READMEが示す規約は、次の1節だけです。

## Guidelines for UI5
 
Use the `get_guidelines` tool of the UI5 MCP server to retrieve
the latest coding standards and best practices for UI5 development.

UI5 MCPサーバー側がベストプラクティスを持っているので、CLAUDE.mdには規約の中身を書き写さず、「get_guidelinesで取得する」とだけ指示する設計です。サーバーが更新されれば規約も追随します。

これに、プロジェクトで毎回守らせたい手順を足す例を挙げます。READMEの規約ではなく、運用上の追加案です。

## UI5の変更を終える前に
 
- 変更したUI5コードには `run_ui5_linter` を実行し、報告が残っていれば直す
- `manifest.json` を触った場合は `run_manifest_validation` も実行する
- 未知のコントロールやメソッドは、推測せず `get_api_reference` で確認する

最後の1行は、記憶に頼ったAPI呼び出しを避けさせるための指示です。参照先を指定しておけば、書いたあとの検証もlinterに寄せられます。

環境変数で挙動を調整する

UI5 MCPサーバーはコマンドライン引数を受け付けず、設定はすべて環境変数で行います。

社内ミラーのCDNを使う、ODataのサンプルサービス以外へ接続させる、といった場面で効くのは最初と4つ目です。Claude Codeでは--envで渡します。

claude mcp add --transport stdio --scope user \
  --env UI5_MCP_SERVER_ALLOWED_DOMAINS=localhost,.example.com \
  ui5-mcp-server -- npx -y @ui5/mcp-server

ドメインの書き方には2つの決まりがあります。ワイルドカードのサブドメインはドメインの前にドットを付けます(.example.comはwww.example.comに一致しますが、example.com自体には一致しません)。空文字列にするとすべてのドメインを許可します。許可範囲を広げる設定なので、空文字列にするのは接続先を把握できる環境に限るのが安全です。

CDNを上書きすると、OpenUI5とSAPUI5の両方にそのURLが使われます。実行時には、プロジェクトのUI5バージョンがURLに自動で付け加えられます。

作業の流れの例

実際の依頼は、検証までを1回の指示に含めると安定します。次はプロンプトの一例です(READMEにある文面ではなく、ツール構成から組んだ例です)。

UI5のプロジェクト情報を確認して、既存のListReportに
ステータス列を追加して。UI5のガイドラインに従い、
終わったらlinterとmanifest検証を回して結果を報告して。

この指示なら、ツールは概ね次の順で呼ばれる想定です。get_project_infoでバージョンと設定を読み、get_guidelinesで方針を取り、get_api_referenceで使うコントロールを確認し、コードを書いたあとにrun_ui5_linterとrun_manifest_validationを呼びます。ただし呼び出しの順序は保証されません。想定どおりに呼ばれたかは、Claude Codeの出力に出るツール名で確認できます。

JavaScriptで書かれた既存のUI5アプリをTypeScriptに移す場合は、get_typescript_conversion_guidelinesが専用の入口になります。変換指針をサーバーから取ってから着手するよう、プロンプトに書いておくとよいでしょう。

許可プロンプトを減らす

読み取り系のツールは毎回確認が出ると手間です。Claude Codeでは、MCPツールをmcp__<サーバー名>__<ツール名>の形で権限ルールに書きます。サーバー名は登録時のui5-mcp-serverです。.claude/settings.jsonの例は次のとおりです。

{
  "permissions": {
    "allow": [
      "mcp__ui5-mcp-server__get_guidelines",
      "mcp__ui5-mcp-server__get_api_reference",
      "mcp__ui5-mcp-server__get_project_info"
    ]
  }
}

雛形を作るツールやlinterは、ファイルを書いたりコマンドを走らせたりする可能性があるため、許可リストに入れず都度確認にしておく運用が無難です。

つまずきやすい点

ツールが使えないときは、次の順で切り分けると原因に早く当たります。

接続できてからの落とし穴は2つあります。

他のSAP向けMCPサーバーとの違い

SAPには、作業領域ごとに別のMCPサーバーがあります。UI5 MCPサーバーの守備範囲は、UI5のフロントエンド開発(アプリ、コントロール、manifest、Integration Cards)です。バックエンドのCAPサービスや、モバイルアプリ、Web Componentsは別のサーバーが受け持ちます。

UI5 Web Componentsは、READMEによるとReact、Angular、素のJavaScriptから使うコンポーネント群のサーバーです。@ui5/mcp-serverが扱うUI5アプリとは別物なので、両方を触る案件では両方を登録します。Claude Codeへの登録コマンドもREADMEにあり、サーバー名はui5-webc-mcp-serverです。

claude mcp add --transport stdio --scope user \
  ui5-webc-mcp-server -- npx -y @ui5/webcomponents-mcp-server

2つのUI5系サーバーはどちらもget_guidelinesというツールを持ちます。Claude Codeではサーバー名がmcp__<サーバー名>__<ツール名>の形で付くので衝突はしません。ただしCLAUDE.mdに規約を書くときは、「UI5 MCPサーバーのget_guidelines」のようにどちらのサーバーかを書いておくと、取り違えを防げます。権限ルールもmcp__ui5-mcp-server__get_guidelinesとmcp__ui5-webc-mcp-server__get_guidelinesで別々に書きます。

CAP向けはREADMEに、claude mcp add --scope user cds-mcp -- npx -y @cap-js/mcp-serverの形が載っています。MDK向けはNode.js 24.11.1を前提にグローバルインストールする手順で、READMEではIntel Macが対象外(v0.4.0以降)と注記されています。UI5案件でも、CAPバックエンドと組む構成ならCAP向けを足す、という使い分けになります。

同じ名前のサーバーを複数のスコープに登録すると、claude mcp listと/mcpに競合の警告が出ます。接続に使われるのはlocal、project、userの順で優先度の高い1つで、フィールドは合成されません。--scope userで入れたものを.mcp.jsonでも定義したときは、project側の定義が使われます。

フレームワーク専用のMCPサーバーをClaude Codeに足す、という形は他にもあります。開発サーバーの状態を読ませる例はNext.js MCPサーバーのClaude Code設定ガイドが参考になります。同じclaude mcp addでも、UI5はnpxでローカル起動するstdioサーバーで、登録に--env以外の引数は要りません。

まとめ

UI5 MCPサーバーの導入は、登録コマンド1行とCLAUDE.mdの規約1節で完了します。効果を左右するのは、CLAUDE.mdに「完了前にlinterとmanifest検証を実行する」と書いておくかどうかです。環境変数は、社内CDNや社内ODataを使う場合にだけ触れば足ります。