SitecoreAI MarketplaceCode Jam - Setup
Overview
- Register Your App - Start by registering your extension in Developer Studio / App Studio.
- Scaffold Your App - Use the provided templates to quickly scaffold your application.
- Start the Application - Launch your app and verify everything is running smoothly.
- Configure Blok and Docs MCP - Set up Blok for UI components and Docs MCP for documentation integration to unlock full extensibility.
1. Register App
- Check your emails for the invite and accept.
- Login to Sitecore Cloud Portal: https://portal.sitecorecloud.io/?organization=org_4Zfp5uCkO1MCDDIm
- Make sure you are in the right Organization: Marketplace Hackerspace
- Go to App Studio (in main nav)
- Click Create app (top right corner)
- In the box give your app a meaningful App name
- Choose Custom to create a custom (private) app
- Hit the Create Button
Configure your App:
-
Dependent on the extension point you want to create this app for enable one of the following:
- Standalone - Full Screen in Cloud Portal
- Full Screen - in SitecoreAI
- Dashboard Widget - in SitecoreAI
- Page Contex Panel - in SitecoreAI Page Builder
- Custom Field - in SitecoreAI Page Builder
-
enable API access for SitecoreAI APIs
-
Grant permissons to allow pop ups, read and copy from clipboard as needed
-
For deployment URL use:
http://localhost:3000as you want to connect your local running app for now. -
For the App Logo, upload an image with square format, minimum 512x512pxl. You can use: https://cdn-icons-png.flaticon.com/512/13862/13862255.png
-
Hit the Activate button in the top right corner
For sure there is more to explore here, but let's keep it to your needed steps for now.
1.1 Install App
- Open My Apps (either from dialogue after Activation or from main navigation)
- Your app should appear in the list
- Hit the Install button.
- In the modal, select only the environment you are assigned to: e.g: 12-City-Tour-2026-Amsterdam/12-City-Tour-2026-Amsterdam
- Hit the Install button
- The app should have been successfully installed
- To test go to the place dependent on your chosen extension point (does not apply when choosing Custom field) --> You should see the app being listed but run into an error when being called. That is because there is no app running on localhost:3000, yet.
2. Scaffold Starter Kit
-
Run the following command:
npx shadcn@latest add https://blok-shadcn.vercel.app/r/marketplace/next/quickstart-with-client-side-xmc.json -
When asked to install [email protected], answer
y -
When prompted to choose a Next.js version choose
Next15 -
Provide a meaningful project name that describes your project. Use only lowercase letters e.g.:
my-first-marketplace-app -
When prompted, choose a base color. Any is fine.
Your app should be created and you should see this in terminal
and this in the file system.
Read more: https://doc.sitecore.com/mp/en/developers/sdk/latest/sitecore-marketplace-sdk/quick-start--cli-.html
3. Start application
To start your application go to your terminal and navigate into the folder containing your package.json file and run npm run dev
When you app started successfully you will it running under http://localhost:3000
Test: Go back to the extension point where the app is registered and reload your app. the app should now show content.
4. Register MCPs
4.1 Register Blok MCP
4.1 a. in VS Code
- Navigate to the root of your project in vs code terminal
- run
npx shadcn@latest mcp init --client vscode
This will create a file .vscode/mcp.json and add configuration for the MCP
Read more here: https://blok.sitecore.com/mcp
4.1 b. Cursor
- Navigate to the root of your project in vs code terminal
- run
npx shadcn@latest mcp init --client cursor
This will create a file .cursor/mcp.json and add configuration for the MCP
Read more here: https://blok.sitecore.com/mcp
4.2 Register Docs MCP
- Go to https://doc.sitecore.com
- Click on the "Ask AI" button next to the search bar
- In the chat popup, find the "Use MCP" drop down
- Select the option you want to add the DOCs MCP to.
- Follow the instructions ( you need to authenticate with your google account. This is just for usage calculation on our end)
Next
Image generation example - implement and AI-driven use case with a custom field type