Develop Next.js widgets with Sitefinity MCP Server 

Using the Sitefinity MCP (Model Context Protocol) server for Next.js widget generation, you use the power of Large Language Models (LLM) to quickly and easily generate new widgets for your Next.js renderer project.

This way, you can start enriching your Next.js - based project 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, 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 feel 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.

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

1. Open your Next.js renderer project in VS Code.
2. Add the Sitefinity MCP Server:
   1. Open the Command Palette by pressing Ctrl+Shift+P.
   2. In the Command palette, enter MCP:Add Server…
   3. Select HTTP (HTTP or Server-Sent Events)
   4. In MCP Server URL, enter https://mcp.sitefinity.cloud/nextjs-widgets/mcp
   5. Set a name of your choice.
      For example, mcp-nextjs-widgets.
   6. Select Workspace Settings.
      The mcp.json file opens in a new tab. It contains the MCP URL you have set in Step 2d.
   7. In the mcp-nextjs-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, the JSON should look like the following:
      
3. Start the MCP server connection.
   Perform the following:
   1. Open the Command Palette by pressing Ctrl+Shift+P.
   2. Select the MCP server that you configured in Step 2.
   3. Click Start Server.
      
      NOTE: If the server has already been started, the Start Server option is unavailable.
   4. To open Copilot Chat, click View » Chat.
   5. To select Agent mode, in the lower-left corner of the chat bubble, open the Select mode dropdown box and select Agent.
   6. Optionally, configure the used LLM, using the middle dropdown box with the name of the currently selected LLM in the chat bubble.
      
      RECOMMENDATION: For the best results, we recommend using Anthropic Sonnet 3.7 or 4, or Google Gemini 2.5 Pro .

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

To build a carousel widget, perform the following:

1. In the Chat bubble, 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.
3. In the Chat bubble, click Keep.
4. Review the generated code.
   
   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 Next.js renderer.
6. Open or create a new page, based on a Next.js template.
7. Place the newly generated widget.