Create an AI Copilot Panel Using PCF Controls

AI copilots are moving from novelty to everyday tool — and your Dynamics 365 users want one right where they work: on the record. By hosting a PCF control inside a Custom Page, you can add an AI Copilot panel that reads the current record, answers questions, drafts emails, summarizes activity, and suggests next steps — all without leaving the form.

This article — part of our series on hosting PCF controls in modal popups — walks through building an AI copilot panel with PCF, in plain language.

What the Copilot Panel Does

• Opens as a side panel or modal from a ribbon button.
• Knows the current record (account, case, opportunity, etc.).
• Lets the user ask questions in natural language.
• Returns summaries, drafts, and suggested actions.
• Can write results back to Dataverse (notes, emails, task records).

Architecture at a Glance

The PCF control is the chat UI. It never talks to the AI model directly — instead it calls a secure backend (an Azure Function or Power Automate flow) that holds the API key and calls the AI service. This keeps secrets off the client and gives you one place for governance.

PCF Copilot Panel  →  Secure Backend (Azure Function)  →  AI Model
        │                       │
   record context         Dataverse (read/write)

Why a backend? Putting an API key in a PCF control would expose it to anyone. A backend keeps the key private, lets you add rate limits and logging, and can enrich prompts with Dataverse data safely.

Step 1 – Build the Chat UI in PCF

Use React and Fluent UI inside your PCF control for a familiar look. Keep a simple message list and an input box:

async function sendMessage(text: string, recordId: string) {
    const res = await fetch("https://your-func.azurewebsites.net/api/copilot", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ prompt: text, recordId })
    });
    const data = await res.json();
    return data.reply;   // show this in the chat list
}

Step 2 – Give the Copilot Context

A copilot is only as good as the context it gets. Pass the record ID into the control (see the cornerstone guide), and let the backend load the relevant fields from Dataverse before it builds the prompt. That way the model answers about this customer, not in general.

Step 3 – Write Results Back to Dataverse

A copilot that only chats is half a tool. Let users act on suggestions with one click — save a summary as a note, create a follow-up task, or draft an email:

await context.webAPI.createRecord("annotation", {
    "objectid_account@odata.bind": `/accounts(${recordId})`,
    subject: "AI Summary",
    notetext: aiSummary
});

Governance and Safety

• Keep keys on the backend — never in the PCF control.
• Respect security roles — the backend should honor the user’s Dataverse permissions.
• Log every call for auditing and cost tracking.
• Human review — let users approve AI-drafted content before it’s saved or sent.
• Handle errors gracefully with clear messages and retries.

Real-World Uses

• Summarize a long case history in seconds.
• Draft a reply email using the account’s context.
• Suggest the next best action on an opportunity.
• Answer “what changed on this record recently?”

Conclusion

An AI copilot panel built with PCF brings assistance directly onto the record — contextual, secure, and actionable. By keeping the model behind a backend and writing results back to Dataverse, you get a copilot that’s genuinely useful and safe to run in production.

Related: Open a PCF Control in a Modal Popup Using Custom Pages. Want to add an AI copilot to your CRM? Talk to the CloudVerve team.