Developing SharePoint SPFx Components with Claude AI: Practical Guide

Claude AI as a SharePoint Development Copilot

SharePoint Framework (SPFx) development requires deep expertise: TypeScript, React, Microsoft Graph APIs, PnP js, PowerShell provisioning scripts... All technologies that Claude AI masters and can mobilize to significantly accelerate your development cycles. At UTMA Conseil, we integrate Claude AI into our daily workflow to generate component skeletons, write deployment scripts and produce technical documentation.

1. Generating an SPFx Web Part with Claude AI

A well-structured prompt allows Claude to generate a complete SPFx Web Part skeleton in seconds. Example of a component displaying a SharePoint list via PnP js:

import * as React from 'react';
import { useState, useEffect } from 'react';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { SPFI, spfi } from '@pnp/sp';
import { SPFx } from '@pnp/sp/presets/all';
import '@pnp/sp/webs';
import '@pnp/sp/lists';
import '@pnp/sp/items';

export interface IMyWebPartProps {
  listTitle: string;
  maxItems: number;
}

const MyWebPartComponent: React.FC<{ sp: SPFI; listTitle: string; maxItems: number }> = ({
  sp,
  listTitle,
  maxItems,
}) => {
  const [items, setItems] = useState<{ Id: number; Title: string }[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchItems = async () => {
      try {
        const result = await sp.web.lists
          .getByTitle(listTitle)
          .items.select('Id', 'Title')
          .top(maxItems)();
        setItems(result);
      } catch (err) {
        console.error('Failed to load items', err);
      } finally {
        setLoading(false);
      }
    };
    fetchItems();
  }, [listTitle, maxItems]);

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {items.map((item) => (
        <li key={item.Id}>{item.Title}</li>
      ))}
    </ul>
  );
};

export default class MyWebPart extends BaseClientSideWebPart<IMyWebPartProps> {
  private _sp!: SPFI;

  protected onInit(): Promise<void> {
    this._sp = spfi().using(SPFx(this.context));
    return super.onInit();
  }

  public render(): void {
    const element = React.createElement(MyWebPartComponent, {
      sp: this._sp,
      listTitle: this.properties.listTitle || 'Projects',
      maxItems: this.properties.maxItems || 10,
    });
    const root = document.createElement('div');
    this.domElement.innerHTML = '';
    this.domElement.appendChild(root);
    // @ts-ignore
    ReactDom.render(element, root);
  }
}

2. PnP PowerShell Provisioning Script

PnP provisioning enables automated deployment of SharePoint sites, lists, columns and content pages via a reproducible script. Claude AI generates these scripts in seconds from a functional description.

# Connect to the target SharePoint site
Connect-PnPOnline -Url "https://tenant.sharepoint.com/sites/intranet" -Interactive

# Create a Projects list
New-PnPList -Title "Projects" -Template GenericList -OnQuickLaunch

# Add custom columns
Add-PnPField -List "Projects" `
  -DisplayName "Status" `
  -InternalName "ProjectStatus" `
  -Type Choice `
  -Choices @("In Progress", "Completed", "On Hold", "Cancelled")

Add-PnPField -List "Projects" `
  -DisplayName "Delivery Date" `
  -InternalName "DeliveryDate" `
  -Type DateTime

Add-PnPField -List "Projects" `
  -DisplayName "Project Manager" `
  -InternalName "ProjectManager" `
  -Type User

# Create a filtered view
Add-PnPView -List "Projects" `
  -Title "Active Projects" `
  -Fields @("Title", "ProjectStatus", "DeliveryDate", "ProjectManager") `
  -Query "<Where><Eq><FieldRef Name='ProjectStatus'/><Value Type='Choice'>In Progress</Value></Eq></Where>"

Write-Host "Provisioning completed successfully" -ForegroundColor Green

3. PnP Provisioning XML Template

For multi-environment deployments (dev, staging, prod), the PnP Provisioning XML template is the reference solution. Apply it via Invoke-PnPSiteTemplate -Path "template.xml".

<?xml version="1.0" encoding="utf-8"?>
<pnp:Provisioning xmlns:pnp="http://schemas.dev.office.com/PnP/2022/09/ProvisioningSchema">
  <pnp:Preferences Generator="PnP.Framework"/>
  <pnp:Templates ID="UTMA-Templates">
    <pnp:ProvisioningTemplate ID="UTMA-Intranet" Version="1.0">
      <pnp:Lists>
        <pnp:ListInstance Title="Projects"
                          TemplateType="100"
                          Url="Lists/Projects"
                          EnableVersioning="true"
                          OnQuickLaunch="true">
          <pnp:Views>
            <View Name="Active Projects" DefaultView="true">
              <Query>
                <Where>
                  <Eq>
                    <FieldRef Name="ProjectStatus"/>
                    <Value Type="Choice">In Progress</Value>
                  </Eq>
                </Where>
              </Query>
              <ViewFields>
                <FieldRef Name="Title"/>
                <FieldRef Name="ProjectStatus"/>
                <FieldRef Name="Modified"/>
              </ViewFields>
            </View>
          </pnp:Views>
        </pnp:ListInstance>
      </pnp:Lists>
    </pnp:ProvisioningTemplate>
  </pnp:Templates>
</pnp:Provisioning>

4. Generating Documentation with Claude AI

Technical documentation is often the most time-consuming part of a project. Claude can automatically generate README files, installation guides, user guides and API documentation from source code. Simply submit the code and specify the desired format (Markdown, Word, Confluence...).

Recommended Full Workflow

1. Functional brief → Precisely describe the requirement to Claude (list name, columns, expected behavior, mockup if available)
2. Skeleton generation → Claude generates the complete SPFx Web Part with properties, React rendering and API calls
3. Code iterations → Share compilation errors or user feedback with Claude for targeted fixes
4. Deployment script → Claude generates the PnP PowerShell script or XML provisioning template
5. Documentation → Claude generates README, user guide and code comments
6. Review and deployment → Mandatory human review before any production deployment

Limits and Best Practices

• Always review generated code: Claude may produce code that doesn't compile or uses deprecated APIs.
• Never expose sensitive data in prompts: Tenant URLs, credentials and access tokens must never be included in a Claude prompt.
• Mandatory unit tests: Generated code must be covered by Jest tests before any production deployment.
• Version control: Treat AI-generated code like any other code: Git commit, code review, CI/CD pipeline.

Want to leverage this approach for your SharePoint project? Contact UTMA Conseil for a free consultation.