🎧 Intro
¡Hola! En este vídeo te presentamos un adelanto del MCP de Content Island, una herramienta que te permite conectar asistentes de IA con el contenido que gestionas de forma centralizada en Content Island.
Vamos a ver como funciona con un ejemplo práctico.
Material para seguir el ejemplo
El video en el que encontrarás la guía paso a paos:
Video cómo generar una web con tu IA usando Content Island
El MCP de Content Island está disponible en:
El token para que puedas acceder a los datos del proyecto de ejemplo:
f38a94366651cc72879e0d71cfd339d4Las imagenes para que puedas adjuntar en el paso a paso (puedes clicar con el botón derecho y abrir en una pestaña nueva para descargarlas o directamente hacer clic derecho y guardar la imagen):
Paso 1 - training list
Paso 2 - training
💡 Caso de uso
Imagina que quieres desarrollar una web con Astro para mostrar una lista de cursos. Al hacer clic en uno, podrás ver el detalle del curso, el vídeo de la lección actual y un listado de lecciones.
Hemos creado este prototipo de baja fidelidad, utilizando la herramienta Quick Mock.
Aquí podemos ver que tenemos una lista de cursos, y al hacer clic en uno, accedemos a la página de detalle del curso, en la que podemos ver el video de la lección actual, la guía que lo acompaña y un listado de lecciones.
Lo que son los datos los tenemos en Content Island, en concreto en este proyecto que se llama Campus
Aquí tenemos el modelo con los cursos y lecciones, y los datos de ejemplo ya cargados.
Vamos a enseñarte cómo integrar Content Island con GitHub Copilot en VSCode, para ellos generaremos esta web a partir de estos wireframes básicos.
⚙️ Requisitos previos
Debes tener:
- GitHub Copilot instalado y configurado en Visual Studio Code.
- Un proyecto de Content Island ya creado, con algunos datos de ejemplo cargados, en este caso el proyecto de Campus del que te facilitamos el token de acceso para que puedas probarlo.
🔌 Paso 1: Instalar el MCP de Content Island
Accede a:
Ahí puedes instalar el paquete directamente en VSCode o hacerlo manualmente desde la configuración del editor.
Una vez instalado:
- Añade el token de tu proyecto en los ajustes del MCP.
El token del proyecto de Campus es:
f38a94366651cc72879e0d71cfd339d4- Actívalo con el botón de Start.
🤖 Paso 2: Configurar el entorno con Copilot
- Abre el chat de GitHub Copilot en VSCode.
- Asegúrate de estar en modo agente.
- Selecciona un modelo compatible, como Claude.
Teclea / para ver las herramientas disponibles. Elige Content Island MCP y comenzará la configuración guiada.
🛠️ Paso 3: Generar el proyecto
Responde a las preguntas del asistente:
- Framework: Astro
- Ubicación:
.(carpeta actual) - Páginas a generar:
- Training List Page
- Training Detail Page (with youtube player and lesson list)
Training List Page, Training Detail Page (with youtube player, one video per page, and lesson list clickable to navigate to thatlesson detail page)💡 Asegúrate de indicar que quieres un reproductor de vídeo por lección.
Adjunta los mockups creados con Quick Mock con el mensaje: "mocks attached".
Y además de esto vamos añadirle algo más de info de contexto relacionada con el proyecto:
Los videos son enlaces a youtube, tendrás que mostrarlos en un iframe o similar.
De la entidad lesson de content island, el campos content es un string pero contiene markdown, mira de renerizarlo como markdown en pantalla y tener en cuenta que el código tenga syntaxis resaltada.
En la lista de lecciones, cuando pinche en una lección debe navegar a la página de detalle de esa lección, y cambiar al video y el contenido de la lección actual.
El token de mi proyecto de Content Island es: f38a94366651cc72879e0d71cfd339d4 incluyelo como variable de entorno en el proyecto.Lo ponemos en inglés para que el asistente lo entienda mejor y quede más consistente con todo el prompt:
The videos are YouTube links, so you'll need to display them using an iframe or something similar.
In the lesson entity from Content Island, the content field is a string but contains Markdown. Make sure to render it as Markdown on the screen and apply syntax highlighting to any code blocks.
In the lesson list, when clicking on a lesson, it should navigate to the detail page for that lesson and update the video and content to reflect the selected lesson.
The token for my Content Island project is: f38a94366651cc72879e0d71cfd339d4. Include it as an environment variable in the project.🧠 Paso 4: Interacción con el asistente
Durante el proceso:
- Podría pedir confirmaciones o que complete comandos en el terminal.
- Puede fallar algún paso; puedes pedirle que lo reintente.
- También puedes indicarle que omita algún paso.
Este flujo puede tardar unos minutos.
🚀 Paso 5: Ejecutar el proyecto
Cuando termine, ejecuta el proyecto con:
npm run dev📦 Lo generado no será perfecto, pero puede servir como punto de partida interesante o darte bloques útiles que puedes adaptar.
🔄 Conclusión
Ya puedes instalar el MCP y empezar a probar cómo integrar asistentes de IA en tus flujos de desarrollo.
Actualmente está en versión Beta, pero pronto lanzaremos una más completa y estable.