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
- SPFx web part reads document content from SharePoint
- Document content is sent securely to AI API
- AI service generates summary of the document
- SPFx web part displays summary to the user
- 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
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>
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.
