Aktivera din app och anpassade verktyg i Microsoft 365 Copilot

[Det här avsnittet utgör förhandsdokumentation och kan komma att ändras.]

Med Power Apps i Microsoft 365 Copilot kan användarna interagera med din modelldrivna app direkt från Copilot. När en användare pratar med agenten kan den visa appens data som interaktivt användargränssnitt, ett rutnät för att bläddra bland poster eller ett formulär för att visa, redigera eller skapa dem, allt utan att lämna Copilot-upplevelsen. Dessutom kan du lägga till anpassade MCP-verktyg och interaktivt användargränssnitt i appens deklarativa agent. Den här funktionen uppnås via MCP-appar som är ett tillägg till MCP som gör det möjligt för MCP-servrar att leverera interaktiva användargränssnitt till värdar. Funktionen fungerar genom att generera en MCP-server och deklarativ agent från din app.

Förutsättningar

• En modellbaserad app. För närvarande är den här funktionen endast tillgänglig med modelldrivna appar.
• Microsoft 365 Copilot-licens. Krävs för att både tillverkaren ska distribuera agenten och slutanvändarna som interagerar med den.
• Behörighet att ladda upp anpassade appar i Microsoft Teams. Din Microsoft 365-administratör kan behöva aktivera detta. Kontrollera inställningarna för Teams-administratören om uppladdningsalternativet inte visas.

Konfigurera Power Apps i Copilot

1. Gå till Power Apps, välj önskad miljö och öppna sedan önskad modelldriven app.

2. Välj app-MCP-ikonen i det vänstra navigeringsfältet och välj sedan Konfigurera MCP. Den här åtgärden konfigurerar MCP-servern för appen, som tillhandahåller MCP-verktyg för Copilot-konversationer. Det här är ett engångssteg och kan ta några sekunder att slutföra.

   

3. Spara och publicera appen.

4. Välj Ladda ned apppaket för att ladda ned deklarativ agent som genereras av appens MCP. Det här paketet innehåller agentdefinitionen, inbyggda verktyg för inspelning och data tillsammans med den konfiguration som krävs för att distribuera din apps användarupplevelse till Microsoft 365 Copilot.

   

5. Ladda upp den komprimerade filen med namnet som liknar deklarativ-agent-app name.zip till Microsoft Teams eller Microsoft 365-agenter:

   • Teams: Ladda upp för personligt bruk som en anpassad app i Teams. Mer information Ladda upp din app i Teams
   • Microsoft 365-agenter: Publicera paketet för ett team eller en grupp från administrationscentret för Microsoft 365. Mer information: Publicera agenter

Nu kan du ställa frågor om tabellerna i appen från den här deklarativa agenten. Inbyggda verktyg kan visa ett interaktivt rutnät för datamängdsfrågorna.

Dessutom kan intelligenta formulär användas för att skapa, visa och redigera poster i Microsoft 365 Copilot-kontexten.

Skapa anpassade verktyg

Förutom de inbyggda verktyg som är tillgängliga i appens deklarativa agent kan dess funktioner utökas genom att använda anpassade verktyg och widgetar. En prompt builder-baserad designer kan användas för att integrera anpassade MCP-verktyg och interaktiva gränssnittskomponenter i appens deklarativa agent. I appen Zava Airlines kan du till exempel lägga till ett anpassat verktyg för att visa flygkartan tillsammans med flygtidslinjen som ett Gantt-schema i en sida vid sida-vy.

1. Välj Skapa anpassat verktyg under avsnittet Verktyg på fliken App MCP .

2. Ange ett tydligt, beskrivande namn och en beskrivning för verktyget, eftersom Microsoft 365 Copilot använder den här informationen för att avgöra när den ska anropas.

3. Lägg till instruktionerna för att mata ut data för verktyget som standard i JSON-format. Du kan ändra den till text om verktyget inte har UX associerat med det. Instruktioner kan innehålla frågor för specifika poster i tabellen i appen eller så kan det vara en indataparameter till verktyget som ska användas i verktygslänkning. Se till att experimentera och välja rätt AI-modell för prompt.

   

4. Välj Testa för att kontrollera och verifiera verktygets utdata och välj sedan Nästa. Nu kan du skapa och klistra in valfri anpassad HTML som är specifik för det här verktyget. Den här HTML-koden kan skapas med hjälp av /generate-mcp-apps-ui skill eller med ditt eget utvecklingsverktyg. Välj Spara.

   

5. Ladda ned det uppdaterade apppaketet zip och ladda upp den senaste versionen till Microsoft Teams eller Microsoft 365-agenter.

6. Anropa verktyget genom att utfärda relevant fråga i appagenten för att se det anpassade användargränssnittet i praktiken.

   

Dynamisk verktygslänkning

Verktygskedjning i deklarativa agenter i Power Apps använder Microsoft 365 Copilot-orkestratorn för att kunna dra slutsatser om användarens avsikt och dynamiskt anropa flera MCP-baserade åtgärder (verktyg) i sekvens för att slutföra en uppgift. Orchestrator väljer, parameteriserar och kör rätt kombination av MCP-appåtgärder baserat på kontext- och funktionsbeskrivningar, vilket möjliggör arbetsflöden från slutpunkt till slutpunkt i Power Apps och företagssystem. Så här skapar du ett verktyg med parametriserade indata.

1. Välj Skapa anpassat verktyg under avsnittet Verktyg på fliken App MCP .

2. Ange ett tydligt, beskrivande namn och en beskrivning för verktyget, eftersom Microsoft 365 Copilot använder den här informationen för att avgöra när den ska anropas.

3. I det här exemplet använder vi en Sankey-diagramvisualiserare. Definiera först det JSON-indataschema som krävs för att generera ett Sankey-diagram. Skapa sedan en fråga för visualiseringsverktyget för Sankey-diagram. Verktyget exponerar en indataparameter med namnet SankeyDiagramVisualizationInputData. Den här parametern tolkas av verktyget och omvandlas till den JSON-struktur som förväntas av visualiseraren. Välj ett tydligt och beskrivande indataparameternamn så att LLM kan identifiera och anropa verktyget korrekt.

   

4. Nu kan du skapa och klistra in anpassad HTML som är specifik för det här verktyget. Den här HTML-koden kan skapas med hjälp av /generate-mcp-apps-ui skill eller med ditt eget utvecklingsverktyg. Välj Spara.

5. Ladda ned det uppdaterade apppaketet zip och ladda upp den senaste versionen till Microsoft Teams eller Microsoft 365-agenter.

6. Copilot kan nu använda frågor på naturligt språk för att hämta data och skicka dem till visualiseringsverktyget. Du kan till exempel använda en komplex fråga för att dynamiskt hämta indata från tabelldata för "problem" och visualisera dem med hjälp av verktyget Sankey Chart Visualizer.

   

7. Du kan förfina Sankey-diagrammet ytterligare genom att fortsätta konversationen.

   

Helskärmsexempel

I detta exempel visas knappen Visa endast om värden stöder fullskärmsläge.

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;
}

Samma skydd gäller för alla värdfunktioner. Kontrollera getHostContext() före användning:

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 */ }

Reagera på funktionsändringar vid körning via onhostcontextchanged – värdkontexten kan uppdateras efter connect():

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

Använda fullskärmsläge med verktygsresultat

Ett vanligt mönster är att växla till fullskärmsläge automatiskt när widgeten tar emot data, vilket ger innehållet mer utrymme att återge.

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);
};

Du kan också låta användaren bestämma – rendera i det aktuella läget först och sedan erbjuda knappen expandera:

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
};

Relaterade artiklar

Generera MCP-appwidgetar med AI-kodgenereringsverktyg

Vanliga frågor och svar om Power Apps i agenter