Skip to content

Adds language model tool that creates new spfx projects. Closes #707, #705 #852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Adam-it wants to merge 2 commits into
base: dev
Choose a base branch
from
+275 −295
Draft

Adds language model tool that creates new spfx projects. Closes #707, #705 #852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3020ea8
Adds language model tool that creates new spfx projects
Adam-it Jul 29, 2026
67d0dca
wip
Adam-it Nov 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 2 additions & 16 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,22 +333,7 @@ It is also possible to set the default behavior when you're about to scaffold a

![Settings Node version file default value](./docs/assets/images-vscode/settings-node-version-manager-file-default-value.png)

### 1️⃣3️⃣ SPFx Toolkit GitHub Chat Participant

![SPFx Toolkit chat](./docs/assets/images-vscode/chat-intro.png)

Now you may use SPFx Toolkit as a chat participant in GitHub Copilot chat extension. Simply, mention @spfx in the chat to ask dedicated questions regarding SharePoint Framework development.

![SPFx Toolkit chat in action](./docs/assets/images-vscode/chat-in-action-new.gif)

![SPFx Toolkit chat in action](./docs/assets/images-vscode/chat-in-action-new2.gif)

@spfx is your dedicated AI Copilot that will help you with anything that is needed to develop your SharePoint Framework project. It has predefined commands that are tailored toward a specific activity for which you require guidance.

![SPFx Toolkit chat commands](./docs/assets/images-vscode/chat-commands.png)

Currently, we support the following commands:
- `/new` - that may be used to get guidance on how to create a new solution or find and reuse an existing sample from the PnP SPFx sample gallery
### 1️⃣3️⃣ SPFx Toolkit GitHub Language Model Tools

The SPFx Toolkit Language Model Tools provide a set of skills may be used by GitHub Copilot in agent mode to assist you in your SharePoint Framework development tasks and managing your SharePoint Online tenant.

Expand Down Expand Up @@ -385,6 +370,7 @@ The extension provides the following tools
| SharePointSiteSet | Updates the specified SharePoint Online site |
| SharePointFrameworkProjectUpgrade | Upgrade SharePoint Framework project |
| SharePointFrameworkLocalEnvironmentSetup | Set up local environment for SharePoint Framework development |
| SharePointFrameworkCreateNewProject | Create a new SharePoint Framework project |

[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/github-copilot-capabilities)

Expand Down
27 changes: 3 additions & 24 deletions docs/src/content/docs/features/github-copilot-capabilities.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ title: GitHub Copilot Capabilities
description: Explore the capabilities of SPFx Toolkit in GitHub Copilot
---

SPFx Toolkit provides a set of AI capabilities that may be used in GitHub Copilot Chat extension. The chat participant allows you to have a discussion grounded for SharePoint Framework development and the Language Model tools will provide you with several capabilities to manage your SharePoint Online tenant.
SPFx Toolkit provides a set of AI Language Model tools that will provide you with several capabilities to manage your SharePoint Online tenant.

## Agent Mode - Language Model Tools
## Language Model Tools

SPFx Toolkit provides a set of language model tools that are available in GitHub Copilot agent mode. Some of them are designed to work in the context of your SharePoint Framework project but other may work regardless of what you have opened in VS Code and aim to do common task on your SharePoint Online tenant.

Expand All @@ -15,8 +15,6 @@ You don't need to do anything specific to use any of the language model tools in

![language-model-tools-in-action](../../../../assets/images-vscode/language-model-tools-in-action.png)

### SharePoint Online Management

This set of tools aim to allow you to perform common management tasks on your SharePoint Online tenant. In order to use them you need to be first signed in to your tenant in SPFx Toolkit.

The extension provides the following tools
Expand Down Expand Up @@ -45,26 +43,7 @@ The extension provides the following tools
| SharePointSiteSet | Updates the specified SharePoint Online site |
| SharePointFrameworkProjectUpgrade | Upgrade SharePoint Framework project |
| SharePointFrameworkLocalEnvironmentSetup | Set up local environment for SharePoint Framework development |

## Chat Participant

![chat-intro](../../../../assets/images-vscode/chat-intro.png)

SPFx Toolkit comes along with a chat participant that you may use in GitHub Copilot ask mode. Simply, mention @spfx in the chat to ask dedicated questions regarding SharePoint Framework development.

@spfx is your dedicated AI assistant that will help you with anything that is needed to develop your SharePoint Framework project. It has predefined commands that are tailored toward a specific activity for which you require guidance.

![chat-commands](../../../../assets/images-vscode/chat-commands.png)

Lets explore the available commands that you may use in the chat participant.

### `/new`

May be used to get guidance on how to create a new solution or find and reuse an existing sample from the PnP SPFx sample gallery
Check it out in action 👇

![chat-in-action-new](../../../../assets/images-vscode/chat-in-action-new.gif)
![chat-in-action-new2](../../../../assets/images-vscode/chat-in-action-new2.gif)
| SharePointFrameworkCreateNewProject | Create a new SharePoint Framework project |

## Managing Microsoft 365 tenant using natural language

Expand Down
172 changes: 156 additions & 16 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,22 +49,6 @@
"main": "./dist/extension.js",
"aiConnectionString": "",
"contributes": {
"chatParticipants": [
{
"id": "spfx-toolkit.pnp",
"fullName": "SPFx Toolkit",
"name": "spfx",
"description": "How can I help you with SPFx development? Use /new command for job specific support.",
"isSticky": true,
"commands": [
{
"name": "new",
"isSticky": true,
"description": "Create a new SharePoint Framework project"
}
]
}
],
"languageModelTools": [
{
"name": "install_spo_app",
Expand Down Expand Up @@ -1038,6 +1022,162 @@
}
}
}
},
{
"name": "create_spfx_project",
"tags": [
"sharepoint framework",
"SPFx",
"project",
"new",
"create",
"spfx-toolkit"
],
"toolReferenceName": "SharePointFrameworkCreateNewProject",
"displayName": "Create new SharePoint Framework project",
"modelDescription": "This tool will help you create a new SharePoint Framework project using the Yeoman generator. It will prompt for project details and generate the necessary files and structure for a new SPFx project.",
"userDescription": "Create new SharePoint Framework project",
"canBeReferencedInPrompt": true,
"icon": "$(package)",
"inputSchema": {
"type": "object",
"properties": {
"solutionName": {
"type": "string",
"description": "Solution name and folder name. This option is required."
},
"componentType": {
"type": "string",
"description": "The type of component. Allowed values: webpart, extension, library, adaptiveCardExtension. This option is required.",
"enum": [
"webpart",
"extension",
"library",
"adaptiveCardExtension"
]
},
"componentName": {
"type": "string",
"description": "Component name. This option is required."
},
"framework": {
"type": "string",
"description": "Template to use. Allowed values: none, react, minimal. Required when componentType is webpart or extension. For extensionType FormCustomizer, only react and none are allowed.",
"enum": [
"none",
"react",
"minimal"
]
},
"extensionType": {
"type": "string",
"description": "The type of extension. Allowed values: ApplicationCustomizer, FieldCustomizer, ListViewCommandSet, FormCustomizer, SearchQueryModifier. Required when componentType is extension.",
"enum": [
"ApplicationCustomizer",
"FieldCustomizer",
"ListViewCommandSet",
"FormCustomizer",
"SearchQueryModifier"
]
},
"aceTemplateType": {
"type": "string",
"description": "The type of adaptive card extension template. Allowed values: Generic, Search, DataVisualization. Required when componentType is adaptiveCardExtension.",
"enum": [
"Generic",
"Search",
"DataVisualization"
]
}
},
"required": [
"solutionName",
"componentType",
"componentName"
],
"allOf": [
{
"if": {
"properties": {
"componentType": {
"enum": [
"webpart",
"extension"
]
}
},
"required": [
"componentType"
]
},
"then": {
"required": [
"framework"
]
}
},
{
"if": {
"properties": {
"componentType": {
"const": "extension"
}
},
"required": [
"componentType"
]
},
"then": {
"required": [
"extensionType"
]
}
},
{
"if": {
"properties": {
"componentType": {
"const": "adaptiveCardExtension"
}
},
"required": [
"componentType"
]
},
"then": {
"required": [
"aceTemplateType"
]
}
},
{
"if": {
"properties": {
"componentType": {
"const": "extension"
},
"extensionType": {
"const": "FormCustomizer"
}
},
"required": [
"componentType",
"extensionType"
]
},
"then": {
"properties": {
"framework": {
"enum": [
"none",
"react"
]
}
}
}
}
]
}
}
],
"walkthroughs": [
Expand Down
124 changes: 0 additions & 124 deletions src/chat/PromptHandlers.ts
View file
Open in desktop

This file was deleted.

Loading