{"id":20286535,"url":"https://github.com/pnp/vscode-viva","last_synced_at":"2026-04-02T19:14:16.869Z","repository":{"id":52274051,"uuid":"488870156","full_name":"pnp/vscode-viva","owner":"pnp","description":"With the SharePoint Framework Toolkit extension, you can create and manage your SharePoint Framework solutions on your tenant. All actions you need to perform during the development flow are at your fingertips.","archived":false,"fork":false,"pushed_at":"2026-03-25T23:43:52.000Z","size":152389,"stargazers_count":71,"open_issues_count":46,"forks_count":28,"subscribers_count":13,"default_branch":"main","last_synced_at":"2026-03-26T00:05:45.719Z","etag":null,"topics":["hacktoberfest","m365","m365dev","microsoft-teams","sharepoint","sharepoint-framework","spfx","viva","viva-connections"],"latest_commit_sha":null,"homepage":"https://aka.ms/spfx/toolkit","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pnp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"contributing.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":"SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-05-05T07:19:20.000Z","updated_at":"2026-03-23T03:54:59.000Z","dependencies_parsed_at":"2023-10-28T14:31:06.823Z","dependency_job_id":"0b34dafd-8014-4fe4-996f-823372fa315b","html_url":"https://github.com/pnp/vscode-viva","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"purl":"pkg:github/pnp/vscode-viva","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pnp%2Fvscode-viva","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pnp%2Fvscode-viva/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pnp%2Fvscode-viva/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pnp%2Fvscode-viva/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pnp","download_url":"https://codeload.github.com/pnp/vscode-viva/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pnp%2Fvscode-viva/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31314167,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","m365","m365dev","microsoft-teams","sharepoint","sharepoint-framework","spfx","viva","viva-connections"],"created_at":"2024-11-14T14:34:52.398Z","updated_at":"2026-04-02T19:14:16.863Z","avatar_url":"https://github.com/pnp.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg alt=\"SharePoint Framework Toolkit for Visual Studio Code\" src=\"./assets/logo-large.png\" width=\"150px\" /\u003e\n\u003c/h1\u003e\n\n\u003ch1 align=\"center\"\u003e\n  SharePoint Framework Toolkit for Visual Studio Code\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=m365pnp.viva-connections-toolkit\u0026ssr=false#overview\"\u003e\n    \u003cimg src=\"https://vscode-marketplace-badge.vercel.app/api/badge/version/m365pnp.viva-connections-toolkit?color=%23276EC2\u0026style=flat-square\"\n      alt=\"version\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=m365pnp.viva-connections-toolkit\u0026ssr=false#overview\"\u003e\n    \u003cimg src=\"https://vscode-marketplace-badge.vercel.app/api/badge/installs/m365pnp.viva-connections-toolkit?color=%234B51B8\u0026style=flat-square\"\n      alt=\"installs\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003e\n  \u003ca href=\"https://pnp.github.io/vscode-viva/\" title=\"SPFx Toolkit Documentation\"\u003e\n  👉 SPFx Toolkit Documentation\n  \u003c/a\u003e\n\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003eSharePoint Framework Toolkit is a Visual Studio Code extension that aims to boost your productivity in developing and managing SharePoint Framework solutions helping at every stage of your development flow, from setting up your development workspace to deploying a solution straight to your tenant without the need to leave VS Code. With SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready allowing you to create solutions to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook and Microsoft365.com.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#-capabilities\"\u003eCapabilities\u003c/a\u003e |\n  \u003ca href=\"#%EF%B8%8F-architecture\"\u003eArchitecture\u003c/a\u003e |\n  \u003ca href=\"#-docs\"\u003eDocs\u003c/a\u003e |\n  \u003ca href=\"#-contributing\"\u003eContributing\u003c/a\u003e |\n  \u003ca href=\"#-support\"\u003eSupport\u003c/a\u003e |\n  \u003ca href=\"#-code-of-conduct\"\u003eCode of Conduct\u003c/a\u003e |\n  \u003ca href=\"#-changelog\"\u003eChangelog\u003c/a\u003e |\n  \u003ca href=\"#-sharing-is-caring\"\u003eSharing is Caring\u003c/a\u003e |\n  \u003ca href=\"#-additional-resources\"\u003eAdditional resources\u003c/a\u003e\n\u003c/p\u003e\n\n![Sample Gallery](./docs/assets/images-vscode/start.png)\n\n## ⭐ Capabilities\n\nThe extension provides the following capabilities:\n\n### 1️⃣ Welcome experience\n\nThe extension automatically detects if you have a SharePoint Framework project opened. If not, it will start with a welcome experience that will guide you through the process of creating a new project and validating your local environment.\n\n![Welcome experience](./docs/assets/images-vscode/welcome-experience.png)\n\nDirectly from this view, you may create a new project from scratch or from an existing web part, extension or ACE sample, or ACE scenario.\n\nLast but not least it is possible to check your local workspace for the needed global dependencies to develop the SPFx solutions, like the correct Node version, gulp, yeoman etc., and install them if needed with a single click.\n\nWhen running the extension for the first time it will present you a walkthrough that will give you a step-by-step guide to get started with SharePoint Framework development and will go over the main functionalities of SharePoint Framework (SPFx) Toolkit.\n\n![Walkthrough](./docs/assets/images-vscode/walkthrough.png)\n\nYou may also sign in to your Microsoft 365 tenant to gain access to the extension management capabilities allowing you to manage you app catalogs and deployed solutions.\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/guides/welcome-experience/)\n\n### 2️⃣ Set up your development environment\n\nTo ensure that you can develop SPFx solutions, you may use the **Validate local setup** functionality. \n\n![Validate dependency](./docs/assets/images-vscode/validate-dependency.png)\n\nThis action checks if your local development environment meets the required versions of Node.js and global dependencies for the SPFx version you have installed, and in case you do not have any SPFx generator installed, it will validate against the latest SPFx version.\n\nIt is also possible to install the required Node.js version and global dependencies for any SPFx version using the **Install dependencies** action.\n\n![install dependencies](./docs/assets/images-vscode/Install-dependencies.png)\n\n\u003e  [!NOTE]\n\u003e  The list of valid dependencies is based on [set up your development environment recommendations](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment)\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/setup)\n\n### 3️⃣ Don't Start from scratch. Reuse an SPFx web part or extension or ACE sample\n\nYou may kick-start your development with a new project based on an existing ACE or SPFx web part or extension with a click of a button. All of the provided samples are powered by [PnP Samples repositories](https://pnp.github.io/sp-dev-fx-webparts/samples/type/).\n\n![Sample gallery](./docs/assets/images-vscode/samples.png)\n\nThe extension provides a set of filters to help you find the right sample for your needs. You may search by: author, title, description, SPFx version, and component type. It is also possible browse sample details view directly from VS Code checking all sample details before you create a new project.\n\nSwitch between the list and grid view and don't worry about the size of your VS Code as it is fully responsive.\n\n![Sample gallery is responsive](./docs/assets/images-vscode/samples-responsive.png)\n\nCheck out how easy it is to create a new project based on a existing sample 👇. \n![Create project based on web part sample](./docs/assets/images-vscode/sample-gallery.gif)\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/scaffolding#sample-gallery-start-with-a-sample)\n\n### 4️⃣ Start from an ACE scenario\n\nStart your solution based on the provided set of ACE scenarios with ready-to-use code to showcase what's possible. Scenarios are provided with detailed guidance using the [Code Tour](https://aka.ms/codetour) to provide you with more details on the structure and options.\n\n### 5️⃣ Create a new project\n\nCreating a new project was never easier. Just use the **create a new project** action, and the extension will guide you through the process with a dedicated scaffolding form.\n\n![Create new project](./docs/assets/images-vscode/scaffolding.png)\n\nIt's possible to scaffold any kind of SPFx project.\n\n![All SPFx project support](./docs/assets/images-vscode/scaffolding-support.png)\n\nInstall additional dependencies with a single click straight from the scaffolding form. Currently we support installing [PnP reusable property pane controls](https://pnp.github.io/sp-dev-fx-property-controls/), [PnP reusable React controls](https://pnp.github.io/sp-dev-fx-controls-react/), [PnPjs](https://pnp.github.io/pnpjs/). Add a Node Version Manager configuration file either for NVM or NVS.\n\n![Additional dependency step](./docs/assets/images-vscode/scaffolding-additional-step.png)\n\n***Important!***\n\nAs of now, creating new project supports only latest version of SharePoint Framework (SPFx). If you need to create a project with an older version, please use the the SharePoint Yeoman generator directly in the terminal.\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/scaffolding)\n\n### 6️⃣ Sign in to your tenant \u0026 retrieve environment details\n\nThe extension allows you to sign in to your Microsoft 365 tenant using CLI for Microsoft 365.\n\n![login](./docs/assets/images-vscode/login.png)\n\nSPFx Toolkit needs and Entra App Registration to be able to sign in to your tenant. You may either use an existing app registration or create a new one with a single click using a dedicated form. \n\n![sign in options](./docs/assets/images-vscode/sign-in-options.png)\n\nSPFx Toolkit will guide you through the process of creating a new app registration either manually by providing step-by-step guidance or automatically by creating the app registration for you.\n\n![entra app reg form](./docs/assets/images-vscode/sign-in-entra-app-reg-form.png)\n\nCheck it out in action 👇\n\n![app registration](./docs/assets/images-vscode/sign-in.gif)\n\nIf you already have an Entra App Registration you may use it to sign in to your tenant by providing the Client Id and Tenant Id.\n\n![app registration](./docs/assets/images-vscode/sign-in-existing-app.gif)\n\nThanks to that the extension will retrieve helpful URLs from your tenant like link to: \n\n- SharePoint main site \n- SharePoint admin site\n- SharePoint web API permission management page\n\nAdditionally, the extension will check and retrieve tenant service health incidents that are currently happening in your tenant so that you gain quick insights on your tenant health.\n\n![tenant details](./docs/assets/images-vscode/tenant-links.png)\n\nAfter successful sign in, an additional view is presented that shows a list of links to app catalogs available in the tenant, both tenant-level and all site-level app catalogs. If you don't have a tenant app catalog you may create on directly from this extension. It is also possible to create a site-level app catalog and deactivate them if needed.\nYou can expand each app catalog to reveal the list of apps contained within. Selecting an app navigates you to its details page. Additionally, hovering over an app node presents a set of actions, allowing you to perform various operations directly on the selected app.\n\n- **Deploy**: Makes the solution available for installation in sites but does not automatically install it.\n- **Retract**: Reverses the deployment, preventing the solution from being installed in sites.\n- **Remove**: Removes the app from the app catalog.\n- **Enable**: Allows end users to add the solution to their SharePoint sites.\n- **Disable**: Hides the solution from end users, preventing them from adding it to sites.\n- **Install**: Install the solution from tenant or site collection app catalog to a site.\n- **Uninstall**: Uninstall the solution from a site.\n- **Upgrade**: Upgrades the solution to the latest version available in the app catalog for the specified site.\n- **Copy**: Copies the solution to a different app catalog.\n- **Move**: Moves the solution to a different app catalog.\n\n![tenant details](./docs/assets/images-vscode/app-catalog-list.png)\n\nAdditionally, on the tenant app catalog level, SPFx Toolkit presents all tenant-wide extensions that are available on your tenant with additional management capabilities:\n\n- **Remove**: Allows to remove tenant-wide extension.\n- **Enable**: Enables tenant-wide extension.\n- **Disable**: Disables tenant-wide extension.\n- **Update**: Allows to update all of the tenant-wide extension properties like: Title, Properties, Web template in which the extension will be present, List template, sequence and host properties.\n\n![tenant wide extensions management capabilities](./docs/assets/images-vscode/tenant-wide-extensions-management-capabilities.png)\n\nUsing the extension settings you may choose to show or hide the apps in app catalog list and tenant health incidents list.\n\n![settings](./docs/assets/images-vscode/settings.png)\n\nSign-in is also required for some actions to work properly like the deploy action which allows you to upload of the .sppkg file to the tenant or site-level App Catalog.\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/sign-in)\n\n### 7️⃣ Tasks\n\nThe extension shows all possible tasks that can be run on an SPFx project. The tasks view displays all relevant tasks available for the current SPFx project, as well as all npm scripts defined in the `package.json` file.\n\nFor SPFx projects created with versions below 1.22, Gulp tasks will be shown in the tasks view:\n\n![Gulp Tasks](./docs/assets/images-vscode/tasks.png)\n\nFor SPFx projects created with version 1.22 and above, Heft tasks will be shown in the tasks view:\n\n![Tasks](./docs/assets/images-vscode/heft-tasks.png)\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/coding#gulp-tasks-view)\n\n### 8️⃣ Actions\n\nThe actions section allows unique functionalities that may significantly boost productivity when working with SPFx projects.\n\n![Actions](./docs/assets/images-vscode/actions.png)\n\nCurrently the extension allows you to:\n\n- **Upgrade project SPFx version** - Generates a detailed upgrade report (`.md` and/or code tour) to guide users from their current SPFx version to a selected target version using CLI for Microsoft 365. The report includes both required and optional upgrade steps, with a consolidated script at the end for automated actions and a list of remaining manual steps.\n\n![Upgrade project](./docs/assets/images-vscode/upgrade-project.png)\n\nAnd the code tour guidance will provide you upgrade tips directly in your code!\n\n![Upgrade project](./docs/assets/images-vscode/upgrade-project-code-tour.png)\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/actions#upgrade-project)\n\n- **Validate project correctness** - Creates a validation .md report and/or code tour validation guidance for the currently open SPFx project. The action will automatically detect the SPFx version used and will validate if the project is properly set up.\n\n![Validate project](./docs/assets/images-vscode/validate-project.png)\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/actions#validate-current-project)\n\n- **Validate local setup for current project** - This action will validate the local setup for the currently open SPFx project, ensuring all necessary global dependencies are in place.\n\n![Validate local setup for current project](./docs/assets/images-vscode/validate-local-setup-for-current-project.png)\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/actions#validate-local-setup)\n\n- **Rename project** - Forget about manual work and let the extension rename your project and generate a new solution ID. \n\n![Rename](./docs/assets/images-vscode/rename.png)\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/actions#rename-current-project)\n\n- **Increase project version** - This action allows you to increase project major, minor or patch version and automatically align the versioning between `package.json` and `package-solution.json` files.\n\n![Increase project version](./docs/assets/images-vscode/increase-versioning.png)\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/actions#increase-project-version)\n\n- **Grant API permissions** - The action will Grant all API permissions specified in the package-solution.json of the current project. This is especially helpful if you just want to debug your SPFx solution using Workbench. No longer do you need to bundle, package, and deploy the project to then go to the SharePoint admin portal and consent to the permissions. All of that is now done with just a single click. \n\n![Grant permissions](./docs/assets/images-vscode/grant-permissions.png)\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/actions#grant-api-permissions)\n\n- **Deploy project to app catalog** - This action will only work when the user is logged in to tenant and the sppkg file is present. The action will deploy the project to the selected (tenant or site) app catalog. \n\n![Deploy](./docs/assets/images-vscode/deploy.png)\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/actions#deploy-project)\n\n- **Set Form Customizer** - Allows to update the New, Edit or View form of any SharePoint List to a given SPFx Form Customizer based on provided GUID. \n\n![Set Form Customizer](./docs/assets/images-vscode/set-form-customizer-action.png)\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/actions#set-form-customizer)\n\n- **Scaffold CI/CD Workflow** - This action will allow you to generate yaml CI/CD GitHub Workflow or Azure DevOps Pipeline to bundle, package, and deploy your project to any app catalog on every code push. \n\n![CI CD pipeline](./docs/assets/images-vscode/CICD-pipeline.png)\n\nCheck it out in action for GitHub👇\n\n![GitHub CI CD workflow](./docs/assets/images-vscode/gh-ci-cd.gif)\n\nAnd for Azure DevOps👇\n\n![Azure DevOps CI CD pipeline](./docs/assets/images-vscode/azdo-ci-cd.gif)\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/ci-cd)\n\n- **Add new component** - Allows scaffolding a new SPFx project as a new component of the currently opened project. The action under the hood uses the same SharePoint Yeoman generator to scaffold a new project and this feature is an abstraction UI layer. \n\n![Add component](./docs/assets/images-vscode/add-component.png)\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/actions#add-new-component)\n\n- **Open sample/scenario galleries of the SPFx web part, extensions, or ACEs projects** - SharePoint Framework Toolkit supports a couple of sample galleries that may be used to scaffold a new SPFx project. \n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/actions#open-samplescenario-galleries-of-the-spfx-web-part-extensions-or-aces-projects)\n\n### 9️⃣ Help and feedback section\n\nThe help and feedback section is a group of links that will direct you to the right Microsoft documentation and learning paths. It also contains links to additional tooling that may be helpful in your development process as well as links to connect with the Microsoft 365 and Power Platform Community. \n\n![help and feedback](./docs/assets/images-vscode/help-and-feedback.png)\n\n### 1️⃣0️⃣ Coding Snippets\n\nThe SharePoint Framework Toolkit comes together as a bundle with two other extensions. One of them is [SPFx Snippets](https://marketplace.visualstudio.com/items?itemName=eliostruyf.spfx-snippets) created by [Elit Struyf](https://www.eliostruyf.com/). \n\nIt contains snippets for working in:\n\n- JavaScript (resource files)\n- React\n- SASS (SCSS)\n- TypeScript\n- JSON\n\nIn order to start using it simply start typing from `spfx-` and you should see a full list of snippets that will inject code into the current file.\n\n![code snippets](./docs/assets/images-vscode/code-snippets.png)\n\nCheck out the extension [details to find out more](https://github.com/estruyf/vscode-spfx-snippets#usage) \n\nCheck it out in action 👇\n\n![code snippets](./docs/assets/images-vscode/code-snippets.gif)\n\n### 1️⃣1️⃣ Microsoft 365 Agents Toolkit Integration\n\n[Microsoft 365 Agents Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) is a widely used VS Code extension that aims to help you develop solutions that will allow you to extend Microsoft Teams. SharePoint Framework Toolkit aims to boost your productivity in SharePoint Framework solutions that may be used to extend SharePoint, Microsoft Teams, Microsoft Viva Connections, Outlook, and Microsoft365.com. Among many awesome functionalities, Microsoft 365 Agents Toolkit allows you to create a project to extend Teams Tab with SPFx project, and that’s where both of those extensions may cooperate.\n\n![Microsoft 365 Agents Toolkit integration](./docs/assets/images-vscode/better-together.png)\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/m365-agents-toolkit)\n\n### 1️⃣2️⃣ Node.js Version Manager Support\n\nBy default, the SharePoint Framework Toolkit will use the Node.js version that is installed on your machine. If you want to use a different version, you can use a Node.js Version Manager such as [nvm](https://github.com/nvm-sh/nvm) or [nvs](https://github.com/jasongin/nvs). The SharePoint Framework Toolkit will detect the preferred version of Node.js if a `.nvmrc` file is present in the root of your project, and will use that version for all the actions.\n\nIt's possible to use the settings to change which Node.js version manager you want to use. You may choose between `nvm` and `nvs`. If you wish to avoid using a Node.js version manager, you can set the value to `none`\n\n![Settings Node version manager](./docs/assets/images-vscode/settings-node-version-manager.png)\n\nOther than selecting the Node.js version manager you may also select which file should be used to store the Node.js version. By default, the extension will use `.nvmrc` file, but you may change it to `.node-version` if you are using `nvs`.\n\n![Settings Node version file](./docs/assets/images-vscode/settings-node-version-manager-file.png)\n\nIt is also possible to set the default behavior when you're about to scaffold a new project. To do so there is a specific setting named `Create Node Version File Default Value`.\n\n![Settings Node version file default value](./docs/assets/images-vscode/settings-node-version-manager-file-default-value.png)\n\n### 1️⃣3️⃣ SPFx Toolkit GitHub Chat Participant \n\n![SPFx Toolkit chat](./docs/assets/images-vscode/chat-intro.png)\n\nNow 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. \n\n![SPFx Toolkit chat in action](./docs/assets/images-vscode/chat-in-action-new.gif)\n\n![SPFx Toolkit chat in action](./docs/assets/images-vscode/chat-in-action-new2.gif)\n\n@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.\n\n![SPFx Toolkit chat commands](./docs/assets/images-vscode/chat-commands.png)\n\nCurrently, we support the following commands:\n- `/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\n\nThe 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. \n\n![Language Model Tools](./docs/assets/images-vscode/language-model-tools.png)\n\nLanguage model tools may only be used in agent mode, which is available in the GitHub Copilot chat extension. Currently it allows you to do basic operations to manage your SharePoint Online tenant like getting information about specific site, creating and removing a site, listing apps from your tenant app catalog, installing an app, creating a page, etc. \nIn order to use the tool you may #hashtag mention it, otherwise if your prompt will be well defined then GitHub Copilot should figure out which tool should be used to proceed with the task.\n\n![Language Model Tools in Action](./docs/assets/images-vscode/language-model-tools-in-action.png)\n\nThe extension provides the following tools\n\n| Tool                              | Description                                               |\n|-----------------------------------|-----------------------------------------------------------|\n| SharePointAppInstall              | Installs an app from tenant app catalog in the site       |\n| SharePointAppInstanceList         | List installed SharePoint apps in a site                  |\n| SharePointAppList                 | Lists apps from the tenant app catalog                    |\n| SharePointAppUninstall            | Uninstalls an app from a site                             |\n| SharePointAppUpgrade              | Upgrade a SharePoint app in the specified site            |\n| SharePointListAdd                 | Creates list in the specified site                        |\n| SharePointListGet                 | Gets information about the specific list                  |\n| SharePointListRemove              | Removes the specified list                                |\n| SharePointPageAdd                 | Creates a page                                            |\n| SharePointPageGet                 | Gets information about the specific page                  |\n| SharePointPageList                | Lists pages in the specified site                         |\n| SharePointPageCopy                | Copies a SharePoint page                                  |\n| SharePointPageRemove              | Removes the specified page                                |\n| SharePointSiteAdd                 | Create a new SharePoint Online site                       |\n| SharePointSiteGet                 | Gets information about the specific site                  |\n| SharePointSiteRemove              | Remove a SharePoint Online site                           |\n| SharePointFrameworkProjectUpgrade | Upgrade SharePoint Framework project                      |\n| SharePointFrameworkLocalEnvironmentSetup | Set up local environment for SharePoint Framework development |\n\n[Check out our docs for more details](https://pnp.github.io/vscode-viva/features/github-copilot-capabilities)\n\n## ⚙️ Architecture\n\nSharePoint Framework Toolkit for Visual Studio Code is an abstraction layer on top of the [SPFx](https://aka.ms/spfx) Yeoman generator and [CLI for Microsoft 365](https://pnp.github.io/cli-microsoft365/). \n\nThis means that the features and capabilities provided through this tool are available for any solution which has been built with SPFx.\n\n## 📚 Docs \n\nFor more information on how to use the extension, please refer to the [SPFx Toolkit Docs](https://pnp.github.io/vscode-viva/).\n\n## 👩‍💻 Contributing\n\nThis project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to grant us the right to use your contribution. For details, visit https://cla.microsoft.com.\n\nWhen you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.\n\nIf you have ideas for new features or feedback, let us know by creating an issue in the [issues list](https://github.com/pnp/vscode-viva/issues). Before you submit a PR with your improvements, please review our [contributing guide](./contributing.md).\n\n## 🙋 Support\n\nThis project is a community lead extension provided by the [Microsoft 365 and Power Platform Community](https://aka.ms/m365/community) members. Microsoft employees are closely involved in this work, but the solution is provided under the community brand without direct supportability channels from Microsoft.\n\n## 👍 Community\n\nAre you building experiences for Microsoft 365? - Everyone is welcome to join our [Microsoft 365 and Power Platform Community](https://aka.ms/m365/community) efforts with community calls, samples and guidance. Join our [weekly community calls](https://aka.ms/m365/calls) for Microsoft 365 and Power Platform topics or engage with us on [Discord](https://aka.ms/community/discord). Everyone is welcome 🧡\n\n## 🧾 Code of Conduct\n\nThis project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).\nFor more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.\n\n## 📄 Changelog\n\nSee the [changelog](./CHANGELOG.md) for the latest changes.\n\n## 😍 \"Sharing is Caring\"\n\n\u003ch1 align=\"center\"\u003e\n  \u003cimg alt=\"Microsoft 365 \u0026 Power Platform Community\" src=\"./docs/assets/images-vscode/parker-pnp.png\" width=\"200px\" /\u003e\n\u003c/h1\u003e\n\n## 🔍 Additional resources\n\n- Join the [Microsoft 365 Developer Program](https://developer.microsoft.com/en-us/microsoft-365/dev-program) today to get your free Microsoft 365 tenant\n- Join the [Microsoft 365 and Power Platform Community](https://pnp.github.io/) community and engage with us on [Discord](https://aka.ms/community/discord)\n\n## ⚠️ Disclaimer\n\n**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpnp%2Fvscode-viva","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpnp%2Fvscode-viva","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpnp%2Fvscode-viva/lists"}