Saltearse al contenido
Content Island logo Content Island logo Docs

Tutorial: GitHub Copilot + Content Island

Content Island tiene soporte nativo para integrarse con GitHub Copilot. Esto nos permite tanto generar la estructura inicial de un proyecto como implementar funcionalidades completas accediendo a los datos de nuestro proyecto de Content Island directamente desde el agente. En este tutorial vamos a ver cómo configurar esa integración paso a paso y construir un portal web funcional desde cero.

00:00 / 00:00

Qué vamos a construir

En este tutorial vamos a desarrollar un portal web para una inmobiliaria local usando GitHub Copilot en modo agente y Content Island como CMS headless.

La aplicación tendrá tres partes principales:

  • Header - barra de navegación con enlaces a las diferentes secciones del portal.
  • Hero section — con el nombre de la inmobiliaria y las acciones principales.
  • Listado de propiedades destacadas — obtenidas dinámicamente desde Content Island.
  • Vista de detalle — para consultar la información completa de cada propiedad.

Al terminar habrás visto cómo Copilot puede generar una aplicación funcional partiendo de cero, leyendo contenido real desde Content Island y siguiendo una arquitectura consistente gracias a los skills y las instrucciones globales.

Modelado en Content Island

Antes de tocar código, necesitamos que el contenido esté listo en Content Island.

Para este tutorial ya existe un proyecto de ejemplo con varias entidades modeladas. La más relevante es Property, que contiene los campos de una vivienda en venta: título, descripción, precio, imágenes, y un campo booleano featured que marca si la propiedad debe aparecer en el listado destacado.

Si te vas a la vista de árbol del contenido y pinchas en cualquier Property, puedes inspeccionar su estructura directamente desde el portal.

Configurar el MCP

El primer paso es conectar GitHub Copilot con tu proyecto de Content Island mediante el MCP (Model Context Protocol).

Instalación

  1. Abre la paleta de comandos de VS Code (View >> Command Palette).
  2. Escribe MCP: Add Server y selecciónalo.
  3. Cuando te pregunte el tipo, elige NPM package.
  4. Introduce el nombre del paquete: @content-island/mcp
  5. Selecciona que quieres instalarlo a nivel de este proyecto (workspace).

VS Code generará automáticamente un fichero de configuración JSON en tu proyecto.

Configuración del token

Abre el fichero generado y reemplaza el placeholder con tu API Token de Content Island. Puedes copiarlo desde la pestaña General de tu proyecto en el portal.

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

Importante: trata el API Token como un secreto. No lo subas a un repositorio público ni lo hardcodees en el código fuente.

Verificar que está activo

Para comprobar que el MCP se está ejecutando correctamente:

  1. Abre la paleta de comandos.
  2. Ejecuta MCP: List Servers.
  3. Deberías ver content-island en la lista con estado running.

Añadir Skills

Antes de lanzar el primer prompt, merece la pena darle a Copilot algunas instrucciones específicas sobre cómo trabajar con nuestro proyecto. Esto se consigue mediante skills: ficheros Markdown que Copilot lee para adaptar su comportamiento.

Para este proyecto usaremos dos skills oficiales de Content Island.

Skill: Client API

Este skill indica a Copilot cómo consultar la documentación oficial de la Client API de Content Island. Evita que la IA invente parámetros o use endpoints no documentados.

🔗 Ver documentación del skill de la Client API

Cómo instalarlo:

Crea la siguiente estructura dentro de tu proyecto:

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

Copia el contenido del skill desde la documentación oficial y pégalo en ese fichero SKILL.md.

Skill: Arquitectura de Pods

Este skill define la arquitectura de Pods, una variante del patrón Vertical Slicing orientada al desarrollo frontend. Le indica a Copilot cómo organizar el código del proyecto de forma consistente, agrupando cada funcionalidad en su propia unidad autocontenida.

🔗 Ver documentación del skill de Pods

Cómo instalarlo:

Crea la misma estructura bajo .github/skills, esta vez con una carpeta content-island-astro-pods-architecture:

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

Copia el contenido del skill de Pods desde la documentación oficial y pégalo en su SKILL.md.

Instrucciones globales

Además de los skills, podemos darle a Copilot directrices globales del proyecto: qué stack tecnológico usar, qué convenciones seguir, etc.

Para ello creamos el fichero .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.

Con este fichero, Copilot sabrá que debe usar Tailwind CSS v4 + DaisyUI, respetar la arquitectura de Pods y acceder al contenido siempre a través de la Client API de Content Island.

Implementar la aplicación

Con el MCP configurado, los skills en su lugar y las instrucciones globales listas, ya podemos empezar a construir.

1. Header, Hero y Footer

El primer prompt le pide a Copilot que genere la estructura base de la aplicación:

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.

Con este prompt Copilot genera los tres bloques estructurales del portal: el header con navegación, la sección Hero con las llamadas a la acción y el footer. Todo aplicando la arquitectura de Pods y los estilos de Tailwind + DaisyUI definidos en las instrucciones globales.

2. Listado de propiedades destacadas

Con la estructura base lista, el siguiente paso es mostrar contenido real desde 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.

Gracias al MCP, Copilot tiene acceso al proyecto de Content Island y puede inspeccionar el modelo de datos en tiempo real. Con eso y el skill de la Client API, sabe exactamente cómo construir la consulta: qué contentType usar, cómo filtrar por el campo featured y qué campos seleccionar para cada card.

Fíjate en que el prompt no menciona nada sobre la Client API, los campos del modelo ni cómo filtrar: Copilot lo infiere solo porque tiene el MCP y los skills correctos configurados.

3. Vista de detalle

Con el listado funcionando, ya solo queda implementar la página a la que navega el usuario al pinchar en una propiedad:

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 genera la página de detalle con un carrusel de imágenes, el bloque de información completo (descripción, precio y modalidad de venta o alquiler) y un formulario de contacto.

Resultado

En pocos pasos hemos pasado de un proyecto en blanco a una aplicación funcional:

Paso Qué hicimos
MCP Conectamos Copilot con Content Island
Skills Le dimos contexto sobre la API y la arquitectura
Instrucciones globales Definimos el stack y las convenciones
Implementación Construimos la app en tres prompts

La combinación de un MCP bien configurado, skills precisos e instrucciones globales claras permite que GitHub Copilot genere código consistente, seguro y listo para producción desde el primer intento.