• Cheat sheets
  • Documentation
  • API reference
  • Product updates
  • Sign in
Kontent.ai Learn
  • Plan
  • Set up
  • Model
  • Develop
  • Create
  • Overview
    • Overview
    • Run sample app
      • Before you start
      • Prepare your sample project
      • Initialize the app
      • Set up the application configuration
      • Connect your Kontent.ai project
      • Enable content preview
      • Run the app
      • Activate content preview
      • Choose which content to display
    • Adjust sample project

Run sample app

Martina Farkasova, Tomas Dvorak
13 minutes
  • TypeScript
  • .NET
0% complete
Set up the sample app, connect it to a Kontent.ai sample project, and see firsthand how a front-end application pulls and displays content in a realistic multi-brand setup.

Before you start

Make sure you have the following ready:
  • A Kontent.ai account
  • .NET SDK 8.0 or newer
  • Your favorite code editor, for example, Visual Studio Code
Once you have these ready, you'll set up a sample project and connect the app to it in a few steps.

Prepare your sample project

The sample app connects to the multi-brand sample project, a Kontent.ai project that contains content for three fictional brands, each with its own website. This gives you a realistic example of how Kontent.ai handles content for multiple channels from a single project. Using your own copy of the sample project lets you experiment freely with its content and structure.
  1. In Kontent.ai, click your initials in the bottom left corner.
  2. Select Projects.
  3. Click Create new project in the top right corner.
  4. Select Multi-site sample project and click Continue.
If you're an existing Kontent.ai user, you can also choose further details for your sample project in the next step, including the project name and subscription. Your sample project is now ready. Next, you'll initialize the app and connect it to this project.

Initialize the app

Clone the sample app repository, open the project folder, and restore the project dependencies.
Shell
#Clone the sample app repository
git clone https://github.com/kontent-ai/sample-app-net-mvc.git

#Move into the project folder
cd sample-app-net-mvc

#Restore the project dependencies
dotnet restore

Set up the application configuration

The app's root directory contains the appsettings.json file that defines the settings used to configure the app. Secrets, such as API keys, are stored separately using .NET User Secrets, so they are never committed to version control. Most settings in the file can be left at their default values. In the following steps, you'll set two required values:
  • DeliveryOptions:EnvironmentId — connects the app to your sample project
  • DeliveryOptions:PreviewApiKey — enables the app to display unpublished content

Connect your Kontent.ai project

Each Kontent.ai project has one or more environments. The environment ID uniquely identifies which one the app connects to, and this is what tells the app where to pull content from. To find your environment ID:
  1. In Kontent.ai, open your sample project.
  2. In Environment settings > General, click  to copy the Environment ID to your clipboard.
Finding the Sample Project's environment ID
This is where you find the sample project's environment ID.
In the appsettings.json file, set DeliveryOptions:EnvironmentId to your environment ID.

Enable content preview

The app supports preview mode, which lets you view unpublished content from Kontent.ai.
To create a Delivery API key, go to  Project settings > API keys > Delivery API keys and click Create Delivery API key. Make sure to select Content preview under Delivery API access.
You can also access project or environment settings by opening the corresponding dropdown in the top left corner and clicking on the icon next to an entry.
Initialize user secrets and store your new Delivery API key, replacing <preview-api-key>:
Shell
dotnet user-secrets init
dotnet user-secrets set "DeliveryOptions:PreviewApiKey" "<preview-api-key>"

Run the app

Make sure the HTTPS development certificate is trusted. If you haven't done this yet, run:
Shell
dotnet dev-certs https \
	--trust
Start a development server.
Shell
dotnet run
The application runs locally at https://localhost:7108 by default.

Activate content preview

Append the secret query parameter to your local URL, such as https://localhost:7108/?secret=mySecret, where mySecret is the default value of PreviewOptions:Secret. This sets a signed preview cookie, which lets the app use your stored API key to fetch unpublished content.
If the app crashes on startup or unpublished content doesn't appear, check that the API key placeholder has been replaced with a real value and that the key corresponds to the correct environment.
To turn off preview mode, click Disable in the Preview mode indicator in the bottom-right corner of the page.

Choose which content to display

The Multi-site sample project represents a fictional healthcare company with three distinct brands: Ficto Imaging, Ficto Healthtech, and Ficto Surgical. Each brand has its own website and content, represented by a collection in Kontent.ai. To choose which brand the app displays, append the collection query parameter to your local URL, using one of the following codenames: ficto_imaging, ficto_healthtech, or ficto_surgical, for example:
  • https://localhost:7108/?collection=ficto_imaging
The app remembers your selection and continues serving content from the selected brand as you navigate the site.
Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!
Sign in
Copyright © 2026 Kontent.ai. All rights reserved.
  • Web
  • Privacy policy
  • Cookies policy
  • Consent settings
  • Security
  • GDPR