Integrating AI API with SPFx Web Part

AI is becoming an important part of modern applications. One useful use case in SharePoint is connecting AI APIs inside an SPFx web part.

This post will explain at high level ,how we can connect an AI API with an SPFx web part and create a simple 'Document Summary' solution.

Solution Architecture

Process

1. SPFx web part reads document content from SharePoint
2. Document content is sent securely to AI API
3. AI service generates summary of the document
4. SPFx web part displays summary to the user

Technology Stack

• SharePoint Framework (React + TypeScript)
• Microsoft SharePoint Online
• REST API or Microsoft Graph API
• AI API such as OpenAI, Azure OpenAI, or custom AI service
• Azure Function or Backend API for secure communication

Frontend – SPFx Web Part

Read Document Content

The SPFx web part can read document content using SharePoint APIs/ PnP / Graph APIs.

Example:

const apiUrl = `${webAbsoluteUrl}/_api/web/GetFileByServerRelativeUrl('${fileUrlEncoded}')/$value`;

const response = await context.spHttpClient.get( apiUrl, SPHttpClient.configurations.v1 );

const content = <get text content from response based on different file type>

Calling AI API

After reading the document content, send it to AI service.

Example:

let headers = {
    'Content-Type': 'application/json'
};

headers.Authorization = `Bearer ${openAiKey}`;

let requestBody = {
    messages: [
        { 
        role: 'system', 
        content: 'You are a helpful summarization assistant.' 
        },
        { 
        role: 'user', 
        content: `Summarize this document. Document text:\n${content}` 
        }
    ],
    max_tokens: <maxTokens>
};

requestBody.model = <model>;

const result = await fetch(apiUrl, {
    method: "POST",
    headers,
    body: JSON.stringify(requestBody)
});

const summary = await result.json();

The AI service will process the document and return the summary.

Security Consideration

Do not keep API keys directly inside frontend code.

Recommended approach:

• SPFx sends request to Azure API or Azure Function
• Backend stores API key securely
• Backend calls AI provider
• Response is returned back to SPFx web part

This helps in protecting API keys and keeps the solution secure.

Conclusion

Integrating AI APIs with SPFx web parts can make SharePoint applications smarter and more useful. The future of SharePoint development is AI-powered intelligent solutions.