Option 2 \u2014 Create Your Own PCF Project:<\/strong> If you prefer to start fresh and build the control into an existing solution, initialize a new PCF project using:<\/p>\npac pcf init –namespace YourNamespace –name CodeInterpreterControl –template field npm install<\/p>\n
Then wire in the prompt call and rendering logic manually based on the sample as reference. For this blog, we are going with Option 1. Clone the sample and run:<\/p>\n
cd CodeInterpreterControl\r\n\r\nnpm install\r\n\r\nnpm run build\r\n\r\npac pcf push --publisher-prefix <your-prefix><\/pre>\nThe control gets pushed directly to your environment. No solution packaging needed for dev\/testing.<\/p>\n
Step 4: Configure on the Account Form<\/strong><\/p>\n\n- Create a Single Line Text or Multi Line Text column on the Account table (e.g., chartoutput). This is just an anchor field the PCF doesn’t actually store data in it.<\/li>\n
- Open the Account form in the form designer.<\/li>\n
- Add the column to the form, then go to Properties \u2192 Components \u2192 Add Component \u2192 choose Code Interpreter Control<\/strong>.<\/li>\n
- Set Model ID<\/strong> as a static value \u2192 paste the AI Model GUID.<\/li>\n
- Set Record ID<\/strong> as a static value \u2192 enter 00000000-0000-0000-0000-000000000000 (we explain this below).<\/li>\n
- Save and publish the form. Add the field to a dedicated tab we named it “Pipeline Insights”<\/strong>.<\/li>\n<\/ol>\n
The Result<\/strong><\/h3>\nWhen a user opens an Account with related Opportunities, the control renders an interactive bar chart inline grouped by sales stage, with hover tooltips and filter checkboxes. No navigation away from the Account record as shown in the image below.<\/p>\n
![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/05\/PCF-Control-4.jpg\")
<\/p>\n
Scenario 2: PDF Sales Proposal on the Opportunity Form<\/strong><\/h3>\nStep 1: Create the Prompt<\/strong><\/p>\nSame process new prompt, Code Interpreter ON, Dataverse connectors for Opportunity and Account tables.<\/p>\n
Prompt name: “Generate Sales Proposal”:<\/p>\n
You are a document specialist working with Dynamics 365 CRM data.\r\nYou are given an Opportunity record ID: {{ RecordId }}.\r\nYour task:\r\n1. Fetch the Opportunity record with this ID. Retrieve: name, estimatedvalue,\r\nstepname, closeprobability, description, estimatedclosedate.\r\n2. Fetch the related Account using _parentaccountid_value. Retrieve: name,\r\naddress1_city, address1_stateorprovince, telephone1, emailaddress1.\r\n3. Generate a professional Sales Proposal PDF document with:\r\n- Header: Styled \"PROPOSAL\" banner, current date, proposal number\r\n(format: PROP-YYYY-XXXX).\r\n- Section 1 Executive Summary: Professional paragraph covering the\r\nopportunity, Account name, deal value, and expected close date.\r\n- Section 2 Opportunity Details: Formatted table with name, estimated value,\r\nsales stage, close probability, and expected close date.\r\n- Section 3 Proposed Solution: 3-4 AI-generated recommendations relevant\r\nto the opportunity.\r\n- Section 4 Investment Summary: Pricing table with estimated value,\r\n10% discount row, and final total.\r\n- Section 5 Next Steps: 3 actionable steps based on the current sales stage.\r\n- Footer: \"Valid for 30 days\" notice with page number.\r\nStyling: Navy blue (#1B2A4A) headers, clean layout, professional fonts,\r\nhorizontal dividers between sections.\r\nOutput: Generate this as a PDF file. Return the PDF file as your output.<\/pre>\nStep 2: Get Model GUID and Configure<\/strong><\/p>\nFollow the same steps as Scenario 1. Query msdyn_aimodels to get the GUID for the “Generate Sales Proposal” prompt, add the PCF control to the Opportunity form’s “Sales Proposal”<\/strong> tab, and set the Model ID.<\/p>\nThe Result<\/strong><\/p>\nWhen a sales rep opens an Opportunity, the PDF proposal generates automatically with an embedded preview and a download button right on the form as shown in the image below.<\/p>\n
![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/05\/PCF-Control-5.jpg\")
<\/p>\n
Under the Hood: How the PCF Control Works<\/h3>\n
What makes this PCF control particularly interesting is that a single control handles both HTML rendering and file previews using a clean branching pattern. Here’s how the key files work<\/p>\n
The Entry Point index.ts<\/strong><\/p>\nThe control’s lifecycle starts in init(), which calls loadContent():<\/p>\n
private async loadContent(): Promise<void> {\r\n\r\nthis.uiManager.setContent(\"\");\r\n\r\nconst validation = this.validationHandler.validateInputs();\r\n\r\nif (!validation.isValid) {\r\n\r\nthis.uiManager.setContent(\r\n\r\nthis.errorHandler.createErrorHtml(validation.errorMessage!)\r\n\r\n);\r\n\r\nreturn;\r\n\r\n}\r\n\r\nthis.uiManager.showSpinner();\r\n\r\ntry {\r\n\r\nconst response = await retrievePromptResponse({\r\n\r\nbaseUrl: validation.baseUrl!,\r\n\r\nmodelId: validation.modelId!,\r\n\r\nrequestInputs: { RecordId: validation.recordId! },\r\n\r\n});\r\n\r\nthis.uiManager.hideSpinner();\r\n\r\nawait this.handleResponse(response);\r\n\r\n} catch (error: unknown) {\r\n\r\nthis.uiManager.hideSpinner();\r\n\r\nthis.handleError(error);\r\n\r\n}\r\n\r\n}<\/pre>\nThe handleResponse method is where the branching happens:<\/p>\n
private async handleResponse(data: RetrievePromptResponseOutput): Promise<void> {\r\n\r\nif (data.error) {\r\n\r\nconst errorMessage = this.errorHandler.getErrorMessage(\r\n\r\ndata.error.status, data.error.message\r\n\r\n);\r\n\r\nthis.uiManager.setContent(this.errorHandler.createErrorHtml(errorMessage));\r\n\r\nreturn;\r\n\r\n}\r\n\r\n\/\/ File output takes priority\r\n\r\nconst file = data?.responsev2?.predictionOutput?.files?.[0];\r\n\r\nif (file) {\r\n\r\nawait this.handleFileOutput(file);\r\n\r\nreturn;\r\n\r\n}\r\n\r\n\/\/ Otherwise, render as text\/HTML\r\n\r\nthis.handleTextOutput(data?.responsev2?.predictionOutput?.structuredOutput?.text);\r\n\r\n}<\/pre>\nNotice the priority: files first, then text.<\/strong> If the Code Interpreter generates a PDF (Scenario 2), the files array is populated and the control renders a preview. If it returns HTML (Scenario 1), structuredOutput.text carries the chart markup.<\/p>\nThe API Layer: retrievePromptResponse.ts<\/strong><\/p>\nThis handles the actual HTTP call to the Dataverse Predict endpoint:<\/p>\n
export async function retrievePromptResponse({\r\n\r\nbaseUrl,\r\n\r\nmodelId,\r\n\r\nrequestInputs,\r\n\r\n}: RetrievePromptResponseInput): Promise<RetrievePromptResponseOutput> {\r\n\r\nconst url = `${baseUrl}\/api\/data\/v9.0\/msdyn_aimodels(${modelId})\/Microsoft.Dynamics.CRM.Predict`;\r\n\r\nconst body = {\r\n\r\nversion: \"2.0\",\r\n\r\nrequestv2: {\r\n\r\n\"@odata.type\": \"#Microsoft.Dynamics.CRM.expando\",\r\n\r\n...requestInputs,\r\n\r\n},\r\n\r\n};\r\n\r\nconst response = await fetch(url, {\r\n\r\nmethod: \"POST\",\r\n\r\nheaders: { \"Content-Type\": \"application\/json\" },\r\n\r\nbody: JSON.stringify(body),\r\n\r\n});\r\n\r\nconst data = (await response.json()) as RetrievePromptResponseOutput;\r\n\r\nreturn data;\r\n\r\n}<\/pre>\nThe endpoint follows the Dataverse bound action pattern: msdyn_aimodels({modelId})\/Microsoft.Dynamics.CRM.Predict. The requestv2 body uses the expando OData type\u00a0\u00a0 essentially an open dictionary\u00a0\u00a0 so you can pass any key-value pairs your prompt expects. In our case, that’s RecordId.<\/p>\n
File Handling: filePreviewHandler.ts<\/strong><\/p>\nWhen the prompt returns a file (Scenario 2), this handler takes over:<\/p>\n
public async generatePreview(\r\n\r\nbase64Content: string,\r\n\r\nmimeType: string,\r\n\r\nfileName: string\r\n\r\n): Promise<FilePreviewResult> {\r\n\r\nif (mimeType === \"application\/pdf\") {\r\n\r\nreturn this.generatePdfPreview(base64Content, fileName);\r\n\r\n} else if (mimeType.includes(\"wordprocessingml\") || mimeType.includes(\"msword\")) {\r\n\r\nreturn this.generateDocxPreview(base64Content, fileName);\r\n\r\n} else if (mimeType.includes(\"spreadsheetml\") || mimeType.includes(\"ms-excel\")) {\r\n\r\nreturn this.generateXlsxPreview(base64Content, fileName);\r\n\r\n}\r\n\r\n}<\/pre>\nFor PDFs it creates a blob URL from the base64 content and loads it in an iframe. For Word documents, mammoth converts .docx content to HTML. For Excel files, SheetJS (xlsx) handles the conversion. The control also generates a download button alongside the preview automatically.<\/p>\n
UI Rendering: uiManager.ts<\/strong><\/p>\nText output (Scenario 1) goes through setContent(), which sets the srcdoc attribute on an iframe:<\/p>\n
setContent(content: string): void {\r\n\r\nif (!content) {\r\n\r\nthis.iframe.srcdoc = \"\";\r\n\r\nreturn;\r\n\r\n}\r\n\r\nthis.iframe.srcdoc = content;\r\n\r\n}<\/pre>\nThis is what makes interactive charts possible. The entire HTML page\u00a0\u00a0 with inline JavaScript, CSS animations, and event handlers\u00a0\u00a0 runs inside a sandboxed iframe. Hover effects, filter toggles\u00a0\u00a0 everything works because it’s a living HTML page, not a static image.<\/p>\n
A Practical Issue We Hit: Binding the Record ID<\/strong><\/p>\nWhile setting up the control on the form, we noticed that the PCF manifest declares entityId (Record ID) as a SingleLine.Text input property. Since primary keys are GUID values, they do not appear in the text field dropdown during form configuration. when configuring the control on the form. To handle this, we made a small tweak in validationHandler.ts to directly read the record ID from the form context at runtime instead of relying on the bound field value:<\/p>\n
let recordId = this.context.parameters.entityId.raw ?? \"\";\r\n\r\nconst dummyGuid = \"00000000-0000-0000-0000-000000000000\";\r\n\r\nif (!recordId || !this.guidRegex.test(recordId) || recordId === dummyGuid) {\r\n\r\ntry {\r\n\r\nconst xrmPage = (Xrm as unknown as {\r\n\r\nPage?: { data?: { entity?: { getId?: () => string } } }\r\n\r\n})?.Page;\r\n\r\nconst xrmId = xrmPage?.data?.entity?.getId?.()\r\n\r\n?.replace(\/[{}]\/g, \"\") ?? \"\";\r\n\r\n\u00a0\r\n\r\nif (xrmId && this.guidRegex.test(xrmId)) {\r\n\r\nrecordId = xrmId;\r\n\r\n} else {\r\n\r\nerrors.push(this.context.resources.getString(\"Error_RecordId_Required\"));\r\n\r\n}\r\n\r\n} catch {\r\n\r\nerrors.push(this.context.resources.getString(\"Error_RecordId_Required\"));\r\n\r\n}\r\n\r\n}<\/pre>\nWith this in place, you set Record ID to 00000000-0000-0000-0000-000000000000 in the form designer, and the control reads the actual record ID at runtime from Xrm.<\/p>\n
Things to Keep in Mind<\/h3>\n
A few important observations from working with this setup in a live environment:<\/p>\n
Response time varies<\/strong>: The Predict call involves server-side Python execution so expect 5\u201315 seconds depending on data volume and prompt complexity.<\/p>\nAI Builder capacity matters<\/strong>: Each Predict call consumes AI Builder credits. For a high-traffic org, this adds up. Monitor consumption in the Power Platform Admin Center.<\/p>\nPrompt engineering matters<\/strong>: Getting the chart to look right proper bar sizing, tooltip positioning, responsive layout took several iterations. The PCF code itself didn’t need changes; all the tuning was in the prompt text.<\/p>\nOne PCF, multiple purposes<\/strong>The same deployed control can support entirely different use cases simply by changing the Model ID and prompt configuration. Swap the Model ID on a different form, point it to a different prompt, and you get entirely different output. The control is genuinely scenario-agnostic.<\/p>\nConclusion:<\/h3>\n
Through this implementation, we learned that the Code Interpreter PCF control is not just limited to charts or proposals. Any scenario where you need live, context-aware content generated directly on a Dynamics 365 form is a valid use case. Think case summaries on a Case record, contract drafts on a Quote record, or account health reports on an Account record. As long as the prompt has access to the right Dataverse tables and Code Interpreter is enabled, the same control can support completely different experiences simply by swapping the Model ID.<\/p>\n","protected":false},"excerpt":{"rendered":"
We spend a lot of time working inside Dynamics 365 CRM forms. Accounts, Opportunities, Cases and other commonly used entities. One area that always had room for improvement was how data gets presented within those forms. For example, if a sales manager wants to see the pipeline breakdown for a specific Account, they typically have\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3357,2361],"tags":[3358],"class_list":["post-44658","post","type-post","status-publish","format-standard","hentry","category-pcf-control","category-technical","tag-build-ai-generated-charts-and-pdfs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/44658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=44658"}],"version-history":[{"count":5,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/44658\/revisions"}],"predecessor-version":[{"id":44681,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/44658\/revisions\/44681"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=44658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=44658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=44658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"PCF](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/05\/How-to-Build-AI-Generated-Charts-and-PDFs-in-Dynamics-365-Using-a-PCF-Control.png\")
We spend a lot of time working inside Dynamics 365 CRM forms. Accounts, Opportunities, Cases and other commonly used entities. One area that always had room for improvement was how data gets presented within those forms. For example, if a sales manager wants to see the pipeline breakdown for a specific Account, they typically have to switch to a dashboard or open Power BI. If they need a sales proposal for an Opportunity, it has to be created manually outside the record. All of this happens outside the context of the record they are already working in.<\/p>\n![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/05\/PCF-Control-1.jpg\")
<\/p>\n![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/05\/PCF-Control-2.jpg\")
<\/p>\n![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/05\/PCF-Control-3.jpg\")
<\/p>\n