# Develop widgets with Sitefinity MCP Server

## Overview

Using the Sitefinity MCP (Model Context Protocol) server for generating ASP.NET Core and Next.js widgets, you utilize the power of Large Language Models (LLM) to quickly and easily generate new widgets for your decoupled renderer project.

This way, you can start enriching your project based on decoupled renderer architecture with new widgets immediately.

First, you describe to an LLM your business needs. For example – `create a carousel widget with image, title, and two buttons`. Then, using the MCP protocol, the Sitefinity MCP server generates all the required code and configurations in your editor.

This feature enables faster testing and iteration, faster team scaling, and enables new developers to contribute from day one.

Sitefinity MCP server enriches the IDEs you are using with specific knowledge about Sitefinity CMS, thus, the code and configuration it creates align with Sitefinity’s widget structure, naming conventions, and rendering logic. It follows the best practices and feels natural to the underlying platform.

In this sample, you learn how to configure Sitefinity MCP Server in your editor of choice and create a Next.js widget using prompting.

> info **PREREQUISITES**: To use this sample, you must comply with the following:
>
> * To develop Next.js widgets, you must have installed Sitefinity CMS 15.2 or later
> * To develop ASP.NET Core widgets, you must have installed Sitefinity CMS 14.4 or later
> * You must have an existing project using either Sitefinity Next.js or ASP.NET Core renderer.\
>   For more information, see [Develop with Next.js](https://www.progress.com/documentation/sitefinity-cms/develop-with-nextjs) and [Develop with ASP.NET Core](https://www.progress.com/documentation/sitefinity-cms/develop-widgets-with-asp.net-core).
> * The sample assumes you are using [Visual Studio Code](https://code.visualstudio.com/) (VS Code).\
>   You can use any MCP-enabled development environment, such as Cursor or Windsurf, but you have to adjust the procedure accordingly.

## Procedure

This sample guides you to configure your development environment using VS Code to start building Sitefinity widgets with the hosted MCP server.\
Perform the following:

1. Open your decoupled renderer project in VS Code. Both ASP.NET Core and Next.js are supported.

2. Add the Sitefinity MCP Server:
   1. Open the *Command Palette* (under Windows, press `Ctrl+Shift+P`).
   2. In the *Command palette*, enter `MCP:Add Server…`
   3. Select *HTTP (HTTP or Server-Sent Events)*
   4. In *URL of the MCP Server*, enter the URL of the corresponding Sitefinity MCP Server.\
      For developing with Next.js, enter `https://mcp.sitefinity.cloud/nextjs-widgets`.\
      For developing with ASP.NET Core, enter `https://mcp.sitefinity.cloud/netcore-widgets`.
   5. Set a name of your MCP server.
      For example, `mcp-widgets`.
   6. For *Configuration target*, select `Global`.

      > success **RESULT**: The `mcp.json` file opens in a new tab. It contains the MCP server you have configured.
   7. In the `mcp-widgets` object, add the headers object, containing the `x-sitefinity-url` property. You set the value of this property to the URL of the API endpoint exposed by your Sitefinity CMS instance.\
      For example, if your Sitefinity is hosted on `www.example.com` and you have named your MCP server `mcp-widgets`, the JSON should look like the following.\
      **For Next.js:**

      ```JSON
      {
          "servers": {
              "mcp-widgets": {
                  "url": "https://mcp.sitefinity.cloud/nextjs-widgets/",
                  "type": "http",
                  "headers": {
                      "x-sitefinity-url": "https://www.example.com/api/default"
                  }
              }
          }
      }
      ```

      **For ASP.NET Core:**

      ```JSON
      {
          "servers": {
              "mcp-widgets": {
                  "url": "https://mcp.sitefinity.cloud/netcore-widgets/",
                  "type": "http",
                  "headers": {
                      "x-sitefinity-url": "https://www.example.com/api/default"
                  }
              }
          }
      }
      ```

3. Start the MCP server connection.\
   If you have just added the MCP Server using the procedure in *Step 2*, the MCP server is automatically started and you can skip this procedure.\
   Use this procedure to start the MCP server manually.\
   Perform the following:
   1. Open the *Command Palette* (under Windows, press `Ctrl+Shift+P`).
   2. In the *Command palette*, enter `MCP:List Servers…`
   3. Select the MCP server that you configured in *Step 2*.\
      For example, select `mcp-widgets`.
   4. Click *Start Server*.

      > info **NOTE**: If the server has already been started, the *Start Server* option is unavailable.
   5. To open the *Chat* panel, click *View » Chat*.
   6. To select Agent mode, in the *Chat* panel, click [![Set Agent](https://www.progress.com/documentation/sitefinity-cms/assets/7040a6f459ea2768875f401bec34e88d/vscode-agent-button.png "Set Agent")](https://www.progress.com/documentation/sitefinity-cms/assets/7040a6f459ea2768875f401bec34e88d/vscode-agent-button.png) *(Set Agent)* and select *Agent*.
   7. Optionally, configure the used LLM by clicking the *Models* button in the *Chat* panel.

> success **RESULT**: Your Sitefinity MCP Server is ready. You can start prompting it and create widgets.

## Example

To build a carousel widget, perform the following:

1. In the *Chat* panel, enter `Create a carousel widget with an image, title, and two buttons`.
2. When Copilot asks you for confirmation, use the dropdown box to select one of the *Allow* options, then click *Continue*.\
   If you intend to use the Sitefinity MCP Server multiple times in your project, we recommend using the *Allow in this workspace* option.\
   For more information, see *Visual Studio Code documentation* » [Approvals & Permissions](https://code.visualstudio.com/docs/agents/run/approvals).
3. When prompted about *changed files* in the *Chat* panel, click *Keep*.
4. Review the generated code.

   > important **IMPORTANT**: Sitefinity MCP Server relies on an LLM to generate code. Because LLMs can generate unreliable code, you should always check their output before using it in a production project.
5. Navigate to your Sitefinity CMS backend using your decoupled renderer as a proxy.
6. Open or create a new page, based on a renderer template that uses the same technology as the one you used to create the widget.\
   For example, if you used Sitefinity MCP Server to create a widget based on ASP.NET Core, you must use an ASP.NET Core-based renderer and edit ASP.NET Core pages to place the newly generated widget.
7. Place the newly generated widget.