在 Microsoft Copilot 啟用您的應用程式與自訂工具

[本主題是發行前版本文件，並可能在未來變更。]

Microsoft Copilot 中的 Power Apps 讓使用者能直接從 Copilot 與你的模型驅動應用程式互動。 當使用者與客服對話時，它可以將應用程式資料呈現為互動式介面、瀏覽紀錄的網格，或瀏覽、編輯或建立紀錄的表單，且不必離開 Copilot 的使用體驗。 此外，你還可以為應用程式的聲明式代理新增自訂 MCP 工具和互動式介面。 此功能透過 MCP 應用程式實現，MCP 應用程式 是 MCP 的擴充，使 MCP 伺服器能向主機提供互動式使用者介面。 此功能透過從你的應用程式產生 MCP 伺服器和宣告代理來運作。

先決條件

• 一款以模型為驅動的應用程式。 目前此功能僅適用於模型驅動應用程式。
• Microsoft 365 Copilot 授權。 這對部署代理的製造商和與其互動的終端使用者都是必須的。
• 在 Microsoft Teams 上傳自訂應用程式的權限。 你的 Microsoft 365 管理員可能需要啟用這個功能。 如果上傳選項看不到，請檢查你的 Teams 管理員設定。

在 Copilot 中設定 Power Apps

1. 進入 Power Apps，選擇你想要的環境，然後開啟想要的模型驅動應用程式。

2. 在左側導覽列選擇 App MCP 圖示，然後選擇 設定 MCP。 此動作會建立應用程式的 MCP 伺服器，提供 Copilot 對話的 MCP 工具。 這是一次性步驟，可能需要幾秒鐘完成。

   

3. 儲存並發佈應用程式。

4. 選擇 下載應用程式套件 以下載由應用程式 MCP 產生的宣告式代理程式。 此套件包含代理定義、內建的記錄與資料工具，以及將您應用程式的體驗部署到 Microsoft Copilot 所需的設定。

   

5. 將名稱類似 宣告式代理應用程式 name.zip 的壓縮檔案上傳至 Microsoft Teams 或 Microsoft 365 代理：

   • Teams：在 Teams 中上傳自訂應用程式以供個人使用。 更多資訊 將 你的應用程式上傳到 Teams
   • Microsoft 365 代理程式：從 Microsoft 365 管理中心發佈團隊或群組的套件。 更多資訊： 出版代理人

你現在可以從這個宣告式代理中詢問應用程式中的資料表相關問題。 內建工具可以顯示資料集查詢的 互動式網格 。

此外，智慧表單可用於在 Microsoft Copilot 情境中建立、檢視及編輯紀錄。

建立自訂工具

除了應用程式宣告代理內建的工具外，功能還可透過整合自訂工具與小工具來擴充。 可使用基於提示建構器的設計器，將自訂的 MCP 工具與互動式 UI 元件整合到應用程式的宣告代理中。 例如，在 Zava Airlines 應用程式中，可以新增自訂工具，將航班地圖和航班時間表以甘特圖的形式顯示在並排檢視表中。

1. 在應用程式 MCP 標籤中的工具區選「建立自訂工具」。

2. 提供一個清楚且具描述性的工具名稱與描述，因為 Microsoft Copilot 會利用這些資訊判斷何時呼叫該工具。

3. 新增指示以輸出預設使用 JSON 格式的工具資料。 如果工具沒有相關聯的 UX，您可以將其變更為文字。 指令可以包含對應用程式中表格特定記錄的查詢，或是作為工具鏈接時使用的輸入參數。 務必多嘗試並選擇合適的 AI 提示模型。

   

4. 選擇 測試 以檢查並驗證工具的輸出，然後選擇 「下一步」。 你現在可以建立並貼上專屬於此工具的自訂 HTML 。 這個 HTML 可以使用 /generate-mcp-apps-ui skill 或是你自己的開發工具來建立。 選取 [儲存]。

   

5. 下載更新後的應用程式套件壓縮檔，並將最新版本上傳至 Microsoft Teams 或 Microsoft 365 代理程式。

6. 透過在應用程式代理程式中發出相關查詢來呼叫該工具，即可查看自訂使用者介面的運作。

   

動態工具鏈

Power Apps 宣告式代理程式中的工具鏈，使用 Microsoft Copilot 協調器來推理使用者意圖，並動態地依序呼叫多個由 MCP 驅動的動作（工具）以完成任務。 編排器根據上下文與功能描述，選擇、參數化並執行正確的 MCP 應用程式動作組合，實現跨 Power Apps 與企業系統的端到端工作流程。 以下是如何建立帶有參數化輸入的工具。

1. 在應用程式 MCP 標籤中的工具區選「建立自訂工具」。

2. 提供一個清楚且具描述性的工具名稱與描述，因為 Microsoft Copilot 會利用這些資訊判斷何時呼叫該工具。

3. 在這個例子中，我們使用了 Sankey 圖表視覺化工具。 首先，定義產生 Sankey 圖表所需的 JSON 輸入結構。 接著，為 Sankey 圖表視覺化工具建立一個提示。 該工具會暴露一個名為 SankeyDiagramVisualizationInputData的輸入參數。 這個參數會被工具解讀，並轉換成視覺化工具預期的 JSON 結構。 請選擇一個清晰且具描述性的輸入參數名稱，使 LLM 能正確識別並呼叫工具。

   

4. 你現在可以建立並貼上專屬於此工具的 自訂 HTML 。 這個 HTML 可以使用 /generate-mcp-apps-ui skill 或是你自己的開發工具來建立。 選取 [儲存]。

5. 下載更新後的應用程式套件壓縮檔，並將最新版本上傳至 Microsoft Teams 或 Microsoft 365 代理程式。

6. Copilot 現在可以使用自然語言查詢擷取資料，並傳送給工具進行視覺化。 例如，你可以用複雜的查詢，動態地從「問題」表格資料中取得輸入，並用 Sankey Chart Visualizer 工具視覺化它們。

   

7. 您可以繼續進行交談，進一步完善 Sankey 圖表。

   

全螢幕範例

在這個例子中，只有當主機支援全螢幕模式時，展開按鈕才會被渲染。

function renderExpandButton(app) {
  const ctx = app.getHostContext();

  // Don't render the button if the host doesn't support fullscreen
  if (!ctx?.availableDisplayModes?.includes('fullscreen')) {
    return null;
  }

  const btn = document.createElement('button');
  btn.addEventListener('click', async () => {
    const result = await app.requestDisplayMode({ mode: 'fullscreen' });
    // Always use result.mode — the host may grant a different mode than requested
    console.log('Granted mode:', result.mode);
  });
  return btn;
}

同樣的防護措施適用於任何主機能力。 使用前請先檢查 getHostContext() ：

const ctx = app.getHostContext();

// Theme
if (ctx?.theme) applyTheme(ctx.theme);

// Current display mode
if (ctx?.displayMode === 'fullscreen') { /* adjust layout */ }

// Available modes
if (ctx?.availableDisplayModes?.includes('inline')) { /* show collapse option */ }

在執行時透過 onhostcontextchanged 對能力的變動做出反應—主機上下文可在 connect() 之後更新。

app.onhostcontextchanged = (ctx) => {
  if (ctx.theme) applyTheme(ctx.theme);
  if (ctx.displayMode) updateLayout(ctx.displayMode);
};

使用全螢幕模式查看工具結果

常見的模式是當小工具接收資料時會自動切換為全螢幕，讓內容有更多空間可渲染。

app.ontoolresult = async (result) => {
  const data = result.structuredContent;
  if (!data) return;

  // Expand to fullscreen when data arrives, if the host supports it
  const ctx = app.getHostContext();
  if (ctx?.availableDisplayModes?.includes('fullscreen') && currentMode !== 'fullscreen') {
    const granted = await app.requestDisplayMode({ mode: 'fullscreen' });
    currentMode = granted.mode;
    document.body.classList.toggle('mode-fullscreen', currentMode === 'fullscreen');
  }

  renderData(data);
};

你也可以讓使用者自己決定——先渲染到目前模式，然後再提供展開按鈕：

app.ontoolresult = (result) => {
  const data = result.structuredContent;
  if (!data) return;

  renderData(data);        // render in whatever mode is active
  updateExpandBtn();       // show the expand button now that there is content
};

相關文章

使用 AI 程式碼生成工具生成 MCP 應用程式小工具

程式代理人中 Power Apps 的常見問題