Build a Custom UI for a Copilot Studio Agent using the Microsoft 365 Agents SDK

Copilot Studio gives you a great “out-of-the-box” chat experience in Teams and Microsoft 365 Copilot. But sometimes you need your own UI: your branding, your layout, your telemetry, and your app’s context. So in this post, let’s wire a Copilot Studio agent into a .NET console “custom UI” using the Microsoft 365 Agents SDK client library. This will help you get started when you want to surface Copilot Studio Agents in your own custom UIs.

Scope note: This is for calling a Copilot Studio agent from your own app UI (not the iframe embed).

On a high level, we’ll:

• Publish a Copilot Studio agent and copy its Microsoft 365 Agents SDK connection string.

• Create an Entra app registration with the CopilotStudio.Copilots.Invoke delegated permission.

• Use MSAL to sign in a user and get a token for the Power Platform API audience.

• Call the agent from a lightweight console “chat UI” using Microsoft.Agents.CopilotStudio.Client.

Prereqs

• A published Copilot Studio agent (and access to its settings).

• .NET SDK installed (any modern LTS is fine).

• Entra ID permission to create an app registration

1) Publish Your Agent And Copy The Agents SDK Connection String

In Copilot Studio:

• Open your agent

• Go to Channels → Web app (or Native app)

• Under Microsoft 365 Agents SDK, copy the connection string.

Note: If your agent uses “Authenticate with Microsoft” or “Authenticate manually”, you’ll see the connection string option (and not the iframe embed code). 

2) Create An Entra App Registration For User Interactive Sign-In

In Azure portal:

• Microsoft Entra ID → App registrations → New registration

• Platform: Public client/native (mobile & desktop)

• Redirect URI: http://localhost (HTTP, not HTTPS)

Then add the delegated permission:

• API permissions → Add a permission

• APIs my organization uses → search Power Platform API

• Delegated permissions → CopilotStudio → CopilotStudio.Copilots.Invoke

3) Create The “Custom UI” (A Console Chat)

This is the bare minimum idea:

• sign in the user (MSAL)

• get a token scoped to the Power Platform API audience (the SDK computes this for you)

• start a conversation

• send messages and stream responses back as activities 

Change these values:

• directConnectUrl = copied from Copilot Studio channel page (Microsoft 365 Agents SDK section).

• tenantId, clientId = from your Entra app registration.

Minimal Working Example

Create and run:

Troubleshooting

• 401/403: confirm delegated permission CopilotStudio.Copilots.Invoke is granted (and admin consent if your tenant requires it). 

• Redirect URI mismatch: make sure the app registration has http://localhost for public client. (The sample uses localhost.) 

• No response text: Copilot Studio responses arrive as a stream of activities—log the full activity payload if you suspect you’re filtering out the wrong activity types.

• Power Platform API missing in permissions picker: follow the sample guidance and tenant configuration notes in the repo.

Notes

• The console app is a clean “backend harness” you can keep as-is, then wrap with an HTTP API for your React front-end to call.

• If you need quick embed-only experiences, the iframe approach is simpler, but it’s not the same as a true custom UI.

Wrapping up

This pattern keeps your agent authored in Copilot Studio, while your product team owns the end-user experience in a custom UI. The key pieces are: connection info from Copilot Studio, Entra delegated permission, MSAL sign-in, then stream activities through the SDK client.

Hope this helps!

Getting started: Declarative Agents with TypeSpec for Microsoft 365 Copilot

Declarative agents let you add focused skills to Microsoft 365 Copilot without spinning up servers or long-running code. Compared to Copilot Studio agents (full or Lite), which are great for UI-first orchestration and built-in connectors, declarative agents are repo-friendly, schema-driven artifacts you version, review, and ship like code. 

You describe instructions and capabilities in TypeSpec and the M365 Agents toolkit compiles that into a manifest and handles provisioning.

So in this post, we’ll use the TypeSpec starter in the Microsoft 365 Agents Toolkit and light up a couple of built-in capabilities.

On a high level, we’ll:

• Install the Microsoft 365 Agents Toolkit and TypeSpec bits. 

• Scaffold a Declarative Agent (TypeSpec) project in VS Code. 

• Add capabilities (OneDrive/SharePoint search + People + Code Interpreter). 

• Provision and test the agent from the toolkit.

Prereqs

• Microsoft 365 tenant (Developer or test tenant recommended) and permission to create app registrations.

• Visual Studio Code with Microsoft 365 Agents Toolkit extension. 

• TypeSpec for Microsoft 365 Copilot (installed automatically by the toolkit starter). 

1) Create a TypeSpec Declarative Agent

1. Open VS Code.

2. From the sidebar, open Microsoft 365 Agents Toolkit → Create a New Agent/App → Declarative Agent → Start with TypeSpec for Microsoft 365 Copilot.

3. Name it (e.g., ContosoFinder) and choose the default folder.

4. In the Lifecycle pane, select Provision to create the Azure AD app and resources in your tenant.

2) Understand the project

The starter includes:

• main.tsp (your agent definition)

• Build scripts that compile TypeSpec → agent manifest JSON

• Toolkit tasks for Provision, Deploy, Publish 

3) Add core capabilities in TypeSpec

Open main.tsp and define instructions plus capabilities. Here’s a compact example that enables OneDrive/SharePoint, People, and CodeInterpreter for simple Python math/CSV ops:

Change these values: title, instructions text, conversation starters, search resultLimit, and Code Interpreter timeout as needed. Capability names/params align with the built-in catalog.

4) Build & validate

• In the Agents Toolkit Lifecycle pane: select Provision which will start the build, validate and deploy process.

5) Test in Microsoft 365 Copilot (tenant)

• Once the Provisioning succeeds

• Try prompts like:

  • “Find my last 5 QBR files” → You should see a list of SharePoint/OneDrive files with links.

  • “Who are my peers?” → The agent returns people details from the Graph.

  • “Summarize this CSV and plot top 3 values” → Code Interpreter runs Python and returns a brief summary + chart image. 

Notes

• Prefer built-in capabilities (Search, People, OneDrive/SharePoint, Teams Messages, WebSearch, Code Interpreter) before adding custom APIs. They’re simpler and tenant-aware.

• When you need external systems, add an API plugin to your declarative agent via TypeSpec; plugins are actions inside declarative agents (not standalone in Copilot).

• Great learning paths: the “Build your first declarative agent using TypeSpec” module and recent open labs/samples. 

Wrapping up

With TypeSpec, declarative agents become a clean, versionable artifact you can build, validate, and ship from VS Code. Start with built-in capabilities, keep instructions focused, and only plug external APIs when the scenario demands it. 

Hope this helps!

Building an Agent for Microsoft 365 Copilot Chat

Microsoft 365 Copilot Chat is a powerful, general-purpose assistant that greatly improves personal productivity, helping users manage tasks like emails, calendars, document searches, and more.

However, the true potential of M365 Copilot lies in its extensibility. By building specialized "vertical" agents on top of M365 Copilot, you can unlock team productivity as well as automate business processes. These custom agents not only help in individual productivity, but also help in building workflows across groups of people.

Agents for Microsoft 365 Copilot leverage the same robust foundation—its orchestrator, foundation models, and trusted AI services—that powers M365 Copilot itself. This ensures consistency, reliability, and security at scale.

So in this post, let's take a look at how to build Agents on top of Microsoft 365 Copilot. 

We will be building a Declarative Agent with the help of the Teams toolkit. Before we start, we need the following prerequisites:

A Microsoft 365 Copilot license

Teams Toolkit Visual Studio Code extension

Enable side loading of Teams apps

Once everything is in place, we will go to Visual Studio Code 

In the Teams Toolkit extension, To create an agent, we will click on "Create new app"

Then, click on "Agent"

When the agent is created, we see a bunch of files getting created as part of the scaffolding.  So let's take a look the difference moving pieces of the agent:

manifest.json

If you have been doing M365 Apps (and Teams apps) for a while, you are familiar with this file. This is the file which represents our Agent in the M365 App catalog. It contains the various details like name, description and capabilities of the app.

However, you will notice the new property in this file which is "copilotAgents" This property will be pointing to a file containing the description of our new declarative agent. So let's look at how that file looks next:

declarativeAgent.json

Lots of interesting things are happening here. 

 

First the "instructions" property is pointing to a file which will contain the "System prompt" of our agent. We will have a look at this file later. 

Next, the "conversation_starters" property contains ready to go prompts which the user can ask the agent. Our agent will be trained to respond to these prompts. This is so that the user is properly onboarded when they land on our agent.

Finally there will be the actions and capabilities properties: 

Actions property contains connections to external APIs which the agent can invoke.

Capabilities property contains the different out of the box "Tools" which we want to allow in our agent. E.g. SharePoint and OneDrive search, image creation, code interpreter to generate charts etc 

We will talk about both these properties in more details in subsequent blog posts.

instruction.txt

And finally we have the instructions file where we can specify the system prompt for the agent. Here, we can guide the agent and assign it personality. We can make it aware of the tools and capabilities it has available and when the use them. We can provide one shot or few shot examples to "train" the agent on responding to users.

Once all files are in place, you can click "Provision" from the Teams toolkit extension:

Then navigate to https://www.microsoft365.com/chat

And our new agent will be ready!

Here is how the agent will provide the conversation starters when we first lang on it:

Simple conversation using Web search capability:

Conversation using Web search and Code Interpreter capabilities:

Hope this was helpful! We will explore M365 Copilot Agents more in subsequent blog posts.