Copilot Studio Web Chatbot

This repository contains a simple yet functional example of a web-based chatbot built with Microsoft Copilot Studio, using only HTML, CSS, and JavaScript within a single file.
It demonstrates how to connect and interact with a Copilot Studio Agent directly from a web page.

Original source: index.html

---

Table of Contents

• Overview
• Configuration
  • 1. Create and Publish the Agent
  • 2. Set Up Authentication
  • 3. Connect the Agent to the Web App
• Project Structure
• Requirements
• Usage Example
• Additional Resources
• License

---

Overview

This project provides an example of integrating a Microsoft Copilot Studio Agent into a simple web interface.
The implementation allows users to send messages to the agent and display its responses in a chat-style interface.

The example is entirely self-contained in one file (index.html) and includes:

• HTML: Structure and layout of the chat window.
• CSS: Basic styling for the chat UI.
• JavaScript: Logic for message handling and communication with the Copilot Agent API.

---

Configuration

1. Create and Publish the Agent

Start by creating and publishing the desired agent in Microsoft Copilot Studio.

When publishing, make sure to select an authentication method compatible with web integrations.
Do not choose the "Authenticate with Microsoft" option, as it will not work with external web applications.

Example of authentication configuration:

Once the agent is published, any future updates will automatically reflect in the web integration.

Learn more: Copilot Studio Authentication Configuration

---

2. Obtain the Mail Connection Token

To enable communication between the web app and your agent, you must use the Mail Connection Token associated with the published agent.

You can obtain the token from the Copilot Studio connection settings as shown below:

---

3. Connect the Agent to the Web App

Inside the index.html file, locate the following line of code:

const tokenEndpointURL = new URL('AGENT_MAIL_CONEXION_TOKEN');

Replace 'AGENT_MAIL_CONEXION_TOKEN' with the actual Mail Connection Token obtained from your agent.
This token enables the chatbot to connect directly to your Copilot Studio Agent.

---

Project Structure

This repository contains only one file:

/index.html   # Includes HTML, CSS, and JavaScript for the chatbot

The file is organized as follows:

• HTML: Chat container and message input fields.
• CSS: Layout, color scheme, and overall UI styling.
• JavaScript: Event handling, message rendering, and API connection logic.

---

Requirements

• Access to Microsoft Copilot Studio with permission to create and publish agents.
• A published Copilot Agent with web-compatible authentication enabled.
• A modern web browser (Chrome, Edge, Firefox, etc.) to run the example locally.

---

Usage Example

1. Clone this repository or download the index.html file.
2. Open the file in a text editor.
3. Replace the placeholder token in the script with your actual Mail Connection Token.
4. Save the file.
5. Open it in a web browser.
6. Start chatting with your Copilot Agent.

---

Additional Resources

• Microsoft Copilot Studio Documentation
• End-User Authentication Configuration Guide
• Original Example Repository

---

License

This project is released under the MIT License, allowing free use, modification, and distribution with proper attribution.

---