This is a single page application created by Stephen Zeng with Angular standalone components. There is already the highly-customizable web-based client Bot Framework Web Chat component. However, this project aims to demostrate how to connect to a Copilot Studio agent with user authentication only through http calls to the Direct Line API, which gives you more control from your client-side app implementation.
The goal is to keep the code clear, simple and intutive with only essentials. For example, it assumes you can already have a way to obtain, with a staightforward tutorial below to help you.
To run the app locally and connect it to your Copilot Studio agent, ensure the following are in place:
- A Copilot Studio agent created and published. [Microsoft Learn - Quickstart: Create and deploy an agent]
- Manual authentication is configured for your Copilot Studio agent. [Microsoft Learn - Configure user authentication with Microsoft Entra ID]
- An app registration for this client app is created. [Microsoft Learn - Create app registrations for your custom website]
- Be able to get the required user access token. [Microsoft Learn - Tutorial: Add sign in and sign out in your Angular single-page application]
- In your agent in Copilot Studio, go to Channels, click Direct Line Speech, copy the Token Endpoint
- Go to agent.service.ts file, paste the connection string to the variable agentTokenUrl
- Run from the app folder path in your terminal:
npm install
ng serve -oOnce the server is running, it should open your browser and navigate to http://localhost:4200/.