How to Integrate Copilot Studio Agent with a Website Using API?

Hi,

We hit exactly this with a client last year, so a few thoughts.

First, and I don't want to be the bearer of bad news, but the iframe isn't really your security problem. By default anyone who knows the agent ID can talk to your agent through the Demo website and Custom website channels. If you swap the iframe for a shiny custom UI and change nothing else, the agent is still wide open. So the first thing I'd do, today, is go to Settings > Security > Web channel security and turn on "Require secured access". Give it a couple of hours to propagate. That alone fixes most of what your web team is actually worried about. Now, to your real question: yes, there's an API. It's Direct Line, and your devs can absolutely build their own front end on it.

The pattern is straightforward. Keep the Direct Line secret on your server, ideally in Key Vault. Your backend exchanges it for a short-lived token, either by posting to https://directline.botframework.com/v3/directline/tokens/generate with the secret as a bearer token, or by calling the Token Endpoint you'll find under Channels > Mobile app. You get back a token, an expiry, and a conversation ID. Only the token goes to the browser, and from there your front end talks to Direct Line over REST or WebSocket. If your compliance folks want to scrub or log anything in the middle, put the whole conversation behind your own API instead so the browser never touches Direct Line at all.

Now if we say why not the new M365 Agents SDK? It's genuinely the better client (Entra SSO, streaming, which Direct Line doesn't do for Copilot Studio agents), but right now it only supports delegated user auth. No service principal, no app-only, nothing anonymous. So for a public site with anonymous visitors it's a dead end for the moment. App-only auth is apparently on the roadmap.

Two things that will bite you if you go fully custom UI. Direct Line has no "the agent is done talking" signal, so you'll end up inventing your own flag in channelData like everyone else. And you become responsible for rendering adaptive cards, suggested actions, typing indicators, all of it. Honestly, unless your UX is something other than a chat window, I'd self-host botframework-webchat and style it. You can push it a long way with styleOptions and middleware, and you skip reimplementing the activity protocol.

Last thing, and this is more of an operational note: an anonymous agent on a public site is a cost surface as much as a security one. Rate-limit your token endpoint, lock down the origins, keep sensitive knowledge sources and connectors out of that agent entirely, and set up alerting on Copilot Credit consumption before you go live rather than after.

The docs you want are "Configure web and Direct Line channel security", "Publish an agent to mobile or custom apps", and "Customize your chat canvas".

Happy to share the token endpoint code if that helps.