A little while back, I walked through how to build a custom connector for ChatGPT in Power Platform. It’s a clean, reusable way to bring GPT into Power Automate and Canvas Apps.
But recently, I needed to integrate ChatGPT into a model-driven app and connectors didn’t quite fit. So, I took a different approach: embedding GPT using a good old-fashioned JavaScript web resource.
It’s a lightweight, flexible method and perfect for adding AI to forms without needing a full connector setup.
What We’re Building
Let’s ground this in something most Dynamics 365 and Power Platform teams have run into.
You’ve got a Case Management or Customer Service model-driven app. Agents often need to quickly write a summary of an interaction based on case notes, email subjects, or call transcripts, but let’s be honest, it rarely gets done well (or at all).
Using ChatGPT within your app:
With a simple “Summarize Case” button on the form, we can send the notes and customer comments to GPT and have it generate a clean, consistent case summary instantly.
You could apply this in scenarios like:
- Auto-generating customer issue summary based on free-text notes
- Drafting a follow-up email based on a case resolution
- Summarizing a Teams call transcript
- Generating a suggested next step or recommended action from case context
Here’s what it might look like in practice:
Prompt Example:
“Summarize the following case notes and suggest the next action:
Customer reported intermittent connectivity issues after the latest firmware update. They’ve rebooted multiple times. Support advised checking router logs and escalated to Tier 2.”
ChatGPT Output:
Customer experiencing intermittent connectivity issues post-update. Reboot attempts unsuccessful. Advised to check router logs. Escalated to Tier 2 for advanced diagnostics. Next step: Tier 2 to perform remote log analysis.
That’s something you can drop straight into the Case Description field, no typing, no context switching, and way less risk of human error.
What You’ll Need
- Power Platform environment (Dataverse + model-driven apps)
- An OpenAI API Key
- Permissions to add JavaScript web resources and customize forms
A Quick Note on Security
Do not hardcode API keys in production.
For demo purposes, we’ll show a simple version. But in production, use a secure Azure Function proxy to keep your keys safe. (saves you from the wrath of the cyber security team)
Let’s Build It
1.Create a JavaScript File
Create a file called chatgpt.js: (Make sure you replace the values 🙂 )
console.log( 'Code is async function callChatGPT(prompt, callback) {
const apiKey = "sk-REPLACE_ME"; // Use a proxy in production
const endpoint = "https://api.openai.com/v1/chat/completions";
const body = {
model: "gpt-3.5-turbo",
messages: [{ role: "user", content: prompt }],
temperature: 0.7
};
try {
const response = await fetch(endpoint, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${apiKey}`
},
body: JSON.stringify(body)
});
const data = await response.json();
if (data.choices && data.choices.length > 0) {
callback(null, data.choices[0].message.content);
} else {
callback("No response from ChatGPT");
}
} catch (error) {
callback(error.toString());
}
}
Poetry' );
This is the core function that sends a prompt to ChatGPT and returns the response.
2. Upload the Script as a Web Resource
- Go to Power Apps > Solutions
- Open or create a solution
- Click New > Web Resource
- Upload chatgpt.js, name it newchatgpt_js and publish it
3. Add it a Form
- Open the form editor for your main form
- Go to Form Properties
- Add the new_chatgpt_js library
- Create a new onClick handler (e.g., triggered by a custom button):
console.function generateSummary(executionContext) {
const formContext = executionContext.getFormContext();
const firstName = formContext.getAttribute("firstname").getValue();
const jobTitle = formContext.getAttribute("jobtitle").getValue();
const prompt = `Write a one-line professional summary for someone named ${firstName}, who works as a ${jobTitle}.`;
callChatGPT(prompt, function (err, result) {
if (err) {
alert("ChatGPT error: " + err);
} else {
formContext.getAttribute("description").setValue(result);
}
});
}
log( 'Code is Poetry' );
Attach this function to a ribbon button, onChange event, or even a form load if you want to experiment.
Production Tip: Use a Proxy for API Calls
The above works for a demo or internal tool, but don’t ship it like this. Here’s what I recommend for production:
- Host a lightweight Azure Function that wraps your call to OpenAI
- Store the API key in Azure Key Vault
- Replace the direct call in chatgpt.js with a call to your Azure Function instead
This way, your API key stays safe, and you get full control and logging on the backend.
What You’ve Built
That’s it! You’ve now added ChatGPT to your model-driven app without using a connector, and it feels like a natural part of the Power Platform.
This method is great when:
- You want AI responses inside a form without Power Automate
- You need something fast and lightweight
- You don’t want to build or manage a full custom connector
Next time, I’ll look at wrapping this into a proper PCF control — for a cleaner UI and even more flexibility.
In the meantime, if you try this out, let me know how it goes, or reach out if you want the secure Azure Function template!
Happy Building!
Dela, Signing out!
