Skip to content
Content Island logo Content Island logo Docs

Tutorial: GitHub Copilot + Content Island

Content Island has native support for integrating with GitHub Copilot. This allows you to both scaffold a project structure and implement full features by accessing your Content Island project data directly from the agent. In this tutorial we will go through how to set up that integration step by step and build a functional web portal from scratch.

00:00 / 00:00

What We Are Going to Build

In this tutorial, we will develop a web portal for a local real estate agency using GitHub Copilot in agent mode and Content Island as a headless CMS.

The application will have three main parts:

  • Header – navigation bar with links to the different sections of the portal.
  • Hero section — with the real estate agency’s name and main actions.
  • Featured properties listing — dynamically fetched from Content Island.
  • Detail view — to consult the full information of each property.

By the end, you will have seen how Copilot can generate a functional application from scratch, reading real content from Content Island and following a consistent architecture thanks to the skills and global instructions.

Modeling in Content Island

Before touching any code, we need the content ready in Content Island.

For this tutorial, there is already a sample project with several modeled entities. The most relevant is Property, which contains the fields of a home for sale: title, description, price, images, and a boolean field featured that marks whether the property should appear in the featured listing.

If you go to the content tree view and click on any Property, you can inspect its structure directly from the portal.

Configure the MCP

The first step is to connect GitHub Copilot with your Content Island project through the MCP (Model Context Protocol).

Installation

  1. Open the VS Code command palette (View >> Command Palette).
  2. Type MCP: Add Server and select it.
  3. When asked for the type, choose NPM package.
  4. Enter the package name: @content-island/mcp
  5. Select to install it at the workspace level (this project).

VS Code will automatically generate a JSON configuration file in your project.

Token Configuration

Open the generated file and replace the placeholder with your Content Island API Token. You can copy it from the General tab of your project in the portal.

{
  "servers": {
    "content-island": {
      "command": "npx",
      "args": ["-y", "@content-island/mcp"],
      "env": {
        "CONTENT_ISLAND_ACCESS_TOKEN": "YOUR_PROJECT_CONTENT_ISLAND_ACCESS_TOKEN"
      }
    }
  }
}

Important: treat the API Token as a secret. Do not upload it to a public repository or hardcode it in source code.

Verify It Is Active

To check that the MCP is running correctly:

  1. Open the command palette.
  2. Run MCP: List Servers.
  3. You should see content-island in the list with status running.

Add Skills

Before launching the first prompt, it’s worth giving Copilot some specific instructions on how to work with our project. This is done through skills: Markdown files that Copilot reads to adapt its behavior.

For this project, we will use two official Content Island skills.

Skill: Client API

This skill tells Copilot how to consult the official Content Island Client API documentation. It prevents the AI from inventing parameters or using undocumented endpoints.

🔗 View Client API skill documentation

How to install it:

Create the following structure inside your project:

.github/
  skills/
    content-island-client-api/
      SKILL.md

Copy the skill content from the official documentation and paste it into that SKILL.md file.

Skill: Pods Architecture

This skill defines the Pods architecture, a variant of the Vertical Slicing pattern oriented to frontend development. It tells Copilot how to organize the project code consistently, grouping each feature into its own self-contained unit.

🔗 View Pods skill documentation

How to install it:

Create the same structure under .github/skills, this time with a folder content-island-astro-pods-architecture:

.github/
  skills/
    content-island-client-api/
      SKILL.md
    content-island-astro-pods-architecture/
      SKILL.md

Copy the Pods skill content from the official documentation and paste it into its SKILL.md.

Global Instructions

Besides skills, we can give Copilot global project guidelines: what tech stack to use, what conventions to follow, etc.

For this, create the file .github/copilot-instructions.md:

## Tech Stack

- Use Tailwind CSS v4 and DaisyUI for all styling needs.
- Use Astro with the astro-pods architecture.
- Use the Content Island Client API to fetch and render content.

## Code Guidelines

- Use semantic HTML5 elements.
- Follow accessibility best practices.
- Design mobile-first, ensuring a responsive experience across all devices.

## Design

- Use a professional color palette with good contrast.
- Avoid generic or AI-looking designs; aim for a visually appealing and coherent UI.

## Architecture

- Follow the astro-pods structure to organize the codebase.
- Separate layers clearly: UI, domain logic, and data access.
- Strictly follow the Content Island Client API security rules and allowed API surface.

With this file, Copilot will know to use Tailwind CSS v4 + DaisyUI, respect the Pods architecture, and always access content through the Content Island Client API.

Implement the Application

With the MCP configured, the skills in place, and the global instructions ready, we can start building.

1. Header, Hero, and Footer

The first prompt asks Copilot to generate the base structure of the application:

Let's start with the initial structure:

- You will create a layout with a header and a footer.

- In the header, you will build a top navigation bar using the links defined in the Content Island project, specifically from the `Header` type. There you will find a set of links. Use the `includeRelatedContent` flag to retrieve all the related information for each link.

- Below the header, on the main page, you will add a Hero Section. The data should be read from the Content Island `Hero` type, which contains only one entry. From there, you can retrieve everything needed, including the background image. It also includes two main actions, **Buy** and **Rent**, which you can render as buttons.

With this prompt, Copilot generates the three structural blocks of the portal: the header with navigation, the Hero section with calls to action, and the footer. All applying the Pods architecture and the Tailwind + DaisyUI styles defined in the global instructions.

2. Featured Properties Listing

With the base structure ready, the next step is to show real content from Content Island:

Now, just below the Hero Section, I want to display a featured properties section.

To do this, you need to read the list of properties from the Content Island project
and show only the ones that have the featured flag enabled.

For each featured property, display:
- its main image
- its title
- its price
- whether it is for sale or rent
- a link to the property detail page

For the property detail page, you can leave a placeholder for now with a text
that says: "The property detail will go here", and we will implement it later.

Thanks to the MCP, Copilot has access to the Content Island project and can inspect the data model in real time. With that and the Client API skill, it knows exactly how to build the query: which contentType to use, how to filter by the featured field, and which fields to select for each card.

Note that the prompt does not mention anything about the Client API, model fields, or how to filter: Copilot infers it alone because it has the MCP and the correct skills configured.

3. Detail View

With the listing working, the only thing left is to implement the page the user navigates to when clicking on a property:

Generate the property detail page, where it should display all the property
information, including an image carousel, description, price, and a contact form.

The contact form should include fields for name, email, phone, and message.
When submitted, it should save the information to Content Island so we can
process it later.

Copilot generates the detail page with an image carousel, the full information block (description, price, and sale or rent mode), and a contact form.

Result

In a few steps, we have gone from a blank project to a functional application:

Step What We Did
MCP Connected Copilot with Content Island
Skills Gave it context about the API and architecture
Global Instructions Defined the stack and conventions
Implementation Built the app in three prompts

The combination of a well-configured MCP, precise skills, and clear global instructions allows GitHub Copilot to generate consistent, secure, and production-ready code from the first attempt.