Microsoft Copilot Studio: How to Generate Dynamic Adaptive Cards Contents

 Introduction

Working with Microsoft Copilot Studio often requires creating dynamic, interactive user experiences. One powerful feature that enables this is the integration of Adaptive Cards with dynamic JSON content generation. In this post, I'll walk you through a real-world implementation where we needed to generate radio buttons dynamically based on items returned from a RAG (Retrieval-Augmented Generation) system.

The Challenge

Our use case involved creating a conversational interface where users could select from a list of options that weren't static. The radio button choices needed to be generated dynamically based on the results returned from our RAG implementation. This meant we couldn't rely on pre-built, static Adaptive Cards.

The Solution: Dynamic Variable Integration

To solve this challenge, we leveraged Microsoft Copilot Studio's Dynamic Variable functionality combined with Adaptive Card Templates. Here's how we implemented it:

Step 1: Setting Up the Adaptive Card Template

In Copilot Studio, we configured an Adaptive Card Template using the `AdaptiveCardTemplate` object with placeholder expressions:

```yaml
- kind: SendActivity
  id: sendActivity_dinNxr
  displayName: Dynamic Radio Button
  activity:
    text:
      - "{Text(Topic.KBAresponse.answer)}"
    attachments:
      - kind: AdaptiveCardTemplate
        cardContent: =Text(Topic.Var1RadioButton)
```

The key here is the `cardContent: =Text(Topic.Var1RadioButton)` line, which references our dynamic variable that contains the JSON structure for our Adaptive Card.

Step 2: API Integration for Dynamic Content

The dynamic variable `Topic.Var1RadioButton` gets populated through an HTTP Node in Copilot Studio, which makes an API call to a Python-hosted FastAPI endpoint. This approach allows us to generate the Adaptive Card structure programmatically based on the current context and data.

Step 3: FastAPI Implementation

Here's the Python FastAPI implementation that generates our dynamic Adaptive Card content:

```python
from fastapi import APIRouter, Request
from fastapi.responses import PlainTextResponse
import json

router = APIRouter()

@router.post("/generate-adaptive-card")
async def generate_adaptive_card(request: Request):
    payload = await request.json()
    solution_ids_used = payload.get("SolutionIDsUsed", [])
    used_ids = payload.get("UsedIDs", [])
    
    # Generate your adaptive card JSON structure here
    # adaptive_card = {...}  # Your card logic
    
    # Return escaped string (for plain text transport of JSON)
    escaped_json = json.dumps(adaptive_card)
    return PlainTextResponse(content=escaped_json)
```

Critical Implementation Details

Return Type Matters

One crucial aspect of this implementation is the return type from your API endpoint. The response **must be of type Plain Text**, not JSON. If you return a JSON response directly, Copilot Studio's workflow screen will throw rendering errors.

This is why we use:
```python
return PlainTextResponse(content=escaped_json)
```

Instead of returning the JSON object directly.

Dynamic Variable Population

The HTTP Node in Copilot Studio should be configured to:
1. Make a POST request to your FastAPI endpoint
2. Send the necessary context data (like `SolutionIDsUsed` and `UsedIDs`)
3. Store the response in your dynamic variable (`Topic.Var1RadioButton`)

Conclusion

Dynamic Adaptive Cards in Microsoft Copilot Studio open up powerful possibilities for creating responsive, data-driven conversational experiences. By combining Dynamic Variables with external API endpoints, you can create truly dynamic user interfaces that adapt to your users' needs and context.