SAP Fiori MCPサーバーでClaudeにFiori elementsアプリを作らせる手順

Fiori elementsアプリをClaude Codeで作る・直すには、SAPが公開している@sap-ux/fiori-mcp-serverをMCPサーバーとして登録します。登録はclaude mcp addの1行です。

このサーバーは「アプリを生成する」「既存アプリのmanifest.jsonやページ構成を変える」ための道具を持っています。稼働中のSAPシステムの業務データを読むサーバーではありません。

Fiori MCPサーバーでClaudeにできること

@sap-ux/fiori-mcp-serverは、SAPのopen-ux-toolsリポジトリに含まれるMCPサーバーです。プロンプトからSAP Fioriアプリを作る・変更するためのサーバーです。依頼文の例は次のとおりです。

• CAPプロジェクトにFiori elementsのリストレポートアプリを追加する
• 画像(my_picture.png)をもとにCAPプロジェクトとFioriアプリを生成する
• ODataサービスのURLを指定して、新しいリストレポートアプリを生成する
• Fiori elementsアプリにFCL(フレキシブルカラムレイアウト)を追加する
• アプリの初期ロード(initial load)を有効にする

SAPの開発支援系MCPサーバー全体の中での位置は、Claude SAP連携ガイドで整理しています。ここではFiori elementsアプリの生成と修正に絞ります。READMEは、最良の体験のために@cap-js/mcp-serverと@ui5/mcp-serverを併用することを勧めています。

前提条件

MCPクライアントがstdioでサーバーを起動できれば動きます。サーバーはstdioトランスポートで、npx経由で起動するので、グローバルインストールは不要です。

npmレジストリのメタデータには、enginesとしてNode.js >=22.xが書かれています。Nodeが古い環境では先にバージョンを上げます。

node --version

OData URLから生成する場合には、追加の前提があります。SAPシステムへの接続を使う依頼文には、Connection Manager for SAP Systems拡張機能で保存した接続が必要です。ローカルのCAPプロジェクトに追加するだけなら、この接続は要りません。

Claude Codeへの登録手順

登録コマンドは次のとおりです。<version>は実際の番号に置き換えます。

claude mcp add fiori-mcp -- \
  npx --yes @sap-ux/fiori-mcp-server@<version> fiori-mcp

claude mcp addの--は、Claude側のオプションとサーバー起動コマンドを分ける区切りです。--以降はサーバーにそのまま渡されます。この仕様はClaude Codeの公式MCPドキュメントにあります。MCP全般の登録方法とスコープはClaude Code MCPサーバーガイドが詳しいです。

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

プロジェクトのルートに.mcp.jsonを置く方法もあります。リポジトリにコミットすれば、チーム全員が同じ設定で使えます。

{
  "mcpServers": {
    "fiori-mcp": {
      "type": "stdio",
      "timeout": 600000,
      "command": "npx",
      "args": ["--yes", "@sap-ux/fiori-mcp-server@<version>", "fiori-mcp"]
    }
  }
}

timeoutの600はClaude Codeでは効かない

READMEの設定例は"timeout": 600ですが、Claude Codeの.mcp.jsonではtimeoutの単位がミリ秒です。1000未満の値は無視され、MCP_TOOL_TIMEOUTの既定(未設定なら約28時間)に回ります。600のままコピーしても、10分の上限にはなりません。上のJSONが600000なのはこのためです。

別の上限として、stdioサーバーには応答も進捗通知も無い状態が30分続くとツール呼び出しを打ち切るアイドルタイムアウトがあります。アプリ生成が長引いてもこの範囲に収まる想定です。

もう一つ、起動待ちの上限はMCP_TIMEOUT(ミリ秒)で決まり、timeoutとは別物です。npx --yesは初回にパッケージを取得するため、回線が遅い環境では接続の確立に時間がかかることがあります。起動で失敗するならMCP_TIMEOUT=60000 claudeのように延ばして試せます。

初回は注意点があります。.mcp.jsonのサーバーは、Claude Codeで承認するまで使えません。承認前はclaude mcp listにPending approvalと表示されます。claudeを対話モードで起動して承認します。クローンしただけのリポジトリが、自分自身のサーバーを承認する仕組みにはなっていません。

公開されているツールと呼ばれる順番

ツールは9つです。役割で分けると、調べる・接続する・生成する・変更するの4群になります。

既存アプリの変更は、必ず3段階を踏みます。まずlist_functionalityで何ができるかを聞き、次にget_functionality_detailsで必要なパラメータを確認し、最後にexecute_functionalityで実行します。変更できる種類は、ページの追加と削除、コントローラー拡張の追加と変更、そしてmanifest.jsonのプロパティ変更(レイアウトの追加や初期ロードの有効化など)です。

list_functionalityはアプリの絶対パスを必要とします。パスが分からない依頼では、Claudeがまずlist_fiori_appsでディレクトリを走査する流れになります。

OData URLから生成するときの順番

OData(非CAP)の生成は、依頼文にSAPシステムの名前やサービスURLが出たところから始まります。list_sap_systemsでシステムを引き、download_odata_service_metadataでメタデータを保存してからgenerate_fiori_app_odataを呼びます。

CLAUDE.mdに入れるルール

AIモデルにこのサーバーを正しく使わせるルールは、システムプロンプトかルールファイルに追加する前提です。Claude Codeでの置き場所は、プロジェクトルートのAGENTS.mdかCLAUDE.mdです。

生成物の品質に直結するルールを抜粋すると、次のような形になります。文言は要旨なので、実際に入れるときはREADMEの原文を確認してください。

## Fiori elements アプリのルール
- Fiori elements アプリの作成・変更には Fiori MCP サーバーを使う
- 列の追加などは画面のパーソナライズでなく、プロジェクトのコードを変更する
  (先に MCP サーバーに該当機能があるか確認する)
- データモデルは主エンティティ1つと、関連エンティティへのナビゲーションで構成する
- すべてのエンティティの主キーは UUID 型にする
- CSV のサンプルデータでは、主キーと外部キーを UUID 形式にする
- プレビューには package.json の最も具体的な npm run watch-* スクリプトを使う

原文のルールには、この他にも次の考え方があります。

• 入力がテーブルデータやフォームを持つ1ページ以上のアプリとして解釈できるかをまず判断し、できなければユーザーに適切な入力を求める
• アプリは通常、ベースエンティティの表を出すリストレポートから始まり、行の詳細はオブジェクトページで見せる
• オブジェクトページは、to-many関連のテーブルセクションを持てる
• エンティティの各プロパティには適切なデータ型を付ける

サンプルデータのCSVでは、主キーも外部キーもUUID形式にそろえます(例: 550e8400-e29b-41d4-a716-446655440001)。

実際の依頼の流れ

生成と修正は、同じセッションで続けて頼めます。依頼文の例に沿った流れは次のとおりです。

1. 「CAPプロジェクトにFiori elementsのリストレポートアプリを追加して」と頼む。Claudeはgenerate_fiori_app_capを使うはずです
2. 「このアプリにFCLを追加して」と頼む。list_functionalityから3段階でmanifest.jsonなどが変更されます
3. 「初期ロードを有効にして」と続ける。これもmanifestのプロパティ変更にあたります
4. npm run watch-*のスクリプトでプレビューし、画面で確かめる

どのツールが呼ばれるかは、Claude Codeの確認画面に出ます。生成後の差分はgit diffで読めます。生成物をコミットする前に、manifest.jsonの変更が依頼内容と一致しているかを見るのが安全です。

つまずきやすい点

自己署名証明書のODataサーバーに繋ぐとき

unable to get local issuer certificateのようなエラーが出る場合、対処は2通りです。第一候補は、NODE_EXTRA_CA_CERTSにCA証明書ファイルのパスを渡す方法です。.pem・.crt・.cer・.certが使えます。

{
  "mcpServers": {
    "fiori-mcp": {
      "type": "stdio",
      "timeout": 600000,
      "command": "npx",
      "args": ["--yes", "@sap-ux/fiori-mcp-server@<version>", "fiori-mcp"],
      "env": {
        "NODE_EXTRA_CA_CERTS": "/path/to/your/certificate.crt"
      }
    }
  }
}

もう一つのNODE_TLS_REJECT_UNAUTHORIZED=0は、証明書検証をすべて止めます。READMEは「非推奨」とし、本番以外の環境に限っています。

動作が分からないときのログ

ログは既定でerrorレベルです。envにLOG_LEVELを足すと変えられます。指定できるのはoff、error、warn、info、debug、verboseの6段階で、ログは~/.fioritools/fiori-mcp-server.logに保存されます。ツールが呼ばれたのに結果がおかしいとき、debugにして確かめます。

テレメトリを止めたいとき

個人を特定しない利用情報が既定で収集されます。止める方法は2つあります。~/.fioritools/telemetrysettings.jsonでenableTelemetryをfalseにするか、環境変数SAP_UX_FIORI_TOOLS_DISABLE_TELEMETRYをtrueにします。

他のクライアントと設定を共有する

Cline、Cursor、Windsurfにも設定例があり、JSONの骨格はClaude Codeの.mcp.jsonと同じ形です。置き場所が違います。timeoutの単位はクライアントごとに仕様が違うので、値を写す前に各クライアントの説明で確かめます。

npxを使いたくない場合は、npm install -g @sap-ux/fiori-mcp-serverで入れ、commandをfiori-mcpにする構成もあります。この場合argsは不要です。

このサーバーが担当しない範囲

SAPシステムの業務データの照会や、BTPのサービス操作はこのサーバーの範囲外です。そちらの選択肢はClaude SAP連携ガイドにまとめています。ほかのMCPサーバーとの比較はおすすめMCPサーバー10選が出発点になります。

デザインからコードを起こす型の連携は、Figma MCPサーバーの使い方がFioriとは別の例になります。

まとめ

Fioriの生成・修正は、バージョンを固定して登録し、ルールをCLAUDE.mdに入れる、という2点で安定します。READMEのtimeout: 600はミリ秒指定のClaude Codeでは効かないので、上限を決めたいなら600000のように書きます。既存アプリの変更はlist_functionality、get_functionality_details、execute_functionalityの3段階に決まっています。依頼を出す前に、対象アプリの絶対パスとCAPかODataかを手元で確かめておくと、Claudeが迷いません。