Microsoft 365 Copilot の宣言型エージェントに MCP アプリを追加する

MCP アプリは、モデル コンテキスト プロトコル (MCP) サーバーを利用した、Microsoft 365 Copilot 内で実行される対話型 UI ウィジェットです。 これらにより、宣言型エージェントはテキスト応答を超えて、Copilot チャットで豊富で実用的なエクスペリエンスを直接提供できます。 MCP アプリを宣言型エージェントに追加するには、ツールが対話型 UI を返す MCP サーバー ベースのプラグイン を追加します。 Microsoft 365 Copilot は、次のメソッドを使用して作成される UI ウィジェットをサポートしています。

• MCP アプリ - MCP サーバーが対話型ユーザー インターフェイスをホストに提供できるようにする MCP の拡張機能。
• OpenAI Apps SDK - 追加の ChatGPT 機能を備えた MCP Apps 標準に基づいて ChatGPT アプリを構築するためのツール。

MCP サーバー プラグインの例については、「Microsoft 365 Copilot on GitHub 用の MCP ベースの対話型 UI のサンプル」を参照してください。

サポートされている MCP アプリまたは OpenAI Apps SDK の機能の詳細については、「 Copilot でサポートされている MCP Apps の機能」を参照してください。

MCP アプリの前提条件

• Copilot 拡張性オプションの要件で指定されている要件
• UI ウィジェットを提供するリモート MCP サーバー、または変更して UI ウィジェットを実装できるリモート MCP サーバー
• MCP インスペクターなどの MCP サーバーの応答を表示するツール
• Visual Studio Code
• Microsoft 365 Agents Toolkit (バージョン 6.12.0 以降)

MCP アプリの MCP サーバー要件

• 認証 - Copilot は、OAuth 2.1 と Microsoft Entra シングル サインオン (SSO) をサポートしています。 開発目的で、Copilot は Agents Toolkit の [ なし ] オプションを使用して匿名認証をサポートします。 認証の詳細については、「 エージェントでの API プラグインの認証の構成」を参照してください。
• 許可される URL - MCP サーバーと ID プロバイダーの両方で、次の URL を許可する必要があります。
  • CORS 用のウィジェット ホスト URL - Copilot は、次の URL を持つ MCP サーバー固有のホストの下にウィジェット UI をレンダリングします: {hashed-mcp-domain}.widget-renderer.usercontent.microsoft.com、 {hashed-mcp-domain} は MCP サーバーのドメインの SHA-256 ハッシュです。 ウィジェット ホスト URL ジェネレーターを使用すると、MCP サーバーの URL に基づいてホスト URL を生成できます。
  • OAuth 2.1 リダイレクト URI:
    • https://teams.microsoft.com/api/platform/v1.0/oAuthRedirect for Copilot
    • https://vscode.dev/redirect Visual Studio Code で Agents Toolkit を使用してツールを取得するための
  • Microsoft Entra SSO リダイレクト URI:
    • https://teams.microsoft.com/api/platform/v1.0/oAuthConsentRedirect for Copilot
    • Visual Studio Code では現在、フェッチ ツールの SSO はサポートされていません
• UI ウィジェット - MCP Apps または OpenAI Apps SDK の要件に従って UI ウィジェットを実装します。

Copilot の MCP アプリのベスト プラクティス

ユーザー エクスペリエンス設計

UX 設計のベスト プラクティスの詳細については、「Microsoft 365 Copilot の宣言型エージェントでの MCP アプリのユーザー エクスペリエンス ガイドライン」を参照してください。

API の可用性を確認する

すべての window.openai.* API がすべてのプラットフォームまたはホストで利用できるわけではありません。 サポートされていない API は undefinedです。 常に API の可用性をチェックし、API が利用できない場合はフォールバックを提供します。

例

この単純なパターンでは、API を呼び出す前に確認することで、実行時エラーを回避します。

if (window.openai.callTool) {
  const result = await window.openai.callTool({ name: 'myTool', params: {} });
} else {
  // Handle unsupported case — show fallback UI, skip the feature, etc.
}

この例では、全画面表示モードになるボタンは、ホストが requestDisplayMode API をサポートしている場合にのみ表示されます。

function FullScreenButton() {
  // Don't render the button if the host doesn't support it
  if (!window.openai.requestDisplayMode) {
    return null;
  }

  return (
    <button onClick={() => window.openai.requestDisplayMode({ mode: 'fullscreen' })}>
      Enter Fullscreen
    </button>
  );
}

または、ウィジェットは起動時に使用するすべての API の可用性をチェックし、それに応じて機能を有効または無効にできます。

interface PlatformCapabilities {
  canCallTools: boolean;
  canChangeDisplayMode: boolean;
  canSendMessages: boolean;
}

function detectCapabilities(): PlatformCapabilities {
  return {
    canCallTools: !!window.openai.callTool,
    canChangeDisplayMode: !!window.openai.requestDisplayMode,
    canSendMessages: !!window.openai.sendMessage,
  };
}

// Use at widget startup
const capabilities = detectCapabilities();

if (!capabilities.canCallTools) {
  // Show a reduced-functionality experience
}

エージェントの作成とサイドロード

MCP サーバーからの宣言型エージェントの作成、認証の構成、サイドローディングは、サーバーが UI ウィジェットを返すかどうかに関係なく同じです。 完全なチュートリアルについては、「 MCP サーバーから宣言型エージェントのプラグインを構築する」を参照してください。

このチュートリアルを実行する際は、次の MCP アプリの考慮事項に留意してください。

• MCP サーバーは、MCP Apps または OpenAI Apps SDK の要件に従って UI ウィジェットを返す必要があります。 MCP アプリの MCP サーバー要件を参照してください。
• 既定では、エージェントは 動的ツール検出 を使用し、サーバーのツール (UI ウィジェットを返すツールを含む) を実行時に解決するため、ツールを手動で追加する必要はありません。 代わりに固定のツール セットをピン留めする場合は、UI ウィジェットを返すツールを少なくとも 1 つ含めてください。
• MCP サーバーがまだ開発中であり、認証を実装していない場合は、認証の種類として [ なし ] を選択します。 運用環境にデプロイする前に認証を追加します。

エージェントをテストする

1. ブラウザーを開き、https://m365.cloud.microsoft/chat に移動します。
2. 左側のサイドバーでエージェントを選択します。 エージェントが表示されない場合は、[ すべてのエージェント] を選択します。
3. MCP サーバーを呼び出す何かを行うようにエージェントに依頼します。
4. プロンプトが表示されたら、エージェントが MCP サーバーに接続できるようにします。
5. エージェントが UI ウィジェットをレンダリングすることを確認します。

ウィジェットが期待どおりに表示または動作しない場合は、「Microsoft 365 Copilot での MCP アプリのトラブルシューティング」を参照してください。

Copilot でサポートされている MCP アプリ機能

Microsoft 365 Copilot では、次の機能がサポートされています。

コンポーネント ブリッジ

OpenAI Apps SDK	MCP アプリに相当する	サポートの有無
window.openai.toolInput	app.ontoolinput	✅
window.openai.toolOutput	app.ontoolresult	✅
window.openai.toolResponseMetadata	app.ontoolresult → params._meta	✅
window.openai.widgetState	—	✅
window.openai.setWidgetState(state)	直接利用することはできません。 代替メカニズムを使用するには、 app.updateModelContext()	✅
window.openai.callTool(name, args)	app.callServerTool({ name, arguments })	✅
window.openai.sendFollowUpMessage({ prompt })	app.sendMessage({ ... })	✅
window.openai.uploadFile(file)	—	❌
window.openai.getFileDownloadUrl({ fileId })	—	❌
window.openai.requestDisplayMode(...)	app.requestDisplayMode({ mode })	✅ (全画面表示のみ)
window.openai.requestModal(...)	—	❌
window.openai.notifyIntrinsicHeight(...)	app.sendSizeChanged({ width, height })	✅
window.openai.openExternal({ href })	app.openLink({ url })	✅
window.openai.setOpenInAppUrl({ href })	—	✅
window.openai.theme	app.getHostContext()?.theme	✅
window.openai.displayMode	app.getHostContext()?.displayMode	✅
window.openai.maxHeight	app.getHostContext()?.viewport?.maxHeight	✅
window.openai.safeArea	app.getHostContext()?.safeAreaInsets	✅
window.openai.view	—	✅
window.openai.userAgent	app.getHostContext()?.userAgent	✅
window.openai.locale	app.getHostContext()?.locale	✅
—	app.ontoolinputpartial	❌
—	app.ontoolcancelled	❌
—	app.getHostContext()?.availableDisplayModes	❌
—	app.getHostContext()?.toolInfo	❌
—	app.onhostcontextchanged	❌
—	app.onteardown	❌
—	app.sendLog({ level, data })	❌
—	app.getHostVersion()	❌
—	app.getHostCapabilities()	✅

ツール記述子_metaフィールド

OpenAI Apps SDK	MCP アプリに相当する	サポートの有無
_meta["openai/outputTemplate"]	_meta.ui.resourceUri	✅
_meta["openai/widgetAccessible"]	_meta.ui.visibility (string[])	❌
_meta["openai/visibility"]	_meta.ui.visibility (string[])	✅
_meta["openai/toolInvocation/invoking"]	—	❌
_meta["openai/toolInvocation/invoked"]	—	❌
_meta["openai/fileParams"]	—	❌
_meta["securitySchemes"]	—	❌

ツール記述子の注釈

OpenAI Apps SDK	MCP アプリに相当する	サポートの有無
readOnlyHint	readOnlyHint	✅
destructiveHint	destructiveHint	❌
openWorldHint	openWorldHint	❌
idempotentHint	idempotentHint	❌

コンポーネント リソース _meta フィールド

OpenAI Apps SDK	MCP アプリに相当する	サポートの有無
_meta["openai/widgetDescription"]	—	❌
_meta["openai/widgetPrefersBorder"]	_meta.ui.prefersBorder	❌
_meta["openai/widgetCSP"]	_meta.ui.csp	✅
_meta["openai/widgetDomain"]	_meta.ui.domain	❌
—	_meta.ui.permissions	❌

CSP オブジェクトのプロパティ

OpenAI Apps SDK	MCP アプリに相当する	サポートの有無
connect_domains	connectDomains	✅
resource_domains	resourceDomains	✅
frame_domains	frameDomains	❌
redirect_domains	—	❌
—	baseUriDomains	❌

ホストが提供するツールの結果_metaフィールド

OpenAI Apps SDK	MCP アプリに相当する	サポートの有無
_meta["openai/widgetSessionId"]	—	❌

クライアント指定の_metaフィールド

OpenAI Apps SDK	MCP アプリに相当する	サポートの有無
_meta["openai/locale"]	_meta["openai/locale"]	✅
_meta["openai/userAgent"]	_meta["openai/userAgent"]	✅
_meta["openai/userLocation"]	_meta["openai/userLocation"]	✅
_meta["openai/subject"]	—	❌

Copilot の MCP アプリに関してよく寄せられる質問

MCP アプリとは

MCP アプリは、Microsoft 365 Copilot 内で直接レンダリングする MCP サーバーによって提供される対話型 UI ウィジェットです。 これらは宣言型エージェントをテキストのみの応答を超えて拡張し、データの視覚化、フォーム、タスク管理インターフェイスなどの豊富なエクスペリエンスを可能にします。

MCP Apps と OpenAI Apps SDK の違いは何ですか?

MCP Apps は MCP 標準のオープン拡張機能であり、MCP サーバーは互換性のある任意のホストに対話型 UI を配信できます。 OpenAI Apps SDK は MCP Apps 標準に基づいて構築され、ChatGPT 固有の機能を追加します。 Microsoft 365 Copilot は両方をサポートしていますが、すべての機能を使用できるわけではありません。 詳細については 、「Copilot でサポートされている MCP アプリ機能 」を参照してください。

開発時に認証なしで MCP アプリを使用できますか?

はい。 開発目的で匿名認証がサポートされます。 ただし、運用環境にデプロイする前に認証を追加する必要があります。 OAuth 2.1 と Microsoft Entra シングル サインオン (SSO) がサポートされている認証方法です。 詳細については、「 エージェントでの API プラグインの認証の構成」を参照してください。

関連コンテンツ

• プラグイン機能としての MCP サーバー
• MCP サーバーの構築または再利用
• プラグイン コンポーネントの統合とテスト
• プラグインのパッケージ化
• プラグインを検証する
• Microsoft 365 Copilot の宣言型エージェントでの MCP アプリのユーザー エクスペリエンス ガイドライン
• Microsoft 365 Copilot での MCP アプリのトラブルシューティング
• Microsoft 365 Copilot 用の MCP ベースの対話型 UI サンプル
• Microsoft 365 Copilot 用 MCP サーバーからプラグインをビルドする
• MCP アプリの概要
• OpenAI Apps SDK