Curso de GitHub Copilot

Vamos a conocer GitHub Copilot de una manera general, cómo instalarlo en VSCode y cómo usarlo con sus funciones más clásicas.

En este vídeo vamos a ver la funcionalidad de código predictivo de GitHub Copilot, que no es la que más vamos a usar en el curso, pero que no deja de ser una funcionalidad disponible en esta herramienta de IA.

Un recorrido rápido a las opciones principales de la herramienta de chat, los distintos modos de trabajo y modelos de IA que podemos escoger.

Este modo simplemente nos ofrece respuestas sobre cualquier pregunta que tengamos, que puede englobar cualquier parte del proyecto. Veremos cómo gracias al modo Ask Copilot nos puede escanear todo un proyecto complejo, con monorepositorio, y decirnos cómo se organiza, o la arquitectura de los componentes del proyecto.

En este modo el agente de IA puede poner manos en el código y hacer todo tipo de operativas con tu proyecto, eliminando la necesidad de hacerlo por nosotros mismos. En modo agente el pediremos que haga componentes sobre un proyecto, usando el patrón de desarrollo que ya se está implementando con anterioridad.

Cuando la tarea es más complicada merece la pena planificar antes de actuar. En este paso veremos cómo crear un plan detallado sobre una tarea y cómo podemos modificar puntos del plan para ajustarlo antes de ponernos a desarrollar.

En las anteriores clases usamos un proyecto legacy en el que pasamos a usar la IA ciando el proyecto está ya funcionando. En este otro video vamos a crear un proyecto desde cero, en el que iremos creando código mediante la IA.

Veremos cómo definir instrucciones para el proyecto, de modo que le digamos al agente cómo queremos que trabaje, sin necesidad de repetirnos una y otra vez en cada sesión de chat y evitando que caiga en los mismos errores una y otra vez.

Cuando trabajas con la IA es importante hacer una memoria de cada rectificación que necesitas realizarle. Cada vez que veas que hay problemas y tienes que dirigir al agente, conviene pararse un momento y actualizar las instrucciones del proyecto. Pero puedes usar la propia IA para conseguirlo de una manera prácticamente automática.

Cómo definir instrucciones de proyecto mediante el archivo agents.md de modo que sean transversales a la mayoría de herramientas de IA que existen.

Las skills son fundamentales para mejorar y personalizar el funcionamiento de los modelos LLM. Veremos qué son las skills, qué formato tienen y crearemos una skill en nuestro proyecto, de modo que podamos utilizarla para dirigir el trabajo de los agentes de IA.

La comunidad de desarrollo publica cientos o miles de skills que están listas para que nosotros las usemos en nuestros proyectos. Veremos cómo podemos instalar skills de otros desarrolladores y cómo usarlas en nuestro proyecto.

Vamos a organizar un proyecto que se compone de varios sub-proyectos. El caso más claro es tener dos proyectos separados, backend y frontend, que usan stacks de tecnologías distintos. En vídeos anteriores construimos un frontend y ahora vamos a construir un proyecto backend de API REST donde nos apoyaremos en el framework NestJS.

Ahora que tenemos el proyecto realizado vamos a construir el API que queremos implementar para nuestro servicio web. Nos apoyaremos en skills de NestJS para asegurarnos que la IA usa las mejores prácticas de Nest.

Aunque hemos pedido a la IA que aplique las mejores prácticas, vamos a aplicar una nueva skill que define el procedimiento para hacer revisiones de código, para ver si encuentra algunos puntos adicionales que se deberían mejorar. Instalaremos una nueva skill y veremos que nos sugiere mejoras en el código.

Hasta ahora trabajábamos con un agents.md que definía instrucciones de modo general, pero esas instrucciones hablaban sobre todo de prácticas que queríamos para el frontend. Lo adecuado es tener un archivo de instrucciones global y archivos de instrucciones que son específicos de cada proyecto que tenemos en nuestro multi-repositorio.

Gracias a la creación de nuestro multi-repositorio ahora podemos solicitarle a la IA tareas que involucran ambos mundos, el backend y el frontend. Veremos que el modelo LLM ahora es capaz de entender el contexto global del proyecto y hacer tareas que necesitan realizar código en ambos repositorios a la vez, mejorando la experiencia que tenemos a la hora de desarrollar asistidos por la IA.

Qué es un MCP y cómo nos permite conectar de manera rápida con otros sistemas de una manera práctica, de modo que integremos herramientas externas para que los agentes de IA se puedan apoyar en ellas durante nuestras sesiones de chat en el proyecto.

Veremos cómo configurar un MCP en Visual Studio Code, una forma rapidísima de ampliar el ámbito de tus agentes. Veremos un ejemplo con el MCP de GitHub. Una vez configurado el MCP veremos cómo podemos tirar de él para pedirle que haga cosas.

Aparte del método anterior podemos configurar un servidor de MCP en el proyecto mediante un archivo mcp.json que nos permite almacenar todo tipo de servidores que no tienen por qué tener extensiones específicas para Visual Studio Code.

Vamos a ver un primer ejemplo de agente personalizado, capaz de hacer análisis de accesibilidad y mejorar así componentes de UI. Veremos de dónde podemos obtener agentes creados por la comunidad y cómo usarlos en VSCode de una manera sencilla para beneficiarnos de sus posibilidades.

VSCode tiene integrada una skill con la que crearemos nuestro propio agente personalizado. Veremos cómo crearlo y cómo usarlo.

Vamos a ver otro agente personalizado con otro enfoque, que en realidad no sirve para añadir una habilidad especializada, sino para cambiar el modo de salida, de modo que se ahorren tokens.

Gracias al navegador integrado dentro de VSCode nosotros podemos interactuar con la IA y pedirle que interprete la página que estamos viendo, pudiendo hacer acciones como ver su contenido, mensajes en la consola, o incluso pedirte que haga cosas con la web para obtener resultados. Cómo podemos añadir elementos al contexto para solicitarle información sobre ellos, pero también para que los cambie, permitiendo trabajar directamente en vista diseño, sin tener que buscar los elementos en el código para aplicarles contexto. También veremos cómo podemos añadir capturas de pantalla al chat completas o sobre un área determinada.

Veremos cómo con un simple prompt podemos conseguir que la IA realice una comprobación completa de accesibilidad sobre un componente, de manera totalmente autónoma, en la que realizará el uso del componente con el ratón y con el teclado para verificar la conformidad con la WCAG.

Explicamos brevemente qué es Copilot-CLI para qué lo puedes usar, cómo instalarlo y cómo arrancarlo una vez instalado.

Veremos un ejemplo de cómo a partir de texto en la consola podemos pedirle que haga cosas en GitHub.

El CLI también permite cambiar el modelo con el que queremos procesar las solicitudes y los modos de trabajo, como el modo plan.

Cómo podemos referenciar los distintos agentes que tenemos declarados en agents.md o las skills que tenemos instaladas.

Cómo sacarle partido a Copilot CLI con otros comandos específicos.

Ahora Visual Studio Code ofrece una ventana de agentes que permite una experiencia "Agent-first". Explicamos qué nos ofrece esta ventana de agentes para trabajar con cualquier proyecto de manera paralela.

Cómo tenemos que acceder hora con la ventana de agentes a los recursos de IA que venimos usando por proyecto o de forma global.