{
  "version": 1,
  "generatedAt": "2026-09-21T00:00:00.000Z",
  "components": [
    {
      "slug": "my-planner-projects",
      "name": "pnp-spfx-copilot-components-my-planner-projects",
      "title": "My Planner Projects Agent",
      "shortDescription": "An SPFx 1.24 Copilot declarative agent that reads the current user's Microsoft Planner projects and prepares new projects for explicit creation.",
      "longDescription": [
        "My Planner Projects Agent is a Microsoft 365 Copilot declarative agent built with SharePoint Framework 1.24 that helps users discover and manage their Microsoft Planner projects through natural language interactions.",
        "The agent lists accessible Planner projects in an interactive DetailsList when multiple projects match a query, shows a focused summary card when a single project matches, and highlights projects with incomplete tasks that are overdue or due within seven days. It supports filtering by creation date, task activity, and due-date periods, and can find recently active, newly created, or next-due projects with optional result limits.",
        "Beyond project discovery, the agent prepares new projects for explicit creation using natural-language requests. It supports creating blank Basic plans or editable templates including Simple Plan, Project Management, Software Development, Business Plan, and Employee Onboarding. The agent creates the selected plan, buckets, scheduled tasks, and optional self-assignments only after an explicit button click, reporting partial creation progress and continuing remaining setup without duplicating blueprint buckets or tasks."
      ],
      "createdAt": "2026-09-21",
      "updatedAt": "2026-09-21",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "joaojmendes",
          "pictureUrl": "https://github.com/joaojmendes.png",
          "name": "João Mendes"
        }
      ],
      "references": [
        {
          "name": "Build agents for Microsoft 365 Copilot",
          "description": "Extend Microsoft 365 Copilot with declarative agents, plugins, and connectors.",
          "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/"
        },
        {
          "name": "Overview of the SharePoint Framework",
          "description": "Learn about the SharePoint Framework client-side development model.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        },
        {
          "name": "Use Microsoft Graph in your solution",
          "description": "Use Microsoft Graph from SharePoint Framework solutions to access Microsoft 365 data.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis"
        },
        {
          "name": "Microsoft Planner documentation",
          "description": "Learn how to use Microsoft Planner to organize team tasks and projects.",
          "url": "https://learn.microsoft.com/microsoft-365/planner/"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/my-planner-projects",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/my-planner-projects",
      "preview": {
        "alt": "My Planner Projects Agent gallery preview showing Planner project discovery interface in Microsoft 365 Copilot.",
        "width": 3236,
        "height": 2484,
        "src640": "generated/previews/my-planner-projects-640.webp",
        "src960": "generated/previews/my-planner-projects-960.webp"
      },
      "gallery": [
        {
          "alt": "My Planner Projects Agent gallery preview showing Planner project discovery interface in Microsoft 365 Copilot.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/my-planner-projects/assets/preview.png"
        },
        {
          "alt": "Fullscreen My Planner Projects Agent displaying detailed project view with tasks in Microsoft 365 Copilot.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/my-planner-projects/assets/expand.png"
        },
        {
          "alt": "My Planner Projects Agent Gantt chart view showing project timeline and task scheduling in Microsoft 365 Copilot.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/my-planner-projects/assets/gantt.png"
        }
      ]
    },
    {
      "slug": "zava-customer-resolution-center",
      "name": "pnp-sp-dev-spfx-copilot-components-zava-customer-resolution-center",
      "title": "Zava Customer Resolution Center",
      "shortDescription": "An evidence-led customer resolution Copilot App with 23 tools and four connected workspaces.",
      "longDescription": [
        "Zava Customer Resolution Center turns fragmented customer exceptions into inspectable resolution work across triage, diagnostics, planning, incidents, recovery, communication, verification, and learning.",
        "Twenty-two operational components and one capability explorer continue into My Queue, Customer 360, Resolution Room, and Service Operations through one coherent reference story.",
        "The sample is deterministic, offline, responsive, and explicit that confirmed actions are session-only. Verified facts, calculations, inferences, recommendations, human decisions, and actions remain distinct."
      ],
      "createdAt": "2026-08-31",
      "updatedAt": "2026-09-21",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.3",
      "authors": [
        {
          "gitHubAccount": "vesajuvonen",
          "pictureUrl": "https://github.com/vesajuvonen.png",
          "name": "Vesa Juvonen"
        }
      ],
      "references": [
        {
          "name": "Build your first SharePoint Copilot App",
          "description": "Build and package an SPFx Copilot Component.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app"
        },
        {
          "name": "D3",
          "description": "Data-driven scales, shapes, and geographic projections used by the offline visualizations.",
          "url": "https://d3js.org/"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/zava-customer-resolution-center",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/zava-customer-resolution-center",
      "preview": {
        "alt": "Resolution Room connecting verified and contrary evidence to a safe resolution path, SLA clock, incident signal, and expert swarm",
        "width": 1600,
        "height": 1985,
        "src640": "generated/previews/zava-customer-resolution-center-640.webp",
        "src960": "generated/previews/zava-customer-resolution-center-960.webp"
      },
      "gallery": [
        {
          "alt": "Resolution Room connecting verified and contrary evidence to a safe resolution path, SLA clock, incident signal, and expert swarm",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-customer-resolution-center/assets/fullscreen-resolution-room.png"
        },
        {
          "alt": "Service Operations command view with demand river, projected global customer map, driver Pareto, and recovery outcome matrix",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-customer-resolution-center/assets/fullscreen-service-operations.png"
        },
        {
          "alt": "Customer 360 relationship view with promise constellation, commitment runway, timeline, and recovery consequences",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-customer-resolution-center/assets/fullscreen-customer-360.png"
        },
        {
          "alt": "My Queue judgment cockpit with ranked customer cases, SLA consequence clock, and agent-prepared work",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-customer-resolution-center/assets/fullscreen-my-queue.png"
        },
        {
          "alt": "Inline customer issue triage with resolved customer, product, impact, language, and reviewed case rationale",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-customer-resolution-center/assets/inline-triage-customer-issue.png"
        },
        {
          "alt": "Inline diagnostic evidence ledger comparing firmware, network, and entitlement hypotheses",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-customer-resolution-center/assets/inline-diagnose-case-evidence.png"
        },
        {
          "alt": "Inline recovery decision comparing cost, authority, precedent, and expected trust outcome",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-customer-resolution-center/assets/inline-service-recovery.png"
        },
        {
          "alt": "Inline service performance analysis with demand river and recurring driver Pareto",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-customer-resolution-center/assets/inline-service-performance.png"
        },
        {
          "alt": "Searchable customer resolution scenario explorer with safe prompt preview",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-customer-resolution-center/assets/inline-capability-explorer.png"
        },
        {
          "alt": "Dark Service Operations view with projected global map and exact-value analytical tables",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-customer-resolution-center/assets/fullscreen-service-operations-dark.png"
        }
      ]
    },
    {
      "slug": "agents-explorer",
      "name": "pnp-spfx-copilot-components-agents-explorer",
      "title": "Agents Explorer - Discover Copilot Agents in Copilot Chat",
      "shortDescription": "SPFx Copilot Component that brings a tenant-wide, live view of Copilot Agents (Power Platform / Copilot Studio bots) into the Microsoft 365 Copilot canvas.",
      "longDescription": [
        "Agents Explorer is an SPFx Copilot Component that brings a tenant-wide view of Copilot Agents (Power Platform / Copilot Studio bots) directly into the Microsoft 365 Copilot canvas. A declarative agent (\"AgentsExplorer Agent\") calls it as a tool, and it renders a live, interactive grid of agents inline in the conversation or as a fullscreen overview, reading real Dataverse data across every Power Platform environment the signed-in user can reach.",
        "From the rendered UI, the signed-in user can see every Copilot Agent published across all Dataverse environments they have access to (with icon, owner, last-modified date, and published/not-published status), filter to agents they own, agents shared with them, or all agents, search by name/owner/schema name (with the search term extracted automatically from their Copilot request), open any agent directly in Copilot Studio, and expand the inline card to a fullscreen view for browsing larger agent lists."
      ],
      "createdAt": "2026-09-06",
      "updatedAt": "2026-09-06",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-Copilot-Component",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "siddharth-vaghasia",
          "pictureUrl": "https://github.com/siddharth-vaghasia.png",
          "name": "Siddharth Vaghasia"
        }
      ],
      "references": [
        {
          "name": "Build agents for Microsoft 365 Copilot",
          "description": "Extend Microsoft 365 Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.",
          "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/"
        },
        {
          "name": "Overview of the SharePoint Framework",
          "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        },
        {
          "name": "Use Microsoft Graph in your solution",
          "description": "Learn how SharePoint Framework solutions can use Microsoft Graph APIs via brokered, SSO-based calls.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/agents-explorer",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/agents-explorer",
      "preview": {
        "alt": "Component in Action running in Microsoft 365 Copilot",
        "width": 1848,
        "height": 982,
        "src640": "generated/previews/agents-explorer-640.webp",
        "src960": "generated/previews/agents-explorer-960.webp"
      },
      "gallery": [
        {
          "alt": "Component in Action running in Microsoft 365 Copilot",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/agents-explorer/assets/3.png"
        },
        {
          "alt": "Inline Copilot Agents Explorer grid in the Copilot Component Workbench",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/agents-explorer/assets/1.png"
        },
        {
          "alt": "Debug panel showing the AgentsExplorerTool invoked with ownershipFilter and searchText arguments",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/agents-explorer/assets/2.png"
        }
      ]
    },
    {
      "slug": "negotiation-lab",
      "name": "pnp-spfx-copilot-components-negotiation-lab",
      "title": "Negotiation Lab",
      "shortDescription": "Augment SPFx React components with Copilot conversations, structured replies and APVEE-provisioned SharePoint storage.",
      "longDescription": [
        "Learn how to provision SharePoint lists with APVEE from an SPFx Copilot component, send messages and structured context to Microsoft 365 Copilot, and display generated answers and proposals inside React. Built with SPFx 1.24.0-beta.3 and React 18.",
        "Negotiation Lab demonstrates the integration through SaaS renewal, total job offer and service recovery scenarios. Users ask questions, edit terms and confirm outcomes, with a saved Cool, Medium or Hard counterpart style and practice state stored in two SharePoint lists."
      ],
      "createdAt": "2026-08-03",
      "updatedAt": "2026-09-06",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.3",
      "authors": [
        {
          "gitHubAccount": "ferrarirosso",
          "pictureUrl": "https://github.com/ferrarirosso.png",
          "name": "Nello D'Andrea"
        }
      ],
      "references": [
        {
          "name": "Overview of SharePoint Copilot Apps",
          "description": "Extend Microsoft 365 Copilot with interactive experiences built with the SharePoint Framework.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps"
        },
        {
          "name": "Build your first SharePoint Copilot App",
          "description": "Create, test, package, and deploy a SharePoint Copilot App.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app"
        },
        {
          "name": "Tenant-scoped deployment",
          "description": "Deploy a SharePoint Framework solution once and make it available across the tenant.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/tenant-scoped-deployment"
        },
        {
          "name": "APVEE M365 Actionable Provisioning",
          "description": "Provision a small SharePoint schema from a declarative action plan.",
          "url": "https://www.npmjs.com/package/@apvee/m365-actionable-provisioning"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/negotiation-lab",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/negotiation-lab",
      "preview": {
        "alt": "Counteroffer preview showing CHF 108,000, 24 months and 16 support hours with explicit confirmation actions",
        "width": 677,
        "height": 671,
        "src640": "generated/previews/negotiation-lab-640.webp",
        "src960": "generated/previews/negotiation-lab-960.webp"
      },
      "gallery": [
        {
          "alt": "Counteroffer preview showing CHF 108,000, 24 months and 16 support hours with explicit confirmation actions",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/negotiation-lab/assets/preview.png"
        },
        {
          "alt": "Copilot answers a renewal question inside the Negotiation Lab React component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/negotiation-lab/assets/ask-counterpart.png"
        },
        {
          "alt": "Recorded agreement with the same terms as the confirmed counteroffer",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/negotiation-lab/assets/agreement.png"
        },
        {
          "alt": "Three negotiation scenarios and the Cool, Medium or Hard style selector",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/negotiation-lab/assets/choose-scenario.png"
        },
        {
          "alt": "Question entered in the component before asking the counterpart",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/negotiation-lab/assets/ask-question.png"
        },
        {
          "alt": "Separate offer-editing example with an unsent draft of CHF 90,000, 36 months and 16 support hours",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/negotiation-lab/assets/make-offer.png"
        }
      ]
    },
    {
      "slug": "zava-procurement-command-center",
      "name": "pnp-sp-dev-spfx-copilot-components-zava-procurement-command-center",
      "title": "Zava Procurement Command Center",
      "shortDescription": "An evidence-led procurement Copilot App with 22 routed components and four connected workspaces.",
      "longDescription": [
        "Zava Procurement Command Center turns natural-language buying intent into focused, inspectable work across guided intake, policy, demand aggregation, sourcing, supplier evaluation, risk, award, contracts, invoices, leakage, and realized value.",
        "Twenty-one operational components and one capability explorer continue into My Requests, Sourcing Workbench, Supplier 360, and Spend Command. The connected rugged-device story preserves request, event, supplier, policy, award, invoice, and value context across roles.",
        "The sample is deterministic, offline, responsive, and explicit that confirmed actions are session-only demonstrations. D3-derived decision visuals include keyboard interaction, accessible summaries, and exact-value alternatives."
      ],
      "createdAt": "2026-08-31",
      "updatedAt": "2026-08-31",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.3",
      "authors": [
        {
          "gitHubAccount": "vesajuvonen",
          "pictureUrl": "https://github.com/vesajuvonen.png",
          "name": "Vesa Juvonen"
        }
      ],
      "references": [
        {
          "name": "Build your first SharePoint Copilot App",
          "description": "Build and package an SPFx Copilot Component.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app"
        },
        {
          "name": "SharePoint Framework overview",
          "description": "Overview of SharePoint Framework solutions.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        },
        {
          "name": "D3",
          "description": "Data-driven scales and shapes used by the local decision visualizations.",
          "url": "https://d3js.org/"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/zava-procurement-command-center",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/zava-procurement-command-center",
      "preview": {
        "alt": "Full-screen Sourcing Workbench with total-value supplier landscape, exact bid evidence, policy readiness, and award milestones",
        "width": 1440,
        "height": 1431,
        "src640": "generated/previews/zava-procurement-command-center-640.webp",
        "src960": "generated/previews/zava-procurement-command-center-960.webp"
      },
      "gallery": [
        {
          "alt": "Full-screen Sourcing Workbench with total-value supplier landscape, exact bid evidence, policy readiness, and award milestones",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-procurement-command-center/assets/ux-sourcing-workbench.png"
        },
        {
          "alt": "Inline purchase intent experience for a rugged-device outcome with governed draft and review progression",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-procurement-command-center/assets/ux-inline-CreatePurchaseIntent.png"
        },
        {
          "alt": "Inline D3 supplier total-value landscape with editable risk weight, confidence bubbles, and exact bid table",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-procurement-command-center/assets/ux-inline-CompareSupplierBids.png"
        },
        {
          "alt": "Inline split-award review showing cost, blended risk, delivery confidence, policy evidence, and confirmation control",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-procurement-command-center/assets/ux-inline-ReviewSupplierAward.png"
        },
        {
          "alt": "Inline invoice exception review reconciling purchase order, receipt, invoice, freight variance, and tolerance",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-procurement-command-center/assets/ux-inline-ResolveInvoiceException.png"
        },
        {
          "alt": "Full-screen Supplier 360 workspace connecting contract notice, quality, evidence, ownership, and supply dependency",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-procurement-command-center/assets/ux-supplier-360.png"
        },
        {
          "alt": "Full-screen Spend Command workspace tracing identified opportunity through negotiated, contracted, and realized value",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-procurement-command-center/assets/ux-spend-command.png"
        },
        {
          "alt": "Full-screen My Requests workspace showing the rugged-device outcome path, evidence status, approval, and delivery promise",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-procurement-command-center/assets/ux-my-requests.png"
        },
        {
          "alt": "Sourcing Workbench adapted to a narrow mobile viewport with scrollable navigation and readable supplier evidence",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-procurement-command-center/assets/ux-sourcing-mobile.png"
        },
        {
          "alt": "Sourcing Workbench in dark theme with accessible supplier geometry, policy states, evidence table, and milestones",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-procurement-command-center/assets/ux-sourcing-dark.png"
        },
        {
          "alt": "Inline searchable catalog of twenty-one procurement operations with role questions and safe capability previews",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-procurement-command-center/assets/ux-inline-ExploreAgentCapabilities.png"
        }
      ]
    },
    {
      "slug": "zava-revenue-deal-room",
      "name": "pnp-sp-dev-spfx-copilot-components-zava-revenue-deal-room",
      "title": "Zava Revenue Deal Room",
      "shortDescription": "An evidence-led revenue Copilot App with 21 intent-routed components and four connected workspaces.",
      "longDescription": [
        "Zava Revenue Deal Room turns natural-language sales intent into focused, inspectable work across account discovery, qualification, buyer influence, risk, commitments, proposals, commercial scenarios, exceptions, forecast, and customer success handoff.",
        "Twenty operational components and one capability explorer continue into My Deals, Deal Room, Commercial Desk, and Revenue Command. The connected Contoso story preserves evidence and decisions from relationship access through defensible commit.",
        "The sample is deterministic, offline, responsive, and explicit that confirmed actions are session-only demonstrations. Buyer facts, seller judgment, stale evidence, deterministic output, contrary evidence, and inference remain visibly distinct."
      ],
      "createdAt": "2026-08-31",
      "updatedAt": "2026-08-31",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.3",
      "authors": [
        {
          "gitHubAccount": "vesajuvonen",
          "pictureUrl": "https://github.com/vesajuvonen.png",
          "name": "Vesa Juvonen"
        }
      ],
      "references": [
        {
          "name": "Build your first SharePoint Copilot App",
          "description": "Build and package an SPFx Copilot Component.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app"
        },
        {
          "name": "SharePoint Framework overview",
          "description": "Overview of SharePoint Framework solutions.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        },
        {
          "name": "D3",
          "description": "Data-driven scales, shapes, and geographic projections used by the local visualizations.",
          "url": "https://d3js.org/"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/zava-revenue-deal-room",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/zava-revenue-deal-room",
      "preview": {
        "alt": "Full-screen Deal Room workspace coordinating Contoso relationship influence, evidence, and credible close range",
        "width": 1440,
        "height": 2139,
        "src640": "generated/previews/zava-revenue-deal-room-640.webp",
        "src960": "generated/previews/zava-revenue-deal-room-960.webp"
      },
      "gallery": [
        {
          "alt": "Full-screen Deal Room workspace coordinating Contoso relationship influence, evidence, and credible close range",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-revenue-deal-room/assets/fullscreen-deal-room.png"
        },
        {
          "alt": "Inline commercial scenario studio with editable inputs, margin guardrail, authority, forecast, and outcome contour",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-revenue-deal-room/assets/inline-commercial-scenario.png"
        },
        {
          "alt": "Inline buying committee influence orbit with customer authority, stance, relationship strength, and evidence",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-revenue-deal-room/assets/inline-buying-committee.png"
        },
        {
          "alt": "Inline searchable Revenue Deal Room capability catalog with business outcomes and safe scenario previews",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-revenue-deal-room/assets/inline-capability-explorer.png"
        },
        {
          "alt": "Deal Room workspace adapted to a narrow mobile viewport with scrollable navigation and readable evidence",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-revenue-deal-room/assets/fullscreen-deal-room-mobile.png"
        },
        {
          "alt": "Full-screen Deal Room in dark theme with accessible relationship orbit, evidence provenance, and status colors",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-revenue-deal-room/assets/fullscreen-deal-room-dark.png"
        },
        {
          "alt": "Inline D3 projected global opportunity map with regional value bubbles, slip risk, selection, and exact table values",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-revenue-deal-room/assets/inline-global-opportunity-map.png"
        },
        {
          "alt": "Inline D3 evidence-weighted pipeline chart with stage volume, buyer-proof quality, and intervention legend",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-revenue-deal-room/assets/inline-pipeline-quality.png"
        },
        {
          "alt": "Full-screen My Deals dashboard with D3 pipeline, forecast movement, global opportunity map, and owned close path",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-revenue-deal-room/assets/fullscreen-my-deals-analytics.png"
        },
        {
          "alt": "Full-screen Revenue Command dashboard with D3 pipeline, regional opportunity map, forecast bridge, and evidence ledger",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-revenue-deal-room/assets/fullscreen-revenue-command.png"
        }
      ]
    },
    {
      "slug": "zava-innovation-portfolio",
      "name": "pnp-sp-dev-spfx-copilot-components-zava-innovation-portfolio",
      "title": "Zava Innovation Hub",
      "shortDescription": "An intent-routed innovation portfolio Copilot App with 17 inline components and five connected workspaces.",
      "longDescription": [
        "Zava Innovation Hub demonstrates how Microsoft 365 Copilot can turn natural-language intent into focused innovation work. Seventeen independently routed components cover idea intake, personal progress, business cases, reviews, funding, experiments, portfolio analysis, value realization, global participation, recognition, and capability discovery.",
        "Every operational component can continue into a shared My Innovation, Programs and Pilots, Reviews and Gates, Investment, or Enterprise Insights workspace. The full-screen experience preserves the originating scenario while adding coordinated stage-gate, impact, balance, budget, growth, geography, and realized-value evidence.",
        "The sample is deterministic, offline, and safe for demonstrations. Prompt values prefill or scope the experience, while consequential mock actions require visible review and confirmation. Production validation covers catalog routing, generated plugin alignment, local media, current-source visual evidence, tests, and final SharePoint package contents."
      ],
      "createdAt": "2026-08-28",
      "updatedAt": "2026-08-28",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "vesajuvonen",
          "pictureUrl": "https://github.com/vesajuvonen.png",
          "name": "Vesa Juvonen"
        }
      ],
      "references": [
        {
          "name": "Build your first SharePoint Copilot App",
          "description": "Build and package an SPFx Copilot Component with inline and full-screen experiences.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app"
        },
        {
          "name": "Microsoft 365 Copilot",
          "description": "Microsoft 365 Copilot extensibility and organizational context.",
          "url": "https://www.microsoft.com/microsoft-365/copilot"
        },
        {
          "name": "SharePoint Framework overview",
          "description": "Overview of SharePoint Framework client-side solutions.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        }
      ],
      "sourceUrl": "https://github.com/VesaJuvonen/spfx-copilot-components/tree/main/samples/zava-innovation-portfolio",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/VesaJuvonen/spfx-copilot-components/tree/main/samples/zava-innovation-portfolio",
      "preview": {
        "alt": "Full-screen Enterprise Insights command center with stage-gate funnel, portfolio charts, themes, and realized value",
        "width": 1440,
        "height": 1838,
        "src640": "generated/previews/zava-innovation-portfolio-640.webp",
        "src960": "generated/previews/zava-innovation-portfolio-960.webp"
      },
      "gallery": [
        {
          "alt": "Full-screen Enterprise Insights command center with stage-gate funnel, portfolio charts, themes, and realized value",
          "url": "https://github.com/VesaJuvonen/spfx-copilot-components/raw/main/samples/zava-innovation-portfolio/assets/ux-fullscreen-enterprise.png"
        },
        {
          "alt": "Inline global innovation view with a Natural Earth world map, regional participation markers, and conversion comparison",
          "url": "https://github.com/VesaJuvonen/spfx-copilot-components/raw/main/samples/zava-innovation-portfolio/assets/ux-inline-ExploreGlobalInnovation.png"
        },
        {
          "alt": "Inline innovation idea canvas with editable outcome, strategic theme, accountable owner, evidence, and readiness score",
          "url": "https://github.com/VesaJuvonen/spfx-copilot-components/raw/main/samples/zava-innovation-portfolio/assets/ux-inline-SubmitInnovationIdea.png"
        },
        {
          "alt": "Inline innovation review queue with phase buckets, status filters, evidence signals, and pending decisions",
          "url": "https://github.com/VesaJuvonen/spfx-copilot-components/raw/main/samples/zava-innovation-portfolio/assets/ux-inline-GetInnovationReviewQueue.png"
        },
        {
          "alt": "Inline searchable catalog of Zava Innovation Hub operational scenarios and safe prompt previews",
          "url": "https://github.com/VesaJuvonen/spfx-copilot-components/raw/main/samples/zava-innovation-portfolio/assets/ux-inline-ExploreAgentCapabilities.png"
        },
        {
          "alt": "Full-screen My Innovation workspace with personal idea progress, readiness, feedback, and next actions",
          "url": "https://github.com/VesaJuvonen/spfx-copilot-components/raw/main/samples/zava-innovation-portfolio/assets/ux-fullscreen-my.png"
        },
        {
          "alt": "Full-screen Programs and Pilots workspace with innovation growth, participation, and conversion evidence",
          "url": "https://github.com/VesaJuvonen/spfx-copilot-components/raw/main/samples/zava-innovation-portfolio/assets/ux-fullscreen-programs.png"
        },
        {
          "alt": "Full-screen Reviews and Gates workspace with prioritized submissions and evidence-backed decision controls",
          "url": "https://github.com/VesaJuvonen/spfx-copilot-components/raw/main/samples/zava-innovation-portfolio/assets/ux-fullscreen-reviews.png"
        },
        {
          "alt": "Full-screen Investment workspace with budget stewardship, funding position, and portfolio allocation evidence",
          "url": "https://github.com/VesaJuvonen/spfx-copilot-components/raw/main/samples/zava-innovation-portfolio/assets/ux-fullscreen-investment.png"
        },
        {
          "alt": "Enterprise Insights command center adapted to a narrow mobile viewport with accessible icon navigation",
          "url": "https://github.com/VesaJuvonen/spfx-copilot-components/raw/main/samples/zava-innovation-portfolio/assets/ux-fullscreen-enterprise-mobile.png"
        },
        {
          "alt": "Enterprise Insights command center in dark theme with readable analytical charts and semantic status colors",
          "url": "https://github.com/VesaJuvonen/spfx-copilot-components/raw/main/samples/zava-innovation-portfolio/assets/ux-enterprise-dark.png"
        }
      ]
    },
    {
      "slug": "copilot-m365-roadmap-features",
      "name": "pnp-sp-dev-spfx-copilot-apps-copilot-m365-roadmap-features",
      "title": "Copilot M365 Roadmap Features",
      "shortDescription": "A Copilot Agent that helps teams stay informed about the latest Microsoft 365 roadmap features.",
      "longDescription": [
        "Copilot M365 Roadmap Features demonstrates a SharePoint Framework-based Copilot Agent that helps teams stay informed about the latest Microsoft 365 roadmap features. This solution leverages Microsoft 365 roadmap features, enabling proactive adaptation to new releases, updates, and deployments across Microsoft Teams, SharePoint, Outlook, and other Microsoft 365 applications."
      ],
      "createdAt": "2026-08-26",
      "updatedAt": "2026-08-26",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "mohammadamer",
          "pictureUrl": "https://github.com/mohammadamer.png",
          "name": "Mohammad Amer"
        }
      ],
      "references": [
        {
          "name": "Build your first SharePoint Copilot App",
          "description": "Learn how to build and package an SPFx Copilot Component with inline and full-screen experiences.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app"
        },
        {
          "name": "Microsoft 365 Copilot",
          "description": "Microsoft 365 Copilot combines large language models with organizational context and extensibility.",
          "url": "https://www.microsoft.com/microsoft-365/copilot"
        },
        {
          "name": "Overview of the SharePoint Framework",
          "description": "The SharePoint Framework supports client-side solutions and tenant-hosted assets for Microsoft 365 experiences.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/copilot-m365-roadmap-features",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/copilot-m365-roadmap-features",
      "preview": {
        "alt": "Zava full-screen roadmap features dashboard",
        "width": 1830,
        "height": 950,
        "src640": "generated/previews/copilot-m365-roadmap-features-640.webp",
        "src960": "generated/previews/copilot-m365-roadmap-features-960.webp"
      },
      "gallery": [
        {
          "alt": "Zava full-screen roadmap features dashboard",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/copilot-m365-roadmap-features/assets/fullscreen-roadmap-features.png"
        },
        {
          "alt": "Zava inline roadmap features dashboard",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/copilot-m365-roadmap-features/assets/inline-roadmap-features.png"
        }
      ]
    },
    {
      "slug": "my-sites-groups-info",
      "name": "pnp-spfx-copilot-apps-my-sites-groups-info",
      "title": "My Sites & Groups Info - Explore SharePoint Sites and Microsoft 365 Groups in Copilot Chat",
      "shortDescription": "An SPFx Copilot Component that helps users discover and manage followed and accessible SharePoint sites and Microsoft 365 Groups directly in Copilot chat.",
      "longDescription": [
        "My Sites & Groups Info is a SharePoint Copilot App built as an SPFx 1.24 Copilot Component. Its declarative agent renders live SharePoint site and Microsoft 365 Group information from Microsoft Graph and SharePoint Search directly in the Copilot conversation.",
        "The React component supports followed sites, accessible sites, and groups the user belongs to, direct site links, follow and unfollow actions, fullscreen rendering, and permission-aware group membership management for viewing, adding, and removing members."
      ],
      "createdAt": "2026-08-25",
      "updatedAt": "2026-08-25",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "HarminderSethi",
          "pictureUrl": "https://github.com/HarminderSethi.png",
          "name": "Harminder Singh"
        }
      ],
      "references": [
        {
          "name": "Overview of SharePoint Copilot Apps",
          "description": "Extend Microsoft 365 Copilot with interactive experiences built with the SharePoint Framework.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps"
        },
        {
          "name": "Microsoft Graph site resource type",
          "description": "Access SharePoint site information through Microsoft Graph.",
          "url": "https://learn.microsoft.com/graph/api/resources/site?view=graph-rest-1.0"
        },
        {
          "name": "Microsoft Graph group resource type",
          "description": "Access Microsoft 365 Group information and membership through Microsoft Graph.",
          "url": "https://learn.microsoft.com/graph/api/resources/group?view=graph-rest-1.0"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/my-sites-groups-info",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/my-sites-groups-info",
      "preview": {
        "alt": "My Sites and Groups overview showing SharePoint sites and Microsoft 365 Groups in Copilot.",
        "width": 1122,
        "height": 661,
        "src640": "generated/previews/my-sites-groups-info-640.webp",
        "src960": "generated/previews/my-sites-groups-info-960.webp"
      },
      "gallery": [
        {
          "alt": "My Sites and Groups overview showing SharePoint sites and Microsoft 365 Groups in Copilot.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/my-sites-groups-info/assets/MainPage.png"
        },
        {
          "alt": "Fullscreen view of followed and accessible SharePoint sites and Microsoft 365 Groups.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/my-sites-groups-info/assets/FullScreenView.png"
        },
        {
          "alt": "Microsoft 365 Group membership view with controls to search, add, and remove users.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/my-sites-groups-info/assets/AddRemoveGroupUsers.png"
        }
      ]
    },
    {
      "slug": "events",
      "name": "pnp-spfx-copilot-apps-events",
      "title": "SharePoint Events Copilot Agent",
      "shortDescription": "Find SharePoint events from Microsoft 365 Copilot and explore them in an interactive calendar.",
      "longDescription": [
        "SharePoint Events Copilot Agent brings natural-language event discovery to Microsoft 365 Copilot."
      ],
      "createdAt": "2026-08-25",
      "updatedAt": "2026-08-25",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "joaojmendes",
          "pictureUrl": "https://github.com/joaojmendes.png",
          "name": "João Mendes"
        }
      ],
      "references": [
        {
          "name": "Build agents for Microsoft 365 Copilot",
          "description": "Extend Microsoft 365 Copilot with declarative agents, plugins, and connectors.",
          "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/"
        },
        {
          "name": "Overview of the SharePoint Framework",
          "description": "Learn about the SharePoint Framework client-side development model.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        },
        {
          "name": "Use Microsoft Graph in your solution",
          "description": "Use Microsoft Graph from SharePoint Framework solutions to access Microsoft 365 data.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/events",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/events",
      "preview": {
        "alt": "Inline SharePoint Events Agent gallery displaying recent events in Microsoft 365 Copilot.",
        "width": 2872,
        "height": 3912,
        "src640": "generated/previews/events-640.webp",
        "src960": "generated/previews/events-960.webp"
      },
      "gallery": [
        {
          "alt": "Inline SharePoint Events Agent gallery displaying recent events in Microsoft 365 Copilot.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/events/assets/preview.png"
        },
        {
          "alt": "Inline SharePoint Events Agent displaying compact calendar of recent events in Microsoft 365 Copilot.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/events/assets/compact-calendar.png"
        },
        {
          "alt": "SharePoint Events Agent welcome screen showing suggested event search prompts.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/events/assets/events-home.png"
        },
        {
          "alt": "Fullscreen masonry gallery displaying SharePoint events in Microsoft 365 Copilot.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/events/assets/events-expand.png"
        },
        {
          "alt": "Fullscreen calendar view displaying SharePoint events in Microsoft 365 Copilot.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/events/assets/events-expand-calendar.png"
        }
      ]
    },
    {
      "slug": "zava-it-concierge",
      "name": "pnp-sp-dev-spfx-copilot-apps-zava-it-concierge",
      "title": "Zava IT Concierge",
      "shortDescription": "An IT self-service Copilot App with 31 intent-routed components and three connected operational dashboards.",
      "longDescription": [
        "Zava IT Concierge demonstrates employee device support, manager approvals, and company IT operations directly in Microsoft 365 Copilot. Thirty operational tools and one capability explorer route natural-language requests to purpose-built status, form, decision, journey, and analytical components.",
        "Every component can expand into one shared Personal, Team, or IT Portfolio dashboard. The full-screen shell preserves the originating intent and prompt-derived context while combining device continuity, approval and budget evidence, service health, estate risk, spend, licenses, and refresh capacity.",
        "The sample is deterministic, offline, and safe for demonstrations. Prompt values filter or prefill the experience but never submit, approve, decline, delegate, declare, or apply a plan without visible review and confirmation. Production validation covers the generated 31-function plugin, all catalog entries, local media, gallery evidence, tests, and the final package."
      ],
      "createdAt": "2026-08-22",
      "updatedAt": "2026-08-25",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "vesajuvonen",
          "pictureUrl": "https://github.com/vesajuvonen.png",
          "name": "Vesa Juvonen"
        }
      ],
      "references": [
        {
          "name": "Build your first SharePoint Copilot App",
          "description": "Build and package an SPFx Copilot Component with inline and full-screen experiences.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app"
        },
        {
          "name": "Microsoft 365 Copilot",
          "description": "Microsoft 365 Copilot combines models with organizational context and extensibility.",
          "url": "https://www.microsoft.com/microsoft-365/copilot"
        },
        {
          "name": "SharePoint Framework overview",
          "description": "Overview of SharePoint Framework client-side solutions for Microsoft 365.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/zava-it-concierge",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/zava-it-concierge",
      "preview": {
        "alt": "Zava Personal IT dashboard with Surface device health, support, requests, and replacement options",
        "width": 1440,
        "height": 1128,
        "src640": "generated/previews/zava-it-concierge-640.webp",
        "src960": "generated/previews/zava-it-concierge-960.webp"
      },
      "gallery": [
        {
          "alt": "Zava Personal IT dashboard with Surface device health, support, requests, and replacement options",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/fullscreen-personal.png"
        },
        {
          "alt": "Zava Team IT dashboard with approval queue, people readiness, hardware budget, and support load",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/fullscreen-team.png"
        },
        {
          "alt": "Zava IT control center with global estate risk map, incident command, spend, service, and lifecycle evidence",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/fullscreen-portfolio.png"
        },
        {
          "alt": "Zava Personal IT dashboard stacked for a mobile viewport",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/fullscreen-personal-mobile.png"
        },
        {
          "alt": "Zava IT control center rendered in dark mode",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/fullscreen-portfolio-dark.png"
        },
        {
          "alt": "Inline assigned Surface status and health component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-my-device-status.png"
        },
        {
          "alt": "Inline detailed Surface battery, storage, performance, and patch health component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-get-device-health.png"
        },
        {
          "alt": "Inline device refresh eligibility timeline component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-get-refresh-eligibility.png"
        },
        {
          "alt": "Inline approved Microsoft Surface catalog comparison component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-explore-device-catalog.png"
        },
        {
          "alt": "Inline Surface request configuration and review form",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-configure-device-request.png"
        },
        {
          "alt": "Inline evidence-grounded device justification editor",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-draft-device-justification.png"
        },
        {
          "alt": "Inline IT issue report form with severity, diagnostics, and review",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-report-it-issue.png"
        },
        {
          "alt": "Inline Surface diagnostic checks and findings component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-run-device-diagnostics.png"
        },
        {
          "alt": "Inline personal IT requests and tickets timeline",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-get-my-requests.png"
        },
        {
          "alt": "Inline ranked IT knowledge article match component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-find-knowledge-match.png"
        },
        {
          "alt": "Inline Surface imaging, shipment, delivery, and setup tracker",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-track-device-shipment.png"
        },
        {
          "alt": "Inline evidence-backed standard device approval component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-review-device-approval.png"
        },
        {
          "alt": "Inline manager approval queue with pending and completed submissions",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-get-approval-queue.png"
        },
        {
          "alt": "Inline team IT budget allocation and remaining forecast component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-get-team-budget.png"
        },
        {
          "alt": "Inline team people, device, compliance, and refresh risk roster",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-get-team-assets.png"
        },
        {
          "alt": "Inline request cost and before-after budget impact component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-preview-request-cost.png"
        },
        {
          "alt": "Inline policy exception evidence, safeguard, and decision component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-review-policy-exception.png"
        },
        {
          "alt": "Inline team IT ticket volume and category trend component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-get-team-ticket-trend.png"
        },
        {
          "alt": "Inline approval delegation form with person, scope, and rationale",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-delegate-approval.png"
        },
        {
          "alt": "Inline global device fleet health and regional risk map",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-get-fleet-health.png"
        },
        {
          "alt": "Inline company device age cohort distribution component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-get-device-age-distribution.png"
        },
        {
          "alt": "Inline self-service ticket deflection and handled volume trend",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-get-ticket-deflection-trend.png"
        },
        {
          "alt": "Inline ranked IT issue categories and cumulative impact component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-get-top-it-issues.png"
        },
        {
          "alt": "Inline Microsoft 365 service health and incident status board",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-get-service-health.png"
        },
        {
          "alt": "Inline inactive license cohorts and annual reclaim opportunity component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-get-license-reclaim.png"
        },
        {
          "alt": "Inline company IT budget-to-forecast spend bridge",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-get-it-spend-bridge.png"
        },
        {
          "alt": "Inline device refresh wave capacity and budget plan",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-plan-refresh-waves.png"
        },
        {
          "alt": "Inline major incident signal correlation component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-correlate-major-incident.png"
        },
        {
          "alt": "Inline request process stage, owner, blocker, and next-step journey",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-get-process-journey.png"
        },
        {
          "alt": "Inline company IT brief with priorities, evidence, and decisions",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-generate-it-brief.png"
        },
        {
          "alt": "Inline searchable catalog of thirty Zava IT Concierge operational tools",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-explore-agent-capabilities.png"
        },
        {
          "alt": "Inline approval queue detail with requester, policy, budget, evidence, and decision fields",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-approval-queue-detail.png"
        },
        {
          "alt": "Inline device approval explicit confirmation state before applying the session decision",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-review-device-approval-confirmation.png"
        },
        {
          "alt": "Inline configured Surface request receipt after explicit review and confirmation",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-it-concierge/assets/inline-configure-device-request-receipt.png"
        }
      ]
    },
    {
      "slug": "photos",
      "name": "pnp-spfx-copilot-apps-photos",
      "title": "SharePoint Photos Copilot Agent",
      "shortDescription": "Find SharePoint and OneDrive photos from Microsoft 365 Copilot and explore them in an interactive gallery.",
      "longDescription": [
        "SharePoint Photos Copilot Agent brings natural-language photo discovery to Microsoft 365 Copilot. It searches SharePoint document libraries and, when requested, personal OneDrive by using Microsoft Graph Search, then presents matching images in an interactive gallery.",
        "The gallery supports responsive layouts, fullscreen browsing, pagination, zoom, thumbnails, slideshow controls, date filtering, and relevance, modified-date, or name sorting. Search scopes can target a SharePoint site, document library, folder, or explicitly requested OneDrive content."
      ],
      "createdAt": "2026-08-24",
      "updatedAt": "2026-08-24",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "joaojmendes",
          "pictureUrl": "https://github.com/joaojmendes.png",
          "name": "João Mendes"
        }
      ],
      "references": [
        {
          "name": "Build agents for Microsoft 365 Copilot",
          "description": "Extend Microsoft 365 Copilot with declarative agents, plugins, and connectors.",
          "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/"
        },
        {
          "name": "Overview of the SharePoint Framework",
          "description": "Learn about the SharePoint Framework client-side development model.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        },
        {
          "name": "Use Microsoft Graph in your solution",
          "description": "Use Microsoft Graph from SharePoint Framework solutions to access Microsoft 365 data.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/photos",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/photos",
      "preview": {
        "alt": "Inline SharePoint Photos Agent gallery displaying recent event photos in Microsoft 365 Copilot.",
        "width": 1828,
        "height": 1536,
        "src640": "generated/previews/photos-640.webp",
        "src960": "generated/previews/photos-960.webp"
      },
      "gallery": [
        {
          "alt": "Inline SharePoint Photos Agent gallery displaying recent event photos in Microsoft 365 Copilot.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/photos/assets/preview.png"
        },
        {
          "alt": "SharePoint Photos Agent welcome screen showing suggested photo search prompts.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/photos/assets/screenshot-agent-home.png"
        },
        {
          "alt": "Fullscreen masonry gallery displaying SharePoint event photos in Microsoft 365 Copilot.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/photos/assets/screenshot-fullscreen-gallery.png"
        },
        {
          "alt": "Photo lightbox with image navigation, zoom, slideshow, fullscreen, and thumbnail controls.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/photos/assets/screenshot-photo-lightbox.png"
        }
      ]
    },
    {
      "slug": "work-iq-answers",
      "name": "pnp-spfx-copilot-apps-work-iq-answers",
      "title": "Work IQ Answers",
      "shortDescription": "Turns a Work IQ answer into structured UI: entity chips inline and every citation grouped into a clickable source panel.",
      "longDescription": [
        "Work IQ Answers sends the user's natural-language question to the Work IQ Chat API and renders the response as structured UI instead of plain text. The people, meetings, and files that Work IQ tags inline in its answer become clickable chips, and every citation it returns is grouped into a source panel that deep-links into Teams, SharePoint, or a person's profile. Follow-up questions reuse the same conversation, so multi-turn works as the API intends.",
        "The sample is the only one in this repository that calls Work IQ rather than Microsoft Graph, and it demonstrates the SPFx AadHttpClient pattern for a non-Graph Entra-secured API: a single webApiPermissionRequests entry for the delegated WorkIQAgent.Ask permission, approved once by a tenant admin, with no middle tier and no client secret.",
        "It ships with useMock enabled, so the full experience (inline card, fullscreen view, grouped sources, entity chips, sensitivity badge) runs with zero live dependencies. The mock responses are the exact wire shape of the real API and flow through the same parsing code, so switching to the live endpoint changes no UI code."
      ],
      "createdAt": "2026-08-21",
      "updatedAt": "2026-08-21",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "AhmadiRamin",
          "pictureUrl": "https://github.com/AhmadiRamin.png",
          "name": "Ramin Ahmadi"
        }
      ],
      "references": [
        {
          "name": "Work IQ REST API overview",
          "description": "Multi-turn conversations with Microsoft 365 Copilot over HTTP, with enterprise and web search grounding.",
          "url": "https://learn.microsoft.com/microsoft-365/copilot/extensibility/work-iq/rest/overview"
        },
        {
          "name": "Work IQ - copilotConversation: chat",
          "description": "The chat endpoint used by this sample, including the attributions and sensitivityLabel response shapes.",
          "url": "https://learn.microsoft.com/microsoft-365/copilot/extensibility/work-iq/rest/copilotconversation-chat"
        },
        {
          "name": "Connect to Entra ID-secured APIs in SharePoint Framework solutions",
          "description": "How webApiPermissionRequests and AadHttpClient let an SPFx solution call a non-Graph Entra-secured API without a middle tier.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/use-aadhttpclient"
        },
        {
          "name": "Build agents for Microsoft 365 Copilot",
          "description": "Extend Microsoft 365 Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.",
          "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/"
        },
        {
          "name": "Overview of the SharePoint Framework",
          "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/work-iq-answers",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/work-iq-answers",
      "preview": {
        "alt": "Work IQ Answers rendering a cited answer with entity chips and a grouped source panel",
        "width": 1023,
        "height": 1411,
        "src640": "generated/previews/work-iq-answers-640.webp",
        "src960": "generated/previews/work-iq-answers-960.webp"
      },
      "gallery": [
        {
          "alt": "Work IQ Answers rendering a cited answer with entity chips and a grouped source panel",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/work-iq-answers/assets/preview.png"
        }
      ]
    },
    {
      "slug": "zava-project-tracker",
      "name": "pnp-sp-dev-spfx-copilot-apps-zava-project-tracker",
      "title": "Zava AI Project Portfolio Agent",
      "shortDescription": "A leadership-ready SharePoint Copilot App with 31 intent-routed UX components for personal work, project delivery, portfolio governance, AI investment, capacity, submissions, and approvals.",
      "longDescription": [
        "Zava demonstrates dynamic UX resolution inside Microsoft 365 Copilot. Thirty operational SPFx Copilot Components independently route natural-language intents to purpose-built information, comparison, submission, and decision experiences. A thirty-first capability explorer helps users discover the complete scenario catalog through business outcomes and safe previews.",
        "Operational components expand into one responsive full-screen application with My Work, Project, Portfolio, and Decisions dashboards. Project selection coordinates delivery, budget, AI spend, milestones, risk, team load, and benefits. Portfolio views show company investment, run-rate, value, capacity, and systemic exposure. Decisions uses one evidence-first inbox backed by the same records as the inline review components.",
        "The sample is deterministic, offline, and safe for worldwide demonstrations. Prompt values prefill or filter UX but never submit or decide automatically. Confirmed sample actions create browser-session receipts and never write to an external system. The production package uses one optimized shared bundle, bundled personas, Fluent UI v9, React 17, Griffel owner-document styling, focused D3 visualizations, and automated plugin/package-output validation."
      ],
      "createdAt": "2026-08-21",
      "updatedAt": "2026-08-21",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "vesajuvonen",
          "pictureUrl": "https://github.com/vesajuvonen.png",
          "name": "Vesa Juvonen"
        }
      ],
      "references": [
        {
          "name": "Build your first SharePoint Copilot App",
          "description": "Learn how to build and package an SPFx Copilot Component with inline and full-screen experiences.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app"
        },
        {
          "name": "Microsoft 365 Copilot",
          "description": "Microsoft 365 Copilot combines large language models with organizational context and extensibility.",
          "url": "https://www.microsoft.com/microsoft-365/copilot"
        },
        {
          "name": "Overview of the SharePoint Framework",
          "description": "The SharePoint Framework supports client-side solutions and tenant-hosted assets for Microsoft 365 experiences.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/zava-project-tracker",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/zava-project-tracker",
      "preview": {
        "alt": "Zava full-screen My Work dashboard",
        "width": 981,
        "height": 1241,
        "src640": "generated/previews/zava-project-tracker-640.webp",
        "src960": "generated/previews/zava-project-tracker-960.webp"
      },
      "gallery": [
        {
          "alt": "Zava full-screen My Work dashboard",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/fullscreen-my-work.png"
        },
        {
          "alt": "Zava full-screen Project delivery dashboard",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/fullscreen-project.png"
        },
        {
          "alt": "Zava full-screen Portfolio investment command center",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/fullscreen-portfolio.png"
        },
        {
          "alt": "Zava full-screen Decisions inbox",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/fullscreen-decisions.png"
        },
        {
          "alt": "Zava full-screen capability explorer",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/fullscreen-capability-explorer.png"
        },
        {
          "alt": "Zava full-screen workspace at mobile width",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/fullscreen-mobile.png"
        },
        {
          "alt": "Zava Portfolio dashboard in dark mode",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/fullscreen-portfolio-dark.png"
        },
        {
          "alt": "Zava Decisions session-only confirmation receipt",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/fullscreen-decision-receipt.png"
        },
        {
          "alt": "Inline personal work summary component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-my-work-summary.png"
        },
        {
          "alt": "Inline grouped tasks component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-my-tasks.png"
        },
        {
          "alt": "Inline personal capacity component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-my-capacity.png"
        },
        {
          "alt": "Inline goal contribution component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-my-goal-contributions.png"
        },
        {
          "alt": "Inline weekly update submission component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-submit-weekly-update.png"
        },
        {
          "alt": "Inline timesheet submission component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-submit-timesheet.png"
        },
        {
          "alt": "Inline project health component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-project-health.png"
        },
        {
          "alt": "Inline project timeline component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-project-timeline.png"
        },
        {
          "alt": "Inline project milestones component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-project-milestones.png"
        },
        {
          "alt": "Inline project risk matrix component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-project-risks.png"
        },
        {
          "alt": "Inline project budget component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-project-budget.png"
        },
        {
          "alt": "Inline project AI spend control tower",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-project-ai-spend.png"
        },
        {
          "alt": "Inline project team capacity component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-project-team-capacity.png"
        },
        {
          "alt": "Inline project status submission component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-submit-project-status.png"
        },
        {
          "alt": "Inline AI usage submission component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-submit-ai-usage.png"
        },
        {
          "alt": "Inline project request component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-submit-project-request.png"
        },
        {
          "alt": "Inline AI budget request component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-request-ai-budget.png"
        },
        {
          "alt": "Inline project comparison component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-compare-projects.png"
        },
        {
          "alt": "Inline portfolio health component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-portfolio-health.png"
        },
        {
          "alt": "Inline strategic alignment component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-strategic-alignment.png"
        },
        {
          "alt": "Inline portfolio roadmap component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-portfolio-roadmap.png"
        },
        {
          "alt": "Inline portfolio budget forecast component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-portfolio-budget-forecast.png"
        },
        {
          "alt": "Inline portfolio AI spend component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-portfolio-ai-spend.png"
        },
        {
          "alt": "Inline portfolio capacity component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-portfolio-capacity.png"
        },
        {
          "alt": "Inline portfolio risk exposure component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-portfolio-risk-exposure.png"
        },
        {
          "alt": "Inline approval inbox component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-get-approval-inbox.png"
        },
        {
          "alt": "Inline project request review component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-review-project-request.png"
        },
        {
          "alt": "Inline project budget review component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-review-project-budget.png"
        },
        {
          "alt": "Inline resource assignment review component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-review-resource-assignment.png"
        },
        {
          "alt": "Inline stage-gate review component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-review-stage-gate.png"
        },
        {
          "alt": "Inline Zava capability explorer component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-project-tracker/assets/inline-explore-agent-capabilities.png"
        }
      ]
    },
    {
      "slug": "zava-employee-agent",
      "name": "pnp-sp-dev-spfx-copilot-apps-zava-employee-agent",
      "title": "Zava Employee Agent",
      "shortDescription": "An employee-first SharePoint Copilot App with 20 intent-routed HR components and one shared ten-family workspace.",
      "longDescription": [
        "Zava Employee Agent demonstrates intent-driven employee experiences inside Microsoft 365 Copilot. Twenty SPFx Copilot Components independently route natural-language HR requests to purpose-built summaries, comparisons, timelines, forms, decision queues, and organization experiences.",
        "Every component expands into one responsive ten-family HR workspace covering Home, Policy, Time, Money, Benefits, Support, Learning, Rewards, Team, and People. The shared shell preserves the owning family and prompt-derived context while providing fifty complete internal routes for deeper work.",
        "The sample is deterministic, offline, and safe for demonstrations. Prompt values may prefill or filter UX but never submit a request, open a case, or decide an approval without explicit review and confirmation. One optimized production bundle emits shared React, Fluent UI, services, icons, and bundled persona media once, with automated generated-plugin and final-package audits."
      ],
      "createdAt": "2026-08-21",
      "updatedAt": "2026-08-21",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "vesajuvonen",
          "pictureUrl": "https://github.com/vesajuvonen.png",
          "name": "Vesa Juvonen"
        }
      ],
      "references": [
        {
          "name": "Build your first SharePoint Copilot App",
          "description": "Build and package an SPFx Copilot Component with inline and full-screen experiences.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app"
        },
        {
          "name": "Microsoft 365 Copilot",
          "description": "Microsoft 365 Copilot combines models with organizational context and extensibility.",
          "url": "https://www.microsoft.com/microsoft-365/copilot"
        },
        {
          "name": "SharePoint Framework overview",
          "description": "Overview of SharePoint Framework client-side solutions for Microsoft 365.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/zava-employee-agent",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/zava-employee-agent",
      "preview": {
        "alt": "Zava full-screen My HR Dashboard",
        "width": 980,
        "height": 900,
        "src640": "generated/previews/zava-employee-agent-640.webp",
        "src960": "generated/previews/zava-employee-agent-960.webp"
      },
      "gallery": [
        {
          "alt": "Zava full-screen My HR Dashboard",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/fullscreen-home.png"
        },
        {
          "alt": "Zava full-screen Policy Q and A workspace",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/fullscreen-policy.png"
        },
        {
          "alt": "Zava full-screen time and leave workspace",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/fullscreen-time.png"
        },
        {
          "alt": "Zava full-screen payroll explanation workspace",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/fullscreen-money.png"
        },
        {
          "alt": "Zava full-screen benefits and life events workspace",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/fullscreen-benefits.png"
        },
        {
          "alt": "Zava full-screen private HR support workspace",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/fullscreen-support.png"
        },
        {
          "alt": "Zava full-screen learning and compliance workspace",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/fullscreen-learning.png"
        },
        {
          "alt": "Zava full-screen total rewards workspace",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/fullscreen-rewards.png"
        },
        {
          "alt": "Zava full-screen manager team workspace",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/fullscreen-team.png"
        },
        {
          "alt": "Zava full-screen organization and people workspace",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/fullscreen-people.png"
        },
        {
          "alt": "Zava My HR Dashboard at mobile width",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/fullscreen-home-mobile.png"
        },
        {
          "alt": "Zava people workspace in dark mode",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/fullscreen-people-dark.png"
        },
        {
          "alt": "Inline employee HR dashboard summary component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-get-my-hr-dashboard.png"
        },
        {
          "alt": "Inline employee profile health component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-get-profile-health.png"
        },
        {
          "alt": "Inline next best HR actions component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-get-next-best-actions.png"
        },
        {
          "alt": "Inline employee worklife snapshot component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-get-worklife-snapshot.png"
        },
        {
          "alt": "Inline employee milestones component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-get-employee-milestones.png"
        },
        {
          "alt": "Inline cited HR policy answer component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-policy-answer.png"
        },
        {
          "alt": "Inline HR policy comparison component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-policy-comparison.png"
        },
        {
          "alt": "Inline employee leave balance component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-leave-balance.png"
        },
        {
          "alt": "Inline editable time off request component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-request-time-off.png"
        },
        {
          "alt": "Inline employee latest pay component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-latest-pay.png"
        },
        {
          "alt": "Inline employee pay change explanation component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-explain-pay-change.png"
        },
        {
          "alt": "Inline employee benefit plan comparison component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-compare-benefit-plans.png"
        },
        {
          "alt": "Inline employee benefits life event component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-start-life-event.png"
        },
        {
          "alt": "Inline private HR case intake component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-create-hr-case.png"
        },
        {
          "alt": "Inline required employee learning component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-required-learning.png"
        },
        {
          "alt": "Inline employee total rewards component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-total-rewards-summary.png"
        },
        {
          "alt": "Inline manager approval inbox component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-approval-inbox.png"
        },
        {
          "alt": "Inline manager team absence calendar component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-team-absence-calendar.png"
        },
        {
          "alt": "Inline employee expert search component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-find-expert.png"
        },
        {
          "alt": "Inline employee organization explorer component",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-employee-agent/assets/inline-explore-organization.png"
        }
      ]
    },
    {
      "slug": "kudos-recognition-wall",
      "name": "pnp-spfx-copilot-apps-kudos-recognition-wall",
      "title": "Kudos & Recognition Wall - Recognise colleagues from Microsoft 365 Copilot chat",
      "shortDescription": "Give kudos and browse your organization's recognition wall directly from Microsoft 365 Copilot chat.",
      "longDescription": [
        "Kudos & Recognition Wall brings peer recognition into Microsoft 365 Copilot. Ask the Kudos and Recognition Wall agent to show the wall and it renders an inline card of recent recognitions, or an expanded fullscreen wall with team, value, and time filters plus Most recognised and Top givers leaderboards. Name a colleague and a reason and it opens a pre-filled compose card so you can give kudos without leaving the conversation.",
        "Built as a SharePoint Copilot App (SPFx 1.24.0-beta.2, @microsoft/sp-copilot-component), the same component renders both the compact inline card and the expanded wall. It reads and writes a SharePoint Kudos list via RenderListDataAsStream and brokers Microsoft Graph for colleague search and department enrichment, with a built-in mock backend for zero-setup demos and Fluent UI v9 runtime theming that follows the Copilot host."
      ],
      "createdAt": "2026-08-12",
      "updatedAt": "2026-08-12",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "ejazhussain",
          "pictureUrl": "https://github.com/ejazhussain.png",
          "name": "Ejaz Hussain"
        }
      ],
      "references": [
        {
          "name": "Overview of SharePoint Copilot Apps",
          "description": "Extend Microsoft 365 Copilot with custom, interactive experiences built using the familiar SharePoint Framework (SPFx) tools and client-side development model.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps"
        },
        {
          "name": "Build agents for Microsoft 365 Copilot",
          "description": "Extend Microsoft 365 Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.",
          "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/"
        },
        {
          "name": "Overview of the SharePoint Framework",
          "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/kudos-recognition-wall",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/kudos-recognition-wall",
      "preview": {
        "alt": "Inline Kudos card inside a Microsoft 365 Copilot chat, showing a digest of recent recognitions with Give kudos and Open the wall actions.",
        "width": 608,
        "height": 535,
        "src640": "generated/previews/kudos-recognition-wall-640.webp",
        "src960": "generated/previews/kudos-recognition-wall-960.webp"
      },
      "gallery": [
        {
          "alt": "Inline Kudos card inside a Microsoft 365 Copilot chat, showing a digest of recent recognitions with Give kudos and Open the wall actions.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/kudos-recognition-wall/assets/preview.png"
        },
        {
          "alt": "Expanded recognition wall with a filterable feed of kudos and Most recognised and Top givers leaderboards.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/kudos-recognition-wall/assets/kudos-recognition-wall-expanded.png"
        },
        {
          "alt": "Give kudos dialog for choosing a colleague, team, and recognised value, with a message field.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/kudos-recognition-wall/assets/kudos-recognition-wall-give-kudos.png"
        }
      ]
    },
    {
      "slug": "release-readiness-board",
      "name": "pnp-spfx-copilot-apps-release-readiness-board",
      "title": "Release readiness board",
      "shortDescription": "Track blockers, overdue checks, and go-live confidence directly in Copilot.",
      "longDescription": [
        "Release readiness board gives delivery teams a compact inline release-health snapshot and a full-screen execution board in Microsoft 365 Copilot. Teams can filter by release and owner, focus on blockers, update checklist status, and post a readiness summary back to chat. The sample ships mock-first and includes a real-data adapter mode via an external HTTPS API."
      ],
      "createdAt": "2026-08-02",
      "updatedAt": "2026-08-02",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "ValerasNarbutas",
          "pictureUrl": "https://github.com/ValerasNarbutas.png",
          "name": "Valeras Narbutas"
        }
      ],
      "references": [
        {
          "name": "Overview of SharePoint Copilot Apps",
          "description": "Build and deploy interactive SharePoint Copilot Apps with SPFx Copilot components and declarative agents.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps"
        },
        {
          "name": "Build your first SharePoint Copilot App",
          "description": "Step-by-step guide to scaffold, build, and deploy SPFx Copilot components.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/release-readiness-board",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/release-readiness-board",
      "preview": {
        "alt": "Inline release readiness summary card",
        "width": 1933,
        "height": 1061,
        "src640": "generated/previews/release-readiness-board-640.webp",
        "src960": "generated/previews/release-readiness-board-960.webp"
      },
      "gallery": [
        {
          "alt": "Inline release readiness summary card",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/release-readiness-board/assets/preview.png"
        },
        {
          "alt": "Full-screen release readiness checklist board",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/release-readiness-board/assets/screenshot-fullscreen.png"
        }
      ]
    },
    {
      "slug": "m365-service-health",
      "name": "pnp-spfx-copilot-apps-m365-service-health",
      "title": "M365 Service Health - Live Microsoft 365 Service Health in Copilot Chat",
      "shortDescription": "An SPFx Copilot Component that displays live Microsoft 365 service health in Copilot chat, with interactive inline and full-screen views powered by Microsoft Graph.",
      "longDescription": [
        "M365 Service Health is a SharePoint Copilot App built as an SPFx 1.24 Copilot Component. Its declarative agent answers service availability questions by rendering live Microsoft 365 service health data from the Microsoft Graph service health API directly in the Copilot conversation.",
        "The React component supports inline and full-screen display modes, service search, active-issue filtering, natural-language service name resolution, and issue details with impact and status updates. It also demonstrates brokered Microsoft Graph access, retry with exponential backoff, classified error handling, host-driven theming, and graceful degradation."
      ],
      "createdAt": "2026-07-31",
      "updatedAt": "2026-07-31",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "HarminderSethi",
          "pictureUrl": "https://github.com/HarminderSethi.png",
          "name": "Harminder Singh"
        }
      ],
      "references": [
        {
          "name": "Overview of SharePoint Copilot Apps",
          "description": "Extend Microsoft 365 Copilot with interactive experiences built with the SharePoint Framework.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps"
        },
        {
          "name": "Microsoft Graph service communications API overview",
          "description": "Access Microsoft 365 service health and service announcement information through Microsoft Graph.",
          "url": "https://learn.microsoft.com/graph/service-communications-concept-overview"
        },
        {
          "name": "Overview of the SharePoint Framework",
          "description": "Build extensible client-side solutions for SharePoint and Microsoft 365.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/m365-service-health",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/m365-service-health",
      "preview": {
        "alt": "M365 Service Health overview showing current Microsoft 365 service status",
        "width": 1095,
        "height": 581,
        "src640": "generated/previews/m365-service-health-640.webp",
        "src960": "generated/previews/m365-service-health-960.webp"
      },
      "gallery": [
        {
          "alt": "M365 Service Health overview showing current Microsoft 365 service status",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/m365-service-health/assets/main%20page.png"
        },
        {
          "alt": "M365 Service Health component rendered in a Copilot conversation",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/m365-service-health/assets/copilot_component_rendering.png"
        },
        {
          "alt": "Full-screen M365 Service Health overview with filtering and issue details",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/m365-service-health/assets/full%20page%20view.png"
        }
      ]
    },
    {
      "slug": "choice-relay",
      "name": "pnp-spfx-copilot-apps-choice-relay",
      "title": "Choice Relay",
      "shortDescription": "Follow a user choice from Copilot into SPFx, back into the conversation, and into a second interactive component.",
      "longDescription": [
        "Choice Relay is a compact teaching sample with two SharePoint Framework Copilot Components. Copilot generates typed arguments for an interactive choice component, the user selects one option locally, and the component sends that selection back as a readable user turn.",
        "Copilot can then select a second tool and render one grounded next action. The sample also demonstrates revisions initiated from either the SPFx component or the normal Copilot composer, with a collapsed inspector that makes tool input, host context, and outbound messages visible."
      ],
      "createdAt": "2026-07-29",
      "updatedAt": "2026-07-29",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "ferrarirosso",
          "pictureUrl": "https://github.com/ferrarirosso.png",
          "name": "Nello D'Andrea"
        }
      ],
      "references": [
        {
          "name": "Overview of SharePoint Copilot Apps",
          "description": "Extend Microsoft 365 Copilot with interactive experiences built with the SharePoint Framework.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps"
        },
        {
          "name": "Build your first SharePoint Copilot App",
          "description": "Create, test, package, and deploy a SharePoint Copilot App.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app"
        },
        {
          "name": "Fluent UI React v9",
          "description": "Build accessible React experiences with Fluent UI components and design tokens.",
          "url": "https://react.fluentui.dev/"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/choice-relay",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/choice-relay",
      "preview": {
        "alt": "A new fact typed in the Copilot composer, and the SPFx component re-rendered with the revised next action",
        "width": 1190,
        "height": 1150,
        "src640": "generated/previews/choice-relay-640.webp",
        "src960": "generated/previews/choice-relay-960.webp"
      },
      "gallery": [
        {
          "alt": "A new fact typed in the Copilot composer, and the SPFx component re-rendered with the revised next action",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/choice-relay/assets/preview.png"
        },
        {
          "alt": "A situation prompt in Copilot, and the choice component rendered from it with four generated options",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/choice-relay/assets/screenshot-1-prompt-to-component.png"
        },
        {
          "alt": "The result component showing the selected option, the proposed next action, and the four-step trace",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/choice-relay/assets/screenshot-2-result.png"
        },
        {
          "alt": "An adjustment typed into the component's own field with Revise with Copilot active",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/choice-relay/assets/screenshot-3-revise-in-component.png"
        }
      ]
    },
    {
      "slug": "apps-directory",
      "name": "pnp-spfx-copilot-apps-apps-directory",
      "title": "Apps directory",
      "shortDescription": "Apps directory - Workplace Application Catalogue",
      "longDescription": [
        "Apps directory brings your organisation's full application catalogue into Microsoft 365 Copilot. Browse apps by category, search by name or keyword, mark your most-used apps as favourites for quick access, and launch any app directly from the Copilot chat. You can also add custom app shortcuts and filter the directory to show only your personal favourites."
      ],
      "createdAt": "2026-07-16",
      "updatedAt": "2026-07-16",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "saurabh7019",
          "pictureUrl": "https://github.com/saurabh7019.png",
          "name": "Saurabh Tripathi"
        }
      ],
      "references": [
        {
          "name": "Build agents for Microsoft 365 Copilot",
          "description": "Extend Microsoft 365 Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.",
          "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/"
        },
        {
          "name": "Overview of the SharePoint Framework",
          "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        },
        {
          "name": "Build SharePoint Copilot Apps",
          "description": "Hands-on lab for building SharePoint Copilot Apps using the SPFx Copilot component model.",
          "url": "https://microsoft.github.io/copilot-camp/pages/sharepoint/sharepoint-copilot-apps/"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/apps-directory",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/apps-directory",
      "preview": {
        "alt": "Inline Apps directory card in the Copilot canvas",
        "width": 1512,
        "height": 817,
        "src640": "generated/previews/apps-directory-640.webp",
        "src960": "generated/previews/apps-directory-960.webp"
      },
      "gallery": [
        {
          "alt": "Inline Apps directory card in the Copilot canvas",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/apps-directory/assets/preview.png"
        },
        {
          "alt": "Full-screen Apps directory view",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/apps-directory/assets/screenshot-fullscreen.png"
        },
        {
          "alt": "Apps directory full-screen view in dark mode",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/apps-directory/assets/screenshot-dark.png"
        }
      ]
    },
    {
      "slug": "sp-permissions-explorer",
      "name": "pnp-sp-dev-spfx-copilot-apps-sp-permissions-explorer",
      "title": "SP Permissions Explorer - SharePoint Access Review Copilot App",
      "shortDescription": "An SPFx Copilot Component that lets users review SharePoint access, inspect principals and permission levels, and perform guarded write operations from Microsoft 365 Copilot.",
      "longDescription": [
        "SP Permissions Explorer is a SharePoint Copilot App built as an SPFx 1.24 Copilot Component. It lets the signed-in user ask Microsoft 365 Copilot who has access to a site and get back an interactive permissions experience with users, groups, external or guest users, and permission levels.",
        "The same React component renders in inline and full-screen display modes inside the Copilot canvas. It queries SharePoint using the user's delegated identity, supports filtering and principal lookup, and exposes write operations such as grant or remove access and change permission levels, with every write confirmed in the UI before it runs."
      ],
      "createdAt": "2026-07-15",
      "updatedAt": "2026-07-15",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "a1mery",
          "pictureUrl": "https://github.com/a1mery.png",
          "name": "Aimery Thomas"
        }
      ],
      "references": [
        {
          "name": "Getting started with SharePoint Framework",
          "description": "Set up your development environment and start building SharePoint Framework solutions.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment"
        },
        {
          "name": "Introducing SharePoint Copilot Apps",
          "description": "Learn how SharePoint Copilot Apps can extend Microsoft 365 Copilot with interactive experiences.",
          "url": "https://devblogs.microsoft.com/microsoft365dev/going-beyond-text-in-microsoft-365-copilot-introducing-sharepoint-copilot-apps/"
        },
        {
          "name": "Overview of SharePoint Copilot Apps",
          "description": "Overview of the Copilot app model for SharePoint Framework solutions.",
          "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/copilot/overview-copilot-apps"
        },
        {
          "name": "SharePoint REST API",
          "description": "Use the SharePoint REST API to read and manage SharePoint data.",
          "url": "https://learn.microsoft.com/sharepoint/dev/sp-add-ins/get-to-know-the-sharepoint-rest-service"
        },
        {
          "name": "Heft Documentation",
          "description": "Build and package the solution using the Heft build system.",
          "url": "https://heft.rushstack.io/"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/sp-permissions-explorer",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/sp-permissions-explorer",
      "preview": {
        "alt": "Inline permissions review overview in Microsoft 365 Copilot",
        "width": 1168,
        "height": 1249,
        "src640": "generated/previews/sp-permissions-explorer-640.webp",
        "src960": "generated/previews/sp-permissions-explorer-960.webp"
      },
      "gallery": [
        {
          "alt": "Inline permissions review overview in Microsoft 365 Copilot",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/sp-permissions-explorer/assets/SharePointAccessReview_Introduction.png"
        },
        {
          "alt": "Guarded grant access dialog in the permissions explorer",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/sp-permissions-explorer/assets/SharePointAccessReview_Grant.png"
        }
      ]
    },
    {
      "slug": "copilot-readiness-action-centre",
      "name": "pnp-spfx-copilot-apps-copilot-readiness-action-centre",
      "title": "Copilot Readiness Action Centre",
      "shortDescription": "Review Microsoft 365 Copilot readiness risks and create governed SharePoint remediation actions from the Copilot canvas.",
      "longDescription": [
        "Copilot Readiness Action Centre is a SharePoint Copilot App built as an SPFx 1.24 Copilot Component. It surfaces readiness scores and risk findings in the Microsoft 365 Copilot canvas, with inline and full-screen display modes, Fluent UI v9 host-driven theming, and governed remediation actions written to SharePoint lists.",
        "The sample ships offline mock data for immediate demos and a swappable IReadinessDataService so a live SharePoint implementation is a drop-in path. Architecture follows the PnP agentic creation rules: thin entry component, root App selector, ThemeProvider, separate inline and full-screen views, and Zod tool inputs exported via zodToJsonSchema for Teams and agent packaging."
      ],
      "createdAt": "2026-07-14",
      "updatedAt": "2026-07-14",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "DanielBrownAG",
          "pictureUrl": "https://github.com/DanielBrownAG.png",
          "name": "Daniel Brown"
        }
      ],
      "references": [
        {
          "name": "Build agents for Microsoft 365 Copilot",
          "description": "Extend Microsoft 365 Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.",
          "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/"
        },
        {
          "name": "Overview of the SharePoint Framework",
          "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        },
        {
          "name": "Build your first SharePoint Copilot App",
          "description": "Create a SharePoint Copilot App with SPFx, test it in the Copilot Workbench, package and deploy it to the app catalog.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/copilot-readiness-action-centre",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/copilot-readiness-action-centre",
      "preview": {
        "alt": "Copilot Readiness Action Centre showing readiness score, critical risks, open actions, and prioritized findings",
        "width": 1186,
        "height": 1277,
        "src640": "generated/previews/copilot-readiness-action-centre-640.webp",
        "src960": "generated/previews/copilot-readiness-action-centre-960.webp"
      },
      "gallery": [
        {
          "alt": "Copilot Readiness Action Centre showing readiness score, critical risks, open actions, and prioritized findings",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/copilot-readiness-action-centre/assets/preview.png"
        },
        {
          "alt": "Full Copilot conversation with readiness findings, risk explanations, and recommended remediation actions",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/copilot-readiness-action-centre/assets/preview-full.png"
        }
      ]
    },
    {
      "slug": "people-directory",
      "name": "pnp-sp-dev-spfx-copilot-apps-people-directory",
      "title": "People Directory - Find Microsoft 365 People in Copilot Chat",
      "shortDescription": "An SPFx Copilot Component that searches Microsoft 365 users in Copilot chat, with inline and fullscreen results, filters, and direct Teams/email actions.",
      "longDescription": [
        "People Directory is a SharePoint Framework Copilot Component that brings Microsoft 365 people search directly into the Copilot canvas. A declarative agent calls the component as a tool and it renders a live, interactive people search experience in both inline and fullscreen display modes.",
        "The sample reads real tenant directory data through the SPFx-brokered Microsoft Graph client using /users (beta), supports internal-only and active-only filters, shows profile photos and key identity details, and provides direct actions to start a Teams chat or send email to selected users."
      ],
      "createdAt": "2026-07-13",
      "updatedAt": "2026-07-13",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "siddharth-vaghasia",
          "pictureUrl": "https://github.com/siddharth-vaghasia.png",
          "name": "Siddharth Vaghasia"
        }
      ],
      "references": [
        {
          "name": "Getting started with SharePoint Framework",
          "description": "Set up your development environment and start building SharePoint Framework solutions.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment"
        },
        {
          "name": "Microsoft 365 Copilot extensibility",
          "description": "Build and extend experiences for Microsoft 365 Copilot with agents and tools.",
          "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/"
        },
        {
          "name": "Use Microsoft Graph in your solution",
          "description": "Use Microsoft Graph from SharePoint Framework solutions to access Microsoft 365 data.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/people-directory",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/people-directory",
      "preview": {
        "alt": "Inline people search results rendered in Microsoft 365 Copilot chat.",
        "width": 1615,
        "height": 875,
        "src640": "generated/previews/people-directory-640.webp",
        "src960": "generated/previews/people-directory-960.webp"
      },
      "gallery": [
        {
          "alt": "Inline people search results rendered in Microsoft 365 Copilot chat.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/people-directory/assets/1.png"
        },
        {
          "alt": "Fullscreen People Directory overview in Microsoft 365 Copilot.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/people-directory/assets/2.png"
        },
        {
          "alt": "Person result row with profile details and Teams chat/email actions.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/people-directory/assets/3.png"
        }
      ]
    },
    {
      "slug": "copilot-my-approvals",
      "name": "pnp-spfx-copilot-apps-copilot-my-approvals",
      "title": "MyApprovals Agent - Act on Microsoft 365 approvals from Copilot chat",
      "shortDescription": "View and act on your Microsoft 365 approvals directly from Copilot chat.",
      "longDescription": [
        "MyApprovals brings your pending Microsoft 365 approval requests into Microsoft 365 Copilot. Ask the MyApprovals agent about your approvals and it displays them inline or in a fullscreen overview, showing the requester, status, and details for each item. Approve, reject, or re-assign a request, and contact the requester by email, all without leaving the conversation.",
        "Built with a SharePoint Copilot App (SPFx 1.24.0-beta.2, @microsoft/sp-copilot-component), the same MyApprovalsCopilotComponent renders both the compact inline card and the expanded fullscreen view, reading brokered Microsoft Graph and SharePoint REST calls with zero token-acquisition code."
      ],
      "createdAt": "2026-07-12",
      "updatedAt": "2026-07-12",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "maschroeder-z",
          "pictureUrl": "https://github.com/maschroeder-z.png",
          "name": "Marc A. Schröder-Zhou"
        }
      ],
      "references": [
        {
          "name": "Overview of SharePoint Copilot Apps",
          "description": "Extend Microsoft 365 Copilot with custom, interactive experiences built using the familiar SharePoint Framework (SPFx) tools and client-side development model.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps"
        },
        {
          "name": "Build agents for Microsoft 365 Copilot",
          "description": "Extend Microsoft 365 Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.",
          "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/"
        },
        {
          "name": "Overview of the SharePoint Framework",
          "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/copilot-my-approvals",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/copilot-my-approvals",
      "preview": {
        "alt": "Compact inline view of the MyApprovals Copilot component inside a Microsoft 365 Copilot chat, showing a greeting, three action buttons, and a list of pending approvals.",
        "width": 848,
        "height": 505,
        "src640": "generated/previews/copilot-my-approvals-640.webp",
        "src960": "generated/previews/copilot-my-approvals-960.webp"
      },
      "gallery": [
        {
          "alt": "Compact inline view of the MyApprovals Copilot component inside a Microsoft 365 Copilot chat, showing a greeting, three action buttons, and a list of pending approvals.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/copilot-my-approvals/assets/copilot-spfx-agent-approvals-01.png"
        },
        {
          "alt": "Expanded fullscreen view of the MyApprovals Copilot component, showing a status filter dropdown and a detailed list of approvals with Approve, Reject, and Re-assign buttons for each.",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/copilot-my-approvals/assets/copilot-spfx-agent-approvals-02.png"
        }
      ]
    },
    {
      "slug": "executive-sales-dashboard",
      "name": "pnp-sp-dev-spfx-copilot-apps-executive-sales-dashboard",
      "title": "Executive Sales & Revenue Dashboard (Copilot Component)",
      "shortDescription": "An SPFx Copilot Component that renders an executive sales dashboard inline in Microsoft 365 Copilot and expands to a rich full-screen view, entirely from offline mock data.",
      "longDescription": [
        "A SharePoint Framework Copilot Component (React 17 + Fluent UI v9) that surfaces an Executive Sales & Revenue Dashboard directly inside Microsoft 365 Copilot. It renders a compact inline card and, on request, a rich full-screen dashboard, switching on the host displayMode. All data comes from a locally generated, Graph-shaped mock so the sample runs fully offline; a data-service interface plus a useMock flag make switching to a real backend a drop-in change.",
        "Features include KPI cards, an actual-vs-target revenue trend, revenue by region and by product, a quarter-forecast gauge, generated insights, host-driven light/dark theming, a gear-activated settings panel, filters (region/product/segment) that noticeably reshape the data, and a data-loading spinner. All charts are drawn with inline SVG (no external chart library)."
      ],
      "createdAt": "2026-07-08",
      "updatedAt": "2026-07-08",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "PaoloPia",
          "pictureUrl": "https://github.com/PaoloPia.png",
          "name": "Paolo Pialorsi"
        }
      ],
      "references": [
        {
          "name": "Overview of the SharePoint Framework",
          "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open-source tooling.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        },
        {
          "name": "Microsoft 365 Copilot",
          "description": "Microsoft 365 Copilot combines the power of large language models with your organization's data to help you be more productive.",
          "url": "https://www.microsoft.com/microsoft-365/copilot"
        },
        {
          "name": "Use Microsoft Graph in your solution",
          "description": "Microsoft Graph is the gateway to data and intelligence in Microsoft 365, exposing REST APIs and client libraries to access data across Microsoft 365 services.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/executive-sales-dashboard",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/executive-sales-dashboard",
      "preview": {
        "alt": "Full-screen executive sales dashboard",
        "width": 1920,
        "height": 1080,
        "src640": "generated/previews/executive-sales-dashboard-640.webp",
        "src960": "generated/previews/executive-sales-dashboard-960.webp"
      },
      "gallery": [
        {
          "alt": "Full-screen executive sales dashboard",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/executive-sales-dashboard/assets/screenshot-fullscreen.png"
        },
        {
          "alt": "Inline dashboard card in Copilot",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/executive-sales-dashboard/assets/screenshot-inline.png"
        }
      ]
    },
    {
      "slug": "time-off-absence",
      "name": "pnp-sp-dev-spfx-copilot-apps-time-off-absence",
      "title": "My Time Off — Time-Off & Absence Copilot App",
      "shortDescription": "A SharePoint Copilot App (SPFx 1.24 Copilot Components) that brings the employee time-off (PTO) experience inside the Microsoft 365 Copilot canvas — a personal overview, a request form with an Outlook conflict pre-check, and a team view with manager approvals and a full-screen absence calendar, all powered by delegated, client-side SharePoint REST and Microsoft Graph calls.",
      "longDescription": [
        "My Time Off is a SharePoint Copilot App built as an SPFx 1.24 Copilot Components sample (not a classic web part). It ships three components that render directly in the Microsoft 365 Copilot chat: timeOffOverview (GetMyTimeOff) shows the signed-in user's balances, upcoming leave and request history; timeOffRequest (RequestTimeOff) is a booking form that checks the user's Outlook calendar for conflicts before writing a new request; and timeOffTeam (GetTeamTimeOff) surfaces who's out, a manager approvals inbox and a full-screen team absence calendar.",
        "The headline capability the sample highlights is authenticated, delegated client-side API calls — something the MCP app specification itself does not provide. Every component reads and writes with the signed-in user's own identity, calling SharePoint REST (three lists: TimeOffRequests, LeaveBalances, CompanyHolidays) and Microsoft Graph (calendar conflict pre-check, manager and team roster resolution, and 48x48 profile photos) directly from the browser — no MCP server, no middle tier, no app-only secrets. New requests are routed to the submitter's line manager resolved via Graph (/me/manager) with a self-approval fallback that keeps single-user demo tenants working.",
        "The data services call SharePoint and Graph live but never throw: on any failure they fall back to an in-memory data set so the components always render, and the team calendar self-heals to a demo roster when User.Read.All is not consented. A PnP PowerShell provisioning script creates and seeds the lists, and a TimeOffSite tenant property lets an admin repoint the components at a different lists site without rebuilding. Built with the Heft build system, React 17 and Fluent UI v9 with host-driven theming inside Copilot's sandboxed iframe."
      ],
      "createdAt": "2026-07-06",
      "updatedAt": "2026-07-06",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "jansenbe",
          "pictureUrl": "https://github.com/jansenbe.png",
          "name": "Bert Jansen"
        }
      ],
      "references": [
        {
          "name": "Overview of the SharePoint Framework",
          "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open-source tooling.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        },
        {
          "name": "Microsoft 365 Copilot",
          "description": "Microsoft 365 Copilot combines the power of large language models with your organization's data to help you be more productive.",
          "url": "https://www.microsoft.com/microsoft-365/copilot"
        },
        {
          "name": "Use Microsoft Graph in your solution",
          "description": "Microsoft Graph is the gateway to data and intelligence in Microsoft 365, exposing REST APIs and client libraries to access data across Microsoft 365 services.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis"
        },
        {
          "name": "PnP PowerShell",
          "description": "PnP PowerShell is a cross-platform PowerShell module providing cmdlets to manage and provision SharePoint Online artifacts such as the lists this sample uses.",
          "url": "https://pnp.github.io/powershell/"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/time-off-absence",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/time-off-absence",
      "preview": {
        "alt": "My Time Off scenario — inline balance card and full-screen team absence calendar",
        "width": 1499,
        "height": 844,
        "src640": "generated/previews/time-off-absence-640.webp",
        "src960": "generated/previews/time-off-absence-960.webp"
      },
      "gallery": [
        {
          "alt": "My Time Off scenario — inline balance card and full-screen team absence calendar",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/time-off-absence/assets/introduction.png"
        },
        {
          "alt": "My Time Off personal overview (light theme)",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/time-off-absence/assets/my%20time%20off%20-%20light.png"
        },
        {
          "alt": "Request Time Off form with Outlook conflict pre-check (light theme)",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/time-off-absence/assets/request%20time%20off%20-%20light.png"
        },
        {
          "alt": "Team view with manager approvals and absence calendar (light theme)",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/time-off-absence/assets/manager%20view%20-%20light.png"
        },
        {
          "alt": "My Time Off personal overview (dark theme)",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/time-off-absence/assets/my%20time%20off%20-%20dark.png"
        }
      ]
    },
    {
      "slug": "zava-retail-store",
      "name": "pnp-sp-dev-spfx-copilot-apps-zava-retail-store",
      "title": "Zava Retail Store — Retail Performance Copilot App",
      "shortDescription": "A SharePoint Copilot App (SPFx 1.24 Copilot Component) that renders an executive retail cockpit inside the Microsoft 365 Copilot canvas — a compact inline performance card that expands to a full-screen dashboard covering sales, category mix, customer satisfaction, feedback, top products and store comparisons.",
      "longDescription": [
        "Zava Retail Store is a SharePoint Copilot App built as an SPFx 1.24 Copilot Component (not a classic web part). The same React component renders in two display modes inside the Microsoft 365 Copilot canvas: a compact inline card and an immersive full-screen executive dashboard. Copilot opens to a compact performance card — headline metrics and a sales trend — then can request expansion via requestDisplayModeAsync('fullscreen') to reveal the full experience.",
        "The full-screen experience is an executive dashboard shell (app rail + top bar) composed of modular sections: a metrics row (sales vs target, transactions, avg basket, CSAT, NPS, conversion rate), a sales trend panel, sales by category, a customer satisfaction gauge, recent customer feedback, a top-products carousel and store/region comparison. A Filters dialog lets the user pick the target store and date and enable/disable individual panels, and the whole dashboard re-flows live to match the selection.",
        "The sample ships with mocked, Microsoft Graph-shaped data behind a swappable data service exposing a useMock flag (true for fully offline demos, false to read a live data service and Microsoft Graph for the signed-in user), so a live implementation is a drop-in replacement. The Copilot Component is surfaced as a tool (ZavaRetailTool) a declarative agent can call, rendering its own React UI inside the Copilot host. Built with the Heft build system, React 17 and Fluent UI v9 with host-driven light/dark theming."
      ],
      "createdAt": "2026-07-06",
      "updatedAt": "2026-07-06",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "PaoloPia",
          "pictureUrl": "https://github.com/PaoloPia.png",
          "name": "Paolo Pialorsi"
        }
      ],
      "references": [
        {
          "name": "Overview of the SharePoint Framework",
          "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open-source tooling.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        },
        {
          "name": "Microsoft 365 Copilot",
          "description": "Microsoft 365 Copilot combines the power of large language models with your organization's data to help you be more productive.",
          "url": "https://www.microsoft.com/microsoft-365/copilot"
        },
        {
          "name": "Use Microsoft Graph in your solution",
          "description": "Microsoft Graph is the gateway to data and intelligence in Microsoft 365, exposing REST APIs and client libraries to access data across Microsoft 365 services.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/zava-retail-store",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/zava-retail-store",
      "preview": {
        "alt": "Zava Retail Store scenario — inline card and full-screen dashboard",
        "width": 1920,
        "height": 1080,
        "src640": "generated/previews/zava-retail-store-640.webp",
        "src960": "generated/previews/zava-retail-store-960.webp"
      },
      "gallery": [
        {
          "alt": "Zava Retail Store scenario — inline card and full-screen dashboard",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-retail-store/assets/concept-mockup.png"
        },
        {
          "alt": "Inline Zava Retail performance card in the Copilot canvas",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-retail-store/assets/screenshot-inline.png"
        },
        {
          "alt": "Full-screen Zava Retail executive dashboard",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/zava-retail-store/assets/screenshot-fullscreen.png"
        }
      ]
    },
    {
      "slug": "my-day",
      "name": "pnp-sp-dev-spfx-copilot-apps-my-day",
      "title": "My Day — Personalized Intranet Copilot App",
      "shortDescription": "A SharePoint Copilot App (SPFx 1.24 Copilot Component) that renders a personal 'My Day' cockpit inside the Microsoft 365 Copilot canvas — a compact inline card that expands to a full-screen dashboard with agenda, tasks, mail, news, a 'Plan my day' briefing and session-persisted settings.",
      "longDescription": [
        "My Day is a SharePoint Copilot App built as an SPFx 1.24 Copilot Component (not a classic web part). The same React component renders in two display modes inside the Microsoft 365 Copilot canvas: a compact inline card and an immersive full-screen dashboard. Inline shows a time-aware greeting, the next meeting, tasks due today and the top news headline; it can request expansion via requestDisplayModeAsync('fullscreen').",
        "The full-screen experience is a responsive dashboard — agenda timeline, tasks completion ring, important mail with sender face avatars, a news wall, quick actions and a hero weather card. A 'Plan my day' banner opens a read-only, deterministically generated focus briefing (no chat, no real AI/WorkIQ call), and a settings drawer lets the user switch temperature units, edit location and show/hide panels.",
        "Settings are intentionally persisted to the browser session (sessionStorage) to demonstrate how configuration can shape the dashboard live without server-side storage; the layout re-flows dynamically to the number of visible panels. The sample ships with mocked, Microsoft Graph-shaped data behind a swappable IMyDayDataService interface, so a live Graph / SharePoint implementation is a drop-in replacement. Built with the Heft build system, React 17 and Fluent UI v9 with host-driven light/dark theming."
      ],
      "createdAt": "2026-07-02",
      "updatedAt": "2026-07-02",
      "products": [
        "SharePoint",
        "Microsoft 365 Copilot"
      ],
      "sampleType": "SPFx-CopilotComponent",
      "clientTechnology": "React",
      "spfxVersion": "1.24.0-beta.2",
      "authors": [
        {
          "gitHubAccount": "vesajuvonen",
          "pictureUrl": "https://github.com/vesajuvonen.png",
          "name": "Vesa Juvonen"
        }
      ],
      "references": [
        {
          "name": "Overview of the SharePoint Framework",
          "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open-source tooling.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview"
        },
        {
          "name": "Microsoft 365 Copilot",
          "description": "Microsoft 365 Copilot combines the power of large language models with your organization's data to help you be more productive.",
          "url": "https://www.microsoft.com/microsoft-365/copilot"
        },
        {
          "name": "Use Microsoft Graph in your solution",
          "description": "Microsoft Graph is the gateway to data and intelligence in Microsoft 365, exposing REST APIs and client libraries to access data across Microsoft 365 services.",
          "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis"
        }
      ],
      "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/main/samples/my-day",
      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/spfx-copilot-components/tree/main/samples/my-day",
      "preview": {
        "alt": "My Day scenario — inline card and full-screen dashboard",
        "width": 1201,
        "height": 676,
        "src640": "generated/previews/my-day-640.webp",
        "src960": "generated/previews/my-day-960.webp"
      },
      "gallery": [
        {
          "alt": "My Day scenario — inline card and full-screen dashboard",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/my-day/assets/introduction.png"
        },
        {
          "alt": "Inline My Day card in the Copilot canvas",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/my-day/assets/screenshot-inline.png"
        },
        {
          "alt": "Full-screen My Day dashboard",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/my-day/assets/screenshot-fullscreen.png"
        },
        {
          "alt": "My Day settings drawer (session-persisted)",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/my-day/assets/screenshot-settings.png"
        },
        {
          "alt": "My Day full-screen dashboard in dark mode",
          "url": "https://github.com/pnp/spfx-copilot-components/raw/main/samples/my-day/assets/screenshot-dark.png"
        }
      ]
    }
  ],
  "contributors": [
    {
      "gitHubAccount": "a1mery",
      "pictureUrl": "https://github.com/a1mery.png",
      "name": "Aimery Thomas"
    },
    {
      "gitHubAccount": "jansenbe",
      "pictureUrl": "https://github.com/jansenbe.png",
      "name": "Bert Jansen"
    },
    {
      "gitHubAccount": "DanielBrownAG",
      "pictureUrl": "https://github.com/DanielBrownAG.png",
      "name": "Daniel Brown"
    },
    {
      "gitHubAccount": "ejazhussain",
      "pictureUrl": "https://github.com/ejazhussain.png",
      "name": "Ejaz Hussain"
    },
    {
      "gitHubAccount": "HarminderSethi",
      "pictureUrl": "https://github.com/HarminderSethi.png",
      "name": "Harminder Singh"
    },
    {
      "gitHubAccount": "joaojmendes",
      "pictureUrl": "https://github.com/joaojmendes.png",
      "name": "João Mendes"
    },
    {
      "gitHubAccount": "maschroeder-z",
      "pictureUrl": "https://github.com/maschroeder-z.png",
      "name": "Marc A. Schröder-Zhou"
    },
    {
      "gitHubAccount": "mohammadamer",
      "pictureUrl": "https://github.com/mohammadamer.png",
      "name": "Mohammad Amer"
    },
    {
      "gitHubAccount": "ferrarirosso",
      "pictureUrl": "https://github.com/ferrarirosso.png",
      "name": "Nello D'Andrea"
    },
    {
      "gitHubAccount": "PaoloPia",
      "pictureUrl": "https://github.com/PaoloPia.png",
      "name": "Paolo Pialorsi"
    },
    {
      "gitHubAccount": "AhmadiRamin",
      "pictureUrl": "https://github.com/AhmadiRamin.png",
      "name": "Ramin Ahmadi"
    },
    {
      "gitHubAccount": "saurabh7019",
      "pictureUrl": "https://github.com/saurabh7019.png",
      "name": "Saurabh Tripathi"
    },
    {
      "gitHubAccount": "siddharth-vaghasia",
      "pictureUrl": "https://github.com/siddharth-vaghasia.png",
      "name": "Siddharth Vaghasia"
    },
    {
      "gitHubAccount": "ValerasNarbutas",
      "pictureUrl": "https://github.com/ValerasNarbutas.png",
      "name": "Valeras Narbutas"
    },
    {
      "gitHubAccount": "vesajuvonen",
      "pictureUrl": "https://github.com/vesajuvonen.png",
      "name": "Vesa Juvonen"
    }
  ],
  "products": [
    "Microsoft 365 Copilot",
    "SharePoint"
  ],
  "excludedSamples": []
}