{"id":44318,"date":"2026-04-10T17:02:36","date_gmt":"2026-04-10T11:32:36","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=44318"},"modified":"2026-04-10T17:02:36","modified_gmt":"2026-04-10T11:32:36","slug":"connecting-power-apps-code-app-with-microsoft-copilot-studio-agent","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2026\/04\/connecting-power-apps-code-app-with-microsoft-copilot-studio-agent\/","title":{"rendered":"Connecting Power Apps Code App with Microsoft Copilot Studio Agent"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignnone size-full wp-image-44322\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Connecting-Power-Apps-Code-App-with-Microsoft-Copilot-Studio-Agent.png\" alt=\"Power Apps Code App\" width=\"2100\" height=\"1200\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Connecting-Power-Apps-Code-App-with-Microsoft-Copilot-Studio-Agent.png 2100w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Connecting-Power-Apps-Code-App-with-Microsoft-Copilot-Studio-Agent-300x171.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Connecting-Power-Apps-Code-App-with-Microsoft-Copilot-Studio-Agent-1024x585.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Connecting-Power-Apps-Code-App-with-Microsoft-Copilot-Studio-Agent-768x439.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Connecting-Power-Apps-Code-App-with-Microsoft-Copilot-Studio-Agent-1536x878.png 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Connecting-Power-Apps-Code-App-with-Microsoft-Copilot-Studio-Agent-2048x1170.png 2048w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Connecting-Power-Apps-Code-App-with-Microsoft-Copilot-Studio-Agent-660x377.png 660w\" sizes=\"(max-width: 2100px) 100vw, 2100px\" \/>As we previously learned how to configure and set up a Code App component in our earlier blog, we will now extend that implementation further. You can refer to the earlier blog on <a href=\"https:\/\/www.inogic.com\/blog\/2025\/12\/building-standalone-apps-with-power-apps-code-apps-using-dataverse-and-office-365-users-connectors-part-1\/\" target=\"_blank\" rel=\"noopener\">Building Standalone Apps with Power Apps Code Apps: Using Dataverse and Office 365 Users Connectors<\/a> for the initial setup.<\/p>\n<p>In this blog, we will focus on connecting a <strong>Code App with a Microsoft Copilot Studio agent<\/strong>, enabling users to interact with data using natural language instead of traditional data sources.<\/p>\n<h3><strong>Client Requirement<\/strong><\/h3>\n<p>The client is a <strong>Sales Representative<\/strong> who needs quick access to CRM data without navigating through multiple screens.<\/p>\n<p>They want to query data using natural language, such as:<\/p>\n<ul>\n<li>\u201cShortlist all the Appointments scheduled between specific dates\u201d<\/li>\n<li>\u201cShortlist all the Opportunities in New York City\u201d<\/li>\n<li>\u201cShortlist all the existing Contacts in Seattle\u201d<\/li>\n<\/ul>\n<p>The goal is to provide a <strong>chat-based assistant<\/strong> that fetches relevant data instantly using Copilot.<\/p>\n<h3><strong>Prerequisites<\/strong><\/h3>\n<p>Before starting, ensure:<\/p>\n<ul>\n<li>You have access to <strong>Power Platform Admin Center<\/strong><\/li>\n<li>A <strong>published Copilot Studio agent<\/strong><\/li>\n<li>Power Apps CLI (pac) installed<\/li>\n<li>Appropriate admin permissions on the environment<\/li>\n<\/ul>\n<h3>Step 1: Initialize Code App Project<\/h3>\n<p>Convert your React project into a Power Apps Code App to run following command in VS Code terminal.<\/p>\n<p><span style=\"color: #339966;\"><em>pac code init &#8211;displayName &#8220;Code App Copilot&#8221; &#8211;description &#8220;React Code App with Copilot and Dataverse&#8221;<\/em><\/span><\/p>\n<h3>Step 2:Install the Power Apps SDK using following command<\/h3>\n<p><span style=\"color: #339966;\"><em>npm install @microsoft\/power-apps<\/em><\/span><\/p>\n<h3>Step 3: Add Copilot Studio as Data Source to run following command.<\/h3>\n<p><span style=\"color: #339966;\"><em>pac code add-data-source -a &#8220;shared_microsoftcopilotstudio&#8221; -c &#8220;&lt;connectionId&gt;&#8221;<\/em><\/span><\/p>\n<p><strong><em>Note: Ensure that your agent is in Published in Copilot Studio.<\/em><\/strong><\/p>\n<p>Step 4: Select Environment &#8211; ensure you are logged in and select the target environment:<\/p>\n<p><span style=\"color: #339966;\"><em>pac org select &#8211;environment &lt;environment ID&gt;<\/em><\/span><\/p>\n<h3>Step 5: Navigate to <a href=\"https:\/\/admin.powerplatform.microsoft.com\" target=\"_blank\" rel=\"noopener\">Admin Center<\/a> &gt; Environments &gt; Settings &gt; Product &gt; Features and enable Code Apps option as shown in screenshot below:<\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-44323\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-1.jpg\" alt=\"Power Apps Code App\" width=\"1365\" height=\"633\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-1.jpg 1365w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-1-300x139.jpg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-1-1024x475.jpg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-1-768x356.jpg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-1-660x306.jpg 660w\" sizes=\"(max-width: 1365px) 100vw, 1365px\" \/><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-44324\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-2.jpg\" alt=\"Power Apps Code App\" width=\"526\" height=\"213\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-2.jpg 526w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-2-300x121.jpg 300w\" sizes=\"(max-width: 526px) 100vw, 526px\" \/><\/p>\n<h3>Step 6: Implement Copilot Chat Component<\/h3>\n<p>Below is the working TypeScript implementation to establish conversation with the agent:<\/p>\n<pre class=\"lang:css gutter:true start:1\">export const CopilotChat = () =&gt; {\r\n\r\nconst [messages, setMessages] = useState&lt;\r\n\r\n{ role: \"user\" | \"copilot\"; text: string }[]\r\n\r\n&gt;([]);\r\n\r\nconst [input, setInput] = useState(\"\");\r\n\r\nconst agentSchemaName = 'cr720_agent';\r\n\r\nconst [conversationId, setConversationId] = useState&lt;string | null&gt;(null);\r\n\r\n\u00a0\r\n\r\nconst sendMessage = async () =&gt; {\r\n\r\nif (!input) return;\r\n\r\n\u00a0\r\n\r\ntry {\r\n\r\nsetMessages(prev =&gt; [...prev, { role: \"user\", text: input }, { role: \"copilot\", text: \"Thinking...\" }]);\r\n\r\n\u00a0\r\n\r\nconst response = await MicrosoftCopilotStudioService.ExecuteCopilotAsyncV2(\r\n\r\nagentSchemaName,\r\n\r\n{\r\n\r\nmessage: input,\r\n\r\nnotificationUrl: \"https:\/\/notificationurlplaceholder\",\r\n\r\nagentName: agentSchemaName,\r\n\r\nconversationId: conversationId || undefined,\r\n\r\n}\r\n\r\n) as CopilotResponse;\r\n\r\n\u00a0\r\n\r\nconst copilotText =\r\n\r\nresponse.data?.responses?.[0] ?? \"No response from Copilot.\";\r\n\r\n\u00a0\r\n\r\nif (response.data?.conversationId) {\r\n\r\nsetConversationId(response.data.conversationId);\r\n\r\n}\r\n\r\n\u00a0\r\n\r\nsetMessages(prev =&gt; {\r\n\r\nconst updated = [...prev];\r\n\r\nupdated[updated.length - 1] = {\r\n\r\nrole: \"copilot\",\r\n\r\ntext: copilotText\r\n\r\n};\r\n\r\nreturn updated;\r\n\r\n});\r\n\r\n\u00a0\r\n\r\n} catch (error) {\r\n\r\nconsole.error(\"Error calling Copilot API:\", error);\r\n\r\n\u00a0\r\n\r\nsetMessages(prev =&gt; {\r\n\r\nconst updated = [...prev];\r\n\r\nupdated[updated.length - 1] = {\r\n\r\nrole: \"copilot\",\r\n\r\ntext: \"Error getting response.\"\r\n\r\n};\r\n\r\nreturn updated;\r\n\r\n});\r\n\r\n}\r\n\r\n\u00a0\r\n\r\nsetInput(\"\");\r\n\r\n};\r\n\r\n\u00a0\r\n\r\nreturn (\r\n\r\n&lt;div&gt;\r\n\r\n&lt;h3&gt;Copilot Assistant&lt;\/h3&gt;\r\n\r\n\u00a0\r\n\r\n&lt;div style={{\r\n\r\nheight: \"350px\",\r\n\r\noverflowY: \"auto\",\r\n\r\nborder: \"1px solid #ccc\",\r\n\r\npadding: \"10px\",\r\n\r\nmarginBottom: \"10px\",\r\n\r\nwidth: \"150vh\",\r\n\r\n}}&gt;\r\n\r\n{messages.map((msg, index) =&gt; (\r\n\r\n&lt;div key={index} style={{ marginBottom: \"10px\" }}&gt;\r\n\r\n&lt;strong&gt;{msg.role === \"user\" ? \"You\" : \"Copilot\"}:&lt;\/strong&gt;\r\n\r\n\u00a0\r\n\r\n{msg.role === \"copilot\" ? (\r\n\r\n&lt;ReactMarkdown&gt;{msg.text}&lt;\/ReactMarkdown&gt;\r\n\r\n) : (\r\n\r\n&lt;span&gt;{msg.text}&lt;\/span&gt;\r\n\r\n)}\r\n\r\n&lt;\/div&gt;\r\n\r\n))}\r\n\r\n&lt;\/div&gt;\r\n\r\n\u00a0\r\n\r\n&lt;TextField\r\n\r\nvalue={input}\r\n\r\nonChange={(_, val) =&gt; setInput(val || \"\")}\r\n\r\nplaceholder=\"Ask Copilot...\"\r\n\r\n\/&gt;\r\n\r\n\u00a0\r\n\r\n&lt;PrimaryButton\r\n\r\ntext=\"Send\"\r\n\r\nonClick={sendMessage}\r\n\r\nstyle={{ marginTop: \"10px\" }}\r\n\r\n\/&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n);\r\n\r\n};<\/pre>\n<h3>Step 7: Push Code App<\/h3>\n<p>Once configured, your project structure will look like:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-44325\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-3.jpg\" alt=\"Power Apps Code App \" width=\"960\" height=\"675\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-3.jpg 960w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-3-300x211.jpg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-3-768x540.jpg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-3-660x464.jpg 660w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-3-200x140.jpg 200w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/>Key files:<\/p>\n<ul>\n<li>CopilotChat.tsx &#8211; Chat UI logic<\/li>\n<li>MicrosoftCopilotStudioModel.ts &#8211; data structures (TypeScript interfaces\/types) used when interacting with the Copilot API.<\/li>\n<li>MicrosoftCopilotStudioService.ts &#8211; MicrosoftCopilotStudioService.ts<\/li>\n<li>power.config.json \u2192 Configuration<\/li>\n<li>vite.config.ts \u2192 Build setup<\/li>\n<\/ul>\n<p>Ensure you are logged into PAC CLI and push your code:<\/p>\n<p><span style=\"color: #339966;\"><em>pac code push<\/em><\/span><\/p>\n<h3>Step 9: Allow Connection Permissions<\/h3>\n<p>When opening the app, Allow Code App Copilot to access your data by click on Allow button.<\/p>\n<h3><img decoding=\"async\" class=\"alignnone size-full wp-image-44326\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-4.jpg\" alt=\"Power Apps Code App\" width=\"1367\" height=\"637\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-4.jpg 1367w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-4-300x140.jpg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-4-1024x477.jpg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-4-768x358.jpg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-4-660x308.jpg 660w\" sizes=\"(max-width: 1367px) 100vw, 1367px\" \/><strong>Final Output<\/strong><\/h3>\n<p>The application allows users to:<\/p>\n<ul>\n<li>Interacts with the app using <strong>simple text queries<\/strong><\/li>\n<li>Copilot processes queries and returns <strong>relevant data instantly<\/strong><\/li>\n<li>Responses displayed in a <strong>chat-like conversational format<\/strong><\/li>\n<li>Supports queries like:<\/li>\n<\/ul>\n<p>\u201cShortlist appointments between &lt;Date Range&gt;\u201d<\/p>\n<h3><img decoding=\"async\" class=\"alignnone size-full wp-image-44327\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-5.jpg\" alt=\"Power Apps Code App\" width=\"1367\" height=\"638\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-5.jpg 1367w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-5-300x140.jpg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-5-1024x478.jpg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-5-768x358.jpg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2026\/04\/Power-Apps-Code-5-660x308.jpg 660w\" sizes=\"(max-width: 1367px) 100vw, 1367px\" \/><strong>Conclusion<\/strong><\/h3>\n<p>Easy integration of Power Apps Code App with AI capabilities using Microsoft Copilot Studio Agent.<\/p>\n<h3><strong><u>FAQs<\/u><\/strong><\/h3>\n<p><strong>What is a Power Apps Code App?<\/strong><\/p>\n<p>A Power Apps Code App is a developer-centric application model that allows you to build custom apps using modern frameworks like React while still integrating deeply with the Power Platform ecosystem. It enables seamless connectivity with Dataverse, connectors, and external services.<\/p>\n<p><strong>What is Microsoft Copilot Studio used for in Power Apps?<\/strong><\/p>\n<p>Microsoft Copilot Studio is used to build intelligent conversational agents that can understand natural language and return contextual responses. In Power Apps Code Apps, it enables chat-based interaction with CRM or business data.<\/p>\n<p><strong>Can Power Apps Code Apps use natural language queries?<\/strong><\/p>\n<p>Yes. By integrating Copilot Studio, users can query data using natural language such as:<\/p>\n<ul>\n<li>\u201cShow appointments between date range\u201d<\/li>\n<li>\u201cList opportunities in New York\u201d<\/li>\n<li>\u201cGet contacts in Seattle\u201d<\/li>\n<\/ul>\n<p>The Copilot agent interprets these queries and returns structured data.<\/p>\n<p><strong>What are the prerequisites to integrate Copilot Studio with Code Apps?<\/strong><\/p>\n<p>To integrate successfully, you need:<\/p>\n<ul>\n<li>Access to Power Platform Admin Center<\/li>\n<li>A published Microsoft Copilot Studio agent<\/li>\n<li>Installed Power Apps CLI (PAC)<\/li>\n<li>Proper environment admin permissions<\/li>\n<li>A configured Power Apps Code App project<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>As we previously learned how to configure and set up a Code App component in our earlier blog, we will now extend that implementation further. You can refer to the earlier blog on Building Standalone Apps with Power Apps Code Apps: Using Dataverse and Office 365 Users Connectors for the initial setup. In this blog,\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2026\/04\/connecting-power-apps-code-app-with-microsoft-copilot-studio-agent\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[3313,44,2361],"tags":[],"class_list":["post-44318","post","type-post","status-publish","format-standard","hentry","category-microsoft-copilot-studio","category-power-apps","category-technical"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/44318","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=44318"}],"version-history":[{"count":3,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/44318\/revisions"}],"predecessor-version":[{"id":44330,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/44318\/revisions\/44330"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=44318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=44318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=44318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}