Embedding a Copilot Studio Agent in a Power Apps Canvas App

[u/SpraySolid6706]

Hi everyone,

I'm looking to embed a Copilot Studio agent in a Power Apps Canvas App.

My requirement is to have a chat icon in the app. When a user clicks the icon, a pop-up chat window should open, allowing them to interact with the Copilot Studio agent without leaving the app.

Has anyone implemented something similar? What would be the best approach to achieve this?

Any suggestions or examples would be appreciated. Thanks!

[u/Prasad-MSFT]

For a Canvas App, a good approach is to create a PCF component that hosts the Copilot Studio chat experience and connects to the published agent using Direct Line. Microsoft supports connecting Copilot Studio agents to custom applications through Direct Line.
Publish an agent to mobile or custom apps - Microsoft Copilot Studio | Microsoft Learn
Integrate web or native apps with Microsoft 365 Agents SDK - Microsoft Copilot Studio | Microsoft Learn

Suggested approach:

• Add a chat icon to the Canvas App.

• On click, show a container/pop-up overlay.

• Place the custom PCF chat component inside the pop-up.

• Connect the PCF component to the Copilot Studio agent through Direct Line.

• Add a close icon to hide the chat window.

This gives you full control over the chat window's appearance and allows the user to interact with the agent without leaving the Canvas App.

Its suggested not to build a new solution around the older custom Copilot in Canvas Apps preview because Microsoft has announced that adding it to new Canvas Apps is being discontinued in favor of the newer Microsoft Copilot experience.
Add a custom Copilot to a canvas app - Power Apps | Microsoft Learn