DEV Community

Cover image for Stitching Knowledge Together: Dynamic Citation Rendering Explained
Bala Madhusoodhanan
Bala Madhusoodhanan

Posted on

Stitching Knowledge Together: Dynamic Citation Rendering Explained

#copilotstudio #powerfuldevs #systemdesign

Intro:
When using the Generative Answer action in Copilot Studio, the output often includes a helpful summary—but the citations? Not so pretty. By default, they appear as raw links or unformatted source references, which can feel disconnected and hard to navigate. This blog block is a conceptual deep dive into how you can beautify citation output using Adaptive Cards and HTML formatting. The goal is to transform scattered source data into a clean, clickable table that builds trust, improves readability for the end user.

Generate the Answer:
Use the SearchAndSummarizeContent action to populate Topic.Answer.Text.Content with a generative response based on the user query and selected persona.

Check for Valid Output:
Ensure the answer is not blank using a condition like =!IsBlank(Topic.Answer) before proceeding.

Create the Citation Sources Reference:
Format the citations into an array of objects like:

[
  {
    "FileName": "File Name.pptx",
    "FileUrl": "https://abcorp.sharepoint.com/.../MEALFramework.pptx"
  },
  {
    "FileName": "File Name.Docx",
    "FileUrl": "https://abcorp.sharepoint.com/.../MEALexpand.docx"
  }
]
Enter fullscreen mode Exit fullscreen mode

Transform Citations into Markdown:
It takes the main answer text generated by Copilot Studio and appends a list of citations in Markdown format.

  • Start with the Answer Text: This adds two line breaks after the answer to visually separate it from the citations. 
Topic.Answer.Text.Content & Char(10) & Char(10)
Enter fullscreen mode Exit fullscreen mode
  • Loop Through Citation Sources: This iterates over each citation source (e.g., a file used in the answer). 
Concat(Topic.Answer.Text.CitationSources, ...)
Enter fullscreen mode Exit fullscreen mode
  • Format the Citation in Markdown: This creates a Markdown-style citation:
  1. [Id]: URL "File Name"
  2. It replaces %20 with spaces for readability. 
"[" & Id & "]: " & URL & " \"" & Substitute(Name, "%20", " ") & "\""
Enter fullscreen mode Exit fullscreen mode
  • Add Line Breaks Between Citations: This ensures each citation appears on its own line for clarity. 
Char(10) & Char(10)
Enter fullscreen mode Exit fullscreen mode

Final Output:
The result is a combined string that includes:

The original answer
A clean, readable list of citations
Resilient URL handling
Markdown formatting for rendering in Adaptive Cards or rich text blocks

Source Code:
PCAT repo

Top comments (0)