Getting Started with Sitecore Blok Building a Next.js App with AI Assistance

In this blog, we’ll explore what Blok is, walk through a tutorial to create a Next.js app using Blok, running it locally, and even leverage Blok Model Context Protocol (MCP) integration to generate UI components with AI-powered prompts inside VS Code.

What is Sitecore Blok?

Sitecore Blok is Sitecore’s new official design system. It provides a curated set of reusable UI components, design tokens, and patterns that help developers build applications with a consistent Sitecore look and feel. Instead of creating UI components from scratch, Blok lets teams focus on functionality while leveraging a shared visual language already used across Sitecore products.

Blok is built for modern front-end development, using React and Tailwind CSS through the ShadCN UI approach. This makes it easy to integrate with frameworks like Next.js while maintaining the flexibility developers expect from today's tooling. On top of that, Sitecore has introduced an AI-friendly integration through MCP (Model Context Protocol), enabling tools like GitHub Copilot to understand and generate Blok-based components.

Why Use This Approach?

Choosing Sitecore Blok combined with Next.js and MCP integration offers a modern, efficient approach to building composable, headless applications. By leveraging Blok, developers can reuse a curated set of UI components and design tokens, ensuring a consistent look and feel across Sitecore-based products without reinventing the wheel. Integrating with Next.js provides a powerful, flexible framework for server-side rendering and modern front-end practices. At the same time, MCP integration with AI tools such as GitHub Copilot accelerates UI development by generating ready-to-use components from natural language prompts.

This approach reduces development overhead, minimizes errors from manual UI creation, and allows teams to focus on implementing functionality and business logic. In other words, it is not just about building a UI; it is about streamlining development, maintaining consistency, and leveraging AI to boost productivity, making it particularly valuable for teams delivering composable or headless solutions in the Sitecore ecosystem.

Creating a Next.js App with Blok

To get started, you need Node.js 16+, npm 10+, and a basic Next.js setup. First, initialize the ShadCN UI system, which Blok is built on:

npx shadcn@latest init

This step prepares your project by configuring Tailwind, setting up component paths, and creating the required configuration files.

Then, select Next.js, input the project name: my-blok-app, and select Neutral color.

Success!

Next, let’s add the Button Component

cd my-blok-app
npx shadcn@latest add https://blok.sitecore.com/r/button.json

You can add one by one the components that you will use in the app. You can find a detailed guide for each component at https://blok.sitecore.com/primitives

Running the App Using the Button Component

To confirm everything is working, let’s try the button component into your main page.

1. Open the my-blok-app using Visual Studio

2. In the Explorer Panel on the left, Navigate to my-blok-app\app\page.tsx

3. Delete all of the code of page.tsx and paste the following code:

   import { Button } from "@/components/ui/button";
   export default function Home() {
     return (
       <div>
         <Button variant="default">Primary</Button>
         <Button variant="outline">Outline</Button>
         <Button variant="ghost">Ghost</Button>
         <Button variant="link">Link</Button>
       </div>
     );
   }
   

Then, on the Visual Studio Terminal, start the development server:

cd my-blok-app
npm run dev

When you open the app in your browser http://localhost:3000, you should see a Next.js page with some Sitecore-styled buttons rendered correctly. This confirms that Blok is fully integrated and ready to use.

Using Blok MCP with VS Code and Copilot

One of the most powerful features around Blok is its MCP server. MCP enables AI tools to understand external systems, in this case, the Blok component registry.

By configuring the Blok MCP in your environment and connecting it to an AI assistant like GitHub Copilot in VS Code, you can generate UI using natural language prompts. The AI knows which Blok components exist and how they are used.

Configure the Blok registry

Add/replace the following to your components.json

"registries": {
    "@blok": "https://blok.sitecore.com/r/{name}.json"
 }

To initialize an MCP project for VS Code using the shadCN CLI, on the Visual Studio Terminal, run the following commands:

npx shadcn@latest mcp init --client vscode

Open .vscode/mcp.json and click Start next to the shadcn server.

After setting up the MCP connection, you can open Copilot Chat and run a prompt such as:

Create a contact form using components from the shadcn registry. Add padding around the form.

At first, we’ll enable auto approve to let Copilot execute all commands and avoid asking for confirmation every time.

When it finishes, we could see that Copilot created some components and modified the api/contact/route.ts

If we run the app

npm run dev

We’ll see the form created.

Copilot will respond by generating React code that uses Blok components to assemble the form, including layout, typography, and structure consistent with the design system.

This workflow significantly accelerates UI development, particularly for prototyping and scaffolding pages.

Wrapping Up

Sitecore Blok provides a modern, reusable design system that simplifies the development of composable, headless applications. By leveraging pre-built UI components, design tokens, and consistent patterns, teams can focus on building functionality rather than reinventing the UI, ensuring a consistent Sitecore look and feel across applications.

When combined with Next.js, developers gain the benefits of a flexible, performant framework for modern front-end development, including server-side rendering and fast iteration. Adding MCP integration and AI-powered tools like GitHub Copilot further accelerates development by generating ready-to-use components based on natural language prompts, reducing repetitive tasks and increasing productivity.

This approach offers a compelling alternative for building Sitecore-based applications or Marketplace extensions: it streamlines development, enforces design consistency, and empowers teams to move from concept to implementation faster. Sitecore Blok, paired with AI-assisted MCP workflows, represents a scalable, efficient solution for modern composable site development.