🧠 Copilot Studio Agent APIs – Part 1: Using the Agent Response Component in a Model-Driven App

🚀 Introduction

With the recent updates to Copilot Studio, Microsoft has introduced powerful new capabilities through Agent APIs, allowing developers to integrate conversational AI into their apps more seamlessly. One of the standout features is the Agent Response Component, which can be embedded into model-driven apps using adaptive cards.

In this post, we’ll walk through how to use the Agent Response Component to display agent responses in a model-driven app using adaptive cards. This is part one of a two-part series exploring the potential of Agent APIs and custom PCF components.

🧰 Prerequisites

Before we begin, make sure you have:

• A Power Platform environment with a model-driven app
• Access to Copilot Studio and an agent configured
• Basic familiarity with adaptive cards

🛠️ Step-by-Step Guide

🔹 Step 1: Create Your Interactive Agent in the Model-driven App. Start by creating/editing an Interactive Agent from the model-driven app.

🔹 Step 2: Configure Your Interactive Agent in Copilot Studio. Select your Interactive Agent in Copilot Studio and start by creating a new topic and configuring some nodes:

• Trigger: Select "A custom client event occurs" trigger and define a custom event name (Ex: Sergio.MDACopilot.DetailsCard)
• Dataverse node: "Get a row by ID from selected environment" and define Environment, Table and Row ID in inputs. To get Row ID from Agent we should use the global variable "Global.PA__Copilot_Model_PageContext.pageContext.id.guid"
• Message node: Add an adaptive card to display info from record Here’s a simple example of an adaptive card that displays the agent’s response:

{
  type: "AdaptiveCard",
  '$schema': "https://adaptivecards.io/schemas/adaptive-card.json",
  version: "1.5",
  body: [
    {
      type: "TextBlock",
      text: "Emoji Details",
      weight: "Bolder",
      size: "Large"
    },
    {
      type: "Container",
      items: [
        {
          type: "TextBlock",
          text: $"Name: {Topic.CurrentItem.itteam_name}",
          weight: "Bolder",
          size: "Medium",
          separator: true
        },
        {
          type: "TextBlock",
          text: $"Text: {Topic.CurrentItem.itteam_text}",
          weight: "Bolder",
          size: "Medium",
          separator: true
        },
        {
          type: "TextBlock",
          text: $"AI Emoji: {Topic.CurrentItem.itteam_aiemoji}",
          weight: "Bolder",
          size: "Medium",
          separator: true
        }
      ]
    }
  ]
}

🔹 Step 3: Enable the Agent Response Component in main form. The Agent Response Component is available as an Artificial Intelligence Component in Dataverse table forms. You can use it to render responses from your agent in a structured format. To use it in a model-driven app, you’ll need to:

• Add the component in the form.
• Provide same event name we previously define in agent topic.

📸 Demo Preview

Here’s a preview of what the Agent Response Component might look like inside a model-driven app:

✅ Conclusion

The Agent Response Component opens up exciting possibilities for integrating conversational AI into business applications. By using adaptive cards, you can present agent responses in a clean, user-friendly format that fits seamlessly into your model-driven apps.

Stay tuned for Part 2, where we’ll build a custom PCF component that uses AI to analyze sentiment and recommends an emoji based on a user text input!