How to implement Microsoft Copilot into your application?

Artificial intelligence is transforming the way we work, and Microsoft Copilot comes as a revolutionary tool designed to increase productivity and creativity within applications. As businesses and developers seek to leverage AI's potential to improve operations and provide innovative user experiences, integrating Microsoft Copilot into applications has become a sought-after skill. Understanding how to implement Copilot can greatly enhance your application's AI capabilities.

From this article, you'll learn the easy ways to integrate Microsoft Copilot into your application, what to watch out for, and how to make the most out of the Microsoft services. If you want to improve what your app does or add new AI features, we've got you covered. Let's dive in and see how you can make your app better with Microsoft Copilot!

Microsoft Copilot and Its Integrations

First thing to mention is that the term “Copilot” may cause certain confusion. Microsoft makes a distinction between Microsoft 365 Copilot and custom AI agents or “copilots” that can be created in the Microsoft Copilot Studio.

Microsoft 365 Copilot merges the capabilities of advanced language models with the Microsoft 365 suite, providing a smoother and more intuitive approach to work in this application ecosystem:

• Word: Transforms writing by helping draft, edit, and improve content quality. It also summarizes long documents.
• Excel: Assists in data analysis, identifying trends, and generating complex formulas for easier data management.
• PowerPoint: Aids in creating engaging, visually appealing presentations.
• Outlook: Streamlines email drafting and summarizing threads for efficient communication.
• Teams: Boosts meeting productivity and team communication.
• OneNote: Supports note management, planning, and organization.
• Loop: Enhances collaborative planning and brainstorming.
• Whiteboard: Facilitates creative ideation and organizing ideas.

On the other hand, Microsoft offers the functionality to create custom “copilots” – AI-powered conversational agents. These agents can automate tasks, interact with users, and access data across various platforms, making them versatile tools for increasing employee productivity and customer engagement. Some examples of “copilots” available in the Copilot Studio include:

Copilot for Customer Engagement: agents you can deploy on websites, social media channels, or other public-facing touchpoints to support customers, answer FAQs, or help with services. For example, a support chatbot for an e-commerce site or a lead generation bot for a marketing campaign.

Copilot for Employee Engagement: agents designed for internal use within your organization to assist employees with operational activities, like HR questions, IT helpdesk, or onboarding. Examples may include an HR assistant that can answer “How do I request vacation?” or an IT bot that helps users reset passwords.

Copilot with Process Automation: bots connected to Microsoft’s low-code robotic process automation tool Power Automate that can trigger workflows, call APIs, or integrate with databases to get stuff done behind the scenes. Thus, you can create a bot that books a meeting room after checking availability or a bot that creates a ticket in Jira.

The question we aim to answer in this article is “How to implement Microsoft Copilot into a custom application?” Since Microsoft 365 Copilot only integrates with the Suite 365 apps, in this article, we will be discussing specifically the Microsoft Copilot Studio Agents and ways to integrate them into non-Microsoft, third-party apps.

Before we get down to integrating a Copilot Agent, we have to create it, so let’s start with a brief overview of this step.

How to Create a Copilot Agent?

Microsoft provides customers with a rich ecosystem of tools and instruments that can satisfy any or almost any request. The same applies even to smart agent creation. Microsoft offers two ways to create a custom Copilot Agent:

1. With Copilot Studio – a powerful, no-code to low-code platform anyone can use.
2. Azure Bot Service – a more complicated platform if you want to add custom code, use advanced AI, or build completely custom bots.

Creating an Agent with Copilot Studio 

Copilot Studio is an end-to-end conversational, user-friendly AI platform that enables anyone to create agents using natural language commands and a graphical user interface. With Copilot Studio, you can easily design, test, and publish agents for internal or external scenarios across your industry, department, or role. You can build a standalone agent or publish to Microsoft 365 Copilot.

Copilot Studio offers several key features:

• Agent Flows: This functionality allows you to automate repetitive tasks and integrate your apps and services. Agent flows can be triggered manually, by other automated events or agents, or based on a schedule.
• Multi-Channel Deployment: You can deploy agents across various platforms, including websites, mobile apps, Facebook, Microsoft Teams, or any channel supported by the Azure Bot Service.
• Integration with Microsoft 365 Copilot: You can augment the feature set of Microsoft 365 Copilot with custom agents that incorporate your organization's data and specific use cases. 
• Low-Code Development: creating agents does not need expertise in data science or coding – just an MS 365 account, Copilot Studio access, and a basic understanding of chatbot design.

Creating an Agent with Azure Bot Service

Azure Bot Service is a Microsoft cloud platform that helps you build, deploy, and manage fully custom conversational chatbots, virtual agents, or even voice bots. It is an advancement of the Copilot Studio functionality with custom code, APIs, and plugins. Due to this, you can build more complex decision-tree bots, multilingual bots, or even bots that connect to your HRM system or CRM.

As a more sophisticated agent development instrument, Azure Bot Service allows:

• Bot Hosting & Deployment: Azure Bot Service runs your bot in the cloud, so you don’t need to manage servers.
• Developer tools: the service provides a CLI for end-to-end bot development, Bot Connector Service, which relays messages and events between bots and channels, and Azure resources for bot management and configuration.
• Channels support: It connects your bot to channels, like websites (via Web Chat), Microsoft Teams, Facebook Messenger, WhatsApp, Slack, and others.
• Integration with Azure AI: You can power your bot with AI capabilities like Natural Language understanding (LUIS), Speech recognition, and QnA Maker using Microsoft Bot Framework SDK for developing bots in C#, JavaScript, and Python. 
• Scalability & Reliability: Azure’s hosting service ensures your bot is highly available and scales automatically.
• Direct Line API: Provides a REST API so you can talk to your bot from any custom app (like your own website, mobile app, or game).

Note: Azure Bot Service itself is a bot hosting and management platform, so it doesn’t include AI by default. If you want your bot to have AI capabilities, you have to integrate it with Azure Cognitive Services: 

• Language Understanding (LUIS) for intent recognition.

• QnA Maker for FAQ-style bots.
• Azure OpenAI Service to embed GPT-3, GPT-3.5, GPT-4, and other OpenAI models via API in your own apps and bots and fine-tune or customize the models. This gives you more control and flexibility on how you use the models, but also places more responsibility for security and compliance.
• Speech Services for voice input/output.

All things considered, we recommend using Azure Bot Service for Copilot Agent creation if you need:

• Full control over the bot logic and behavior.

• Customize the conversation flow in any way you want.
• Use Bot Framework SDKs to add advanced features like proactive messaging, adaptive dialogs, LUIS integration (language understanding), QnA Maker, etc.

It gives you the flexibility needed to build custom AI-powered bots for any scenario, not limited to Microsoft 365 and Copilot Studio. You can control how AI is integrated, which models you use, and how your data flows. 

Since Agent creation is not the subject matter of this article, we will describe the full process in one of our upcoming articles. Subscribe to our blog to follow the updates and not miss topics that interest you!

How to Integrate the Copilot Agent into a Third-Party App?

Agents created with Microsoft Copilot Studio or Azure Bot Service can be integrated into non-Microsoft apps. Depending on your application's nature and customization needs for the agent look, there are two ways to integrate your Copilot Agent:

For Web-Based Applications and Less Customization

You can embed a Web Chat control (HTML and JavaScript code snippet) provided by Azure Bot Service on your website (like an iframe). This way, your app users will interact with the agent directly from within your web app interface. Since Web Chat is open-source, you can add Custom Styling by loading the Web Chat JavaScript library yourself, passing in a CSS-based custom style set, or adding custom activities/cards/middleware to modify how messages appear.

Also, you can use the Direct Line API to build your own chat UI in your preferred framework (React, Vue, Angular, plain HTML/JS). Direct Line API gives you raw access to the bot’s conversation stream (JSON) to create your own chat bubble style, animations, avatars, and custom components (like image galleries, forms, etc.), giving you complete control over user experience.

For Native or Custom Applications

For mobile or desktop apps, there’s no built-in chatbot UI like the Web Chat control for web.

So, Direct Line API is the official and recommended way to integrate your custom Copilot Agent with a mobile or desktop app. For this, you will need to use Direct Line API endpoints (HTTP/WebSocket) in your own code. 

Now, let’s look at each of the integration options in more detail.

Agent Integration Using Web Chat Control

You can integrate your custom Copilot Agent using the Web Chat control – an HTML code snippet that you embed on your website’s front end.

Prerequisites:

• Azure Bot Service Agent: You have a Copilot Agent built and deployed in Azure Bot Service.
• Web app environment.
• HTML/JavaScript-based web app.

Direct Line Channel enabled.

Agent Integration:

1. Generate a Direct Line Token.

Direct Line is the secure channel that enables Web Chat (which is a UI widget) to talk to your bot service. It’s the bridge that carries your user’s messages to your bot and back. To start this conversation, Direct Line requires a secure token. For this, in your backend (can be in Node, Java, Python, etc., but in our example we use Java), you have to create this endpoint:

// File: DirectLineTokenController.java
package com.example.botintegration;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.*;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.client.RestTemplate;

@RestController
@RequestMapping("/api/directline")
public class DirectLineTokenController {

    // Inject your Direct Line secret from application.properties
    @Value("${directline.secret}")
    private String directLineSecret;

    private static final String DIRECTLINE_URL = "https://directline.botframework.com/v3/directline/tokens/generate";

    @GetMapping("/token")
    public ResponseEntity<String> generateToken() {
        try {
            // Create headers
            HttpHeaders headers = new HttpHeaders();
            headers.set("Authorization", "Bearer " + directLineSecret);
            headers.setContentType(MediaType.APPLICATION_JSON);

            HttpEntity<String> entity = new HttpEntity<>("", headers);

            // Call the Direct Line token generation endpoint
            RestTemplate restTemplate = new RestTemplate();
            ResponseEntity<String> response = restTemplate.exchange(
                    DIRECTLINE_URL,
                    HttpMethod.POST,
                    entity,
                    String.class
            );

            // Return the token JSON to your frontend
            return ResponseEntity.ok(response.getBody());

        } catch (Exception e) {
            e.printStackTrace();
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error generating token");
        }
    }
}

To get your Direct Line Secret for token generation, go to your bot resource in Azure portal, open Channels, add the Direct Line channel, and copy your Direct Line Secret.

Note: Never expose the Direct Line Secret in the frontend!‍

2. Add Web Chat to your web app.
   This code embeds your Copilot Agent chatbot in a web page using the Bot Framework Web Chat control in your HTML page:

<!DOCTYPE html>
<html>
<head>
  <title>My HR Bot</title>
  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
  <style>
    html, body { height: 100%; margin: 0; }
    #webchat { height: 100%; }
  </style>
</head>
<body>
  <div id="webchat"></div>
  <script>
    // 1️⃣ Fetch the token from your backend
    fetch('/directline/token')
      .then(res => res.json())
      .then(data => {
        // 2️⃣ Create the Direct Line object
        const directLine = window.WebChat.createDirectLine({
          token: data.token
        });

        // 3️⃣ Render the Web Chat control
        window.WebChat.renderWebChat({
          directLine: directLine,
          userID: 'user-id-123', // optional
          username: 'User',      // optional
          locale: 'en-US'        // optional
        }, document.getElementById('webchat'));
      })
      .catch(err => console.error(err));
  </script>
</body>
</html>

3. You can customize the look of your agent in the front end with JavaScript using the Web Chat styling options:

const styleSet = window.WebChat.createStyleSet({
  bubbleBackground: '#0078d4', // bot bubble color
  bubbleTextColor: 'white',
  userAvatarInitials: 'Me',
  botAvatarInitials: 'HR'
});

// Example: render with styles
window.WebChat.renderWebChat({
  directLine: directLine,
  styleSet: styleSet
}, document.getElementById('webchat'));

Agent Integration Using Direct Line API

To integrate your custom Copilot Agent with a native mobile app or other custom applications like desktop apps, or to get more customization options integrating it with your web app, you need to use Direct Line API – a RESTful (or WebSocket) API that securely connects custom client applications to agents, enabling real-time, bidirectional communication via JSON activities.

In this integration scenario, you’re responsible for authenticating (using your Direct Line secret or token) and sending and receiving messages in your app’s preferred language/framework.

Prerequisites

• The agent created in the Copilot Studio or Azure Bot Service is published and hosted on Azure Bot Service.
• Your web, mobile, or desktop application. 
• You want to build a custom chat UI in a web, mobile, or desktop app instead of using the default Web Chat UI.
• Direct Line channel enabled for your agent. 

Agent Integration

1. Create a backend service to generate tokens. 

In your Java, Node.js, Python, etc. backend,  create an endpoint (e.g., /api/directline/token). When the client (web/mobile/desktop app) requests it, your backend will:

• Call the Direct Line API /v3/directline/tokens/generate with Basic Auth (Direct Line secret).
• Return the generated token (JSON with { "token": "<token>" }).

2. Use Direct Line API to send/receive messages.

On the client side of your web, mobile, or desktop app, fetch the Direct Line token from your backend and use the Direct Line API:

Start a conversation:

POST https://directline.botframework.com/v3/directline/conversations
Authorization: Bearer {token}

You’ll get a conversationId. Send a message:

POST https://directline.botframework.com/v3/directline/conversations/{conversationId}/activities
Content-Type: application/json
Authorization: Bearer {token}

{
  "type": "message",
  "from": { "id": "user1" },
  "text": "Hi bot!"
}

Receive messages (polling):

GET https://directline.botframework.com/v3/directline/conversations/{conversationId}/activities?watermark={optional}
Authorization: Bearer {token}

The agent’s responses will appear in the activities array.

In a desktop or mobile app (like JavaFX, Android, iOS, Electron), use your platform’s HTTP library (e.g., OkHttp for Android, HttpClient for Java desktop, etc.) to call these endpoints.

Also, instead of polling, you can establish a WebSocket connection for real-time updates. To do this, after starting a conversation, use the provided streamUrl:

{
  "conversationId": "...",
  "streamUrl": "wss://..."
}

3. Implement a chat UI.
   Make sure your custom UI displays messages from the agent and user, sends user messages to the agent (using the Direct Line API), and continuously polls or uses WebSockets to receive new agent messages.

Real-Life Copilot Agent Integration Example

Now, let's imagine we built a custom HR agent in Azure Bot Service. This is a QnA agent that has to help reduce the daily workload on our HR managers by answering common questions from employees. Now I want to integrate it into our custom HRM. What do we need to know and do?

1. Understand the HRM system’s capabilities.

Clarify your system’s characteristics: is it a web-based, mobile, or desktop app? If it is multi-platform, think where you’d like to have the agent integrated (maybe on only one or all of them). Also, what language is it written in: JavaScript, Java, .NET, PHP, Python, etc.? Finally, where do you want the agent to appear: as an embedded chat UI on a webpage, a standalone chatbot page, or a back-end service triggering bot logic?

For our example, we’ll take a web-based app written in Java, and we want our agent to appear as an embedded chat UI on a webpage.

2. Choose how you want to connect the agent to your HRM system.

You can opt for the Direct Line API for any platform as the most flexible and recommended option for custom apps. It will enable you to send and receive messages between your HRM system and the Copilot Agent.
If your HRM system is a web app, you can embed the Web Chat JavaScript control to embed a chatbot UI directly in your HRM system’s UI. It’s not as flexible as Direct Line, but it's faster to get up and running.

3. Handle Agent authentication and security.

For any Agent integration method, Direct Line requires a secret key, which you get from Azure Bot Service. Keep in mind that you cannot expose this secret in client-side code – only use it from a secure backend.
Also, if you want your HR agent to use user authentication (e.g., HRM logins), consider passing the user’s identity to the agent for a personalized user experience.

4. Get down to integrating the agent.‍

As described in the previous section, get the Direct Line secret on the Azure Portal.
For back-end integration via Direct Line API, in your HRM Java back end, start a conversation, send messages, and receive agent’s responses using Java + HttpClient (standard in Java 11+):

import java.net.URI;
import java.net.http.*;
import java.util.*;
import com.fasterxml.jackson.databind.ObjectMapper;

public class DirectLineBotClient {

    private static final String DIRECT_LINE_SECRET = "YOUR_DIRECT_LINE_SECRET";
    private static final String BASE_URL = "https://directline.botframework.com/v3/directline";
    private static final HttpClient httpClient = HttpClient.newHttpClient();
    private static final ObjectMapper objectMapper = new ObjectMapper();

    public static void main(String[] args) throws Exception {
        String conversationId = startConversation();
        sendMessage(conversationId, "Hello HR bot from Java!");
        receiveMessages(conversationId);
    }

    // Start a new conversation
    private static String startConversation() throws Exception {
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create(BASE_URL + "/conversations"))
            .header("Authorization", "Bearer " + DIRECT_LINE_SECRET)
            .POST(HttpRequest.BodyPublishers.noBody())
            .build();

        HttpResponse<String> response = httpClient.send(request, HttpResponse.BodyHandlers.ofString());
        Map<?, ?> json = objectMapper.readValue(response.body(), Map.class);
        String conversationId = (String) json.get("conversationId");
        System.out.println("Started conversation: " + conversationId);
        return conversationId;
    }

    // Send a message to the bot
    private static void sendMessage(String conversationId, String text) throws Exception {
        Map<String, Object> activity = new HashMap<>();
        activity.put("type", "message");
        activity.put("from", Map.of("id", "user123"));
        activity.put("text", text);

        String requestBody = objectMapper.writeValueAsString(activity);

        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create(BASE_URL + "/conversations/" + conversationId + "/activities"))
            .header("Authorization", "Bearer " + DIRECT_LINE_SECRET)
            .header("Content-Type", "application/json")
            .POST(HttpRequest.BodyPublishers.ofString(requestBody))
            .build();

        HttpResponse<String> response = httpClient.send(request, HttpResponse.BodyHandlers.ofString());
        System.out.println("Sent message: " + response.body());
    }

    // Receive bot messages
    private static void receiveMessages(String conversationId) throws Exception {
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create(BASE_URL + "/conversations/" + conversationId + "/activities"))
            .header("Authorization", "Bearer " + DIRECT_LINE_SECRET)
            .build();

        HttpResponse<String> response = httpClient.send(request, HttpResponse.BodyHandlers.ofString());
        Map<?, ?> json = objectMapper.readValue(response.body(), Map.class);
        List<?> activities = (List<?>) json.get("activities");
        activities.forEach(a -> System.out.println("Bot message: " + a));
    }
}

Note: you have to replace "YOUR_DIRECT_LINE_SECRET" with your actual secret.

For front-end integration, we only have to embed the Web Chat using JavaScript. It will connect to Direct Line using the Direct Line token we will generate on the server side using the same Direct Line secret we used for back-end integration:

<!DOCTYPE html>
<html>
<head>
  <title>Advanced HR Bot</title>
  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
  <style>
    html, body { height: 100%; margin: 0; }
    #webchat { height: 100%; }
  </style>
</head>
<body>
  <div id="webchat" role="main"></div>

  <script>
    // Ideally, fetch this token securely from your backend
    const directLineToken = "YOUR_GENERATED_DIRECT_LINE_TOKEN";

    const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
      if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
        dispatch({
          type: 'WEB_CHAT/SEND_EVENT',
          payload: {
            name: 'webchat/join',
            value: { userName: 'John Doe', department: 'HR' }
          }
        });
      }
      return next(action);
    });

    window.WebChat.renderWebChat({
      directLine: window.WebChat.createDirectLine({ token: directLineToken }),
      userID: 'user123',
      username: 'John Doe',
      locale: 'en-US',
      styleOptions: {
        botAvatarInitials: 'HR',
        userAvatarInitials: 'JD',
        bubbleBackground: '#e0f7fa',
        bubbleFromUserBackground: '#c8e6c9'
      },
      store
    }, document.getElementById('webchat'));
  </script>
</body>
</html>

This shows how to send an initial event to the bot (webchat/join) for custom onboarding. You can customize colors, avatars, and behavior, too.

5. Consider context and personalization.

HRM systems handle user-specific data like HR profiles, vacation balances, etc. You can pass relevant context to the agent in custom activities (e.g., user ID, department). If you used Azure Bot Framework SDK to create your agent, you can enable it to process this context and personalize replies.

6. Test end-to-end.

The main thing you need to test here is how the agent interacts with your application: HRM triggers the bot → bot responds → HRM updates data or UI accordingly.

Best Practices for Token Generation & Security

Although Copilot Agent integration seems to be quite simple when broken down step-by-step, it’s still important to understand and keep in mind some security aspects if we don’t want to turn our integration into a vulnerability.

Direct Line Secret cannot be exposed by any means. 

Never embed the Direct Line Secret in the web or mobile apps front-end. Instead, generate a Direct Line token from your backend server. Here’s how we do it in Java:

// POST to https://directline.botframework.com/v3/directline/tokens/generate
HttpRequest request = HttpRequest.newBuilder()
    .uri(URI.create("https://directline.botframework.com/v3/directline/tokens/generate"))
    .header("Authorization", "Bearer " + DIRECT_LINE_SECRET)
    .POST(HttpRequest.BodyPublishers.noBody())
    .build();

HttpResponse<String> response = httpClient.send(request, HttpResponse.BodyHandlers.ofString());
System.out.println("Generated Direct Line token: " + response.body());

Now, you can send this token to your app’s front end from a secure endpoint /api/bot/token.

Token lifespan should not exceed 30 minutes. 

Short-lived tokens limit the window of opportunity for misuse if intercepted, helping to keep your chatbot communications secure.

Token scope should be limited to a single conversation. 

Scoping tokens to a single conversation ensures that even if a token is compromised, it cannot be reused across different chats or sessions.

We know how to make it faster, here’s why

Our estimations

Axon takes pride in offering cutting-edge solutions and services underpinned by agile project management methodologies. We recognize the paramount significance of precise estimations in meeting client expectations and project deadlines.

Our approach to estimations revolves around close collaboration with our clients. We understand that every project is unique, and client preferences play a crucial role in defining the scope and scale of software development initiatives. By actively engaging with our clients, we gain deep insights into their specific requirements, priorities, and budgetary constraints.

Our experience

At Axon, we have expertise in seamless Copilot API integration into viable software solutions. By using the Microsoft Copilot AI API, businesses can enhance their applications with advanced AI-driven features and seamless automation. Our skilled team of software engineers and developers has hands-on experience in harnessing the full potential of Copilot to enhance the capabilities and user experiences of our clients' applications.

With a deep understanding of both the front-end and back-end aspects of development, our experts can craft customized solutions that precisely meet your unique requirements.

Our team

Throughout the software engineering process, our team has demonstrated a well-established track record of collaboration and professionalism when working with our esteemed partners.

Our team's agility enables us to embrace change and tackle complex challenges with confidence. We approach each project with a flexible mindset, tailoring our methodologies to suit the unique requirements and goals of our clients. Through agile project management, we ensure that our solutions are scalable, maintainable, and adaptable to future needs.

Conclusion

Using Microsoft Copilot APIs in apps brings a lot of benefits, like making tasks automatic, improving how users interact with the app, and giving smart answers using a lot of data. Adding Copilot can really make their apps more valuable by using AI.
It's a good idea to first understand what the app needs and how Copilot can help meet those needs. Trying out different prompts and situations in a test setting can help make the most of Microsoft Copilot API integration. It's also important to think about the right way to use AI, including keeping user information safe and private.
In short, Copilot is a versatile and strong tool for making apps better with AI. By following these suggestions, developers can put Copilot into their apps in a way that brings new features and makes the app more engaging for users.

Software Development Team

When it comes to creating software solutions that not only meet but exceed your business objectives, partnering with a proven expert is paramount. That's where Axon, your trusted ally in software engineering, steps in. Our comprehensive services and dedicated team are here to streamline your development process, providing you with top-notch solutions while keeping a watchful eye on your budget.

Need estimation?

Are you ready to elevate your software development to the next level and conduct Copilot Microsoft integration or set up other essential software processes? Contact Axon today to discuss your project, and let's work together to design an application that not only meets your budget but also propels your business to new heights.