Habilitación de la aplicación y las herramientas personalizadas en Microsoft 365 Copilot

[Este tema es documentación preliminar y está sujeto a modificaciones.]

Power Apps en Microsoft 365 Copilot permite a los usuarios interactuar con la aplicación controlada por modelos directamente desde Copilot. Cuando un usuario se comunica con el agente, puede exponer los datos de la aplicación como interfaz de usuario interactiva, una cuadrícula para examinar registros o un formulario para ver, editar o crearlos, todo sin salir de la experiencia de Copilot. Además, puede agregar herramientas de MCP personalizadas e interfaz de usuario interactiva al agente declarativo de la aplicación. Esta funcionalidad se logra a través de aplicaciones MCP , que es una extensión de MCP que permite a los servidores MCP entregar interfaces de usuario interactivas a los hosts. La característica funciona mediante la generación de un servidor MCP y un agente declarativo desde la aplicación.

Prerequisites

• Una aplicación controlada por modelos. Actualmente, esta característica solo está disponible con aplicaciones controladas por modelos.
• licencia de Microsoft 365 Copilot. Necesario para que el creador implemente el agente y los usuarios finales interactúen con él.
• Permiso para cargar aplicaciones personalizadas en Microsoft Teams. Es posible que el administrador de Microsoft 365 tenga que habilitarlo. Compruebe la configuración del administrador de Teams si la opción de carga no está visible.

Configura Power Apps en Copilot

1. Vaya a Power Apps, seleccione el entorno que desee y, a continuación, abra la aplicación controlada por modelos deseada.

2. Seleccione el icono App MCP en la barra de navegación izquierda y, a continuación, seleccione Configurar MCP. Esta acción configura el servidor MCP para la aplicación, que proporciona herramientas de MCP para las conversaciones de Copilot. Este es un paso único y puede tardar unos segundos en completarse.

   

3. Guarde y Publique la aplicación.

4. Seleccione Descargar paquete de aplicación para descargar el agente declarativo generado por el MCP de la aplicación. Este paquete contiene la definición del agente, herramientas integradas para el registro y los datos, junto con la configuración necesaria para implementar la experiencia de la aplicación en Copilot de Microsoft 365.

   

5. Suba el archivo comprimido que se llama de manera similar a declarative-agent-app name.zip a los agentes de Microsoft Teams o de Microsoft 365:

   • Teams: suba para uso personal como una aplicación personalizada en Teams. Más información Sobre cómo cargar la aplicación en Teams
   • Agentes de Microsoft 365: publique el paquete para un equipo o grupo desde el Centro de administración de Microsoft 365. Más información: Publicar agentes

Ahora puede hacer preguntas sobre las tablas de la aplicación mediante este agente declarativo. Las herramientas integradas pueden mostrar una cuadrícula interactiva para las consultas del conjunto de datos.

Además, los formularios inteligentes se pueden usar para crear, ver y editar registros dentro del contexto de Microsoft 365 Copilot.

Creación de herramientas personalizadas

Además de las herramientas integradas disponibles en el agente declarativo de la aplicación, su funcionalidad se puede ampliar incorporando herramientas y widgets personalizados. Se puede usar un diseñador basado en el generador de mensajes para integrar herramientas de MCP personalizadas y componentes de interfaz de usuario interactivos en el agente declarativo de la aplicación. Por ejemplo, en la aplicación Zava Airlines, se puede agregar una herramienta personalizada para mostrar el mapa de vuelo junto con el cronograma de vuelo como un diagrama de Gantt en una vista lado a lado.

1. Seleccione Crear herramienta personalizada en la sección Herramientas de la pestaña MCP de la aplicación .

2. Proporcione un nombre y una descripción claros y descriptivos para la herramienta, ya que Microsoft 365 Copilot usa esta información para determinar cuándo invocarla.

3. Agregue las instrucciones para generar datos para la herramienta que tiene como valor predeterminado el formato JSON. Puede cambiarlo a texto si la herramienta no tiene experiencia de usuario asociada con ella. Las instrucciones pueden incluir consultas para registros específicos de la tabla en la aplicación, o podría ser un parámetro de entrada para la herramienta que se va a usar en el encadenamiento de herramientas. Asegúrese de experimentar y elegir el modelo de IA de aviso correcto.

   

4. Seleccione Probar para comprobar y validar la salida de la herramienta y, a continuación, seleccione Siguiente. Ahora puede crear y pegar HTML personalizado opcional específico para esta herramienta. Este HTML se puede crear usando /generate-mcp-apps-ui skill o su propia herramienta de desarrollo. Haga clic en Guardar.

   

5. Descargue el archivo zip del paquete de aplicación actualizado y cargue la versión más reciente en microsoft Teams o agentes de Microsoft 365.

6. Invoque la herramienta emitiendo la consulta pertinente en el agente de la aplicación para ver la interfaz de usuario personalizada en acción.

   

Encadenamiento dinámico de herramientas

El encadenamiento de herramientas en agentes declarativos de Power Apps usa el orquestador copilot de Microsoft 365 para razonar sobre la intención del usuario e invocar dinámicamente varias acciones (herramientas) con tecnología MCP en secuencia para completar una tarea. El orquestador selecciona, parametriza y ejecuta la combinación correcta de acciones de aplicación MCP basadas en descripciones de contexto y función, lo que permite flujos de trabajo integrales en Power Apps y sistemas empresariales. Aquí se muestra cómo crear una herramienta con entrada parametrizada.

1. Seleccione Crear herramienta personalizada en la sección Herramientas de la pestaña MCP de la aplicación .

2. Proporcione un nombre y una descripción claros y descriptivos para la herramienta, ya que Microsoft 365 Copilot usa esta información para determinar cuándo invocarla.

3. En este ejemplo, se usa un visualizador de gráficos Sankey. En primer lugar, defina el esquema de entrada JSON necesario para generar un gráfico sankey. A continuación, cree una solicitud para la herramienta de visualizador de gráficos Sankey. La herramienta expone un parámetro de entrada denominado SankeyDiagramVisualizationInputData. La herramienta interpreta este parámetro y se transforma en la estructura JSON esperada por el visualizador. Elija un nombre de parámetro de entrada claro y descriptivo para que LLM pueda identificar e invocar correctamente la herramienta.

   

4. Ahora puede crear y pegar HTML personalizado específico para esta herramienta. Este HTML se puede crear usando /generate-mcp-apps-ui skill o su propia herramienta de desarrollo. Haga clic en Guardar.

5. Descargue el archivo zip del paquete de aplicación actualizado y cargue la versión más reciente en Microsoft Teams o agentes de Microsoft 365.

6. Copilot ahora puede usar consultas de lenguaje natural para capturar los datos y pasarlos a la herramienta para su visualización. Por ejemplo, puede usar una consulta compleja para obtener entradas dinámicamente de los datos de la tabla "issues" y visualizarlos mediante la herramienta Sankey Chart Visualizer.

   

7. Para refinar aún más el gráfico de Sankey, continúe con la conversación.

   

Ejemplo de pantalla completa

En este ejemplo, se representa un botón de expansión solo si el host admite el modo de pantalla completa.

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

La misma protección se aplica a cualquier funcionalidad de host. Compruebe getHostContext() antes de su uso:

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

Reacción a los cambios de capacidad en tiempo de ejecución mediante onhostcontextchanged: el contexto del host puede actualizarse después de connect().

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

Uso del modo de pantalla completa con los resultados de la herramienta

Un patrón común es cambiar a pantalla completa automáticamente cuando el widget recibe datos, lo que proporciona más espacio para representar el contenido.

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

También puede permitir que el usuario decida: represente primero en el modo actual y, a continuación, ofrezca el botón expandir:

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

Artículos relacionados

Generación de widgets de aplicación MCP con herramientas de generación de código de IA

Preguntas más frecuentes sobre Power Apps en agentes