diff --git a/docs/es-es/README.md b/docs/es-es/README.md index 03a8bac..9537713 100644 --- a/docs/es-es/README.md +++ b/docs/es-es/README.md @@ -21,7 +21,7 @@ GitHub Copilot te acompaña allí donde trabajes. Elige el entorno que se ajuste GitHub Copilot dentro de **Visual Studio Code** y GitHub Codespaces. Trabaja con el modo agente de Copilot Chat, servidores MCP y agentes personalizados sin salir del editor que ya utilizas. Es ideal si quieres integrar la asistencia de IA directamente en el IDE. -### 💻 [Copilot CLI](../cli/) +### 💻 [Copilot CLI](cli/) **GitHub Copilot CLI** es un asistente basado en agentes que se ejecuta en el terminal. Instálalo, conecta servidores MCP, genera código con el modo de planificación y crea tus propias skills, agentes personalizados y comandos con barra diagonal, todo desde la línea de comandos. @@ -35,7 +35,7 @@ El **agente de Copilot en la nube** es un compañero de programación asíncrono ## Escenario -Acabas de incorporarte como desarrollador a Tailspin Toys, una empresa ficticia que ofrece financiación colectiva para juegos de mesa de temática tecnológica: ¡un mercado enorme! El trabajo pendiente del equipo ya está registrado como incidencias de GitHub para que puedas comenzar. Incluye tanto funcionalidades, como el filtrado y la paginación, como mejoras de calidad, como la accesibilidad y los estándares de programación. Trabajarás de forma iterativa para completar las tareas mientras exploras el sitio y las capacidades de Copilot. +Acabas de incorporarte como desarrollador a Tailspin Toys, una empresa ficticia que ofrece financiación colectiva para juegos de mesa de temática tecnológica: ¡un mercado enorme! El trabajo pendiente del equipo ya está registrado como incidencias de GitHub para que puedas comenzar. Incluye tanto funcionalidades, como el filtrado y la paginación, como mejoras de calidad, como la accesibilidad y los estándares de desarrollo. Trabajarás de forma iterativa para completar las tareas mientras exploras el sitio y las capacidades de Copilot. ## Primeros pasos diff --git a/docs/es-es/app/3-custom-instructions.md b/docs/es-es/app/3-custom-instructions.md index 3275c5e..932a280 100644 --- a/docs/es-es/app/3-custom-instructions.md +++ b/docs/es-es/app/3-custom-instructions.md @@ -74,7 +74,7 @@ Dedica un momento a leer los archivos de instrucciones incluidos en este reposit 11. Por último, abre `.github/instructions/drizzle.instructions.md` y desplázate hasta el final. Observa los vínculos a otros archivos de instrucciones, como `unit-tests.instructions.md`, y a archivos existentes del proyecto. De este modo puedes dividir conjuntos de instrucciones grandes en archivos más pequeños y reutilizables, y señalar a Copilot ejemplos que debe seguir al generar código. Las rutas son relativas al archivo de instrucciones, no a la raíz del repositorio. > [!NOTE] -> La sección **Code formatting requirements** de `copilot-instructions.md` documenta los estándares de programación del proyecto, pero todavía no exige documentación dentro del código. En los pasos siguientes añadirás reglas para comentarios de documentación TSDoc y comentarios de cabecera de archivo. +> La sección **Code formatting requirements** de `copilot-instructions.md` documenta los estándares de desarrollo del proyecto, pero todavía no exige documentación dentro del código. En los pasos siguientes añadirás reglas para comentarios de documentación TSDoc y comentarios de cabecera de archivo. ## Empezar desde la incidencia sobre instrucciones diff --git a/docs/es-es/cli/0-prerequisites.md b/docs/es-es/cli/0-prerequisites.md new file mode 100644 index 0000000..383b011 --- /dev/null +++ b/docs/es-es/cli/0-prerequisites.md @@ -0,0 +1,72 @@ +--- +title: "Ejercicio 0: Requisitos previos" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +Antes de empezar los ejercicios de Copilot CLI, tienes que dejarlo todo preparado. Crearás tu propia copia del repositorio Tailspin Toys y pondrás en marcha un [codespace][codespaces], cuyo terminal integrado usarás para instalar y ejecutar Copilot CLI en el siguiente ejercicio. + +## Configurar el repositorio del laboratorio + +Para crear una copia del repositorio para el código que vas a crear, generarás una instancia a partir de la [plantilla][template-repository]. La nueva instancia contendrá todos los archivos necesarios para el laboratorio y la usarás a medida que avances por los ejercicios. + +1. En una nueva ventana del navegador, ve al repositorio de GitHub de este laboratorio: `https://github.com/github-samples/tailspin-toys`. +2. Crea tu propia copia del repositorio seleccionando el botón **Use this template** en la página del repositorio del laboratorio. Después, selecciona **Create a new repository**. + + ![Captura del botón Use this template](../../_images/ex0-use-template.png) + +3. Si estás realizando el taller como parte de un evento dirigido por GitHub o Microsoft, sigue las instrucciones proporcionadas por el personal mentor. En caso contrario, puedes crear el nuevo repositorio en una organización en la que tengas acceso a GitHub Copilot. + + ![Captura de la configuración de la plantilla del repositorio](../../_images/ex0-repository-settings.png) + +4. Anota la ruta del repositorio que has creado (**nombre-de-organización-o-usuario/nombre-del-repositorio**), ya que la consultarás más adelante en el laboratorio. + +> [!NOTE] +> **Tu backlog está listo** +> +> Cuando creas tu repositorio a partir de la plantilla, se crea automáticamente un backlog de incidencias de GitHub para ti. Trabajarás con esas incidencias durante todo el taller; no tienes que crear ninguna por tu cuenta. + +## Crear un codespace + +Ahora usarás un codespace para completar los ejercicios del laboratorio. + +[GitHub Codespaces][codespaces] es un entorno de desarrollo en la nube que te permite escribir, ejecutar y depurar código directamente en el navegador. Proporciona un IDE con todas las funciones y compatibilidad con varios lenguajes de programación, extensiones y herramientas. + +1. Ve a tu repositorio recién creado. +2. Selecciona el botón verde **Code**. + + ![Botón Code](../../_images/ex0-code-button.png) + +3. Selecciona la pestaña **Codespaces** y, a continuación, selecciona el botón **+** para crear un Codespace nuevo. + + ![Crear un codespace nuevo](../../_images/ex0-create-codespace.png) + +La creación del codespace tardará varios minutos, aunque sigue siendo mucho más rápida que instalar manualmente todos los servicios. Dicho esto, puedes aprovechar este tiempo para explorar otras funciones de GitHub Copilot, a las que prestaremos atención a continuación. + +> [!CAUTION] +> Volverás al codespace en un ejercicio posterior. De momento, déjalo abierto en una pestaña del navegador. + +> [!NOTE] +> Este taller está diseñado para ejecutarse dentro de un codespace o de un [contenedor de desarrollo][dev-containers] local. Ambos garantizan que el entorno tenga instalados todos los requisitos previos necesarios para disfrutar de una experiencia fluida. Si prefieres ejecutarlo en local, abre el repositorio clonado en VS Code y selecciona **Reopen in Container** cuando se te solicite; VS Code compilará el mismo contenedor de desarrollo que usa el codespace. + +[codespaces]: https://github.com/features/codespaces +[dev-containers]: https://code.visualstudio.com/docs/devcontainers/containers + +## Resumen + +¡Enhorabuena! Has creado una copia del repositorio del laboratorio. También has iniciado el proceso de creación de tu codespace, que usarás cuando empieces a trabajar con Copilot CLI. + +## Siguiente paso + +Vamos a instalar Copilot CLI y a autenticarlo con tu cuenta de GitHub. Continúa con el [Ejercicio 1 - Instalar GitHub Copilot CLI][next-lesson]. + +## Recursos + +- [Información general de GitHub Codespaces][codespaces] +- [Crear un repositorio a partir de una plantilla][template-repository] +- [Primeros pasos con Codespaces][codespaces-quickstart] + +[template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository +[codespaces-quickstart]: https://docs.github.com/codespaces/getting-started/quickstart +[next-lesson]: ../1-install-copilot-cli/ diff --git a/docs/es-es/cli/1-install-copilot-cli.md b/docs/es-es/cli/1-install-copilot-cli.md new file mode 100644 index 0000000..c1a08af --- /dev/null +++ b/docs/es-es/cli/1-install-copilot-cli.md @@ -0,0 +1,129 @@ +--- +title: "Ejercicio 1 - Instalar GitHub Copilot CLI" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +[GitHub Copilot CLI][about-copilot-cli] es un potente asistente de programación con agentes que se ejecuta en tu terminal y te permite explorar bases de código, generar código, ejecutar comandos e interactuar con herramientas externas, todo desde la línea de comandos. Te permite delegar tareas, solicitar cambios y mantener la concentración. Como imaginarás, el primer paso es instalar la herramienta. Por suerte, puedes hacerlo con herramientas que ya conoces. + +En este ejercicio aprenderás a: + +- instalar GitHub Copilot CLI con npm. +- autenticarte con tu cuenta de GitHub. +- verificar la instalación. + +## Escenario + +Tu equipo está empezando a usar agentes de IA para gestionar un backlog cada vez mayor. Copilot CLI lleva esa capacidad a la terminal, donde muchos desarrolladores ya trabajan habitualmente. Este ejercicio te ayudará a instalarlo, autenticarte y dejarlo listo para usarlo durante el resto del taller. + +## Abrir un terminal en tu codespace + +Antes de instalar Copilot CLI, tienes que abrir una ventana de terminal en tu codespace. + +1. Vuelve a tu codespace si todavía no estás allí. +2. Abre una ventana de terminal pulsando Ctrl+\`. +3. Deberías ver un panel de terminal en la parte inferior de la ventana de VS Code. + +## Instalar Copilot CLI + +Puedes instalar Copilot CLI mediante [npm][install-npm], [WinGet][install-winget] y [Homebrew][install-homebrew]. Como GitHub Codespaces incluye Node.js preinstalado, usarás npm para instalar Copilot CLI. + +1. En el terminal, comprueba que Node.js está instalado y que cumple el requisito de versión: + + ```bash + node --version + ``` + + Deberías ver la versión 22 o posterior (por ejemplo, `v22.x.x`). + +2. Instala Copilot CLI globalmente en el codespace con npm: + + ```bash + npm install -g @github/copilot + ``` + +3. Verifica la instalación consultando la versión: + + ```bash + copilot --version + ``` + + Deberías ver el número de versión mostrado (por ejemplo, `v1.0.XX`). + +> [!TIP] +> Si encuentras errores de permisos, puede que necesites usar `sudo npm install -g @github/copilot` en algunos sistemas. Sin embargo, en GitHub Codespaces no debería ser necesario. + +## Autenticarse con GitHub + +La primera vez que lo inicies, Copilot CLI te pedirá que te autentiques con tu cuenta de GitHub. + +1. Inicia Copilot CLI: + + ```bash + copilot + ``` + +2. Si no has iniciado sesión todavía, verás un mensaje para autenticarte. Copilot CLI mostrará un código de dispositivo y te pedirá que visites una URL. +3. Sigue las instrucciones en pantalla: + - Abre en el navegador la URL proporcionada + - Introduce el código de dispositivo cuando se te solicite + - Autoriza a Copilot CLI para acceder a tu cuenta de GitHub +4. Una vez autenticado, verás el prompt de Copilot CLI listo para aceptar tus preguntas y comandos. + +> [!NOTE] +> En un codespace, es posible que ya estés autenticado a través de tu sesión de GitHub. Si Copilot CLI se inicia sin pedir autenticación, ya está todo listo. + +## Confiar en el directorio y verificar que todo funciona + +Ahora que estás en el prompt de Copilot CLI por primera vez, vamos a marcar como fiable este repositorio del taller y a comprobar que Copilot CLI está correctamente instalado y conectado. + +1. Cuando Copilot CLI te pida que confirmes que confías en los archivos de esta carpeta, verás tres opciones: + - **Yes, proceed**: confiar solo durante esta sesión + - **Yes, and remember this folder for future sessions**: confiar de forma permanente + - **No, exit (Esc)**: no permitir el acceso a los archivos +2. Para este taller, selecciona **Yes, and remember this folder for future sessions**, ya que trabajarás en este repositorio durante toda la sesión. +3. Haz a Copilot una pregunta sencilla para verificar que funciona: + + ``` + What files are in this project? + ``` + +4. Copilot debería explorar el repositorio y ofrecer un resumen de la estructura del proyecto. +5. Prueba el comando `/help` para ver los comandos de barra disponibles: + + ``` + /help + ``` + +6. Sal de Copilot CLI introduciendo el siguiente comando en el terminal. Volveremos a Copilot CLI en un ejercicio posterior. + + ``` + exit + ``` + +## Resumen y siguientes pasos + +¡Enhorabuena! Has instalado y autenticado GitHub Copilot CLI correctamente. Has aprendido a: + +- instalar Copilot CLI con npm. +- autenticarte con tu cuenta de GitHub. +- confiar en un directorio para que Copilot CLI pueda trabajar con él. +- verificar que la instalación funciona correctamente. + +Ahora que Copilot CLI está instalado, vamos a darle a Copilot algo de contexto del proyecto. Continúa con el [Ejercicio 2 - Instrucciones personalizadas con CLI][next-lesson]. + +## Recursos + +- [Instalar GitHub Copilot CLI][install-copilot-cli] +- [Acerca de Copilot CLI][about-copilot-cli] +- [Usar Copilot CLI][using-copilot-cli] + +[previous-lesson]: ../0-prerequisites/ +[next-lesson]: ../2-custom-instructions/ +[install-copilot-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[install-npm]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-npm-all-platforms +[install-winget]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-winget-windows +[install-homebrew]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-homebrew-macos-and-linux +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli diff --git a/docs/es-es/cli/2-custom-instructions.md b/docs/es-es/cli/2-custom-instructions.md new file mode 100644 index 0000000..538123f --- /dev/null +++ b/docs/es-es/cli/2-custom-instructions.md @@ -0,0 +1,243 @@ +--- +title: "Ejercicio 2 - Instrucciones personalizadas (Copilot CLI)" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +[← Lección anterior: Instalar Copilot CLI][previous-lesson] · [Siguiente lección: Generar código con CLI →][next-lesson] + +El contexto es clave cuando se trabaja con IA generativa. Si una tarea debe hacerse de una forma concreta, o hay información de fondo que Copilot debería conocer, te interesa asegurarte de que ese contexto esté disponible. Tienes varias herramientas a tu disposición para ayudar a Copilot, y las exploraremos a lo largo de este taller. Vamos a empezar con los [archivos de instrucciones][instruction-files], que suelen centrarse en cómo debe estructurarse el propio código. Esto ayuda a Copilot a entender no solo *qué* código quieres, sino también *cómo* debe estructurarse. + +En este ejercicio vas a: + +- explorar cómo el contexto específico del proyecto, las directrices de desarrollo y los estándares de documentación llegan a Copilot a través de las instrucciones personalizadas del repositorio y de los archivos de instrucciones con ámbito de ruta; +- generar el primer bloque de datos para el filtrado (un helper de editoriales) con las instrucciones *actuales*; +- añadir un nuevo estándar general del repositorio a `.github/copilot-instructions.md`; +- ejecutar un prompt de seguimiento y ver cómo el código regenerado adopta el nuevo estándar; +- confirmar los cambios de las instrucciones y del helper para que el siguiente ejercicio pueda basarse en ellos. + +> [!CAUTION] +> El código generado puede desviarse de algunos de los estándares que establezcas. Copilot no es determinista. El objetivo es observar la *tendencia* del cambio de comportamiento tras actualizar las instrucciones, no hacer que la salida coincida carácter por carácter. + +## Archivos de instrucciones + +### Escenario + +Como cualquier buen equipo de desarrollo, Tailspin Toys tiene un conjunto de directrices y requisitos para sus prácticas de desarrollo. Entre ellos se incluyen: + +- La capa de datos siempre necesita pruebas unitarias. +- La interfaz debe estar en modo oscuro y tener un aspecto moderno. +- Debe añadirse documentación al código en forma de comentarios de documentación TSDoc. +- Debe añadirse un bloque de comentarios al inicio de cada archivo para describir lo que hace. + +Gracias al uso de archivos de instrucciones, te asegurarás de que Copilot disponga de la información correcta para realizar las tareas de acuerdo con las prácticas indicadas. + +### Instrucciones personalizadas + +Las instrucciones personalizadas te permiten proporcionar contexto y preferencias a Copilot para que entienda mejor tu estilo de desarrollo y tus requisitos. Es una función muy potente que puede ayudarte a orientar Copilot para obtener sugerencias y fragmentos de código más relevantes. Puedes indicar tus convenciones de desarrollo preferidas, bibliotecas e incluso los tipos de comentarios que te gusta incluir en el código. Puedes crear instrucciones para todo el repositorio o para tipos de archivo concretos, con el fin de aportar contexto a nivel de tarea. + +Hay dos tipos de archivos de instrucciones: + +- `.github/copilot-instructions.md`, un único archivo de instrucciones que se envía a Copilot en **todas** las solicitudes del repositorio. Este archivo debe contener información a nivel de proyecto, es decir, contexto relevante para la mayoría de las solicitudes que se envían a Copilot desde el chat o la CLI. Puede incluir la pila tecnológica que se usa, una visión general de lo que se está construyendo, buenas prácticas y otras directrices globales. +- Se pueden crear archivos `.github/instructions/*.instructions.md` para tareas o tipos de archivo concretos. Puedes usarlos para proporcionar directrices para lenguajes concretos (como TypeScript o Astro), o para tareas como crear un componente de interfaz o un nuevo conjunto de pruebas unitarias. + +> [!NOTE] +> Cuando trabajas en tu IDE, los archivos de instrucciones solo se usan para generar código en Copilot Chat, no para las finalizaciones de código ni para las sugerencias de la siguiente edición. +> +> Copilot Chat, Copilot CLI y Copilot cloud agent usan tanto los archivos a nivel de repositorio como los archivos `*.instructions.md` (con frontmatter `applyTo`) al generar código. +> +> Además, Copilot [admite archivos de instrucciones que usan otros estándares][custom-instructions-support], incluidos los archivos AGENTS.md y CLAUDE.md. + +### Buenas prácticas para gestionar archivos de instrucciones + +Una conversación completa sobre cómo crear archivos de instrucciones queda fuera del alcance de este taller. Sin embargo, los ejemplos proporcionados en el proyecto de ejemplo muestran un enfoque representativo. A grandes rasgos: + +- Mantén las instrucciones de `copilot-instructions.md` centradas en directrices a nivel de proyecto, como una descripción de lo que se está construyendo, la estructura del proyecto y los estándares globales de desarrollo. +- Usa archivos `*.instructions.md` para proporcionar instrucciones específicas según el tipo de archivo (pruebas unitarias, componentes Astro, capa de datos) o la tarea. +- Usa lenguaje natural. Mantén las directrices claras. Proporciona ejemplos de cómo debería verse el código, y de cómo no. + +No existe una única forma de crear archivos de instrucciones, igual que no existe una única forma de usar la IA. A través de la experimentación descubrirás qué funciona mejor para tu proyecto. + +> [!TIP] +> Todos los proyectos que usan GitHub Copilot deberían contar con una colección sólida de archivos de instrucciones. Al explorar los de este proyecto, puede que veas que hay archivos para muchos tipos de tareas, incluidas [actualizaciones de la interfaz][ui-instructions] y [Astro][astro-instructions]. +> +> Copilot también puede ayudarte a generar archivos de instrucciones. Cada superficie lo presenta de una forma distinta (por ejemplo, **Configure Chat → Generate Agent Instructions** en VS Code, o `/init` en Copilot CLI); la lección de la superficie en la que estés lo señalará cuando sea relevante. +> +> ¿Buscas plantillas o un punto de partida? Explora [awesome-copilot][awesome-copilot], un repositorio lleno de archivos de instrucciones, agentes personalizados y otros recursos. + +[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md +[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md +[awesome-copilot]: https://github.com/github/awesome-copilot +[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support + +## Explorar los archivos de instrucciones personalizadas de este proyecto + +Dedica un momento a leer los archivos de instrucciones incluidos en este repositorio: hay un `copilot-instructions.md` principal y una colección de archivos `*.instructions.md` para varias tareas. Ábrelos en tu editor o en la interfaz web de GitHub. + +1. Abre `.github/copilot-instructions.md`. +2. Explora el archivo y fíjate en la breve descripción del proyecto y en secciones como **Agent notes**, **Code standards**, **Scripts** y **Repository Structure**. En **Code standards**, fíjate en la guía anidada **GitHub Actions Workflows**. Se aplica a cualquier interacción que tengas con Copilot. +3. Abre la carpeta `.github/instructions` y échale un vistazo. Verás instrucciones para archivos Astro, la capa de datos de Drizzle, pruebas y mucho más. +4. Abre `.github/instructions/unit-tests.instructions.md`. Fíjate en el campo `applyTo` de la parte superior: establece un glob (relativo a la raíz del repositorio) que determina a qué archivos se aplican las instrucciones. Aquí, cualquier archivo de prueba TypeScript (por ejemplo, uno que coincida con `**/*.test.ts`) coincidirá. +5. Observa las instrucciones específicas para crear pruebas unitarias para este proyecto. +6. Por último, abre `.github/instructions/drizzle.instructions.md` y desplázate hasta el final. Fíjate en los enlaces a otros archivos de instrucciones (como `unit-tests.instructions.md`) y a archivos existentes del proyecto. Esto te permite dividir conjuntos de instrucciones más grandes en archivos más pequeños y reutilizables, y mostrar a Copilot ejemplos que seguir al generar código. (Las rutas allí son relativas al archivo de instrucciones, no a la raíz del repositorio). + +> [!NOTE] +> La sección **Code formatting requirements** de `copilot-instructions.md` documenta los estándares de desarrollo del proyecto, pero todavía no exige documentación dentro del código. En los pasos siguientes, añadirás reglas para comentarios de documentación TSDoc y encabezados de comentario a nivel de archivo. + +## Crear una rama + +Vas a hacer cambios en el código, así que crea una rama para trabajar. + +1. Desde el terminal de tu codespace, crea una rama nueva y cambia a ella: + + ```bash + git checkout -b update-custom-instructions + ``` + +2. Confirma que Copilot CLI está instalado y autenticado: + + ```bash + copilot --version + ``` + + Si no se encuentra el comando o no has iniciado sesión, vuelve al [Ejercicio 1 - Instalar GitHub Copilot CLI](../1-install-copilot-cli/). + +## Usar Copilot CLI *antes* de actualizar las instrucciones + +Para ver el impacto de las instrucciones personalizadas, empieza generando código con las instrucciones actuales. Más adelante, actualizarás el archivo y ejecutarás un prompt de seguimiento. + +> [!TIP] +> **Inicia una sesión de Copilot CLI** +> +> Antes de empezar los ejercicios siguientes, vuelve a tu codespace y abre un terminal (Ctrl+\` si no hay ninguno abierto). Después, inicia Copilot CLI con `--yolo` y `--enable-all-github-mcp-tools`: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> Para retomar la sesión más reciente de este proyecto en lugar de empezar desde cero, ejecuta `copilot --yolo --enable-all-github-mcp-tools --continue`. Si Copilot CLI ya se está ejecutando desde un ejercicio anterior, envía `/clear` para empezar una conversación limpia. +> +> `--enable-all-github-mcp-tools` habilita las herramientas GitHub MCP de lectura y escritura para la sesión actual, de modo que Copilot pueda leer tu backlog y abrir pull requests durante el flujo del taller. + +> [!CAUTION] +> `--yolo` habilita permisos automáticos completos (`--allow-all-tools`, `--allow-all-paths` y `--allow-all-urls`). Úsalo solo en un entorno aislado, como un Codespace o una máquina virtual, y no lo configures nunca como alias predeterminado para el desarrollo diario. Consulta [Allowing and denying tool use][allow-all-warning] para más información. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. Asegúrate de que tu sesión de Copilot CLI se está ejecutando desde la **raíz del repositorio** para que detecte automáticamente `.github/copilot-instructions.md`. +2. En el prompt de Copilot CLI, pídele que genere el helper de editoriales que usará la interfaz de filtrado: + + ```plaintext + Create a new data-access helper at src/lib/publishers.ts to return a list of all publishers. It should return the name and id for all publishers. Do not run the tests yet. + ``` + +3. Copilot CLI explorará el proyecto, propondrá un plan y escribirá el archivo en esta sesión con `--yolo`. Supervisa los cambios en la salida del terminal y luego revísalos en tu editor. +4. Abre el archivo generado `src/lib/publishers.ts` en tu editor. +5. Observa que el helper es una función tipada que recibe un cliente `db` como primer argumento y devuelve un array tipado de editoriales; esto procede de las convenciones de la capa de datos en `.github/instructions/drizzle.instructions.md` (que se aplica a `src/lib/*.ts`). +6. Observa que al código generado **le faltan** comentarios de documentación TSDoc y un encabezado de comentario a nivel de archivo. + +> [!CAUTION] +> Copilot es probabilístico: existe la posibilidad de que añada comentarios de documentación incluso sin que se lo indiques. Si ocurre, no pasa nada; la mejora en la *consistencia* después de actualizar las instrucciones sigue siendo la idea importante. + +## Añadir un nuevo estándar del repositorio + +Como se indicó antes, `.github/copilot-instructions.md` está diseñado para proporcionar información del proyecto a Copilot. Vamos a asegurarnos de que los estándares de desarrollo del repositorio queden documentados para mejorar las sugerencias de código. + +1. Vuelve a abrir `.github/copilot-instructions.md`. +2. Localiza la sección **Code formatting requirements**, que debería estar cerca de la línea 27. Observa cómo documenta los estándares de desarrollo del proyecto, pero todavía no tiene ninguna regla para la documentación dentro del código, y por eso el helper generado no incluía comentarios de documentación. +3. Añade las siguientes líneas de Markdown justo debajo de los estándares existentes para indicar a Copilot que añada encabezados de comentario a nivel de archivo y comentarios de documentación TSDoc: + + ```markdown + - Every exported function should have a TSDoc comment describing its purpose, parameters, and return value. + - Before imports or any code, add a comment block to the file that explains its purpose. + ``` + +4. Guarda `copilot-instructions.md`. + +> [!TIP] +> Como viste en la lección anterior, los archivos de instrucciones pueden crearse a nivel de repositorio (`.github/copilot-instructions.md`) para directrices globales, o como archivos `*.instructions.md` para lenguajes, tipos de archivo o tareas concretos. El archivo a nivel de repositorio es el lugar adecuado para estándares generales del proyecto, como la regla de comentarios de documentación que acabas de añadir. + +## Ejecutar de nuevo el prompt y observar el cambio + +Ahora que las instrucciones incluyen una regla para los comentarios de documentación, pídele a Copilot CLI que actualice el archivo de editoriales que acabas de generar. La misma directriz de estándares orientará la reescritura. + +1. Envía `/clear` en tu sesión de Copilot CLI para empezar con una conversación limpia. +2. Envía el siguiente prompt: + + ```plaintext + Update src/lib/publishers.ts to follow the latest documentation conventions in .github/copilot-instructions.md. + ``` + +3. Deja que termine la edición y vuelve a abrir `src/lib/publishers.ts`. +4. Observa que el archivo ahora empieza con un bloque de comentarios similar a este: + + ```typescript + /** + * Helpers de acceso a datos de editoriales para la plataforma de crowdfunding de Tailspin Toys. + * Proporciona funciones para recuperar información de editoriales desde la base de datos. + */ + ``` + +5. Observa que la función generada ahora incluye un comentario de documentación TSDoc similar a este: + + ```typescript + /** + * Devuelve una lista de todas las editoriales con su id y su nombre. + * + * @param db - El cliente de base de datos de Drizzle. + * @returns Una promesa que se resuelve en un array de objetos de editoriales. + */ + ``` + +6. Mantén este archivo actualizado. Es el primer bloque de datos sobre el que trabajarás en el siguiente ejercicio. + +## Confirmar y enviar este primer bloque de filtrado + +1. En el terminal, verifica los archivos modificados: + + ```bash + git status + ``` + +2. Prepara el cambio de las instrucciones y el helper: + + ```bash + git add .github/copilot-instructions.md src/lib/publishers.ts + ``` + +3. Confirma los cambios: + + ```bash + git commit -m "Add doc comment standards and publishers helper foundation" + ``` + +4. Envía la rama: + + ```bash + git push -u origin update-custom-instructions + ``` + +## Resumen y siguientes pasos + +Has explorado cómo Copilot toma el contexto de los archivos de instrucciones de este proyecto y después has usado Copilot CLI para: + +- generar una base del helper de acceso a datos de editoriales para el filtrado con las instrucciones *existentes*; +- añadir un nuevo estándar general del repositorio a `.github/copilot-instructions.md`; +- ejecutar un prompt de seguimiento y ver cómo el código regenerado adopta el nuevo estándar; +- confirmar y enviar tanto la actualización de instrucciones como la base del helper. + +A continuación, aplicarás estas instrucciones mientras implementas trabajo del backlog en el [ejercicio de generación de código][next-lesson]. + +## Recursos + +- [Archivos de instrucciones para la personalización de GitHub Copilot][instruction-files] +- [Buenas prácticas para crear instrucciones personalizadas][instructions-best-practices] +- [5 consejos para escribir mejores instrucciones personalizadas para Copilot][copilot-instructions-five-tips] +- [Awesome Copilot: una colección de archivos de instrucciones y otros recursos][awesome-copilot] + +[previous-lesson]: ../1-install-copilot-cli/ +[next-lesson]: ../3-generating-code/ +[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses +[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository +[copilot-instructions-five-tips]: https://github.blog/ai-and-ml/github-copilot/5-tips-for-writing-better-custom-instructions-for-copilot/ diff --git a/docs/es-es/cli/3-generating-code.md b/docs/es-es/cli/3-generating-code.md new file mode 100644 index 0000000..eb9e6c4 --- /dev/null +++ b/docs/es-es/cli/3-generating-code.md @@ -0,0 +1,99 @@ +--- +title: "Ejercicio 3 - Añadir funcionalidades al proyecto con GitHub Copilot CLI" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +Como ya puedes imaginar, una de las tareas principales que realizarás con GitHub Copilot CLI es añadir funciones, capacidades y código a un proyecto. Vamos a tomar una de las incidencias de tu backlog y pedir a Copilot que nos ayude a implementarla. + +## Escenario + +Ha llegado el momento de completar el filtrado en el proyecto. Ya tienes la incidencia de filtrado en tu backlog y un helper base del ejercicio anterior. Vamos a hacer que Copilot recupere los detalles de la incidencia, tenga en cuenta el trabajo existente y construya la funcionalidad restante. + +En este ejercicio vas a: + +- utilizar el modo de planificación para generar un plan de implementación de la funcionalidad de filtrado. +- generar con Copilot el código necesario para añadir el filtrado al sitio web. + +Al final de este ejercicio, habrás añadido nueva funcionalidad al proyecto. + +## Utilizar el modo de planificación + +Uno de los mejores usos de la IA es la planificación. Muchas veces tendrás una buena idea de lo que quieres construir, pero solo necesitas contrastar algunas ideas con algo. Las herramientas de IA pueden ayudarte a concretar tus ideas haciendo preguntas de seguimiento y analizando distintos riesgos o componentes que falten. Para apoyar este proceso, Copilot CLI ofrece un modo de planificación. Además, el tiempo que dediques a planificar ayudará a Copilot a generar código que se ajuste mejor a los requisitos establecidos. + +Empezarás el proceso de creación de la nueva funcionalidad utilizando el modo de planificación de Copilot CLI. + +> [!TIP] +> **Inicia una sesión de Copilot CLI** +> +> Antes de empezar los ejercicios siguientes, vuelve a tu codespace y abre un terminal (Ctrl+\` si no hay ninguno abierto). Después, inicia Copilot CLI con `--yolo` y `--enable-all-github-mcp-tools`: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> Para retomar la sesión más reciente de este proyecto en lugar de empezar desde cero, ejecuta `copilot --yolo --enable-all-github-mcp-tools --continue`. Si Copilot CLI ya se está ejecutando desde un ejercicio anterior, envía `/clear` para empezar una conversación limpia. +> +> `--enable-all-github-mcp-tools` habilita las herramientas GitHub MCP de lectura y escritura para la sesión actual, de modo que Copilot pueda leer tu backlog y abrir pull requests durante el flujo del taller. + +> [!CAUTION] +> `--yolo` habilita permisos automáticos completos (`--allow-all-tools`, `--allow-all-paths` y `--allow-all-urls`). Úsalo solo en un entorno aislado, como un Codespace o una máquina virtual, y no lo configures nunca como alias predeterminado para el desarrollo diario. Consulta [Allowing and denying tool use][allow-all-warning] para más información. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. Introduce el siguiente prompt en Copilot CLI para crear un plan basado en la incidencia de filtrado: + + ``` + /plan Retrieve the issue on the repository related to adding filtering. We already added a publishers helper in src/lib/publishers.ts, so treat that as existing work and plan the remaining updates (games filtering logic, UI, and tests). + ``` + +2. Copilot puede hacer preguntas de seguimiento mientras desarrolla el plan. Cuando aparezcan, respóndelas según cómo construirías tú la funcionalidad. +3. Una vez generado el plan, revisa el esquema. Deberías ver que recomienda cambios pendientes en la capa de datos y en la interfaz, además de generar pruebas. +4. Copilot CLI te ofrecerá la posibilidad de añadir comentarios adicionales al plan. Puedes mover el cursor hasta la sección indicada y escribir tus sugerencias. Copilot incorporará esas sugerencias a una nueva versión del plan. +5. Cuando estés conforme, selecciona la opción que ofrece Copilot para empezar a trabajar en la nueva funcionalidad. + +> [!NOTE] +> Como Copilot es probabilístico, el texto exacto y las opciones que se muestren variarán. Sin embargo, verás una opción para empezar a construir que dirá algo parecido a esto: +> +> `Yes, and switch to autopilot mode`. +> +> Copilot puede ofrecerte la opción de habilitar el [modo autopilot](https://docs.github.com/copilot/concepts/agents/copilot-cli/autopilot), como se muestra en el ejemplo anterior. El modo autopilot permite que Copilot CLI trabaje en una tarea sin esperar tu intervención después de cada paso. Una vez que le das la instrucción inicial, Copilot CLI resuelve cada paso de forma autónoma hasta que determina que la tarea está completa. Como estamos trabajando en un entorno aislado, podemos ejecutar autopilot y permitir todas las herramientas. + +6. Copilot se pondrá manos a la obra generando los archivos. + +> [!NOTE] +> Es probable que esta operación tarde varios minutos. Verás a Copilot editar y crear archivos, actualizar y generar pruebas, y ejecutar todas las pruebas para comprobar que todo funciona correctamente. Es un buen momento para reflexionar sobre lo que has explorado hasta ahora o para tomarte algo. + +## Revisar el código + +Todo código generado por IA debe revisarse antes de fusionarse en producción. Vamos a dedicar ahora un momento a explorar los archivos que Copilot ha creado y modificado al implementar la nueva funcionalidad. + +1. Usa Copilot CLI para mostrar el "diff" o los cambios de código con el siguiente comando en Copilot CLI: + + ``` + /diff + ``` + +2. Observa los archivos modificados. Usa las teclas de dirección izquierda y derecha para ver los distintos archivos. Deberías ver actualizaciones en archivos como la página del listado de juegos (donde viven los nuevos controles de filtrado y el filtrado del lado del cliente) y `src/lib/games.ts`, además de pruebas como `games.test.ts`. También es posible que veas cambios en `publishers.ts` si Copilot ajusta tu helper existente para alinearlo con la implementación completa. + +## Resumen y siguientes pasos + +Ya has añadido la funcionalidad de filtrado al sitio web con la ayuda de Copilot CLI. En concreto: + +- has utilizado el modo de planificación para generar un plan de implementación de la funcionalidad de filtrado. +- has generado con Copilot el código necesario para añadir el filtrado al sitio web. + +Por supuesto, el siguiente paso es asegurarte de que funciona. Vamos a [probar tu funcionalidad con el servidor MCP de Playwright][next-lesson] antes de abrir una pull request. + +## Recursos + +- [Usar Copilot CLI][using-copilot-cli] +- [Acerca de Copilot CLI][about-copilot-cli] +- [Gestión del contexto en Copilot CLI][context-management] + +[previous-lesson]: ../2-custom-instructions/ +[next-lesson]: ../4-mcp/ +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[context-management]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#context-management diff --git a/docs/es-es/cli/4-mcp.md b/docs/es-es/cli/4-mcp.md new file mode 100644 index 0000000..c7694b5 --- /dev/null +++ b/docs/es-es/cli/4-mcp.md @@ -0,0 +1,160 @@ +--- +title: "Ejercicio 4 - Probar tu funcionalidad con el servidor MCP de Playwright" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +Acabas de generar la funcionalidad de filtrado con Copilot CLI. Antes de abrir una pull request, deberías confirmar que funciona en el navegador. En lugar de recorrer la aplicación manualmente, conectarás el **servidor MCP de Playwright** y dejarás que Copilot controle un navegador real para probar la funcionalidad por ti. + +En este ejercicio vas a: + +- comprender qué es Model Context Protocol (MCP) y cómo amplían los servidores MCP las capacidades de Copilot CLI. +- añadir el servidor MCP de Playwright a Copilot CLI. +- pedir a Copilot que lo use para probar manualmente tu funcionalidad de filtrado en un navegador. + +## ¿Qué es Model Context Protocol (MCP)? + +[Model Context Protocol (MCP)](https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/) proporciona a los agentes de IA una forma de comunicarse con herramientas y servicios externos. Al usar MCP, los agentes de IA pueden comunicarse con herramientas y servicios externos en tiempo real. Esto les permite acceder a información actualizada (mediante recursos) y realizar acciones en tu nombre (mediante herramientas). + +Se accede a estas herramientas y recursos a través de un servidor MCP, que actúa como puente entre el agente de IA y las herramientas y servicios externos. El servidor MCP se encarga de gestionar la comunicación entre el agente de IA y las herramientas externas (como API existentes o herramientas locales como paquetes de NPM). Cada servidor MCP representa un conjunto distinto de herramientas y recursos a los que el agente de IA puede acceder. + +Algunos servidores MCP populares ya existentes son: + +- **[GitHub MCP Server](https://github.com/github/github-mcp-server)**: este servidor proporciona acceso a un conjunto de API para gestionar tus repositorios de GitHub. Permite al agente de IA realizar acciones como crear repositorios nuevos, actualizar los existentes y gestionar incidencias y pull requests. +- **[Playwright MCP Server](https://github.com/microsoft/playwright-mcp)**: este servidor proporciona capacidades de automatización del navegador mediante Playwright. Permite al agente de IA realizar acciones como navegar por páginas web, rellenar formularios y seleccionar botones. + +Hay muchos otros servidores MCP disponibles que proporcionan acceso a distintas herramientas y recursos. GitHub aloja un [registro de MCP](https://github.com/mcp) para mejorar la visibilidad y las contribuciones al ecosistema. + +> [!CAUTION] +> En términos de seguridad, trata los servidores MCP como tratarías cualquier otra dependencia de tu proyecto. Antes de usar un servidor MCP, revisa cuidadosamente su código fuente, verifica el publicador y valora las implicaciones de seguridad. Usa solo servidores MCP en los que confíes y ten cuidado al conceder acceso a recursos u operaciones sensibles. + +> [!NOTE] +> El [servidor GitHub MCP][github-mcp-server] está **integrado** en Copilot CLI: ya está disponible sin ninguna configuración, y así es como Copilot ha estado leyendo y escribiendo en tu repositorio durante todo el taller. En este ejercicio añadirás un *segundo* servidor, Playwright, para darle a Copilot un navegador. + +## Añadir el servidor MCP de Playwright + +La forma más rápida de añadir un servidor es el comando interactivo `/mcp add`. Registrarás el [servidor MCP de Playwright][playwright-mcp-server], que proporciona a Copilot un navegador que puede controlar. + +> [!TIP] +> **Inicia una sesión de Copilot CLI** +> +> Antes de empezar los ejercicios siguientes, vuelve a tu codespace y abre un terminal (Ctrl+\` si no hay ninguno abierto). Después, inicia Copilot CLI con `--yolo` y `--enable-all-github-mcp-tools`: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> Para retomar la sesión más reciente de este proyecto en lugar de empezar desde cero, ejecuta `copilot --yolo --enable-all-github-mcp-tools --continue`. Si Copilot CLI ya se está ejecutando desde un ejercicio anterior, envía `/clear` para empezar una conversación limpia. +> +> `--enable-all-github-mcp-tools` habilita las herramientas GitHub MCP de lectura y escritura para la sesión actual, de modo que Copilot pueda leer tu backlog y abrir pull requests durante el flujo del taller. + +> [!CAUTION] +> `--yolo` habilita permisos automáticos completos (`--allow-all-tools`, `--allow-all-paths` y `--allow-all-urls`). Úsalo solo en un entorno aislado, como un Codespace o una máquina virtual, y no lo configures nunca como alias predeterminado para el desarrollo diario. Consulta [Allowing and denying tool use][allow-all-warning] para más información. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. En tu sesión de Copilot CLI, introduce: + + ```text + /mcp add + ``` + +2. Aparecerá un formulario de configuración. Usa Tab para desplazarte por los campos y complétalo de esta forma: + + - **Server Name**: `playwright` + - **Server Type**: selecciona **Local** (también aparece como **STDIO**) + - **Command**: `npx @playwright/mcp@latest --headless` + - **Tools**: déjalo en `*` para permitir todas las herramientas del servidor + +3. Pulsa Ctrl+S para guardar. El servidor se añade y queda disponible de inmediato; no hace falta reiniciar nada. + +La opción `--headless` indica a Playwright que ejecute el navegador sin una ventana visible, lo que es necesario dentro de un codespace donde no hay un escritorio para mostrarlo. Internamente, esto escribe el servidor en tu archivo `~/.copilot/mcp-config.json`: + +```json +{ + "mcpServers": { + "playwright": { + "type": "local", + "command": "npx", + "args": ["@playwright/mcp@latest", "--headless"], + "tools": ["*"] + } + } +} +``` + +4. Confirma que el servidor está registrado y activo mostrando la lista de servidores MCP: + + ```text + /mcp show + ``` + +5. Deberías ver `playwright` en la lista junto con el servidor `github` integrado. + +> [!NOTE] +> El proyecto Tailspin Toys ya usa Playwright para sus pruebas end-to-end, así que normalmente el navegador que Playwright necesita ya está instalado. Si Copilot informa más adelante de que falta un navegador, pídele que ejecute `npx playwright install chromium` y vuelve a intentarlo. + +## Iniciar el sitio web + +El servidor MCP de Playwright necesita una aplicación en ejecución sobre la que probar. Inicia el servidor de desarrollo de Astro en un terminal **independiente** para que siga ejecutándose mientras trabajas en Copilot CLI. + +1. Abre un terminal nuevo en tu codespace pulsando Ctrl+\`. +2. Inicia el sitio web: + + ```bash + npm run dev + ``` + +3. Deja este terminal en ejecución. Cuando veas el banner `Astro server: http://localhost:4321`, la aplicación estará lista. + +## Probar la funcionalidad de filtrado + +Vuelve a tu sesión de Copilot CLI y pídele a Copilot que pruebe la funcionalidad. + +El [servidor MCP de Playwright][playwright-mcp-server] le da a Copilot un navegador real que puede controlar. En lugar de que tengas que recorrer manualmente la aplicación para comprobar tu trabajo, el agente puede abrir una página, navegar, aplicar filtros y devolverte el resultado, para luego resumirte lo que ha visto. Es la forma más rápida de confirmar que una funcionalidad se comporta como esperas sin salir de la conversación. + +Internamente, el servidor MCP de Playwright trabaja a partir del [árbol de accesibilidad][playwright-mcp-server] de la página, en lugar de usar capturas de pantalla. Eso significa que el agente razona sobre elementos estructurados y etiquetados (botones, enlaces, elementos de lista) de la misma forma que lo hace la tecnología de asistencia, así que una comprobación funcional rápida también sirve como verificación básica de accesibilidad. + +Con el servidor conectado y la aplicación en ejecución, pídele a Copilot que ejercite la funcionalidad de filtrado que acabas de crear: + +```text +Using the Playwright MCP server, open a browser to the running app at http://localhost:4321 and verify the new game filtering feature: + +1. Go to the games page and note how many games are listed. +2. Apply a category filter and confirm the list updates to only show games in that category. +3. Clear it, then apply a publisher filter and confirm the list updates to that publisher. +4. Combine a category and a publisher filter and confirm the results respect both. + +Report what you observe at each step, and call out anything that does not behave as expected. +``` + +Copilot iniciará un navegador a través del servidor MCP de Playwright, recorrerá cada paso y te informará de lo que ha encontrado. Lee su resumen comparándolo con los criterios de aceptación de la incidencia. Si algo no parece correcto, haz preguntas de seguimiento o pídele que vuelva a corregir el código antes de abrir una pull request. + +> [!NOTE] +> La aplicación debe estar ejecutándose en `http://localhost:4321` para esta prueba. Si has detenido el servidor de desarrollo, vuelve a iniciarlo antes de enviar el prompt. La primera vez que Copilot use el servidor MCP de Playwright puede que necesite descargar un navegador; si informa de que falta uno, pídele que ejecute `npx playwright install chromium` y vuelve a intentarlo. + +[playwright-mcp-server]: https://github.com/microsoft/playwright-mcp + +## Resumen y siguientes pasos + +¡Enhorabuena! Has usado el servidor MCP de Playwright para probar manualmente tu funcionalidad con Copilot CLI. En resumen: + +- has aprendido qué es Model Context Protocol (MCP) y cómo amplían los servidores MCP las capacidades de Copilot CLI. +- has añadido el servidor MCP de Playwright con `/mcp add`. +- has pedido a Copilot que controle un navegador y verifique tu funcionalidad de filtrado antes de publicarla. + +Ahora que has confirmado que la funcionalidad funciona, puedes continuar con el siguiente ejercicio, en el que [abrirás una pull request con la ayuda de una habilidad de agente][next-lesson]. + +## Recursos + +- [¿Qué demonios es MCP y por qué todo el mundo habla de ello?][mcp-blog-post] +- [Servidor MCP de Playwright de Microsoft][playwright-mcp-server] +- [Añadir servidores MCP para Copilot CLI][cli-add-mcp] +- [Servidor MCP de GitHub][github-mcp-server] + +[previous-lesson]: ../3-generating-code/ +[next-lesson]: ../5-agent-skills/ +[mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/ +[github-mcp-server]: https://github.com/github/github-mcp-server +[cli-add-mcp]: https://docs.github.com/copilot/how-tos/copilot-cli/customize-copilot/add-mcp-servers diff --git a/docs/es-es/cli/5-agent-skills.md b/docs/es-es/cli/5-agent-skills.md new file mode 100644 index 0000000..b47ba05 --- /dev/null +++ b/docs/es-es/cli/5-agent-skills.md @@ -0,0 +1,123 @@ +--- +title: "Ejercicio 5 - Usar habilidades de agente" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +Desarrollar una aplicación suele implicar tareas repetibles, como generar builds, ejecutar pruebas o crear pull requests. Las **habilidades de agente** te permiten dar a Copilot, y a otros agentes de IA, directrices sobre cómo realizar esas tareas. Una habilidad es una carpeta de instrucciones, scripts y recursos que el agente puede cargar bajo demanda. [Agent Skills es un estándar abierto][agent-skills-repo] utilizado por distintos agentes, por lo que la misma habilidad puede funcionar en Copilot Chat en modo agente, Copilot cloud agent, Copilot CLI y la aplicación GitHub Copilot. + +Las habilidades viven en la carpeta `.github/skills` de un proyecto, o globalmente en `~/.copilot/skills`. Cada habilidad es una carpeta que contiene un archivo `SKILL.md` con frontmatter YAML (un `name` y un `description`) seguido de las instrucciones en Markdown: + +```yaml +--- +name: make-contribution +description: All changes to code must follow the guidance documented in the repository. Before any issue is filed, branch is made, commits generated, or pull request (or PR) created, a search must be done to ensure the right steps are followed. Whenever asked to create an issue, commit messages, to push code, or create a PR, use this skill so everything is done correctly. +--- +``` + +Las habilidades también pueden incluir subcarpetas con scripts, recursos y material de referencia. La estructura completa se describe en la [especificación de agent skills][agent-skills-spec]. + +> [!TIP] +> Las habilidades se cargan dinámicamente. El agente decide qué habilidad se aplica a partir del campo `description`; una descripción clara y específica para el escenario marca la diferencia entre una habilidad que se usa y otra que se ignora. + +[agent-skills-repo]: https://github.com/agentskills/agentskills +[agent-skills-spec]: https://agentskills.io/specification + +Vamos a ver cómo una habilidad puede garantizar que las pull requests sigan las especificaciones marcadas por nuestro equipo. + +## Escenario + +El equipo tiene una serie de requisitos para las pull requests (PR): + +- mensajes de confirmación claros, con los archivos agrupados de forma lógica. +- todas las pruebas deben superarse antes de crear una PR. +- cada PR debe contener las siguientes secciones: + - una descripción de por qué se hicieron los cambios. + - una visión general de los archivos modificados. + - fragmentos de bloques de código importantes. + - detalles de los cambios realizados agrupados juntos. + +Como el equipo usa Copilot para generar código y PR, quiere asegurarse de que las herramientas de IA sigan estos requisitos. + +En este ejercicio vas a: + +- explorar una habilidad existente para crear pull requests. +- aprender cómo utiliza el agente de IA las habilidades. +- crear una PR que cumpla las directrices con ayuda de la habilidad. + +## Ejecutar habilidades + +Las habilidades se cargan dinámicamente cuando el agente determina que son necesarias. La decisión de qué habilidades usar depende de la descripción del archivo `SKILL.md`. Por eso, es importante que las descripciones sean claras y definan el caso de uso de la habilidad. + +## Explorar la habilidad de PR + +Como Tailspin Toys tiene un conjunto de requisitos para crear PR, ha creado una habilidad para ayudar a las herramientas de IA a generar PR que cumplan esas directrices. Vamos a explorar la habilidad para entender qué hará. + +1. Abre `.github/skills/make-contribution/SKILL.md`. +2. Fíjate en el nombre y la descripción. Observa cómo la descripción destaca el escenario en el que debe usarse, es decir, siempre que se solicite crear una pull request o confirmar código. +3. Lee la habilidad. Observa que define reglas sobre cómo deben crearse las ramas, generarse las confirmaciones y redactarse los contenidos de la pull request. + +## Usar la habilidad + +Como se indicó antes, Copilot CLI invoca automáticamente las habilidades. Como resultado, lo único que tienes que hacer es pedirle a Copilot que cree una PR. + +> [!TIP] +> **Inicia una sesión de Copilot CLI** +> +> Antes de empezar los ejercicios siguientes, vuelve a tu codespace y abre un terminal (Ctrl+\` si no hay ninguno abierto). Después, inicia Copilot CLI con `--yolo` y `--enable-all-github-mcp-tools`: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> Para retomar la sesión más reciente de este proyecto en lugar de empezar desde cero, ejecuta `copilot --yolo --enable-all-github-mcp-tools --continue`. Si Copilot CLI ya se está ejecutando desde un ejercicio anterior, envía `/clear` para empezar una conversación limpia. +> +> `--enable-all-github-mcp-tools` habilita las herramientas GitHub MCP de lectura y escritura para la sesión actual, de modo que Copilot pueda leer tu backlog y abrir pull requests durante el flujo del taller. + +> [!CAUTION] +> `--yolo` habilita permisos automáticos completos (`--allow-all-tools`, `--allow-all-paths` y `--allow-all-urls`). Úsalo solo en un entorno aislado, como un Codespace o una máquina virtual, y no lo configures nunca como alias predeterminado para el desarrollo diario. Consulta [Allowing and denying tool use][allow-all-warning] para más información. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. Pídele a Copilot que cree una PR con el siguiente prompt: + + ``` + Can you please create a pull request for me! + ``` + +2. Copilot confirmará la solicitud. Al cabo de unos instantes, verás que Copilot indica que está utilizando la habilidad **make-contribution**. + + ![Captura de la habilidad de agente invocada por Copilot CLI](../../_images/cli-5-agent-skill.png) + +3. Después, Copilot seguirá las instrucciones de la habilidad. Empezará ejecutando las pruebas y luego creará una rama, confirmaciones y, finalmente, la PR. +4. Cuando se cree la PR, vuelve a tu repositorio y ábrela. Observa que las secciones siguen las directrices definidas en la habilidad y coinciden con los requisitos establecidos por el equipo. +5. Antes de pasar al siguiente ejercicio, restablece tu espacio de trabajo local en una rama nueva desde `main` para que el trabajo de accesibilidad quede separado de esta PR de filtrado: + + ```bash + git checkout main + git pull + git checkout -b accessibility-cli + ``` + +## Resumen y siguientes pasos + +Con la ayuda de una habilidad de agente, has creado una PR nueva que cumple los requisitos documentados. Has hecho lo siguiente: + +- explorar una habilidad existente para crear pull requests. +- aprender cómo utiliza el agente de IA las habilidades. +- crear una PR que cumple las directrices con ayuda de la habilidad. + +Las habilidades son perfectas para tareas concretas, pero para operaciones más amplias conviene aprovechar los [agentes personalizados][next-lesson], que exploraremos a continuación. + +## Recursos + +- [Acerca de las habilidades de agente][about-agent-skills] +- [Especificación de Agent Skills][agent-skills-spec] +- [Repositorio de Agent Skills][agent-skills-repo] +- [Habilidades de agente en awesome-copilot][awesome-copilot-skills] + +[previous-lesson]: ../4-mcp/ +[next-lesson]: ../6-custom-agents/ +[about-agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills +[awesome-copilot-skills]: https://github.com/github/awesome-copilot/tree/main/skills diff --git a/docs/es-es/cli/6-custom-agents.md b/docs/es-es/cli/6-custom-agents.md new file mode 100644 index 0000000..f9cf256 --- /dev/null +++ b/docs/es-es/cli/6-custom-agents.md @@ -0,0 +1,116 @@ +--- +title: "Ejercicio 6 - Agentes personalizados con GitHub Copilot CLI" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +## ¿Qué son los agentes personalizados? + +Los [agentes personalizados][custom-agents-concept] de GitHub Copilot te permiten crear asistentes de IA especializados y adaptados a tareas o dominios concretos dentro de tu flujo de desarrollo. Al definir agentes mediante archivos Markdown en la carpeta `.github/agents` de tu repositorio, puedes proporcionar a Copilot instrucciones enfocadas, buenas prácticas, patrones de desarrollo y conocimiento específico del dominio para orientarlo y que realice ciertos tipos de trabajo con mayor eficacia. Los equipos pueden codificar su experiencia en agentes reutilizables: un agente de accesibilidad que aplique el cumplimiento de [WCAG][wcag], un agente de seguridad que siga prácticas de desarrollo seguro o un agente de pruebas que mantenga patrones de prueba coherentes. + +Los agentes personalizados se definen mediante archivos Markdown en la carpeta `.github/agents` de tu proyecto, o globalmente en `~/.copilot/agents`. Cada archivo tiene frontmatter YAML con al menos `name` y `description`, seguido de un prompt en Markdown que define el comportamiento, la especialización y las instrucciones del agente. + +### Agentes personalizados frente a habilidades de agente + +Existe cierta superposición lógica entre los agentes personalizados y las [habilidades de agente][agent-skills-concept]. Ambos se definen principalmente mediante archivos Markdown y explican a una IA cómo realizar operaciones. La forma más clara de diferenciarlos es esta: un **agente personalizado** es quien trabaja y las **habilidades** son herramientas. + +Los agentes personalizados tienen su propia ventana de contexto y están pensados para orquestar habilidades, e incluso otros agentes, como parte de su trabajo. En este laboratorio, el agente personalizado de accesibilidad revisa y actualiza el sitio según las directrices de accesibilidad; como parte de ese trabajo podría invocar habilidades como una habilidad de flujo de trabajo de pull requests o una que ejecute y gestione pruebas. + +> [!NOTE] +> No existe una única forma "correcta" de crear un agente personalizado. Como ocurre con todo en IA, conviene probar e iterar para descubrir qué funciona mejor en tus entornos y escenarios. + +[custom-agents-concept]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-custom-agents +[agent-skills-concept]: https://docs.github.com/copilot/concepts/agents/about-agent-skills +[wcag]: https://www.w3.org/WAI/standards-guidelines/wcag/ + +## Escenario + +Muchas aplicaciones web no logran ser accesibles para todos los usuarios, y el sitio web en el que estás trabajando no es una excepción. Usarás un agente personalizado para identificar y corregir carencias de accesibilidad. + +Tailspin Toys se compromete a garantizar que su plataforma de crowdfunding sea accesible para todos los usuarios, independientemente de sus capacidades visuales o preferencias. Comentarios recientes de usuarios han señalado que algunas personas encuentran el tema oscuro actual difícil de leer debido al contraste insuficiente entre el texto y los colores de fondo. Para responder a este problema de accesibilidad, el equipo de diseño ha solicitado implementar un modo de alto contraste que los usuarios puedan activar y desactivar. + +Como la accesibilidad es crítica, quieres asegurarte de que esto se implemente lo antes posible. Vas a utilizar un agente personalizado para generar la funcionalidad. + +En este ejercicio vas a: + +- explorar los agentes personalizados. +- habilitar un agente personalizado y asignarle una tarea con Copilot CLI. + +## Revisar el agente personalizado de accesibilidad + +Ya se ha creado para ti un agente personalizado de accesibilidad. Vamos a revisar su contenido para entender cómo orientará a Copilot. + +1. Abre `.github/agents/accessibility.md`. +2. Fíjate en el frontmatter YAML con los campos `name` y `description`. + +> [!CAUTION] +> El frontmatter con `name` y `description` es obligatorio para los agentes personalizados. + +3. A continuación, revisa las secciones siguientes, que destacan: + - responsabilidades principales al generar código para un sitio web accesible. + - buenas prácticas de accesibilidad. + - ejemplos de código para HTML, CSS y JavaScript. + - una lista de errores y problemas habituales. + +## Usar un agente personalizado en Copilot CLI + +Puedes iniciar un agente personalizado en Copilot CLI con el comando `/agent`. Vamos a realizar una revisión de accesibilidad de nuestro sitio web. + +> [!TIP] +> **Inicia una sesión de Copilot CLI** +> +> Antes de empezar los ejercicios siguientes, vuelve a tu codespace y abre un terminal (Ctrl+\` si no hay ninguno abierto). Después, inicia Copilot CLI con `--yolo` y `--enable-all-github-mcp-tools`: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> Para retomar la sesión más reciente de este proyecto en lugar de empezar desde cero, ejecuta `copilot --yolo --enable-all-github-mcp-tools --continue`. Si Copilot CLI ya se está ejecutando desde un ejercicio anterior, envía `/clear` para empezar una conversación limpia. +> +> `--enable-all-github-mcp-tools` habilita las herramientas GitHub MCP de lectura y escritura para la sesión actual, de modo que Copilot pueda leer tu backlog y abrir pull requests durante el flujo del taller. + +> [!CAUTION] +> `--yolo` habilita permisos automáticos completos (`--allow-all-tools`, `--allow-all-paths` y `--allow-all-urls`). Úsalo solo en un entorno aislado, como un Codespace o una máquina virtual, y no lo configures nunca como alias predeterminado para el desarrollo diario. Consulta [Allowing and denying tool use][allow-all-warning] para más información. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. Muestra la lista de agentes escribiendo `/agent` en la ventana de prompt de Copilot CLI y seleccionando Enter. +2. Selecciona **Accessibility agent** en la lista de agentes disponibles. +3. Usa el siguiente prompt para pedir al agente de accesibilidad que realice una revisión y genere correcciones para el elemento del backlog relacionado con accesibilidad: + + ``` + Perform an accessibility review of the site. Pull the related issue down from the repository for details. Implement a high-contrast mode toggle that persists the user's preference across page reloads. Ensure there are e2e tests for any updates made to the project. Then create a PR with the updates. + ``` + +4. Copilot se pondrá a trabajar en la tarea. Empezará recuperando la incidencia, después realizará la revisión, generará las actualizaciones y, por último, creará la PR. También deberías observar que, al crear la PR, utiliza la habilidad centrada en PR del proyecto. + +> [!NOTE] +> Es probable que este proceso tarde unos minutos. Es un buen momento para reflexionar sobre todo lo que has aprendido, tomar algo o adelantarte al siguiente módulo, donde se comentan algunos comandos adicionales disponibles en Copilot CLI. + +## Resumen y siguientes pasos + +Esta lección ha explorado los [agentes personalizados][custom-agents] de GitHub Copilot, asistentes de IA especializados adaptados a tareas y dominios concretos. Con los agentes personalizados puedes codificar la experiencia y los estándares de tu equipo en agentes reutilizables que orienten a Copilot para realizar determinados tipos de trabajo con mayor eficacia. + +Has explorado estos conceptos: + +- cómo se definen los agentes personalizados. +- cómo usar un agente personalizado en Copilot CLI. + +Ahora vamos a explorar [algunos comandos de barra][next-lesson] para aprender algunos trucos adicionales con Copilot CLI. + +## Recursos + +- [Agentes personalizados][custom-agents] +- [Crear agentes personalizados para un repositorio][creating-custom-agents] +- [Agentes personalizados en awesome-copilot][awesome-copilot-agents] +- [Prepararse para usar agentes personalizados en tu organización][org-custom-agents] +- [Prepararse para usar agentes personalizados en tu empresa][enterprise-custom-agents] + +[previous-lesson]: ../5-agent-skills/ +[next-lesson]: ../7-slash-commands/ +[custom-agents]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#use-custom-agents +[creating-custom-agents]: https://docs.github.com/copilot/how-tos/use-copilot-agents/cloud-agent/create-custom-agents +[awesome-copilot-agents]: https://github.com/github/awesome-copilot/tree/main/agents +[org-custom-agents]: https://docs.github.com/copilot/how-tos/administer-copilot/manage-for-organization/prepare-for-custom-agents +[enterprise-custom-agents]: https://docs.github.com/copilot/how-tos/administer-copilot/manage-for-enterprise/manage-agents/prepare-for-custom-agents diff --git a/docs/es-es/cli/7-slash-commands.md b/docs/es-es/cli/7-slash-commands.md new file mode 100644 index 0000000..b3e1bbe --- /dev/null +++ b/docs/es-es/cli/7-slash-commands.md @@ -0,0 +1,177 @@ +--- +title: "Ejercicio 7 - Comandos de barra en GitHub Copilot CLI" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +Como cualquier buena herramienta de CLI, GitHub Copilot CLI incluye muchos comandos de barra para interactuar con ella. Estos comandos exponen funcionalidad avanzada, información "entre bastidores" u opciones de configuración adicionales. Ya has explorado un par de ellos con `/clear` para borrar el contexto y `/mcp` para inspeccionar los servidores MCP. Vamos a explorar otros muy potentes, entre ellos `/context`, `/model`, `/share` y `/delegate`. + +## Escenario + +Ya has completado los flujos principales de CLI. Ahora vamos a ver algunas capacidades adicionales: compartir sesiones, cambiar de modelo y delegar tareas en [Copilot cloud agent][about-cloud-agent]. + +En este ejercicio usarás: + +- `/share` para crear un GitHub gist y compartir tu sesión con el equipo. +- `/context` para ver el contexto que está usando actualmente Copilot CLI. +- `/model` para explorar la lista de modelos disponibles y seleccionar uno nuevo si así lo deseas. +- `/delegate` para delegar opcionalmente una tarea al agente en la nube. Esto requiere cloud agent, disponible en Copilot Student, Pro, Pro+, Business o Enterprise, es decir, en todos los planes excepto Copilot Free. + +## Compartir una sesión + +Usar cualquier herramienta, incluida una herramienta de IA, es una habilidad. Trabajar en equipo y compartir lo aprendido es la mejor forma de mejorar la experiencia de todos y generar código de mayor calidad. Para ello, Copilot CLI proporciona el comando `/share`. El comando `/share` puede generar un archivo Markdown o un GitHub gist con los detalles de la sesión, incluidos los prompts utilizados y la lógica que siguió Copilot. + +Vamos a crear un GitHub gist que podríamos compartir con nuestro equipo. + +> [!TIP] +> **Inicia una sesión de Copilot CLI** +> +> Antes de empezar los ejercicios siguientes, vuelve a tu codespace y abre un terminal (Ctrl+\` si no hay ninguno abierto). Después, inicia Copilot CLI con `--yolo` y `--enable-all-github-mcp-tools`: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> Para retomar la sesión más reciente de este proyecto en lugar de empezar desde cero, ejecuta `copilot --yolo --enable-all-github-mcp-tools --continue`. Si Copilot CLI ya se está ejecutando desde un ejercicio anterior, envía `/clear` para empezar una conversación limpia. +> +> `--enable-all-github-mcp-tools` habilita las herramientas GitHub MCP de lectura y escritura para la sesión actual, de modo que Copilot pueda leer tu backlog y abrir pull requests durante el flujo del taller. + +> [!CAUTION] +> `--yolo` habilita permisos automáticos completos (`--allow-all-tools`, `--allow-all-paths` y `--allow-all-urls`). Úsalo solo en un entorno aislado, como un Codespace o una máquina virtual, y no lo configures nunca como alias predeterminado para el desarrollo diario. Consulta [Allowing and denying tool use][allow-all-warning] para más información. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. En la ventana de prompt de Copilot CLI, envía el siguiente comando: + + ``` + /share gist + ``` + +2. En apenas unos instantes, Copilot creará un gist y mostrará el enlace. +3. Copia el texto del enlace. +4. En una pestaña nueva del navegador, pega el enlace para explorar el gist. Observa cómo el gist destaca los prompts enviados, las habilidades y los agentes utilizados, el proceso de razonamiento de Copilot e incluso el código y los resultados de los comandos ejecutados localmente. + +Los gists y archivos Markdown generados por `/share` pueden usarse para documentar cómo se generó el código o para compartir con el equipo cómo se llevaron a cabo determinadas acciones que produjeron los resultados deseados con Copilot. + +## Explorar el contexto de Copilot CLI + +Cuando trabajas en tareas grandes o complejas, puedes llegar al límite máximo de la ventana de contexto del modelo. El tamaño exacto de la ventana variará según el modelo que se esté usando y la versión de Copilot CLI. Cuando la ventana de contexto se llena, Copilot CLI la compacta automáticamente, resumiendo la información y eliminando lo que considera irrelevante para la tarea actual. Puedes tanto ver el estado actual del contexto como compactarlo manualmente usando comandos de barra. Vamos a explorar la ventana de contexto. + +1. En la ventana de prompt de Copilot CLI, envía el siguiente comando: + + ``` + /context + ``` + +2. En apenas unos instantes, Copilot CLI generará una representación visual de su contexto actual: + + ![Captura de la ventana de contexto de Copilot CLI](../../_images/cli-7-context-window.png) + +3. Fíjate en el modelo mostrado (que puede ser distinto del de la imagen) y en el porcentaje actual de tokens usados. El resto de la información destaca lo siguiente: + + | Título | Descripción | + | ------------ | ------------------------------------------------------ | + | Sistema/Herramientas | Archivos de instrucciones, contenido de archivos y definiciones de herramientas | + | Mensajes | Historial de la conversación entre tú y Copilot | + | Búfer | Espacio reservado por Copilot CLI para generar respuestas | + | Espacio libre | Espacio libre restante | + +4. Compacta el historial de la conversación enviando el siguiente comando de barra a Copilot CLI: + + ``` + /compact + ``` + +5. Cuando termine, envía de nuevo el siguiente comando para mostrar las estadísticas actuales del contexto: + + ``` + /context + ``` + +6. Observa el cambio en el contexto. Puede que no sea drástico, ya que es probable que la ventana de contexto sea relativamente pequeña en este momento. + +> [!NOTE] +> Copilot CLI compactará automáticamente el contexto cuando se llene. Cuando se acerque al 100 % de capacidad, mostrará el porcentaje justo encima de la ventana de prompt. Normalmente lo compactará de forma asíncrona, lo que te permitirá seguir interactuando con Copilot mientras realiza ese trabajo. Aun así, puede bloquear una operación en curso durante varios segundos mientras lo hace. + +### Buenas prácticas con el contexto + +En la mayoría de las sesiones, Copilot gestionará el contexto de forma eficiente sin que tengas que darle instrucciones específicas. Sin embargo, puede haber ocasiones en las que decidas indicarle manualmente que borre o compacte el historial: + +- Si vas a pasar a otra parte de la aplicación o a una tarea no relacionada, puedes usar `/clear` para empezar de nuevo y evitar confundir a Copilot con contexto antiguo que no tiene relación. +- Si te estás acercando al límite máximo de la ventana de contexto, puedes usar manualmente `/compact` para controlar cuándo ocurre. + +> [!CAUTION] +> De nuevo, la mayor parte del tiempo Copilot gestionará su contexto sin interacción directa por tu parte. Si observas que Copilot está algo confundido por información antigua, o estás a punto de cambiar a una tarea no relacionada, entonces quizá te convenga usar los comandos manuales. + +## Elegir tu modelo + +Los distintos modelos tienen puntos fuertes diferentes y cada desarrollador tiene sus propias preferencias. Copilot CLI te permite listar y seleccionar el modelo que quieras usar. + +1. Muestra la lista de modelos enviando el siguiente comando de barra a Copilot CLI: + + ``` + /model + ``` + +2. Observa la lista de modelos. Junto a cada modelo aparecerán tanto su nombre como el modificador de coste por solicitud. +3. Si quieres, selecciona un modelo nuevo. O bien selecciona Esc para salir de la lista de modelos. + +> [!CAUTION] +> La selección de modelo persiste en Copilot CLI. + +## Delegar en cloud agent (opcional) + +Hay ocasiones en las que quieres seguir trabajando en tu terminal, pero delegar una tarea de mayor duración en Copilot cloud agent. El comando `/delegate` envía la sesión actual de Copilot CLI a GitHub.com, donde cloud agent la retoma, trabaja de forma asíncrona y abre una pull request cuando termina. + +> [!NOTE] +> `/delegate` requiere cloud agent, disponible en Copilot Student, Pro, Pro+, Business o Enterprise, es decir, en todos los planes excepto Copilot Free. Si no tienes acceso, lee esta sección y omite los pasos prácticos. + +1. Borra primero la sesión actual para no delegar el contexto acumulado del taller: + + ``` + /clear + ``` + +2. Envía un prompt pequeño y bien delimitado. Por ejemplo, podrías delegar la paginación de objetivo ampliado de tu backlog: + + ``` + Implement pagination on the game list page so it shows a fixed number of games per page with Previous and Next controls, and add tests. + ``` + +3. Envía el siguiente comando de barra para delegar la sesión al agente en la nube y confirma el prompt que quieres delegar: + + ``` + /delegate + ``` + +4. Abre [Copilot agents](https://github.com/copilot/agents) en un navegador para supervisar el progreso. +5. No necesitas esperar a que la pull request termine en este recorrido; puedes volver más tarde. Si quieres profundizar en la gestión del trabajo asíncrono con agentes, continúa con el [recorrido de Cloud agent](../../cloud/). + +## Resumen y siguientes pasos + +Usar comandos de barra en Copilot CLI te permite configurarlo, compartir sesiones y obtener información interna sobre cómo está trabajando Copilot. En esta lección has usado o explorado: + +- `/share` para crear un GitHub gist y compartir tu sesión con el equipo. +- `/context` para ver el contexto que está usando actualmente Copilot CLI. +- `/model` para explorar la lista de modelos disponibles y seleccionar uno nuevo si así lo deseas. +- `/delegate` como puente opcional hacia cloud agent. + +Por supuesto, hay más comandos de barra disponibles y mucho más por explorar con Copilot CLI. Vamos a cerrar este recorrido [repasando lo que hemos aprendido][next-lesson] y viendo algunos próximos pasos para seguir aprendiendo. + +## Recursos + +- [Usar Copilot CLI][using-copilot-cli] +- [Acerca de Copilot CLI][about-copilot-cli] +- [Gestión del contexto en Copilot CLI][context-management] +- [Compartir sesiones con Copilot CLI][share-sessions] +- [Seleccionar modelos en Copilot CLI][selecting-models] + +[previous-lesson]: ../6-custom-agents/ +[next-lesson]: ../8-review/ +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[about-cloud-agent]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-cloud-agent +[context-management]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#context-management +[share-sessions]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#share-sessions +[selecting-models]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#select-an-llm diff --git a/docs/es-es/cli/8-review.md b/docs/es-es/cli/8-review.md new file mode 100644 index 0000000..48534f2 --- /dev/null +++ b/docs/es-es/cli/8-review.md @@ -0,0 +1,70 @@ +--- +title: "Ejercicio 8 - Repaso y próximos pasos" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +En los últimos ejercicios, has explorado algunos de los casos de uso más habituales de GitHub Copilot CLI, entre ellos: + +- interactuar con GitHub y otros servidores MCP. +- usar archivos de instrucciones para orientar la generación de código. +- implementar habilidades para añadir herramientas al conjunto de herramientas de Copilot CLI. +- invocar agentes personalizados para tareas avanzadas y más complejas. +- usar comandos de barra para gestionar tu sesión y, opcionalmente, volver a conectar con cloud agent mediante `/delegate`. + +Vamos a hablar de algunos comandos de barra, buenas prácticas y próximos pasos. + +## Comandos de barra + +Copilot CLI tiene una serie de comandos de barra disponibles para interactuar con él, incluidos algunos que te permiten configurarlo o ver qué está ocurriendo entre bastidores. Ya has usado `/clear` para iniciar un chat nuevo que borra el contexto actual, y `/mcp` para inspeccionar y gestionar servidores MCP. Algunos adicionales que pueden resultarte útiles son: + +| Comando | Descripción | +| ------------------ | ------------------------------------------------------------- | +| `/add-dir` | Añadir un directorio a la lista de confianza de Copilot | +| `/clear`, `/new` | Borrar el historial de la conversación y empezar de cero | +| `/compact` | Resumir el historial de la conversación para reducir el uso de la ventana de contexto | +| `/context` | Mostrar el uso de tokens de la ventana de contexto y su visualización | +| `/diff` | Revisar los cambios realizados en el directorio actual | +| `/model` | Seleccionar el modelo de IA que se va a usar (Claude Sonnet, GPT-5, etc.) | +| `/plan ` | Crear un plan de implementación antes de programar | +| `/review ` | Ejecutar el agente de revisión de código para analizar los cambios | +| `/delegate` | Delegar la tarea en Copilot cloud agent para procesamiento asíncrono | +| `/session` | Mostrar la información de la sesión y el resumen del espacio de trabajo | +| `/share` | Compartir la sesión en un archivo Markdown o un GitHub gist | +| `/skills` | Gestionar habilidades para ampliar las capacidades | +| `/usage` | Mostrar métricas y estadísticas de uso de la sesión | + +> [!TIP] +> Usa `/help` para ver la lista completa de comandos disponibles y de atajos de teclado. + +## Buenas prácticas + +Cuando usas una herramienta de IA, la infraestructura subyacente determina en gran medida la calidad de lo que obtienes. Unos archivos de instrucciones sólidos, agentes personalizados y habilidades de agente robustas forman parte de ello, y en este taller has explorado cada uno de esos elementos. [awesome-copilot][awesome-copilot] es una buena fuente de plantillas, y el propio Copilot puede generarlas como punto de partida. + +El contexto sigue importando tanto como la infraestructura. Describir claramente *qué* quieres que se construya, *por qué* y *cómo* cambia de forma significativa el resultado. Si una información puede ayudar a Copilot, compártela. + +## Próximos pasos + +La mejor forma de mejorar tus habilidades con cualquier herramienta es seguir usándola. Úsala para código de producción, para proyectos personales, para esa pequeña aplicación en la que llevas años pensando pero que nunca llegabas a construir. Comparte lo que aprendas con tu equipo y aprende también de él. Y, como siempre, explora la documentación. + +Si quieres explorar más del ecosistema de GitHub Copilot, consulta el [recorrido de VS Code](../../vscode/) o el [recorrido de Cloud agent](../../cloud/). + +## Recursos + +- [Acerca de Copilot CLI][about-copilot-cli] +- [Usar Copilot CLI][using-copilot-cli] +- [Repositorio Awesome Copilot][awesome-copilot] +- [Guía de instrucciones personalizadas][repo-instructions] +- [Documentación de las habilidades de agente][agent-skills] +- [Documentación de agentes personalizados][custom-agents] +- [Especificación de MCP][mcp-spec] + +[previous-lesson]: ../7-slash-commands/ +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli +[awesome-copilot]: https://github.com/github/awesome-copilot +[repo-instructions]: https://docs.github.com/copilot/how-tos/configure-custom-instructions/add-repository-instructions +[agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills +[custom-agents]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#use-custom-agents +[mcp-spec]: https://modelcontextprotocol.io/ diff --git a/docs/es-es/cli/README.md b/docs/es-es/cli/README.md new file mode 100644 index 0000000..aca3c5c --- /dev/null +++ b/docs/es-es/cli/README.md @@ -0,0 +1,55 @@ +--- +slug: es-es/cli +title: "GitHub Copilot CLI" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +**[GitHub Copilot CLI](https://docs.github.com/copilot/concepts/agents/about-copilot-cli)** incorpora GitHub Copilot a tu terminal como asistente de programación con agentes. Explora bases de código, genera código, ejecuta comandos y se conecta a herramientas externas, todo desde la línea de comandos, para que puedas mantener el flujo sin cambiar a un editor gráfico. + +A lo largo de estos ejercicios instalarás y autenticarás Copilot CLI, y después le darás contexto del proyecto con instrucciones personalizadas antes de usar el modo de planificación para generar una funcionalidad de forma deliberada. Conectarás el servidor MCP de Playwright para probar esa funcionalidad en un navegador real y, a continuación, ampliarás Copilot con habilidades de agente reutilizables y agentes personalizados. Por último, explorarás los comandos de barra para gestionar el contexto, los modelos y el uso compartido, y terminarás con un repaso de lo que has creado. + +## Ejercicios + +| Ejercicio | Tema | Descripción | +|----------|-------|-------------| +| [0. Requisitos previos][ex0] | Configuración | Crea tu repositorio y tu codespace | +| [1. Instalación de Copilot CLI][ex1] | Instalación | Instala y autentica Copilot CLI | +| [2. Instrucciones personalizadas][ex2] | Contexto | Añade una instrucción y comprueba cómo la sigue Copilot CLI | +| [3. Generación de código][ex3] | Generación de código | Usa el modo de planificación y genera funcionalidades | +| [4. Pruebas con Playwright MCP][ex4] | Herramientas externas | Añade el servidor MCP de Playwright y prueba tu funcionalidad en un navegador | +| [5. Habilidades de agente][ex5] | Habilidades | Mejora Copilot con habilidades especializadas | +| [6. Agentes personalizados][ex6] | Agentes | Revisa y usa agentes personalizados | +| [7. Comandos de barra][ex7] | Funciones de CLI | Explora el contexto, los modelos, el uso compartido y la delegación opcional al agente en la nube | +| [8. Repaso][ex8] | Resumen | Repasa los conceptos clave y los próximos pasos | + +## Requisitos previos + +Antes de asistir a este taller, asegúrate de tener: + +- [ ] Una cuenta de GitHub con un plan activo de **Copilot Student, Pro, Pro+, Business o Enterprise** +- [ ] Conocimientos básicos de operaciones de terminal/línea de comandos +- [ ] Git instalado y configurado + +> [!TIP] +> ¿No tienes un plan de pago? Los estudiantes verificados pueden obtener GitHub Copilot gratis a través de [GitHub Education][callout-student-plan-education]. El plan **Copilot Student** incluye las funciones de agente, MCP, revisión de código y Copilot CLI que utiliza este taller, así que puedes completar con él todos los recorridos. + +[callout-student-plan-education]: https://github.com/education/students + +> [!NOTE] +> Si usas Copilot Business o Copilot Enterprise, asegúrate de que tu administrador haya habilitado Copilot CLI. + +## Primeros pasos + +**[Empieza con el ejercicio 0: Requisitos previos →][ex0]** + +[ex0]: 0-prerequisites/ +[ex1]: 1-install-copilot-cli/ +[ex2]: 2-custom-instructions/ +[ex3]: 3-generating-code/ +[ex4]: 4-mcp/ +[ex5]: 5-agent-skills/ +[ex6]: 6-custom-agents/ +[ex7]: 7-slash-commands/ +[ex8]: 8-review/ diff --git a/docs/ja-jp/README.md b/docs/ja-jp/README.md index cab54c7..04db18c 100644 --- a/docs/ja-jp/README.md +++ b/docs/ja-jp/README.md @@ -21,7 +21,7 @@ GitHub Copilot は、どの環境で作業していても利用できます。 **Visual Studio Code** と GitHub Codespaces 内で GitHub Copilot を使用します。普段使っているエディターを離れることなく、Copilot Chat のエージェント モード、MCP サーバー、カスタム エージェントを利用できます。AI 支援を IDE に直接組み込んで使いたい場合に最適です。 -### 💻 [Copilot CLI](../cli/) +### 💻 [Copilot CLI](cli/) **GitHub Copilot CLI** は、ターミナルで動作するエージェント型アシスタントです。インストールして MCP サーバーに接続し、プラン モードでコードを生成できます。さらに、独自のスキル、カスタム エージェント、スラッシュ コマンドをすべてコマンド ラインから構築できます。 diff --git a/docs/ja-jp/app/8-review.md b/docs/ja-jp/app/8-review.md index cbcdcf4..d13c681 100644 --- a/docs/ja-jp/app/8-review.md +++ b/docs/ja-jp/app/8-review.md @@ -60,7 +60,7 @@ AI ツールを使用するときは、その周辺の基盤が出力の品質 ツールを使いこなす最良の方法は、使い続けることです。実稼働コード、趣味のコード、長年構想していながら構築できていなかった小さなアプリなどに活用してください。学んだことをチームと共有し、チームからも学びましょう。そして、引き続きドキュメントを確認してください。 -GitHub Copilot エコシステムをさらに学ぶには、[VS Code ハーネス](../../vscode/)、[Copilot CLI ハーネス](../../cli/)、[Cloud agent ハーネス](../../cloud/)を確認してください。 +GitHub Copilot エコシステムをさらに学ぶには、[VS Code ハーネス](../../vscode/)、[Copilot CLI ハーネス](../cli/)、[Cloud agent ハーネス](../../cloud/)を確認してください。 ## リソース diff --git a/docs/ja-jp/cli/0-prerequisites.md b/docs/ja-jp/cli/0-prerequisites.md new file mode 100644 index 0000000..eeda24e --- /dev/null +++ b/docs/ja-jp/cli/0-prerequisites.md @@ -0,0 +1,71 @@ +--- +title: "演習 0: 前提条件" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +Copilot CLI の演習を始める前に、必要な準備を整えます。Tailspin Toys リポジトリの自分用コピーを作成し、[codespace][codespaces] を立ち上げます。次の演習では、その統合ターミナルを使って Copilot CLI をインストールし、実行します。 + +## ラボ用リポジトリを設定する + +これから作成するコード用にリポジトリのコピーを作成するため、[template][template-repository] からインスタンスを作成します。新しいインスタンスにはラボに必要なすべてのファイルが含まれており、演習を進める間はこのリポジトリを使用します。 + +1. 新しいブラウザー ウィンドウで、このラボの GitHub リポジトリ `https://github.com/github-samples/tailspin-toys` に移動します。 +2. ラボ用リポジトリ ページの **Use this template** ボタンを選択して、自分用のリポジトリ コピーを作成します。次に **Create a new repository** を選択します。 + + ![「Use this template」ボタン](../../_images/ex0-use-template.png) + +3. GitHub または Microsoft が主催するイベントの一環としてこのワークショップを進めている場合は、メンターから案内された手順に従ってください。そうでない場合は、GitHub Copilot にアクセスできる organization に新しいリポジトリを作成できます。 + + ![リポジトリ テンプレートの設定を入力する画面](../../_images/ex0-repository-settings.png) + +4. 後でラボ内で参照するため、作成したリポジトリ パス(**organization-or-user-name/repository-name**)を控えておいてください。 + +> [!NOTE] +> **バックログの準備は完了しています** +> +> テンプレートからリポジトリを作成すると、GitHub issue のバックログが自動的に作成されます。ワークショップ全体を通してこれらの issue を使って作業するため、自分で起票する必要はありません。 + +## Codespace を作成する + +次は、codespace を使ってラボの演習を進めます。 + +[GitHub Codespaces][codespaces] はクラウドベースの開発環境であり、ブラウザーから直接コードの作成、実行、デバッグを行えます。複数のプログラミング言語、拡張機能、ツールに対応したフル機能の IDE を提供します。 + +1. 新しく作成したリポジトリに移動します。 +2. 緑色の **Code** ボタンを選択します。 + + ![「Code」ボタンを選択する](../../_images/ex0-code-button.png) + +3. **Codespaces** タブを選択し、**+** ボタンを選択して新しい codespace を作成します。 + + ![新しい codespace を作成する](../../_images/ex0-create-codespace.png) + +Codespace の作成には数分かかりますが、すべてのサービスを手動でインストールするよりははるかに速く完了します。その間に、次に扱う GitHub Copilot のほかの機能を確認しておくこともできます。 + +> [!CAUTION] +> 後続の演習で codespace に戻ります。いまのところは、ブラウザーのタブで開いたままにしておいてください。 + +> [!NOTE] +> このワークショップは、codespace またはローカルの [dev container][dev-containers] 内で実行する前提で作られています。どちらでも、必要な前提条件がすべてインストールされた環境を用意できるため、スムーズに進められます。ローカルで実行したい場合は、クローンしたリポジトリを VS Code で開き、表示されたら **Reopen in Container** を選択してください。VS Code が、codespace と同じ dev container を構築します。 + +[codespaces]: https://github.com/features/codespaces +[dev-containers]: https://code.visualstudio.com/docs/devcontainers/containers +## まとめ + +おめでとうございます。ラボ用リポジトリのコピーを作成できました。さらに、Copilot CLI を使い始めるときに使用する codespace の作成も開始しました。 + +## 次のステップ + +Copilot CLI をインストールし、GitHub アカウントで認証しましょう。[演習 1 - GitHub Copilot CLI のインストール][next-lesson] に進みます。 + +## リソース + +- [GitHub Codespaces の概要][codespaces] +- [テンプレートからリポジトリを作成する][template-repository] +- [Codespaces クイックスタート][codespaces-quickstart] + +[template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository +[codespaces-quickstart]: https://docs.github.com/codespaces/getting-started/quickstart +[next-lesson]: ../1-install-copilot-cli/ diff --git a/docs/ja-jp/cli/1-install-copilot-cli.md b/docs/ja-jp/cli/1-install-copilot-cli.md new file mode 100644 index 0000000..ce05003 --- /dev/null +++ b/docs/ja-jp/cli/1-install-copilot-cli.md @@ -0,0 +1,129 @@ +--- +title: "演習 1 - GitHub Copilot CLI をインストールする" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +[GitHub Copilot CLI][about-copilot-cli] は、ターミナルで動作する強力なエージェント型コーディング アシスタントです。コードベースの探索、コード生成、コマンド実行、外部ツールとの連携をすべてコマンド ラインから行えます。タスクを任せたり、変更を依頼したりしながら、集中を保って作業できます。最初のステップは、想像どおりツールをインストールすることです。幸い、すでによく知っているツールを使って実行できます。 + +この演習では、次のことを学びます。 + +- npm を使って GitHub Copilot CLI をインストールする。 +- GitHub アカウントで認証する。 +- インストールを確認する。 + +## シナリオ + +チームでは、増え続けるバックログに対応するために AI agent を使い始めています。Copilot CLI はその機能をターミナルに持ち込みます。ターミナルは、多くの開発者が日常的に作業する場所です。この演習では、インストールと認証を済ませ、ワークショップの残りで使える状態にします。 + +## Codespace でターミナルを開く + +Copilot CLI をインストールする前に、codespace でターミナル ウィンドウを開く必要があります。 + +1. まだ開いていない場合は、codespace に戻ります。 +2. Ctrl+\` を押してターミナル ウィンドウを開きます。 +3. VS Code ウィンドウの下部にターミナル パネルが表示されます。 + +## Copilot CLI をインストールする + +Copilot CLI は [npm][install-npm]、[WinGet][install-winget]、[Homebrew][install-homebrew] でインストールできます。GitHub Codespaces には Node.js があらかじめインストールされているため、この演習では npm を使って Copilot CLI をインストールします。 + +1. ターミナルで、Node.js がインストールされており、バージョン要件を満たしていることを確認します。 + + ```bash + node --version + ``` + + バージョン 22 以上(例: `v22.x.x`)が表示されるはずです。 + +2. npm を使って codespace に Copilot CLI をグローバル インストールします。 + + ```bash + npm install -g @github/copilot + ``` + +3. バージョンを確認してインストールを検証します。 + + ```bash + copilot --version + ``` + + バージョン番号(例: `v1.0.XX`)が表示されるはずです。 + +> [!TIP] +> 権限エラーが発生した場合は、一部のシステムで `sudo npm install -g @github/copilot` の使用が必要になることがあります。ただし、GitHub Codespaces では通常必要ありません。 + +## GitHub で認証する + +初回起動時に、Copilot CLI は GitHub アカウントでの認証を求めます。 + +1. Copilot CLI を起動します。 + + ```bash + copilot + ``` + +2. 現在ログインしていない場合は、認証を求めるプロンプトが表示されます。Copilot CLI は device code を表示し、URL にアクセスするよう案内します。 +3. 画面の指示に従います。 + - 提示された URL をブラウザーで開く + - 求められたら device code を入力する + - Copilot CLI が GitHub アカウントにアクセスできるよう承認する +4. 認証が完了すると、質問やコマンドを受け付ける Copilot CLI のプロンプトが表示されます。 + +> [!NOTE] +> Codespace では、GitHub のセッションを通じてすでに認証されている場合があります。Copilot CLI が認証を求めずに起動した場合は、そのまま進めて問題ありません。 + +## ディレクトリを信頼し、正しく動作していることを確認する + +初めて Copilot CLI のプロンプトが表示されたので、このワークショップのリポジトリを信頼済みにし、Copilot CLI が正しくインストールされ、接続されていることを確認しましょう。 + +1. Copilot CLI からこのフォルダー内のファイルを信頼するか確認されたら、次の 3 つの選択肢が表示されます。 + - **Yes, proceed**: このセッションのみ信頼する + - **Yes, and remember this folder for future sessions**: 永続的に信頼する + - **No, exit (Esc)**: ファイルへのアクセスを許可しない +2. このワークショップでは、このリポジトリで継続して作業するため、**Yes, and remember this folder for future sessions** を選択します。 +3. Copilot に簡単な質問をして、正しく動作していることを確認します。 + + ``` + What files are in this project? + ``` + +4. Copilot がリポジトリを探索し、プロジェクト構造の概要を返すはずです。 +5. `/help` コマンドを試して、利用可能な slash command を確認します。 + + ``` + /help + ``` + +6. ターミナルで次のコマンドを入力して Copilot CLI を終了します。後続の演習で再び Copilot CLI に戻ります。 + + ``` + exit + ``` + +## まとめと次のステップ + +おめでとうございます。GitHub Copilot CLI のインストールと認証が完了しました。次のことを学びました。 + +- npm を使って Copilot CLI をインストールする。 +- GitHub アカウントで認証する。 +- Copilot CLI が作業できるようにディレクトリを信頼する。 +- インストールが正しく動作していることを確認する。 + +Copilot CLI をインストールできたので、次は Copilot にプロジェクトのコンテキストを与えます。[演習 2 - Copilot CLI のカスタム命令][next-lesson] に進んでください。 + +## リソース + +- [GitHub Copilot CLI のインストール][install-copilot-cli] +- [Copilot CLI について][about-copilot-cli] +- [Copilot CLI を使う][using-copilot-cli] + +[previous-lesson]: ../0-prerequisites/ +[next-lesson]: ../2-custom-instructions/ +[install-copilot-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[install-npm]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-npm-all-platforms +[install-winget]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-winget-windows +[install-homebrew]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-homebrew-macos-and-linux +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli diff --git a/docs/ja-jp/cli/2-custom-instructions.md b/docs/ja-jp/cli/2-custom-instructions.md new file mode 100644 index 0000000..4340660 --- /dev/null +++ b/docs/ja-jp/cli/2-custom-instructions.md @@ -0,0 +1,239 @@ +--- +title: "演習 2 - カスタム命令 (Copilot CLI)" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +[← 前のレッスン: Copilot CLI のインストール][previous-lesson] · [次のレッスン: CLI でコードを生成する →][next-lesson] + +生成 AI を使って作業するときは、コンテキストが重要です。特定のやり方で進める必要があるタスクや、Copilot に知っておいてほしい背景情報がある場合は、そのコンテキストを確実に渡すことが大切です。Copilot を補助するためのツールはいくつかあり、このワークショップ全体で確認していきます。最初に取り上げるのは [instruction file][instruction-files] です。instruction file は通常、コードそのものをどのように構成すべきかに重点を置きます。これにより、どのようなコードが必要かだけでなく、どのように構成すべきかも Copilot に理解させられます。 + +この演習では、次のことを行います。 + +- リポジトリの custom instruction と、パス単位で適用される instruction file を通じて、プロジェクト固有のコンテキスト、コーディング ガイドライン、ドキュメント標準がどのように Copilot に渡るかを確認する。 +- *現在の* instruction のまま、フィルタリングの最初のデータ スライス(publishers helper)を生成する。 +- `.github/copilot-instructions.md` に、リポジトリ全体に適用される新しい標準を追加する。 +- フォローアップのプロンプトを実行し、再生成されたコードが新しい標準を取り入れる様子を確認する。 +- instruction の更新と helper を commit し、次の演習でその続きに取り組めるようにする。 + +> [!CAUTION] +> 生成されたコードは、設定した標準から外れることがあります。Copilot は非決定的です。目的は、instruction を更新したあとに振る舞いの傾向がどう変わるかを確認することであり、出力を 1 文字単位で一致させることではありません。 + +## Instruction files + +### シナリオ + +優れた開発チームと同様に、Tailspin Toys にも開発プラクティスに関するガイドラインと要件があります。たとえば次のような内容です。 + +- データ レイヤーには常に unit test が必要です。 +- UI はダーク モードで、モダンな印象にする必要があります。 +- ドキュメントは TSDoc の doc comment としてコード内に追加する必要があります。 +- 各ファイルの先頭には、そのファイルの役割を説明するコメント ブロックを追加する必要があります。 + +Instruction file を使うことで、これらのプラクティスに沿ってタスクを実行するために必要な情報を Copilot に確実に渡せます。 + +### Custom instructions + +Custom instruction を使うと、コンテキストや設定を Copilot に渡せるため、コーディング スタイルや要件をより正確に理解させられます。これは非常に強力な機能であり、より関連性の高い提案やコード スニペットを Copilot から引き出すのに役立ちます。好みのコーディング規約、使用するライブラリ、含めたいコメントの種類まで指定できます。instruction はリポジトリ全体に対して作成することも、タスク レベルのコンテキストとして特定のファイル種別向けに作成することもできます。 + +instruction file には 2 種類あります。 + +- `.github/copilot-instructions.md` は、リポジトリへの**すべて**のリクエストで Copilot に送られる単一の instruction file です。このファイルにはプロジェクト レベルの情報、つまり Copilot に送るほとんどの chat や CLI リクエストに関連するコンテキストを含める必要があります。たとえば、使用している技術スタック、作成中のものの概要、ベスト プラクティス、その他のグローバル ガイダンスなどです。 +- `.github/instructions/*.instructions.md` ファイルは、特定のタスクやファイル種別向けに作成できます。TypeScript や Astro のような特定の言語向けガイドラインや、UI component 作成、unit test 追加などのタスク向けガイドラインを提供するために使えます。 + +> [!NOTE] +> IDE で作業している場合、instruction file は Copilot Chat でのコード生成にのみ使用されます。コード補完や next-edit suggestion には使われません。 +> +> Copilot Chat、Copilot CLI、Copilot cloud agent は、コード生成時にリポジトリ レベルの instruction file と `*.instructions.md` ファイル(`applyTo` front matter 付き)の両方を使用します。 +> +> さらに、Copilot は [ほかの標準を使った instruction file][custom-instructions-support] もサポートしており、AGENTS.md や CLAUDE.md ファイルも利用できます。 + +### Instruction file を管理するためのベスト プラクティス + +instruction file の作成に関する詳しい説明は、このワークショップの範囲外です。ただし、サンプル プロジェクトに含まれている例は、代表的なアプローチを示しています。大まかには次のとおりです。 + +- `copilot-instructions.md` の instruction は、何を作っているかの説明、プロジェクト構造、グローバルなコーディング標準など、プロジェクト レベルのガイダンスに集中させます。 +- `*.instructions.md` ファイルは、ファイル種別(unit test、Astro component、データ レイヤー)や特定のタスク向けに、具体的な instruction を提供するために使います。 +- 自然言語を使います。ガイダンスは明確に保ちます。コードの望ましい形と望ましくない形の両方の例を示します。 + +instruction file の作り方に唯一の正解があるわけではなく、AI の使い方にも唯一の正解はありません。試行錯誤しながら、自分のプロジェクトに最適な方法を見つけてください。 + +> [!TIP] +> GitHub Copilot を使うすべてのプロジェクトには、充実した instruction file のセットがあるべきです。このプロジェクトの instruction file を見ていくと、[UI 更新][ui-instructions] や [Astro][astro-instructions] など、多くの種類のタスク向けのファイルがあることに気づくかもしれません。 +> +> Copilot は instruction file の生成も支援できます。各 surface で公開方法は異なります(たとえば VS Code の **Configure Chat → Generate Agent Instructions** や、Copilot CLI の `/init` など)。現在使用している surface のレッスンで、関係がある場面に案内があります。 +> +> テンプレートや出発点を探していますか。instruction file、custom agent、そのほかのリソースが集まったリポジトリ [awesome-copilot][awesome-copilot] を確認してください。 + +[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md +[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md +[awesome-copilot]: https://github.com/github/awesome-copilot +[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support +## このプロジェクトの custom instruction file を確認する + +このリポジトリに含まれている instruction file をひととおり読んでみましょう。中核となる `copilot-instructions.md` が 1 つあり、さまざまなタスク向けの `*.instructions.md` ファイル群があります。エディターまたは GitHub の Web UI で開いて確認します。 + +1. `.github/copilot-instructions.md` を開きます。 +2. ファイルを確認し、プロジェクトの簡潔な説明に加えて、**Agent notes**、**Code standards**、**Scripts**、**Repository Structure** などのセクションに注目します。**Code standards** の中にある **GitHub Actions Workflows** に関するガイダンスにも注目してください。これらは Copilot とのあらゆるやり取りに適用されます。 +3. `.github/instructions` フォルダーを開いて中を見てみます。Astro ファイル、Drizzle データ レイヤー、test などに関する instruction があることを確認してください。 +4. `.github/instructions/unit-tests.instructions.md` を開きます。先頭にある `applyTo` フィールドに注目してください。ここには、どのファイルに instruction を適用するかを決める glob パターン(repo root からの相対パス)が設定されています。この例では、任意の TypeScript test ファイル(たとえば `**/*.test.ts` に一致するもの)が対象になります。 +5. このプロジェクトの unit test 作成に特化した instruction を確認します。 +6. 最後に `.github/instructions/drizzle.instructions.md` を開き、一番下までスクロールします。ほかの instruction file(`unit-tests.instructions.md` など)や、プロジェクト内の既存ファイルへのリンクがあることに注目してください。これにより、大きな instruction セットを小さく再利用しやすい単位に分割し、コード生成時に Copilot が従うべき例を示せます。(そこに書かれているパスは repo root ではなく instruction file からの相対パスです。) + +> [!NOTE] +> `copilot-instructions.md` の **Code formatting requirements** セクションには、このプロジェクトのコーディング標準が記載されていますが、コード内ドキュメントはまだ必須ではありません。次の手順で、TSDoc の doc comment とファイル コメント ヘッダーのルールを追加します。 +## ブランチを作成する + +コード変更を行うため、作業用ブランチを作成します。 + +1. codespace のターミナルで、新しいブランチを作成して切り替えます。 + + ```bash + git checkout -b update-custom-instructions + ``` + +2. Copilot CLI がインストール済みで、認証されていることを確認します。 + + ```bash + copilot --version + ``` + + コマンドが見つからない場合や、まだログインしていない場合は、[演習 1 - GitHub Copilot CLI のインストール](../1-install-copilot-cli/) に戻ってください。 + +## instruction を更新する*前に* Copilot CLI を使う + +custom instruction の効果を見るため、まずは現在の instruction を使ってコードを生成します。その後でファイルを更新し、フォローアップのプロンプトを実行します。 + +> [!TIP] +> **Copilot CLI セッションを開始する** +> +> 以下の演習を始める前に、codespace に戻ってターミナルを開きます(まだ開いていない場合は Ctrl+\`)。次に、`--yolo` と `--enable-all-github-mcp-tools` を付けて Copilot CLI を起動します。 +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 新しく開始する代わりに、このプロジェクトの直近のセッションを引き継ぐには `copilot --yolo --enable-all-github-mcp-tools --continue` を実行します。前の演習から Copilot CLI がすでに実行中であれば、`/clear` を送ってクリーンな会話を開始してください。 +> +> `--enable-all-github-mcp-tools` を付けると、現在のセッションで GitHub MCP の読み取り / 書き込みツールが有効になります。これにより、ワークショップの流れの中で Copilot がバックログを読み取り、pull request を開けるようになります。 + +> [!CAUTION] +> `--yolo` は完全な自動権限(`--allow-all-tools`、`--allow-all-paths`、`--allow-all-urls`)を有効にします。Codespace や VM のような分離された環境でのみ使用し、日常的な開発の既定値として alias しないでください。詳しくは [Allowing and denying tool use][allow-all-warning] を参照してください。 + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools +1. `.github/copilot-instructions.md` を自動的に読み取れるよう、Copilot CLI セッションが**repository root** から実行されていることを確認します。 +2. Copilot CLI のプロンプトで、フィルタリング UI が利用する publishers helper を生成するよう依頼します。 + + ```plaintext + Create a new data-access helper at src/lib/publishers.ts to return a list of all publishers. It should return the name and id for all publishers. Do not run the tests yet. + ``` + +3. Copilot CLI はプロジェクトを探索し、計画を提案し、この `--yolo` セッションでファイルを書き込みます。ターミナル出力の変化を確認し、その後エディターでレビューします。 +4. 生成された `src/lib/publishers.ts` をエディターで開きます。 +5. helper が型付き関数として生成され、第一引数に `db` client を受け取り、publishers の型付き配列を返していることを確認してください。これは `.github/instructions/drizzle.instructions.md` にあるデータ レイヤーの規約(`src/lib/*.ts` に適用される)によるものです。 +6. 生成されたコードに、TSDoc の doc comment とファイル レベルのコメント ヘッダーが**含まれていない**ことを確認します。 + +> [!CAUTION] +> Copilot は確率的に動作するため、指示しなくても doc comment を追加する可能性があります。その場合でも問題ありません。instruction 更新後に一貫性が向上することが、この演習での重要なポイントです。 + +## 新しいリポジトリ標準を追加する + +先ほど説明したように、`.github/copilot-instructions.md` は Copilot にプロジェクト レベルの情報を提供するためのファイルです。リポジトリのコーディング標準を文書化し、コード提案の質を高めましょう。 + +1. `.github/copilot-instructions.md` をもう一度開きます。 +2. **Code formatting requirements** セクションを探します。27 行目付近にあるはずです。ここにプロジェクトのコーディング標準が記載されている一方で、コード内ドキュメントに関するルールがまだないことに注目してください。そのため、生成された helper には doc comment がありませんでした。 +3. 既存の標準のすぐ下に、次の markdown 行を追加して、ファイル コメント ヘッダーと TSDoc の doc comment を追加するよう Copilot に指示します。 + + ```markdown + - Every exported function should have a TSDoc comment describing its purpose, parameters, and return value. + - Before imports or any code, add a comment block to the file that explains its purpose. + ``` + +4. `copilot-instructions.md` を保存します。 + +> [!TIP] +> 前のレッスンで見たとおり、instruction file はグローバル ガイダンス向けのリポジトリ レベル(`.github/copilot-instructions.md`)にも、特定の言語、ファイル種別、タスク向けの `*.instructions.md` としても作成できます。いま追加した doc comment ルールのような、プロジェクト全体に適用する標準を置く場所としては、リポジトリ レベルのファイルが適切です。 +## プロンプトを再実行して変化を確認する + +instruction に doc comment ルールを追加したので、先ほど生成した publishers ファイルを更新するよう Copilot CLI に依頼します。同じ標準ディレクティブが、書き換えの方向性を導きます。 + +1. Copilot CLI セッションで `/clear` を送信し、新しい会話を始めます。 +2. 次のプロンプトを送信します。 + + ```plaintext + Update src/lib/publishers.ts to follow the latest documentation conventions in .github/copilot-instructions.md. + ``` + +3. 編集が完了したら、`src/lib/publishers.ts` をもう一度開きます。 +4. ファイルの先頭に、次のようなコメント ブロックが追加されていることを確認します。 + + ```typescript + /** + * Publisher data-access helpers for the Tailspin Toys Crowd Funding platform. + * Provides functions to retrieve publisher information from the database. + */ + ``` + +5. 生成された関数に、次のような TSDoc の doc comment が含まれていることを確認します。 + + ```typescript + /** + * Returns a list of all publishers with their id and name. + * + * @param db - The Drizzle database client. + * @returns A promise that resolves to an array of publisher objects. + */ + ``` + +6. この更新済みファイルはそのまま残してください。次の演習で、この最初のデータ スライスを土台として使います。 + +## フィルタリングの最初のスライスを commit して push する + +1. ターミナルで、変更されたファイルを確認します。 + + ```bash + git status + ``` + +2. instruction の更新と helper を stage します。 + + ```bash + git add .github/copilot-instructions.md src/lib/publishers.ts + ``` + +3. 変更を commit します。 + + ```bash + git commit -m "Add doc comment standards and publishers helper foundation" + ``` + +4. ブランチを push します。 + + ```bash + git push -u origin update-custom-instructions + ``` + +## まとめと次のステップ + +このプロジェクトの instruction file から Copilot がどのようにコンテキストを取得するかを確認し、そのうえで Copilot CLI を使って次のことを行いました。 + +- *既存の* instruction を使って、フィルタリング用の publishers data-access helper の土台を生成する。 +- `.github/copilot-instructions.md` に、リポジトリ全体の新しい標準を追加する。 +- フォローアップのプロンプトを実行し、再生成されたコードが新しい標準を取り入れる様子を確認する。 +- instruction の更新と helper の土台の両方を commit して push する。 + +次は、[コード生成の演習][next-lesson] で、これらの instruction を適用しながらバックログの作業を実装します。 + +## リソース + +- [GitHub Copilot のカスタマイズ用 instruction file][instruction-files] +- [custom instruction 作成のベスト プラクティス][instructions-best-practices] +- [Copilot 向けの custom instruction をより良く書くための 5 つのヒント][copilot-instructions-five-tips] +- [Awesome Copilot — instruction file などのリソース集][awesome-copilot] + +[previous-lesson]: ../1-install-copilot-cli/ +[next-lesson]: ../3-generating-code/ +[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses +[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository +[copilot-instructions-five-tips]: https://github.blog/ai-and-ml/github-copilot/5-tips-for-writing-better-custom-instructions-for-copilot/ diff --git a/docs/ja-jp/cli/3-generating-code.md b/docs/ja-jp/cli/3-generating-code.md new file mode 100644 index 0000000..061fa32 --- /dev/null +++ b/docs/ja-jp/cli/3-generating-code.md @@ -0,0 +1,98 @@ +--- +title: "演習 3 - GitHub Copilot CLI でプロジェクト機能を追加する" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +想像のとおり、GitHub Copilot CLI で実行する中心的な作業は、プロジェクトに機能やコードを追加することです。バックログの issue を 1 つ取り上げ、実装を Copilot に手伝ってもらいましょう。 + +## シナリオ + +プロジェクトのフィルタリング機能を完成させるタイミングになりました。バックログにはフィルタリングに関する issue がすでにあり、前の演習でその土台となる helper も追加しています。Copilot に issue の詳細を取得してもらい、既存の作業を考慮しながら、残りの機能を実装してもらいます。 + +この演習では、次のことを行います。 + +- プラン モードを使って、フィルタリング機能を実装する計画を生成する。 +- Copilot を使って、Web サイトにフィルタリングを追加するためのコードを生成する。 + +この演習を終えるころには、プロジェクトに新しい機能が追加されています。 + +## プラン モードを活用する + +AI の優れた使い方の 1 つが計画づくりです。何を作りたいかの大まかなイメージはあっても、アイデアを整理したり、抜けや落とし穴を洗い出したりしたい場面はよくあります。AI ツールは、追跡質問を投げかけたり、異なる問題点や不足している要素を一緒に検討したりすることで、考えを明確にする助けになります。このプロセスを支えるために、Copilot CLI にはプラン モードが用意されています。さらに、計画にかけた時間は、設定された要件により適したコードを Copilot が生成する助けにもなります。 + +まずは、Copilot CLI のプラン モードを活用して新機能の作成プロセスを始めます。 + +> [!TIP] +> **Copilot CLI セッションを開始する** +> +> 以下の演習を始める前に、codespace に戻ってターミナルを開きます(まだ開いていない場合は Ctrl+\`)。次に、`--yolo` と `--enable-all-github-mcp-tools` を付けて Copilot CLI を起動します。 +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 新しく開始する代わりに、このプロジェクトの直近のセッションを引き継ぐには `copilot --yolo --enable-all-github-mcp-tools --continue` を実行します。前の演習から Copilot CLI がすでに実行中であれば、`/clear` を送ってクリーンな会話を開始してください。 +> +> `--enable-all-github-mcp-tools` を付けると、現在のセッションで GitHub MCP の読み取り / 書き込みツールが有効になります。これにより、ワークショップの流れの中で Copilot がバックログを読み取り、pull request を開けるようになります。 + +> [!CAUTION] +> `--yolo` は完全な自動権限(`--allow-all-tools`、`--allow-all-paths`、`--allow-all-urls`)を有効にします。Codespace や VM のような分離された環境でのみ使用し、日常的な開発の既定値として alias しないでください。詳しくは [Allowing and denying tool use][allow-all-warning] を参照してください。 + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools +1. 次のプロンプトを Copilot CLI に入力し、フィルタリング issue に基づく計画を作成します。 + + ``` + /plan Retrieve the issue on the repository related to adding filtering. We already added a publishers helper in src/lib/publishers.ts, so treat that as existing work and plan the remaining updates (games filtering logic, UI, and tests). + ``` + +2. 計画を作成する過程で、Copilot から追跡質問が表示されることがあります。表示された場合は、自分ならどのように機能を実装するかに基づいて答えてください。 +3. 計画が生成されたら、その設計図をレビューします。データ レイヤーや UI の残りの変更に加え、test の生成も推奨されていることに気づくはずです。 +4. Copilot CLI は、計画に対して追加のフィードバックを提供する機会を提示します。カーソルを案内された位置まで下げ、提案を入力すると、Copilot がそれを取り込んだ新しいバージョンの計画を作成します。 +5. 内容に満足したら、Copilot が提示する選択肢を選び、新機能の実装作業を開始します。 + +> [!NOTE] +> Copilot は確率的に動作するため、表示されるテキストや選択肢は完全には一致しません。ただし、実装の開始に進む選択肢が表示され、その文言は次のようなものになります。 +> +> `Yes, and switch to autopilot mode`. +> +> 上の例のように、Copilot から [autopilot mode](https://docs.github.com/copilot/concepts/agents/copilot-cli/autopilot) を有効にする選択肢が提示される場合があります。autopilot mode を使うと、各ステップのたびに入力を待たずに、Copilot CLI がタスクを進められます。最初の指示を与えると、タスクが完了したと判断するまで Copilot CLI が各ステップを自律的に実行します。このワークショップでは隔離された環境で動作しているため、autopilot を有効にし、すべてのツールを許可しても問題ありません。 + +6. Copilot がファイルの生成作業を開始します。 + +> [!NOTE] +> この操作には数分かかることがあります。Copilot がファイルを編集 / 作成し、test を更新 / 生成し、すべて成功することを確認するために test を実行する様子が表示されます。ここまでに確認した内容を振り返ったり、飲み物を楽しんだりするのにちょうどよい時間です。 + +## コードをレビューする + +AI が生成したコードは、本番環境にマージする前に必ずレビューする必要があります。ここで少し時間を取り、Copilot が新機能の実装で作成 / 変更したファイルを確認しましょう。 + +1. Copilot CLI で次のコマンドを使い、「diff」またはコード変更を表示します。 + + ``` + /diff + ``` + +2. 変更されたファイルを確認します。左右の矢印キーで別のファイルに切り替えられます。新しい filter control とクライアント側フィルタリングが実装された games 一覧ページや `src/lib/games.ts`、さらに `games.test.ts` などの test が更新されているはずです。Copilot が既存の helper を完全な実装に合わせて調整した場合は、`publishers.ts` に変更が加わることもあります。 + +## まとめと次のステップ + +Copilot CLI の助けを借りて、Web サイトにフィルタリング機能を追加できました。具体的には次のことを行いました。 + +- プラン モードを使って、フィルタリング機能を実装する計画を生成する。 +- Copilot を使って、Web サイトにフィルタリングを追加するためのコードを生成する。 + +もちろん、次にやるべきことは、それが正しく動作することを確認することです。pull request を開く前に、[Playwright MCP サーバーで機能をテスト][next-lesson] しましょう。 + +## リソース + +- [Copilot CLI を使う][using-copilot-cli] +- [Copilot CLI について][about-copilot-cli] +- [Copilot CLI のコンテキスト管理][context-management] + +[previous-lesson]: ../2-custom-instructions/ +[next-lesson]: ../4-mcp/ +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[context-management]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#context-management diff --git a/docs/ja-jp/cli/4-mcp.md b/docs/ja-jp/cli/4-mcp.md new file mode 100644 index 0000000..9b3541f --- /dev/null +++ b/docs/ja-jp/cli/4-mcp.md @@ -0,0 +1,158 @@ +--- +title: "演習 4 - Playwright MCP サーバーで機能をテストする" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +Copilot CLI でフィルタリング機能を生成したので、pull request を開く前に、ブラウザーで正しく動作することを確認する必要があります。自分でアプリを操作して確認する代わりに、**Playwright MCP server** を接続し、Copilot に実際のブラウザーを操作させて機能をテストしてもらいます。 + +この演習では、次のことを行います。 + +- Model Context Protocol(MCP)とは何か、そして MCP server がどのように Copilot CLI を拡張するかを理解する。 +- Playwright MCP server を Copilot CLI に追加する。 +- ブラウザーでフィルタリング機能を手動テストするよう Copilot に依頼する。 + +## Model Context Protocol (MCP) とは + +[Model Context Protocol (MCP)](https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/) は、AI agent が外部ツールやサービスと通信するための方法を提供します。MCP を使用すると、AI agent は外部ツールやサービスとリアルタイムでやり取りできます。これにより、最新情報にアクセスし(resources を利用)、代わりに操作を実行できます(tools を利用)。 + +これらの tool や resource には、MCP server を通じてアクセスします。MCP server は AI agent と外部ツールやサービスの間をつなぐブリッジとして機能します。MCP server は、AI agent と外部ツール(既存の API や NPM package のようなローカル ツールなど)の通信を管理します。各 MCP server は、AI agent がアクセスできる別々の tool と resource のセットを表します。 + +すでに広く使われている MCP server として、次のようなものがあります。 + +- **[GitHub MCP Server](https://github.com/github/github-mcp-server)**: GitHub リポジトリを管理するための API セットにアクセスできます。新しいリポジトリの作成、既存リポジトリの更新、issue や pull request の管理などを AI agent が実行できます。 +- **[Playwright MCP Server](https://github.com/microsoft/playwright-mcp)**: Playwright を使ったブラウザー自動化機能を提供します。Web ページへの移動、フォーム入力、ボタン選択などを AI agent が実行できます。 + +ほかにも、さまざまな tool や resource へのアクセスを提供する MCP server が多数あります。GitHub は、エコシステムの発見性とコントリビューションを高めるために [MCP registry](https://github.com/mcp) を公開しています。 + +> [!CAUTION] +> セキュリティの観点では、MCP server はプロジェクト内のほかの依存関係と同じように扱ってください。MCP server を使用する前に、ソース コードを慎重に確認し、公開元を検証し、セキュリティ上の影響を検討してください。信頼できる MCP server のみを使用し、機密性の高い resource や操作へのアクセスを与える際は慎重に判断してください。 + +> [!NOTE] +> [GitHub MCP server][github-mcp-server] は Copilot CLI に**組み込まれています**。そのため、追加設定なしで利用でき、ワークショップ全体を通して Copilot がリポジトリを読み書きできていたのはこの server によるものです。この演習では、Copilot にブラウザーを与えるために 2 つ目の server として Playwright を追加します。 + +## Playwright MCP server を追加する + +server を追加する最も手早い方法は、対話式の `/mcp add` コマンドです。ここでは、Copilot が制御できるブラウザーを提供する [Playwright MCP server][playwright-mcp-server] を登録します。 + +> [!TIP] +> **Copilot CLI セッションを開始する** +> +> 以下の演習を始める前に、codespace に戻ってターミナルを開きます(まだ開いていない場合は Ctrl+\`)。次に、`--yolo` と `--enable-all-github-mcp-tools` を付けて Copilot CLI を起動します。 +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 新しく開始する代わりに、このプロジェクトの直近のセッションを引き継ぐには `copilot --yolo --enable-all-github-mcp-tools --continue` を実行します。前の演習から Copilot CLI がすでに実行中であれば、`/clear` を送ってクリーンな会話を開始してください。 +> +> `--enable-all-github-mcp-tools` を付けると、現在のセッションで GitHub MCP の読み取り / 書き込みツールが有効になります。これにより、ワークショップの流れの中で Copilot がバックログを読み取り、pull request を開けるようになります。 + +> [!CAUTION] +> `--yolo` は完全な自動権限(`--allow-all-tools`、`--allow-all-paths`、`--allow-all-urls`)を有効にします。Codespace や VM のような分離された環境でのみ使用し、日常的な開発の既定値として alias しないでください。詳しくは [Allowing and denying tool use][allow-all-warning] を参照してください。 + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools +1. Copilot CLI セッションで、次を入力します。 + + ```text + /mcp add + ``` + +2. 設定フォームが表示されます。Tab でフィールド間を移動し、次のように入力します。 + + - **Server Name**: `playwright` + - **Server Type**: **Local**(**STDIO** とも表示されます)を選択する + - **Command**: `npx @playwright/mcp@latest --headless` + - **Tools**: server のすべての tool を許可するため、`*` のままにする + +3. Ctrl+S を押して保存します。server は追加され、再起動なしですぐに利用できます。 + +`--headless` フラグを付けると、Playwright は表示ウィンドウなしでブラウザーを実行します。デスクトップ表示のない codespace 内ではこれが必要です。内部的には、server が `~/.copilot/mcp-config.json` に書き込まれます。 + +```json +{ + "mcpServers": { + "playwright": { + "type": "local", + "command": "npx", + "args": ["@playwright/mcp@latest", "--headless"], + "tools": ["*"] + } + } +} +``` + +4. MCP server の一覧を表示して、server が登録済みでアクティブであることを確認します。 + + ```text + /mcp show + ``` + +5. 組み込みの `github` server と並んで `playwright` が表示されるはずです。 + +> [!NOTE] +> Tailspin Toys プロジェクトでは、エンドツーエンド test にすでに Playwright を使用しています。そのため、Playwright が必要とするブラウザーは通常すでにインストールされています。後で Copilot からブラウザーが見つからないと報告された場合は、`npx playwright install chromium` を実行してから再試行してください。 + +## Web サイトを起動する + +Playwright MCP server がテストを実行するには、対象となるアプリが起動している必要があります。Copilot CLI で作業している間も実行し続けられるよう、**別の**ターミナルで Astro の dev server を起動します。 + +1. Ctrl+\` を選択して、codespace で新しいターミナルを開きます。 +2. Web サイトを起動します。 + + ```bash + npm run dev + ``` + +3. このターミナルはそのまま動かしておきます。`Astro server: http://localhost:4321` の表示が出たら、アプリの準備は完了です。 + +## フィルタリング機能をテストする + +Copilot CLI セッションに戻り、Copilot に機能をテストするよう依頼します。 + +[Playwright MCP server][playwright-mcp-server] は、Copilot に実際のブラウザーを操作させます。自分でアプリを操作して確認する代わりに、agent がページを開き、移動し、filter を適用し、その結果を読み取って要約できます。会話を離れずに、機能が期待どおりに動作することを確認する最も速い方法です。 + +内部的には、Playwright MCP server はスクリーンショットではなく、ページの [accessibility tree][playwright-mcp-server] を基に動作します。つまり、agent はボタン、リンク、リスト項目などの構造化されラベル付けされた要素を、支援技術と同じように扱います。そのため、簡単な機能確認が、軽いアクセシビリティの健全性チェックも兼ねることになります。 + +server を接続し、アプリを起動したら、次のように Copilot に依頼して、先ほど実装したフィルタリング機能を試してもらいます。 + +```text +Using the Playwright MCP server, open a browser to the running app at http://localhost:4321 and verify the new game filtering feature: + +1. Go to the games page and note how many games are listed. +2. Apply a category filter and confirm the list updates to only show games in that category. +3. Clear it, then apply a publisher filter and confirm the list updates to that publisher. +4. Combine a category and a publisher filter and confirm the results respect both. + +Report what you observe at each step, and call out anything that does not behave as expected. +``` + +Copilot は Playwright MCP server 経由でブラウザーを起動し、各ステップを実行して、確認結果を報告します。その要約を issue の受け入れ条件と照らし合わせて読み、違和感があれば、追跡質問をしたり、pull request を開く前にコード修正を依頼したりしてください。 + +> [!NOTE] +> このテストでは、アプリが `http://localhost:4321` で動作している必要があります。dev server を停止していた場合は、プロンプトを送る前に再起動してください。Copilot が初めて Playwright MCP server を使う際には、ブラウザーのダウンロードが必要になることがあります。ブラウザーが見つからないと報告された場合は、`npx playwright install chromium` を実行して再試行してください。 + +[playwright-mcp-server]: https://github.com/microsoft/playwright-mcp +## まとめと次のステップ + +おめでとうございます。Playwright MCP server を使って、Copilot CLI で機能を手動テストできました。要点を振り返ると、次のことを行いました。 + +- Model Context Protocol(MCP)とは何か、そして MCP server がどのように Copilot CLI を拡張するかを学ぶ。 +- `/mcp add` で Playwright MCP server を追加する。 +- Copilot にブラウザー操作を任せ、出荷前にフィルタリング機能を検証する。 + +機能が正しく動作することを確認できたので、次の演習に進み、[agent skill の助けを借りて pull request を開く][next-lesson] ことができます。 + +## リソース + +- [MCP とは何か、なぜいま注目されているのか][mcp-blog-post] +- [Microsoft Playwright MCP Server][playwright-mcp-server] +- [Copilot CLI に MCP server を追加する][cli-add-mcp] +- [GitHub MCP Server][github-mcp-server] + +[previous-lesson]: ../3-generating-code/ +[next-lesson]: ../5-agent-skills/ +[mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/ +[github-mcp-server]: https://github.com/github/github-mcp-server +[cli-add-mcp]: https://docs.github.com/copilot/how-tos/copilot-cli/customize-copilot/add-mcp-servers diff --git a/docs/ja-jp/cli/5-agent-skills.md b/docs/ja-jp/cli/5-agent-skills.md new file mode 100644 index 0000000..f181fcd --- /dev/null +++ b/docs/ja-jp/cli/5-agent-skills.md @@ -0,0 +1,121 @@ +--- +title: "演習 5 - エージェント スキルを使う" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +アプリ開発では、build の生成、test の実行、pull request の作成といった繰り返し可能なタスクがよく発生します。**Agent skill** を使うと、Copilot やほかの AI agent に対して、それらのタスクをどのように実行すべきかを示すガイダンスを与えられます。skill は、agent が必要に応じて読み込める instruction、script、resource のフォルダーです。[Agent Skills は open standard][agent-skills-repo] であり、さまざまな agent が利用しています。そのため、同じ skill を Copilot Chat の agent mode、Copilot cloud agent、Copilot CLI、GitHub Copilot app の間で共有できます。 + +skill はプロジェクトの `.github/skills` フォルダー、またはグローバルな `~/.copilot/skills` に配置します。各 skill はフォルダー単位で、YAML frontmatter(`name` と `description`)を持つ `SKILL.md` ファイルと、その後に続く markdown の instruction で構成されます。 + +```yaml +--- +name: make-contribution +description: All changes to code must follow the guidance documented in the repository. Before any issue is filed, branch is made, commits generated, or pull request (or PR) created, a search must be done to ensure the right steps are followed. Whenever asked to create an issue, commit messages, to push code, or create a PR, use this skill so everything is done correctly. +--- +``` + +skill には、script、asset、参照資料を含むサブフォルダーを追加することもできます。全体の構造は [agent skills specification][agent-skills-spec] で説明されています。 + +> [!TIP] +> skill は動的に読み込まれます。どの skill が適用されるかは、agent が `description` フィールドを基に判断します。明確でシナリオに即した説明にすることが、使われる skill と無視される skill を分けます。 + +[agent-skills-repo]: https://github.com/agentskills/agentskills +[agent-skills-spec]: https://agentskills.io/specification +team の pull request が、定められた仕様に確実に従うよう skill を使う方法を見ていきましょう。 + +## シナリオ + +チームでは pull request(PR)に対して、次の要件を定めています。 + +- 明確な commit message にし、ファイルは論理的にグループ化する。 +- PR を作成する前に、すべての test が通過している必要がある。 +- 各 PR には次のセクションを含める必要がある。 + - 変更を行った理由の説明。 + - 変更したファイルの概要。 + - 重要なコード ブロックの抜粋。 + - 行った変更の詳細をまとめた説明。 + +チームでは、Copilot を使ってコードや PR を生成しているため、AI ツールがこれらの要件に従うことを確実にしたいと考えています。 + +この演習では、次のことを行います。 + +- pull request 作成用に既存の skill を確認する。 +- AI agent がどのように skill を利用するかを学ぶ。 +- skill の助けを借りて、ガイドラインに沿った PR を作成する。 + +## skill を実行する + +skill は、agent が必要だと判断したときに動的に読み込まれます。どの skill を使うかの判断は、`SKILL.md` ファイル内の description によって決まります。そのため、skill の用途を明確に定義した説明を書くことが重要です。 + +## PR skill を確認する + +Tailspin Toys には PR 作成に関する要件があるため、AI ツールがこれらのガイドラインに従った PR を生成できるように skill が用意されています。どのような動作をするか理解するために、その skill を確認しましょう。 + +1. `.github/skills/make-contribution/SKILL.md` を開きます。 +2. name と description を確認します。description では、pull request の作成や commit の作成を求められたときに使うべき scenario が示されていることに注目してください。 +3. skill 全体を読みます。branch の作成方法、commit の作り方、pull request の内容に関するルールが定義されていることを確認します。 + +## skill を使う + +先ほど触れたとおり、skill は Copilot CLI によって自動的に呼び出されます。そのため、必要なのは Copilot に PR を作成するよう依頼することだけです。 + +> [!TIP] +> **Copilot CLI セッションを開始する** +> +> 以下の演習を始める前に、codespace に戻ってターミナルを開きます(まだ開いていない場合は Ctrl+\`)。次に、`--yolo` と `--enable-all-github-mcp-tools` を付けて Copilot CLI を起動します。 +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 新しく開始する代わりに、このプロジェクトの直近のセッションを引き継ぐには `copilot --yolo --enable-all-github-mcp-tools --continue` を実行します。前の演習から Copilot CLI がすでに実行中であれば、`/clear` を送ってクリーンな会話を開始してください。 +> +> `--enable-all-github-mcp-tools` を付けると、現在のセッションで GitHub MCP の読み取り / 書き込みツールが有効になります。これにより、ワークショップの流れの中で Copilot がバックログを読み取り、pull request を開けるようになります。 + +> [!CAUTION] +> `--yolo` は完全な自動権限(`--allow-all-tools`、`--allow-all-paths`、`--allow-all-urls`)を有効にします。Codespace や VM のような分離された環境でのみ使用し、日常的な開発の既定値として alias しないでください。詳しくは [Allowing and denying tool use][allow-all-warning] を参照してください。 + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools +1. 次のプロンプトを使って、Copilot に PR を作成するよう依頼します。 + + ``` + Can you please create a pull request for me! + ``` + +2. Copilot がリクエストを受け付けます。しばらくすると、Copilot が **make-contribution** skill を利用していることが表示されます。 + + ![Copilot CLI が agent skill を呼び出しているスクリーンショット](../../_images/cli-5-agent-skill.png) + +3. その後、Copilot は skill の instruction に従います。まず test を実行し、その後 branch、commit、最終的には PR を作成します。 +4. PR が作成されたら、リポジトリに戻って PR を開きます。セクションが skill で定められたガイドラインに従い、チームの要件に一致していることを確認してください。 +5. 次の演習に進む前に、このフィルタリング PR とアクセシビリティ作業を分けておけるよう、ローカル workspace を `main` から新しい branch にリセットします。 + + ```bash + git checkout main + git pull + git checkout -b accessibility-cli + ``` + +## まとめと次のステップ + +agent skill の助けを借りて、文書化された要件に沿う新しい PR を作成できました。次のことを行いました。 + +- pull request 作成用に既存の skill を確認する。 +- AI agent がどのように skill を利用するかを学ぶ。 +- skill の助けを借りて、ガイドラインに沿った PR を作成する。 + +skill はタスク向けに最適ですが、より高度な作業には [カスタム エージェント][next-lesson] を活用したくなります。次はそれを確認しましょう。 + +## リソース + +- [Agent Skills について][about-agent-skills] +- [Agent Skills 仕様][agent-skills-spec] +- [Agent Skills リポジトリ][agent-skills-repo] +- [awesome-copilot の Agent Skills][awesome-copilot-skills] + +[previous-lesson]: ../4-mcp/ +[next-lesson]: ../6-custom-agents/ +[about-agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills +[awesome-copilot-skills]: https://github.com/github/awesome-copilot/tree/main/skills diff --git a/docs/ja-jp/cli/6-custom-agents.md b/docs/ja-jp/cli/6-custom-agents.md new file mode 100644 index 0000000..0398cbe --- /dev/null +++ b/docs/ja-jp/cli/6-custom-agents.md @@ -0,0 +1,112 @@ +--- +title: "演習 6 - GitHub Copilot CLI のカスタム エージェント" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +## custom agent とは + +GitHub Copilot の [カスタム エージェント][custom-agents-concept] を使うと、開発ワークフロー内の特定のタスクや領域に合わせた専門的な AI アシスタントを作成できます。リポジトリの `.github/agents` フォルダー内にある markdown ファイルで agent を定義することで、focused instruction、best practice、コーディング パターン、ドメイン固有の知識を Copilot に与え、特定の種類の作業をより効果的に進められるようにできます。チームは自分たちの専門知識を再利用可能な agent として定義できます。たとえば、[WCAG][wcag] への準拠を徹底するアクセシビリティ agent、secure coding practice に従うセキュリティ agent、一定の test pattern を保つ testing agent などです。 + +custom agent は、プロジェクトの `.github/agents` フォルダー、またはグローバルな `~/.copilot/agents` にある markdown ファイルで定義します。各ファイルには、少なくとも `name` と `description` を含む YAML frontmatter があり、その後に agent の振る舞い、専門性、instruction を定義する markdown プロンプトが続きます。 + +### custom agent と agent skill の比較 + +custom agent と [agent skill][agent-skills-concept] には、概念的に重なる部分があります。どちらも主に markdown ファイルで定義され、AI にどのように作業すべきかを伝えます。最も分かりやすい区別は、**custom agent** は作業者で、**skill** はツールだということです。 + +custom agent には独自の context window があり、作業を進める中で skill(さらにはほかの agent)をオーケストレーションすることを前提に設計されています。このラボでは、アクセシビリティ custom agent がガイドラインに照らしてサイトをレビューし、更新します。その過程で、pull request ワークフロー用の skill や、test の実行と管理を行う skill などを呼び出すことがあります。 + +> [!NOTE] +> custom agent の書き方に、唯一の「正しい」方法はありません。AI 全般に言えることですが、自分の環境やシナリオに合う形を見つけるために、テストと反復を行ってください。 + +[custom-agents-concept]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-custom-agents +[agent-skills-concept]: https://docs.github.com/copilot/concepts/agents/about-agent-skills +[wcag]: https://www.w3.org/WAI/standards-guidelines/wcag/ +## シナリオ + +多くの Web アプリケーションは、すべてのユーザーにとって十分にアクセシブルとは言えず、現在作業している Web サイトも例外ではありません。アクセシビリティ上の不足を特定して解消するために、custom agent を使用します。 + +Tailspin Toys は、自社のクラウドファンディング プラットフォームを、視覚能力や好みにかかわらずすべてのユーザーが利用しやすいものにしたいと考えています。最近のユーザー フィードバックでは、現在の dark theme はテキストと背景色のコントラストが不十分で読みにくいという指摘がありました。このアクセシビリティ上の懸念に対応するため、デザイン チームは、ユーザーがオン / オフを切り替えられる high-contrast mode の実装を求めています。 + +アクセシビリティは重要であるため、できるだけ早く実装したいと考えています。そこで、機能生成のために custom agent を活用します。 +この演習では、次のことを行います。 + +- custom agent を確認する。 +- custom agent を有効にし、Copilot CLI を使ってタスクを割り当てる。 + +## アクセシビリティ custom agent を確認する + +アクセシビリティ用の custom agent は、すでに用意されています。Copilot をどのように導くのか理解するために、その内容を確認しましょう。 + +1. `.github/agents/accessibility.md` を開きます。 +2. `name` フィールドと `description` フィールドを持つ YAML frontmatter を確認します。 + +> [!CAUTION] +> `name` と `description` を含む frontmatter は、custom agent に必須です。 + +3. 続いて、次の内容が示されている各セクションを読みます。 + - アクセシブルな Web サイトのコードを生成するときの中核的な責務。 + - アクセシビリティのベスト プラクティス。 + - HTML、CSS、JavaScript のコード例。 + - よくある落とし穴やミスの一覧。 +## Copilot CLI で custom agent を使う + +Copilot CLI では、`/agent` コマンドを使って custom agent を開始できます。では、Web サイトに対してアクセシビリティの確認を実行しましょう。 + +> [!TIP] +> **Copilot CLI セッションを開始する** +> +> 以下の演習を始める前に、codespace に戻ってターミナルを開きます(まだ開いていない場合は Ctrl+\`)。次に、`--yolo` と `--enable-all-github-mcp-tools` を付けて Copilot CLI を起動します。 +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 新しく開始する代わりに、このプロジェクトの直近のセッションを引き継ぐには `copilot --yolo --enable-all-github-mcp-tools --continue` を実行します。前の演習から Copilot CLI がすでに実行中であれば、`/clear` を送ってクリーンな会話を開始してください。 +> +> `--enable-all-github-mcp-tools` を付けると、現在のセッションで GitHub MCP の読み取り / 書き込みツールが有効になります。これにより、ワークショップの流れの中で Copilot がバックログを読み取り、pull request を開けるようになります。 + +> [!CAUTION] +> `--yolo` は完全な自動権限(`--allow-all-tools`、`--allow-all-paths`、`--allow-all-urls`)を有効にします。Codespace や VM のような分離された環境でのみ使用し、日常的な開発の既定値として alias しないでください。詳しくは [Allowing and denying tool use][allow-all-warning] を参照してください。 + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools +1. Copilot CLI のプロンプト ウィンドウで `/agent` と入力し、Enter を押して agent の一覧を表示します。 +2. 利用可能な agent の一覧から **Accessibility agent** を選択します。 +3. 次のプロンプトを使い、アクセシビリティ agent に対してアクセシビリティ関連のバックログ項目をレビューし、修正を生成するよう依頼します。 + + ``` + Perform an accessibility review of the site. Pull the related issue down from the repository for details. Implement a high-contrast mode toggle that persists the user's preference across page reloads. Ensure there are e2e tests for any updates made to the project. Then create a PR with the updates. + ``` + +4. Copilot がタスクの実行を開始します。まず issue を取得し、その後レビュー、更新の生成、最後に PR の作成へと進みます。PR を作成するときに、このプロジェクトの PR 用 skill を利用していることにも気づくはずです。 + +> [!NOTE] +> この処理には数分かかることがあります。ここまでに学んだ内容を振り返ったり、飲み物を楽しんだり、Copilot CLI で利用できる追加コマンドを扱う次のモジュールを先に読んだりするのによい時間です。 + +## まとめと次のステップ + +このレッスンでは、GitHub Copilot の [カスタム エージェント][custom-agents] を確認しました。custom agent は、特定のタスクや領域に合わせた専門的な AI アシスタントです。custom agent を使うと、チームの専門知識や標準を再利用可能な agent に落とし込み、Copilot が特定の種類の作業をより効果的に行えるよう導けます。 + +このレッスンで確認した内容は次のとおりです。 + +- custom agent がどのように定義されるか。 +- Copilot CLI で custom agent を使う方法。 + +次は、[いくつかの slash command][next-lesson] を確認し、Copilot CLI の追加テクニックを学びましょう。 + +## リソース + +- [カスタム エージェント][custom-agents] +- [リポジトリ用カスタム エージェントの作成][creating-custom-agents] +- [awesome-copilot のカスタム エージェント][awesome-copilot-agents] +- [organization で custom agent を使う準備][org-custom-agents] +- [enterprise で custom agent を使う準備][enterprise-custom-agents] + +[previous-lesson]: ../5-agent-skills/ +[next-lesson]: ../7-slash-commands/ +[custom-agents]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#use-custom-agents +[creating-custom-agents]: https://docs.github.com/copilot/how-tos/use-copilot-agents/cloud-agent/create-custom-agents +[awesome-copilot-agents]: https://github.com/github/awesome-copilot/tree/main/agents +[org-custom-agents]: https://docs.github.com/copilot/how-tos/administer-copilot/manage-for-organization/prepare-for-custom-agents +[enterprise-custom-agents]: https://docs.github.com/copilot/how-tos/administer-copilot/manage-for-enterprise/manage-agents/prepare-for-custom-agents diff --git a/docs/ja-jp/cli/7-slash-commands.md b/docs/ja-jp/cli/7-slash-commands.md new file mode 100644 index 0000000..b884222 --- /dev/null +++ b/docs/ja-jp/cli/7-slash-commands.md @@ -0,0 +1,178 @@ +--- +title: "演習 7 - GitHub Copilot CLI のスラッシュ コマンド" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +優れた CLI ツールと同様に、GitHub Copilot CLI には多くの slash command が用意されています。これらのコマンドは、高度な機能、「内部で何が起きているか」に関する情報、追加の設定オプションを提供します。すでに `/clear` でコンテキストのクリアを、`/mcp` で MCP server の確認を行いました。ここでは、`/context`、`/model`、`/share`、`/delegate` など、ほかの強力なコマンドを確認します。 + +## シナリオ + +中核となる CLI フローは完了しました。ここからは追加機能として、セッションの共有、モデルの切り替え、[Copilot cloud agent][about-cloud-agent] へのタスク委任を見ていきます。 + +この演習では次を使用します。 + +- `/share` で GitHub gist を作成し、チームとセッションを共有する。 +- `/context` で、Copilot CLI が現在使用しているコンテキストを確認する。 +- `/model` で利用可能なモデルの一覧を確認し、必要に応じて別のモデルを選択する。 +- `/delegate` で、必要に応じてタスクを cloud agent に引き渡す。これには cloud agent が必要で、Copilot Student、Pro、Pro+、Business、Enterprise で利用できます。つまり Copilot Free を除くすべてのプランで利用可能です。 + +## セッションを共有する + +AI ツールを含め、どのツールでも使いこなすにはスキルが必要です。チームで協力し、学びを共有し合うことが、全員の体験を改善し、より質の高いコードを生み出す最善の方法です。そのために、Copilot CLI には `/share` コマンドがあります。`/share` コマンドは、使用した prompt や Copilot がたどったロジックを含むセッションの詳細を、markdown ファイルまたは GitHub gist として生成できます。 + +チームと共有できる GitHub gist を作成してみましょう。 + +> [!TIP] +> **Copilot CLI セッションを開始する** +> +> 以下の演習を始める前に、codespace に戻ってターミナルを開きます(まだ開いていない場合は Ctrl+\`)。次に、`--yolo` と `--enable-all-github-mcp-tools` を付けて Copilot CLI を起動します。 +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 新しく開始する代わりに、このプロジェクトの直近のセッションを引き継ぐには `copilot --yolo --enable-all-github-mcp-tools --continue` を実行します。前の演習から Copilot CLI がすでに実行中であれば、`/clear` を送ってクリーンな会話を開始してください。 +> +> `--enable-all-github-mcp-tools` を付けると、現在のセッションで GitHub MCP の読み取り / 書き込みツールが有効になります。これにより、ワークショップの流れの中で Copilot がバックログを読み取り、pull request を開けるようになります。 + +> [!CAUTION] +> `--yolo` は完全な自動権限(`--allow-all-tools`、`--allow-all-paths`、`--allow-all-urls`)を有効にします。Codespace や VM のような分離された環境でのみ使用し、日常的な開発の既定値として alias しないでください。詳しくは [Allowing and denying tool use][allow-all-warning] を参照してください。 + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools +1. Copilot CLI のプロンプト ウィンドウで、次のコマンドを送信します。 + + ``` + /share gist + ``` + +2. 少し待つと、Copilot が gist を作成し、リンクを表示します。 +3. リンクの文字列をコピーします。 +4. 新しいブラウザー タブでそのリンクを貼り付け、gist を確認します。送信した prompt、使用した skill と agent、Copilot の思考過程、さらにローカルで実行したコマンドのコードと結果まで記録されていることに注目してください。 + +`/share` が生成する gist と markdown ファイルは、コードがどのように生成されたかを文書化したり、望ましい結果を得るためにどのような操作を行ったかをチームと共有したりする用途に使えます。 + +## Copilot CLI のコンテキストを確認する + +より大きなタスクや複雑なタスクに取り組むと、モデルの最大 context window に近づくことがあります。window の正確なサイズは、使用しているモデルや Copilot CLI のバージョンによって異なります。context window が上限に達すると、Copilot CLI は自動的に compact を実行し、情報を要約して、現在のタスクに不要と判断した内容を取り除きます。slash command を使えば、現在のコンテキストの状態を確認することも、手動で compact することもできます。では、context window を見てみましょう。 + +1. Copilot CLI のプロンプト ウィンドウで、次のコマンドを送信します。 + + ``` + /context + ``` + +2. 少し待つと、Copilot CLI が現在のコンテキストを視覚的に表現した表示を生成します。 + + ![Copilot CLI の context window のスクリーンショット](../../_images/cli-7-context-window.png) + +3. 表示されているモデル名(画像と異なる場合があります)と、現在使用されている token の割合を確認します。その他の情報では、次の内容が示されています。 + + | Title | Description | + | ------------ | ------------------------------------------------------ | + | System/Tools | instruction file、ファイル内容、tool 定義 | + | Messages | 自分と Copilot の会話履歴 | + | Buffer | Copilot CLI が応答生成のために確保している予約領域 | + | Free space | 残りの空き領域 | + +4. 次の slash command を Copilot CLI に送信し、会話履歴を compact します。 + + ``` + /compact + ``` + +5. 完了したら、次のコマンドを送信して現在のコンテキスト統計をもう一度表示します。 + + ``` + /context + ``` + +6. コンテキストの変化を確認します。現時点では context window がまだ比較的小さいため、大きな変化は見られないかもしれません。 + +> [!NOTE] +> Copilot CLI は、コンテキストがいっぱいになると自動的に compact を実行します。容量が 100% に近づくと、その割合がプロンプト ウィンドウの上に表示されます。通常は非同期に compact を実行するため、処理中でも Copilot との対話を続けられます。ただし、処理中の操作が数秒間ブロックされる場合があります。 + +### コンテキストに関するベスト プラクティス + +ほとんどのセッションでは、Copilot 自身が効率的にコンテキストを管理するため、特別な指示は必要ありません。ただし、状況によっては履歴を手動でクリアまたは compact したいことがあります。 + +- アプリケーションの別の部分や、無関係なタスクに切り替える場合は、古い無関係なコンテキストで Copilot を混乱させないよう `/clear` を使って新しい会話を始められます。 +- 最大 context window に近づいている場合は、`/compact` を手動で実行して、そのタイミングを制御できます。 + +> [!CAUTION] +> 繰り返しになりますが、ほとんどの場合は Copilot が直接操作なしでコンテキストを管理します。古い情報のせいで少し混乱しているように見えるときや、これから無関係なタスクに切り替えるときに、手動コマンドの利用を検討してください。 + +## モデルを選択する + +モデルにはそれぞれ異なる強みがあり、開発者によって好みも異なります。Copilot CLI では、使用したいモデルの一覧表示と選択ができます。 + +1. 次の slash command を Copilot CLI に送信し、モデル一覧を表示します。 + + ``` + /model + ``` + +2. モデルの一覧を確認します。各モデルには、名前とリクエスト単位のコスト修正値が表示されます。 +3. 必要であれば新しいモデルを選択します。終了したい場合は Esc を押します。 + +> [!CAUTION] +> Copilot CLI では、モデル選択が保持されます。 + +## cloud agent に委任する(任意) + +ターミナルで作業を続けながら、時間のかかるタスクは Copilot cloud agent に任せたい場面があります。`/delegate` コマンドを使うと、現在の Copilot CLI セッションを GitHub.com に送信できます。cloud agent がそのセッションを引き継ぎ、非同期で作業し、完了すると pull request を開きます。 + +> [!NOTE] +> `/delegate` には cloud agent が必要です。これは Copilot Student、Pro、Pro+、Business、Enterprise で利用でき、Copilot Free では利用できません。アクセスできない場合は、このセクションを読んでからハンズオン手順はスキップしてください。 + +1. ワークショップ全体のコンテキストがまとめて委任されないよう、まず現在のセッションをクリアします。 + + ``` + /clear + ``` + +2. 小さく、スコープが明確な prompt を送信します。たとえば、バックログにある stretch goal のページネーションを委任できます。 + + ``` + Implement pagination on the game list page so it shows a fixed number of games per page with Previous and Next controls, and add tests. + ``` + +3. 次の slash command を送信して、セッションを cloud agent に引き渡します。続いて、委任したい prompt を確認します。 + + ``` + /delegate + ``` + +4. ブラウザーで [Copilot agents](https://github.com/copilot/agents) を開き、進捗を確認します。 +5. この harness では、pull request が完了するまで待つ必要はありません。後で戻って確認できます。非同期 agent 作業の管理をより深く知りたい場合は、[Cloud agent ハーネス][cloud-harness-link] に進んでください。 + +## まとめと次のステップ + +Copilot CLI の slash command を使うと、設定の変更、セッションの共有、Copilot の内部状態に関する情報の取得ができます。このレッスンでは、次の機能を使ったり確認したりしました。 + +- `/share` で GitHub gist を作成し、チームとセッションを共有する。 +- `/context` で、Copilot CLI が現在使用しているコンテキストを確認する。 +- `/model` で利用可能なモデルの一覧を確認し、必要に応じて別のモデルを選択する。 +- `/delegate` が cloud agent への任意の橋渡しになることを学ぶ。 + +利用できる slash command はもちろんこれ以外にもあり、Copilot CLI にはまだ多くの機能があります。最後に、[ここまでに学んだことを振り返り][next-lesson]、学習を続けるための次のステップを確認して締めくくりましょう。 + +## リソース + +- [Copilot CLI を使う][using-copilot-cli] +- [Copilot CLI について][about-copilot-cli] +- [Copilot CLI のコンテキスト管理][context-management] +- [Copilot CLI でセッションを共有する][share-sessions] +- [Copilot CLI でモデルを選択する][selecting-models] + +[previous-lesson]: ../6-custom-agents/ +[next-lesson]: ../8-review/ +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[about-cloud-agent]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-cloud-agent +[context-management]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#context-management +[share-sessions]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#share-sessions +[selecting-models]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#select-an-llm + +[cloud-harness-link]: ../../cloud/ diff --git a/docs/ja-jp/cli/8-review.md b/docs/ja-jp/cli/8-review.md new file mode 100644 index 0000000..71baaad --- /dev/null +++ b/docs/ja-jp/cli/8-review.md @@ -0,0 +1,73 @@ +--- +title: "演習 8 - 振り返りと次のステップ" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +ここ数回の演習で、GitHub Copilot CLI の最も一般的なユース ケースのいくつかを確認しました。具体的には次の内容です。 + +- GitHub やほかの MCP server と連携する。 +- instruction file を使ってコード生成を導く。 +- skill を実装して、Copilot CLI のツールボックスに tool を追加する。 +- custom agent を呼び出して、より高度で複雑なタスクに対応する。 +- slash command を使ってセッションを管理し、必要に応じて `/delegate` で cloud agent に橋渡しする。 + +ここでは、いくつかの slash command、ベスト プラクティス、次のステップについて確認します。 + +## slash command + +Copilot CLI には、多数の slash command が用意されています。設定を変更したり、内部で起きていることを確認したりできるコマンドも含まれます。すでに、現在のコンテキストをクリアして新しい chat を始める `/clear` と、MCP server を確認 / 管理する `/mcp` を使いました。役立つ追加コマンドとしては次のようなものがあります。 + +| Command | 説明 | +| ------------------ | ------------------------------------------------------------- | +| `/add-dir` | Copilot の trusted list にディレクトリを追加する | +| `/clear`, `/new` | 会話履歴をクリアして新しく始める | +| `/compact` | 会話履歴を要約し、context window の使用量を減らす | +| `/context` | context window の token 使用量と可視化を表示する | +| `/diff` | 現在のディレクトリで行われた変更をレビューする | +| `/model` | 使用する AI model を選択する(Claude Sonnet、GPT-5 など) | +| `/plan ` | コーディング前に実装計画を作成する | +| `/review ` | code review agent を実行して変更を分析する | +| `/delegate` | タスクを Copilot cloud agent に委任して非同期で処理する | +| `/session` | セッション情報と workspace の概要を表示する | +| `/share` | セッションを markdown ファイルまたは GitHub gist に共有する | +| `/skills` | capability を拡張する skill を管理する | +| `/usage` | セッションの使用状況メトリクスと統計を表示する | + +> [!TIP] +> `/help` を使うと、利用可能な command とキーボード shortcut の完全な一覧を表示できます。 + +## ベスト プラクティス + +AI ツールを使うときは、基盤となる仕組みが出力品質を左右します。しっかりした instruction file、custom agent、agent skill のいずれも重要な役割を果たします。このワークショップでは、それらをそれぞれ確認しました。[awesome-copilot][awesome-copilot] はテンプレートのよい情報源であり、Copilot 自身にこれらのひな形を作らせて出発点にすることもできます。 + +基盤と同じくらい、コンテキストも重要です。何を作りたいのか、なぜ必要なのか、どのように進めたいのかを明確に伝えることで、出力は大きく変わります。Copilot の助けになる情報があるなら、できるだけ渡してください。 + +## 次のステップ + +どのツールでも、スキルを高める最善の方法は使い続けることです。本番コード、趣味のコード、何年も頭の中にあったけれどまだ形にしていない小さなアプリなど、さまざまな場面で活用してください。学びをチームと共有し、チームからも学んでください。そして、いつものようにドキュメントを確認しましょう。 + +GitHub Copilot エコシステムをさらに試してみたい場合は、[VS Code ハーネス][vscode-harness-link] または [Cloud agent ハーネス][cloud-harness-link] を確認してください。 + +## リソース + +- [Copilot CLI について][about-copilot-cli] +- [Copilot CLI を使う][using-copilot-cli] +- [Awesome Copilot リポジトリ][awesome-copilot] +- [Custom instructions ガイド][repo-instructions] +- [Agent Skills ドキュメント][agent-skills] +- [カスタム エージェント ドキュメント][custom-agents] +- [MCP 仕様][mcp-spec] + +[previous-lesson]: ../7-slash-commands/ +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli +[awesome-copilot]: https://github.com/github/awesome-copilot +[repo-instructions]: https://docs.github.com/copilot/how-tos/configure-custom-instructions/add-repository-instructions +[agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills +[custom-agents]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#use-custom-agents +[mcp-spec]: https://modelcontextprotocol.io/ + +[vscode-harness-link]: ../../vscode/ +[cloud-harness-link]: ../../cloud/ diff --git a/docs/ja-jp/cli/README.md b/docs/ja-jp/cli/README.md new file mode 100644 index 0000000..2ab725f --- /dev/null +++ b/docs/ja-jp/cli/README.md @@ -0,0 +1,55 @@ +--- +slug: ja-jp/cli +title: "GitHub Copilot CLI" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +**[GitHub Copilot CLI](https://docs.github.com/copilot/concepts/agents/about-copilot-cli)** は、ターミナルで GitHub Copilot をエージェント型のコーディング アシスタントとして利用できるようにします。コードベースを探索し、コードを生成し、コマンドを実行し、外部ツールに接続できます。すべてコマンド ラインから行えるため、グラフィカル エディターに切り替えずに作業の流れを保てます。 + +これらの演習では、Copilot CLI のインストールと認証から始め、カスタム命令でプロジェクトのコンテキストを与えたうえで、プラン モードを使って意図的に機能を実装します。続いて Playwright MCP サーバーを接続し、実際のブラウザーでその機能をテストします。その後、再利用可能な agent skill と custom agent で Copilot を拡張します。最後に、コンテキスト管理、モデル選択、共有に使う slash command を確認し、作成した内容を振り返ります。 + +## 演習 + +| 演習 | トピック | 説明 | +|----------|-------|-------------| +| [0. 前提条件][ex0] | セットアップ | リポジトリと codespace を作成する | +| [1. Copilot CLI のインストール][ex1] | インストール | Copilot CLI をインストールして認証する | +| [2. カスタム命令][ex2] | コンテキスト | 命令を追加し、Copilot CLI がどのように従うかを確認する | +| [3. コード生成][ex3] | コード生成 | プラン モードを使って機能を生成する | +| [4. Playwright MCP によるテスト][ex4] | 外部ツール | Playwright MCP サーバーを追加し、ブラウザーで機能をテストする | +| [5. エージェント スキル][ex5] | スキル | 専門スキルで Copilot を強化する | +| [6. カスタム エージェント][ex6] | エージェント | カスタム エージェントを確認して使用する | +| [7. スラッシュ コマンド][ex7] | CLI 機能 | コンテキスト、モデル、共有、cloud agent への任意の委任を確認する | +| [8. 振り返り][ex8] | まとめ | 重要な概念と次のステップを確認する | + +## 前提条件 + +このワークショップに参加する前に、次を準備してください。 + +- [ ] **Copilot Student、Pro、Pro+、Business、Enterprise** のいずれかの有効なプランがある GitHub アカウント +- [ ] ターミナル / コマンド ライン操作の基本的な知識 +- [ ] インストール済みで設定済みの Git + +> [!TIP] +> 有料プランがありませんか。認証済みの学生は [GitHub Education][callout-student-plan-education] を通じて GitHub Copilot を無料で利用できます。**Copilot Student** プランには、このワークショップで使用する agent、MCP、code review、Copilot CLI の機能が含まれているため、すべての harness を完了できます。 + +[callout-student-plan-education]: https://github.com/education/students + +> [!NOTE] +> Copilot Business または Copilot Enterprise を使用している場合は、管理者が Copilot CLI を有効にしていることを確認してください。 + +## はじめる + +**[演習 0: 前提条件から始める →][ex0]** + +[ex0]: 0-prerequisites/ +[ex1]: 1-install-copilot-cli/ +[ex2]: 2-custom-instructions/ +[ex3]: 3-generating-code/ +[ex4]: 4-mcp/ +[ex5]: 5-agent-skills/ +[ex6]: 6-custom-agents/ +[ex7]: 7-slash-commands/ +[ex8]: 8-review/ diff --git a/docs/ko-kr/README.md b/docs/ko-kr/README.md index ce09be5..2960a99 100644 --- a/docs/ko-kr/README.md +++ b/docs/ko-kr/README.md @@ -21,7 +21,7 @@ GitHub Copilot은 어떤 작업 환경에서든 함께할 수 있습니다. 원 **Visual Studio Code**와 GitHub Codespaces에서 GitHub Copilot을 사용합니다. 익숙한 편집기를 벗어나지 않고 Copilot Chat 에이전트 모드, MCP 서버, 사용자 지정 에이전트를 활용합니다. AI 지원을 IDE에 직접 통합하고 싶을 때 적합합니다. -### 💻 [Copilot CLI](../cli/) +### 💻 [Copilot CLI](cli/) **GitHub Copilot CLI**는 터미널에서 실행되는 에이전트형 도우미입니다. 이를 설치하고, MCP 서버를 연결하고, 계획 모드로 코드를 생성하고, 명령줄에서 직접 스킬, 사용자 지정 에이전트, 슬래시 명령을 만듭니다. diff --git a/docs/ko-kr/app/8-review.md b/docs/ko-kr/app/8-review.md index fe3a101..733bf3e 100644 --- a/docs/ko-kr/app/8-review.md +++ b/docs/ko-kr/app/8-review.md @@ -60,7 +60,7 @@ AI 도구를 사용할 때는 도구를 둘러싼 인프라가 결과의 품질 어떤 도구든 더 능숙하게 사용하려면 계속 사용해야 합니다. 프로덕션 코드, 취미 프로젝트, 오랫동안 생각만 하고 만들지 못했던 작은 앱에 사용해 봅니다. 배운 내용을 팀과 공유하고 팀의 경험에서도 배웁니다. 언제나 그렇듯 문서를 살펴봅니다. -GitHub Copilot 생태계를 더 살펴보려면 [VS Code 실습 과정](../../vscode/), [Copilot CLI 실습 과정](../../cli/), [Cloud agent 실습 과정](../../cloud/)을 확인합니다. +GitHub Copilot 생태계를 더 살펴보려면 [VS Code 실습 과정](../../vscode/), [Copilot CLI 실습 과정](../cli/), [Cloud agent 실습 과정](../../cloud/)을 확인합니다. ## 리소스 diff --git a/docs/ko-kr/cli/0-prerequisites.md b/docs/ko-kr/cli/0-prerequisites.md new file mode 100644 index 0000000..555bd1c --- /dev/null +++ b/docs/ko-kr/cli/0-prerequisites.md @@ -0,0 +1,71 @@ +--- +title: "연습 0: 사전 준비" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +Copilot CLI 연습을 시작하기 전에 모든 것을 준비해야 합니다. Tailspin Toys 리포지토리(Repository)의 복사본을 만들고 [코드스페이스][codespaces]를 시작합니다. 다음 연습에서는 해당 코드스페이스의 통합 터미널을 사용해 Copilot CLI를 설치하고 실행합니다. + +## 실습용 리포지토리 설정 + +앞으로 작성할 코드를 위한 리포지토리 복사본을 만들기 위해 [template][template-repository]에서 새 인스턴스(Instance)를 만듭니다. 새 인스턴스에는 실습에 필요한 파일이 모두 포함되며, 연습을 진행하는 동안 이 리포지토리를 사용합니다. + +1. 새 브라우저 창에서 이 실습의 GitHub 리포지토리로 이동합니다: `https://github.com/github-samples/tailspin-toys`. +2. 실습용 리포지토리 페이지에서 **Use this template** 버튼을 선택해 리포지토리 복사본을 만듭니다. 그런 다음 **Create a new repository**를 선택합니다. + + ![Use this template 버튼](../../_images/ex0-use-template.png) + +3. GitHub 또는 Microsoft가 진행하는 행사에서 이 워크숍을 수행하는 경우에는 멘토가 제공하는 안내를 따릅니다. 그렇지 않다면 GitHub Copilot에 액세스할 수 있는 조직에 새 리포지토리를 만들어도 됩니다. + + ![리포지토리 템플릿 설정 입력 화면](../../_images/ex0-repository-settings.png) + +4. 이후 실습에서 참조할 수 있도록 생성한 리포지토리 경로(**organization-or-user-name/repository-name**)를 기록해 둡니다. + +> [!NOTE] +> **백로그가 준비되었습니다** +> +> template에서 리포지토리를 만들면 GitHub issue 백로그가 자동으로 생성됩니다. 워크숍 내내 이 issue를 바탕으로 작업하므로 직접 등록할 내용은 없습니다. + +## 코드스페이스 만들기 + +이제 코드스페이스를 사용해 실습을 진행합니다. + +[GitHub Codespaces][codespaces]는 브라우저에서 직접 코드를 작성하고, 실행하고, 디버그할 수 있는 클라우드 기반 개발 환경입니다. 여러 프로그래밍 언어, 확장, 도구를 지원하는 완전한 기능의 IDE를 제공합니다. + +1. 방금 만든 리포지토리로 이동합니다. +2. 초록색 **Code** 버튼을 선택합니다. + + ![Code 버튼 선택 화면](../../_images/ex0-code-button.png) + +3. **Codespaces** 탭을 선택한 다음 **+** 버튼을 선택해 새 Codespace를 만듭니다. + + ![새 codespace 만들기](../../_images/ex0-create-codespace.png) + +코드스페이스를 만드는 데는 몇 분 정도 걸리지만, 모든 서비스를 수동으로 설치하는 것보다 훨씬 빠릅니다. 기다리는 동안에는 GitHub Copilot의 다른 기능을 살펴볼 수 있으며, 다음 단계에서 그 부분을 이어서 알아봅니다. + +> [!CAUTION] +> 이후 연습에서 다시 코드스페이스로 돌아옵니다. 지금은 브라우저 탭에서 그대로 열어 둡니다. + +> [!NOTE] +> 이 워크숍은 코드스페이스 또는 로컬 [dev container][dev-containers] 안에서 실행하도록 설계되었습니다. 두 환경 모두 원활한 진행에 필요한 사전 요구 사항이 모두 설치된 상태를 보장합니다. 로컬에서 실행하고 싶다면 복제한 리포지토리를 VS Code에서 열고, 메시지가 표시되면 **Reopen in Container**를 선택합니다. 그러면 코드스페이스에서 사용하는 것과 동일한 dev container를 VS Code가 빌드합니다. + +[codespaces]: https://github.com/features/codespaces +[dev-containers]: https://code.visualstudio.com/docs/devcontainers/containers +## 요약 + +축하합니다! 실습용 리포지토리 복사본을 만들었습니다. 또한 Copilot CLI 작업을 시작할 때 사용할 코드스페이스 생성도 시작했습니다. + +## 다음 단계 + +Copilot CLI를 설치하고 GitHub 계정으로 인증해 보겠습니다. [연습 1 - GitHub Copilot CLI 설치][next-lesson]로 계속 진행합니다. + +## 리소스 + +- [GitHub Codespaces 개요][codespaces] +- [템플릿에서 리포지토리 만들기][template-repository] +- [Codespaces 빠른 시작][codespaces-quickstart] + +[template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository +[codespaces-quickstart]: https://docs.github.com/codespaces/getting-started/quickstart +[next-lesson]: ../1-install-copilot-cli/ diff --git a/docs/ko-kr/cli/1-install-copilot-cli.md b/docs/ko-kr/cli/1-install-copilot-cli.md new file mode 100644 index 0000000..97f8141 --- /dev/null +++ b/docs/ko-kr/cli/1-install-copilot-cli.md @@ -0,0 +1,129 @@ +--- +title: "연습 1 - GitHub Copilot CLI 설치" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +[GitHub Copilot CLI][about-copilot-cli]는 터미널에서 실행되는 강력한 에이전트형 코딩 도우미입니다. 코드베이스를 탐색하고, 코드를 생성하고, 명령을 실행하고, 외부 도구와 상호 작용하는 작업을 모두 명령줄에서 수행할 수 있습니다. 작업을 위임하고, 변경을 요청하고, 흐름을 유지할 수 있습니다. 예상할 수 있듯 첫 단계는 도구를 설치하는 일입니다. 다행히 이미 익숙한 도구로 설치할 수 있습니다. + +이 연습에서는 다음을 학습합니다. + +- npm을 사용해 GitHub Copilot CLI를 설치합니다. +- GitHub 계정으로 인증합니다. +- 설치를 확인합니다. + +## 시나리오 + +팀에서는 늘어나는 백로그를 처리하기 위해 AI agent를 사용하기 시작했습니다. Copilot CLI는 많은 개발자가 주로 작업하는 터미널 안으로 그 기능을 가져옵니다. 이 연습을 마치면 설치와 인증이 완료되어, 워크숍의 나머지 단계를 진행할 준비가 됩니다. + +## 코드스페이스에서 터미널 열기 + +Copilot CLI를 설치하기 전에 코드스페이스에서 터미널 창을 열어야 합니다. + +1. 아직 열지 않았다면 코드스페이스로 돌아갑니다. +2. Ctrl+`를 눌러 터미널 창을 엽니다. +3. VS Code 창 하단에 터미널 패널이 나타나는지 확인합니다. + +## Copilot CLI 설치 + +Copilot CLI는 [npm][install-npm], [WinGet][install-winget], [Homebrew][install-homebrew]로 설치할 수 있습니다. GitHub Codespaces에는 Node.js가 이미 설치되어 있으므로 npm을 사용해 Copilot CLI를 설치합니다. + +1. 터미널에서 Node.js가 설치되어 있고 버전 요구 사항을 충족하는지 확인합니다. + + ```bash + node --version + ``` + + 버전 22 이상(예: `v22.x.x`)이 표시되어야 합니다. + +2. npm을 사용해 코드스페이스에 Copilot CLI를 전역 설치합니다. + + ```bash + npm install -g @github/copilot + ``` + +3. 버전을 확인해 설치를 검증합니다. + + ```bash + copilot --version + ``` + + 버전 번호(예: `v1.0.XX`)가 표시되어야 합니다. + +> [!TIP] +> 권한 오류가 발생하면 일부 시스템에서는 `sudo npm install -g @github/copilot`를 사용해야 할 수 있습니다. 하지만 GitHub Codespaces에서는 일반적으로 필요하지 않습니다. + +## GitHub로 인증하기 + +Copilot CLI를 처음 실행하면 GitHub 계정으로 인증하라는 메시지가 표시됩니다. + +1. Copilot CLI를 시작합니다. + + ```bash + copilot + ``` + +2. 현재 로그인되어 있지 않다면 인증 프롬프트가 표시됩니다. Copilot CLI는 device code를 보여 주고 URL로 이동하라고 안내합니다. +3. 화면의 안내를 따릅니다. + - 제공된 URL을 브라우저에서 엽니다. + - 메시지가 표시되면 device code를 입력합니다. + - Copilot CLI가 GitHub 계정에 액세스하도록 승인합니다. +4. 인증이 완료되면 질문과 명령을 받을 준비가 된 Copilot CLI 프롬프트가 표시됩니다. + +> [!NOTE] +> 코드스페이스에서는 GitHub 세션을 통해 이미 인증되어 있을 수 있습니다. Copilot CLI가 인증 메시지 없이 시작되면 바로 진행하면 됩니다. + +## 디렉터리를 신뢰하고 모든 것이 작동하는지 확인하기 + +이제 처음으로 Copilot CLI 프롬프트가 열렸으니, 이 워크숍 리포지토리를 신뢰하도록 설정하고 Copilot CLI가 제대로 설치되어 연결되었는지 확인해 보겠습니다. + +1. Copilot CLI가 이 폴더의 파일을 신뢰하는지 확인해 달라고 요청하면 세 가지 옵션이 표시됩니다. + - **Yes, proceed**: 이번 세션에만 신뢰 + - **Yes, and remember this folder for future sessions**: 영구적으로 신뢰 + - **No, exit (Esc)**: 파일 액세스 허용 안 함 +2. 이 워크숍에서는 계속 이 리포지토리에서 작업하므로 **Yes, and remember this folder for future sessions**를 선택합니다. +3. 간단한 질문을 해 Copilot이 작동하는지 확인합니다. + + ``` + What files are in this project? + ``` + +4. Copilot이 리포지토리를 탐색하고 프로젝트 구조 요약을 제공해야 합니다. +5. `/help` 명령으로 사용 가능한 slash commands를 확인합니다. + + ``` + /help + ``` + +6. 터미널에서 다음 명령을 입력해 Copilot CLI를 종료합니다. 이후 연습에서 다시 Copilot CLI로 돌아옵니다. + + ``` + exit + ``` + +## 요약 및 다음 단계 + +축하합니다! GitHub Copilot CLI를 성공적으로 설치하고 인증했습니다. 다음을 학습했습니다. + +- npm을 사용해 Copilot CLI를 설치합니다. +- GitHub 계정으로 인증합니다. +- Copilot CLI가 작업할 디렉터리를 신뢰하도록 설정합니다. +- 설치가 올바르게 작동하는지 확인합니다. + +이제 Copilot CLI가 설치되었으니, Copilot에 프로젝트 컨텍스트를 제공해 보겠습니다. [연습 2 - CLI로 커스텀 지침 사용하기][next-lesson]로 계속 진행합니다. + +## 리소스 + +- [GitHub Copilot CLI 설치][install-copilot-cli] +- [Copilot CLI 소개][about-copilot-cli] +- [Copilot CLI 사용하기][using-copilot-cli] + +[previous-lesson]: ../0-prerequisites/ +[next-lesson]: ../2-custom-instructions/ +[install-copilot-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[install-npm]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-npm-all-platforms +[install-winget]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-winget-windows +[install-homebrew]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-homebrew-macos-and-linux +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli diff --git a/docs/ko-kr/cli/2-custom-instructions.md b/docs/ko-kr/cli/2-custom-instructions.md new file mode 100644 index 0000000..55dd979 --- /dev/null +++ b/docs/ko-kr/cli/2-custom-instructions.md @@ -0,0 +1,241 @@ +--- +title: "연습 2 - 커스텀 지침(Copilot CLI)" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +[← 이전 연습: Copilot CLI 설치][previous-lesson] · [다음 연습: CLI로 코드 생성하기 →][next-lesson] + +생성형 AI로 작업할 때는 컨텍스트가 핵심입니다. 작업을 특정 방식으로 수행해야 하거나 Copilot이 알아야 할 배경 정보가 있다면, 그 컨텍스트를 사용할 수 있게 해야 합니다. Copilot을 돕는 여러 도구가 있으며, 이 워크숍 전반에서 이를 살펴봅니다. 먼저 [instruction files][instruction-files]부터 시작합니다. instruction files는 일반적으로 코드 자체를 어떻게 구성해야 하는지에 초점을 맞춥니다. 이를 통해 Copilot은 원하는 코드가 *무엇인지*뿐 아니라 *어떻게* 구조화되어야 하는지도 이해할 수 있습니다. + +이 연습에서는 다음을 수행합니다. + +- 리포지토리 커스텀 지침과 경로 범위 지침 파일을 통해 프로젝트별 컨텍스트, 코딩 가이드라인, 문서화 표준이 Copilot에 전달되는 방식을 살펴봅니다. +- 현재 지침이 적용된 상태에서 필터링을 위한 첫 번째 데이터 조각인 publishers helper를 생성합니다. +- `.github/copilot-instructions.md`에 새로운 리포지토리 전체 표준을 추가합니다. +- 후속 프롬프트를 실행하고 재생성된 코드가 새 표준을 따르는 모습을 확인합니다. +- 다음 연습에서 이어서 사용할 수 있도록 지침 업데이트와 helper를 커밋합니다. + +> [!CAUTION] +> 생성된 코드는 설정한 표준 일부와 다를 수 있습니다. Copilot은 비결정적입니다. 목표는 출력이 문자 단위로 완전히 일치하는 것이 아니라, 지침을 업데이트한 뒤 동작 경향이 어떻게 바뀌는지 확인하는 것입니다. + +## 지침 파일 + +### 시나리오 + +훌륭한 개발 조직답게 Tailspin Toys에는 개발 관행에 대한 가이드라인과 요구 사항이 있습니다. 여기에는 다음이 포함됩니다. + +- 데이터 계층에는 항상 단위 테스트가 필요합니다. +- UI는 dark mode여야 하며 현대적인 느낌을 제공해야 합니다. +- 코드 문서는 TSDoc doc comments 형태로 추가해야 합니다. +- 각 파일의 맨 앞에는 파일의 역할을 설명하는 주석 블록을 추가해야 합니다. + +instruction files를 사용하면 Copilot이 이러한 관행에 맞춰 작업을 수행하는 데 필요한 정보를 갖추도록 할 수 있습니다. + +### 커스텀 지침 + +커스텀 지침을 사용하면 Copilot에 컨텍스트와 선호 사항을 제공하여 코딩 스타일과 요구 사항을 더 잘 이해하도록 도울 수 있습니다. 이 기능은 더 관련성 높은 제안과 코드 스니펫을 얻도록 Copilot의 방향을 조정하는 강력한 방법입니다. 선호하는 코딩 규칙, 라이브러리, 코드에 포함하고 싶은 주석 유형까지 지정할 수 있습니다. 전체 리포지토리에 대한 지침을 만들 수도 있고, 작업 수준 컨텍스트를 위해 특정 파일 형식에 대한 지침을 만들 수도 있습니다. + +지침 파일에는 두 가지 유형이 있습니다. + +- `.github/copilot-instructions.md`는 리포지토리에 대한 **모든** 요청에서 Copilot으로 전송되는 단일 지침 파일입니다. 이 파일에는 프로젝트 수준 정보, 즉 Copilot에 보내는 대부분의 채팅 또는 CLI 요청에 공통으로 관련된 컨텍스트를 담아야 합니다. 사용 중인 기술 스택, 빌드 중인 내용의 개요, 모범 사례, 기타 전역 가이드라인이 여기에 포함될 수 있습니다. +- `.github/instructions/*.instructions.md` 파일은 특정 작업이나 파일 형식을 위해 만들 수 있습니다. TypeScript나 Astro 같은 특정 언어에 대한 지침을 제공하거나, UI 컴포넌트 또는 새로운 단위 테스트 세트 생성 같은 작업에 대한 지침을 제공할 수 있습니다. + +> [!NOTE] +> IDE에서 작업할 때 지침 파일은 Copilot Chat의 코드 생성에만 사용되며, code completions나 next-edit suggestions에는 사용되지 않습니다. +> +> Copilot Chat, Copilot CLI, Copilot cloud agent는 코드를 생성할 때 리포지토리 수준 지침과 `applyTo` front matter가 있는 `*.instructions.md` 파일을 모두 사용합니다. +> +> 또한 Copilot은 AGENTS.md와 CLAUDE.md를 포함한 [다른 표준의 지침 파일도 지원합니다][custom-instructions-support]. + +### 지침 파일 관리 모범 사례 + +지침 파일을 만드는 방법 전체를 이 워크숍에서 모두 다루지는 않습니다. 하지만 샘플 프로젝트에 포함된 예시는 대표적인 접근 방식을 보여 줍니다. 높은 수준에서 보면 다음과 같습니다. + +- `copilot-instructions.md`의 지침은 빌드 중인 내용의 설명, 프로젝트 구조, 전역 코딩 표준처럼 프로젝트 수준 가이드에 집중합니다. +- `*.instructions.md` 파일은 파일 형식(단위 테스트, Astro 컴포넌트, 데이터 계층)이나 특정 작업에 대한 구체적인 지침을 제공하는 데 사용합니다. +- 자연어를 사용합니다. 가이드는 명확하게 유지합니다. 코드가 어떻게 보여야 하는지와 어떻게 보이면 안 되는지에 대한 예시를 제공합니다. + +AI를 사용하는 방법이 하나로 정해져 있지 않듯, 지침 파일을 만드는 방법도 하나로 정해져 있지 않습니다. 실험을 통해 프로젝트에 가장 잘 맞는 방식을 찾게 됩니다. + +> [!TIP] +> GitHub Copilot을 사용하는 모든 프로젝트에는 탄탄한 instruction files 모음이 있어야 합니다. 이 프로젝트의 instruction files를 살펴보면 [UI 업데이트][ui-instructions]와 [Astro][astro-instructions]를 포함해 다양한 작업 유형에 대한 파일이 있다는 점을 확인할 수 있습니다. +> +> Copilot은 instruction files 생성도 도와줄 수 있습니다. 각 표면마다 노출 방식은 다르지만(예: VS Code의 **Configure Chat → Generate Agent Instructions**, Copilot CLI의 `/init`) 관련이 있는 경우 현재 사용 중인 표면의 연습에서 이를 안내합니다. +> +> 템플릿이나 시작점을 찾고 있나요? instruction files, custom agents, 기타 리소스를 모아 둔 리포지토리인 [awesome-copilot][awesome-copilot]을 살펴봅니다. + +[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md +[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md +[awesome-copilot]: https://github.com/github/awesome-copilot +[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support +## 이 프로젝트의 커스텀 지침 파일 살펴보기 + +잠시 시간을 내어 이 리포지토리에 포함된 지침 파일을 읽어 봅니다. 핵심 `copilot-instructions.md` 하나와 다양한 작업을 위한 `*.instructions.md` 파일 모음이 있습니다. 편집기 또는 GitHub 웹 UI에서 열어 봅니다. + +1. `.github/copilot-instructions.md`를 엽니다. +2. 파일을 살펴보면서 프로젝트의 간단한 설명과 **Agent notes**, **Code standards**, **Scripts**, **Repository Structure** 같은 섹션을 확인합니다. **Code standards** 아래에 중첩된 **GitHub Actions Workflows** 가이드가 있다는 점에 주목합니다. 이 내용은 Copilot과 상호 작용할 때 전반적으로 적용됩니다. +3. `.github/instructions` 폴더를 열어 둘러봅니다. Astro 파일, Drizzle 데이터 계층, 테스트 등 다양한 지침이 있는지 확인합니다. +4. `.github/instructions/unit-tests.instructions.md`를 엽니다. 상단의 `applyTo` 필드를 확인합니다. 이 필드는 지침이 적용될 파일을 결정하는 glob(리포지토리 루트 기준)을 설정합니다. 여기서는 모든 TypeScript test 파일(예: `**/*.test.ts`와 일치하는 파일)에 적용됩니다. +5. 이 프로젝트에서 단위 테스트를 만들 때 적용되는 구체적인 지침을 확인합니다. +6. 마지막으로 `.github/instructions/drizzle.instructions.md`를 열고 맨 아래로 스크롤합니다. 다른 지침 파일(`unit-tests.instructions.md` 등)과 프로젝트의 기존 파일에 대한 링크가 있는지 확인합니다. 이렇게 하면 더 큰 지침 세트를 더 작고 재사용 가능한 파일로 나눌 수 있고, 코드 생성 시 Copilot이 따를 예시를 가리킬 수 있습니다. (해당 경로는 리포지토리 루트가 아니라 지침 파일 기준 상대 경로입니다.) + +> [!NOTE] +> `copilot-instructions.md`의 **Code formatting requirements** 섹션에는 프로젝트 코딩 표준이 문서화되어 있지만, 아직 코드 내부 문서화는 요구하지 않습니다. 다음 단계에서 TSDoc doc comments와 파일 주석 헤더에 대한 규칙을 추가합니다. + +## 브랜치 만들기 + +코드를 변경할 예정이므로 작업용 브랜치를 만듭니다. + +1. 코드스페이스 터미널에서 새 브랜치를 만들고 전환합니다. + + ```bash + git checkout -b update-custom-instructions + ``` + +2. Copilot CLI가 설치 및 인증되었는지 확인합니다. + + ```bash + copilot --version + ``` + + 명령을 찾을 수 없거나 아직 로그인하지 않았다면 [연습 1 - GitHub Copilot CLI 설치](../1-install-copilot-cli/)로 돌아갑니다. + +## 지침을 업데이트하기 *전*에 Copilot CLI 사용하기 + +커스텀 지침의 영향을 확인하려면 먼저 현재 지침이 적용된 상태에서 코드를 생성합니다. 이후 파일을 업데이트하고 후속 프롬프트를 실행합니다. + +> [!TIP] +> **Copilot CLI 세션 시작하기** +> +> 아래 연습을 시작하기 전에 코드스페이스로 돌아가 터미널을 엽니다(이미 열려 있지 않다면 Ctrl+`). 그런 다음 `--yolo`와 `--enable-all-github-mcp-tools`를 사용해 Copilot CLI를 시작합니다. +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 이 프로젝트의 가장 최근 세션을 새로 시작하지 않고 이어서 사용하려면 `copilot --yolo --enable-all-github-mcp-tools --continue`를 실행합니다. 이전 연습에서 Copilot CLI가 이미 실행 중이라면 `/clear`를 보내 새 대화를 시작합니다. +> +> `--enable-all-github-mcp-tools`는 현재 세션에서 읽기/쓰기 GitHub MCP 도구를 활성화하므로, 워크숍 흐름 중 Copilot이 백로그를 읽고 pull request를 열 수 있습니다. + +> [!CAUTION] +> `--yolo`는 전체 자동 권한(`--allow-all-tools`, `--allow-all-paths`, `--allow-all-urls`)을 활성화합니다. Codespace나 VM 같은 격리된 환경에서만 사용하고, 일상적인 개발을 위한 기본 별칭으로는 절대 설정하지 않습니다. 자세한 내용은 [Allowing and denying tool use][allow-all-warning]를 참고합니다. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools +1. Copilot CLI 세션이 **repository root**에서 실행 중인지 확인합니다. 그래야 `.github/copilot-instructions.md`를 자동으로 불러옵니다. +2. Copilot CLI 프롬프트에서 필터링 UI가 사용할 publishers helper를 생성해 달라고 요청합니다. + + ```plaintext + Create a new data-access helper at src/lib/publishers.ts to return a list of all publishers. It should return the name and id for all publishers. Do not run the tests yet. + ``` + +3. Copilot CLI는 프로젝트를 탐색하고, 계획을 제안하고, 이 `--yolo` 세션에서 파일을 작성합니다. 터미널 출력의 변경 내용을 확인한 뒤 편집기에서 검토합니다. +4. 편집기에서 생성된 `src/lib/publishers.ts`를 엽니다. +5. helper가 첫 번째 인수로 `db` client를 받고, publisher의 typed array를 반환하는 typed function이라는 점을 확인합니다. 이는 `src/lib/*.ts`에 적용되는 `.github/instructions/drizzle.instructions.md`의 데이터 계층 규칙에서 비롯됩니다. +6. 생성된 코드에 TSDoc doc comments와 파일 수준 주석 헤더가 **없다**는 점을 확인합니다. + +> [!CAUTION] +> Copilot은 확률적으로 동작하므로, 지시하지 않았더라도 doc comments를 추가할 가능성이 있습니다. 그런 경우에도 괜찮습니다. 지침 업데이트 후 *일관성*이 향상되는 점이 핵심입니다. + +## 새로운 리포지토리 표준 추가하기 + +앞서 설명했듯이 `.github/copilot-instructions.md`는 Copilot에 프로젝트 수준 정보를 제공하도록 설계되었습니다. 이제 리포지토리 코딩 표준을 문서화해 코드 제안을 개선해 보겠습니다. + +1. `.github/copilot-instructions.md`를 다시 엽니다. +2. **Code formatting requirements** 섹션을 찾습니다. 대략 27번째 줄 근처에 있을 것입니다. 이 섹션이 프로젝트의 코딩 표준을 문서화하고 있지만, 아직 코드 내부 문서화 규칙이 없기 때문에 생성된 helper에 doc comments가 없었다는 점을 확인합니다. +3. 기존 표준 바로 아래에 다음 markdown 줄을 추가해 Copilot이 파일 주석 헤더와 TSDoc doc comments를 넣도록 지시합니다. + + ```markdown + - Every exported function should have a TSDoc comment describing its purpose, parameters, and return value. + - Before imports or any code, add a comment block to the file that explains its purpose. + ``` + +4. `copilot-instructions.md`를 저장합니다. + +> [!TIP] +> 이전 연습에서 본 것처럼 지침 파일은 전역 가이드를 위한 리포지토리 수준(`.github/copilot-instructions.md`)으로 만들 수도 있고, 특정 언어, 파일 형식, 작업을 위한 `*.instructions.md` 파일로 만들 수도 있습니다. 방금 추가한 doc comment 규칙처럼 프로젝트 전반에 적용되는 표준은 리포지토리 수준 파일에 두는 것이 적절합니다. + +## 프롬프트를 다시 실행하고 변화를 관찰하기 + +이제 지침에 doc comment 규칙이 추가되었으므로 방금 생성한 publishers 파일을 Copilot CLI로 업데이트해 보겠습니다. 동일한 표준 지시가 다시 작성된 코드에도 적용됩니다. + +1. Copilot CLI 세션에서 `/clear`를 보내 새 대화를 시작합니다. +2. 다음 프롬프트를 보냅니다. + + ```plaintext + Update src/lib/publishers.ts to follow the latest documentation conventions in .github/copilot-instructions.md. + ``` + +3. 편집이 완료되면 `src/lib/publishers.ts`를 다시 엽니다. +4. 이제 파일 맨 앞에 다음과 비슷한 주석 블록이 추가된 점을 확인합니다. + + ```typescript + /** + * Publisher data-access helpers for the Tailspin Toys Crowd Funding platform. + * Provides functions to retrieve publisher information from the database. + */ + ``` + +5. 생성된 함수에 이제 다음과 비슷한 TSDoc doc comment가 포함된 점을 확인합니다. + + ```typescript + /** + * Returns a list of all publishers with their id and name. + * + * @param db - The Drizzle database client. + * @returns A promise that resolves to an array of publisher objects. + */ + ``` + +6. 업데이트된 파일은 그대로 유지합니다. 다음 연습에서 이 파일을 기반으로 첫 번째 데이터 조각을 확장합니다. + +## 첫 번째 필터링 조각 커밋 및 푸시하기 + +1. 터미널에서 변경된 파일을 확인합니다. + + ```bash + git status + ``` + +2. 지침 업데이트와 helper를 stage합니다. + + ```bash + git add .github/copilot-instructions.md src/lib/publishers.ts + ``` + +3. 변경 사항을 커밋합니다. + + ```bash + git commit -m "Add doc comment standards and publishers helper foundation" + ``` + +4. 브랜치를 푸시합니다. + + ```bash + git push -u origin update-custom-instructions + ``` + +## 요약 및 다음 단계 + +이 프로젝트의 지침 파일을 통해 Copilot이 어떻게 컨텍스트를 받아들이는지 살펴본 다음, Copilot CLI를 사용해 다음을 수행했습니다. + +- 기존 지침을 바탕으로 필터링용 publishers data-access helper 기반을 생성했습니다. +- `.github/copilot-instructions.md`에 새로운 리포지토리 전체 표준을 추가했습니다. +- 후속 프롬프트를 실행하고 재생성된 코드가 새 표준을 따르는 모습을 확인했습니다. +- 지침 업데이트와 helper 기반을 모두 커밋하고 푸시했습니다. + +다음으로는 [코드 생성 연습][next-lesson]에서 백로그 작업을 구현하면서 이 지침을 적용합니다. + +## 리소스 + +- [GitHub Copilot 사용자 지정을 위한 instruction files][instruction-files] +- [커스텀 지침 작성 모범 사례][instructions-best-practices] +- [Copilot용 더 나은 커스텀 지침을 작성하는 5가지 팁][copilot-instructions-five-tips] +- [instruction files와 기타 리소스를 모아 둔 Awesome Copilot][awesome-copilot] + +[previous-lesson]: ../1-install-copilot-cli/ +[next-lesson]: ../3-generating-code/ +[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses +[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository +[copilot-instructions-five-tips]: https://github.blog/ai-and-ml/github-copilot/5-tips-for-writing-better-custom-instructions-for-copilot/ diff --git a/docs/ko-kr/cli/3-generating-code.md b/docs/ko-kr/cli/3-generating-code.md new file mode 100644 index 0000000..d97e7fe --- /dev/null +++ b/docs/ko-kr/cli/3-generating-code.md @@ -0,0 +1,98 @@ +--- +title: "연습 3 - GitHub Copilot CLI로 프로젝트 기능 추가하기" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +예상할 수 있듯이 GitHub Copilot CLI로 수행하는 핵심 작업은 프로젝트에 기능, 동작, 코드를 추가하는 일입니다. 이제 백로그의 issue 중 하나를 가져와 Copilot이 구현을 도와주도록 해보겠습니다. + +## 시나리오 + +이제 프로젝트의 필터링 작업을 마무리할 차례입니다. 백로그에는 이미 필터링 issue가 있고, 이전 연습에서 foundation helper도 만들었습니다. Copilot이 issue 세부 정보를 가져오고, 기존 작업을 고려한 뒤, 남은 기능을 구현하도록 해보겠습니다. + +이 연습에서는 다음을 수행합니다. + +- plan mode를 사용해 필터링 기능 구현 계획을 생성합니다. +- Copilot으로 웹 사이트에 필터링을 추가하는 데 필요한 코드를 생성합니다. + +이 연습이 끝나면 프로젝트에 새로운 기능이 추가됩니다. + +## plan mode 활용하기 + +AI의 가장 뛰어난 활용 방식 중 하나는 계획 수립입니다. 무엇을 만들고 싶은지 대략적인 개념은 있지만 아이디어를 정리할 대상이 필요할 때가 많습니다. AI 도구는 후속 질문을 하고, 빠진 구성 요소나 잠재적인 함정을 함께 검토하면서 생각을 구체화하도록 도와줍니다. Copilot CLI는 이 과정을 지원하기 위해 plan mode를 제공합니다. 또한 계획 수립에 들인 시간은 Copilot이 요구 사항에 더 잘 맞는 코드를 생성하는 데 도움이 됩니다. + +Copilot CLI의 plan mode를 사용해 새 기능 생성 과정을 시작합니다. + +> [!TIP] +> **Copilot CLI 세션 시작하기** +> +> 아래 연습을 시작하기 전에 코드스페이스로 돌아가 터미널을 엽니다(이미 열려 있지 않다면 Ctrl+`). 그런 다음 `--yolo`와 `--enable-all-github-mcp-tools`를 사용해 Copilot CLI를 시작합니다. +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 이 프로젝트의 가장 최근 세션을 새로 시작하지 않고 이어서 사용하려면 `copilot --yolo --enable-all-github-mcp-tools --continue`를 실행합니다. 이전 연습에서 Copilot CLI가 이미 실행 중이라면 `/clear`를 보내 새 대화를 시작합니다. +> +> `--enable-all-github-mcp-tools`는 현재 세션에서 읽기/쓰기 GitHub MCP 도구를 활성화하므로, 워크숍 흐름 중 Copilot이 백로그를 읽고 pull request를 열 수 있습니다. + +> [!CAUTION] +> `--yolo`는 전체 자동 권한(`--allow-all-tools`, `--allow-all-paths`, `--allow-all-urls`)을 활성화합니다. Codespace나 VM 같은 격리된 환경에서만 사용하고, 일상적인 개발을 위한 기본 별칭으로는 절대 설정하지 않습니다. 자세한 내용은 [Allowing and denying tool use][allow-all-warning]를 참고합니다. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools +1. Copilot CLI에 다음 프롬프트를 입력해 필터링 issue를 바탕으로 계획을 생성합니다. + + ``` + /plan Retrieve the issue on the repository related to adding filtering. We already added a publishers helper in src/lib/publishers.ts, so treat that as existing work and plan the remaining updates (games filtering logic, UI, and tests). + ``` + +2. Copilot이 계획을 세우는 동안 후속 질문을 할 수 있습니다. 질문이 나오면 원하는 구현 방식에 맞게 답변합니다. +3. 계획이 생성되면 설계 청사진을 검토합니다. 데이터 계층과 UI 전반의 남은 변경 사항, 그리고 테스트 생성이 권장되는 것을 확인할 수 있습니다. +4. Copilot CLI는 계획에 대한 추가 피드백을 제공할 수 있는 기능도 제공합니다. 안내된 영역으로 커서를 이동한 뒤 제안을 입력하면 Copilot이 이를 반영한 새 버전의 계획을 제시합니다. +5. 계획이 만족스럽다면 Copilot이 제공하는 옵션을 선택해 새 기능 구현을 시작합니다. + +> [!NOTE] +> Copilot은 확률적으로 동작하므로, 정확한 텍스트와 제공되는 옵션은 달라질 수 있습니다. 하지만 구현을 시작하는 옵션이 표시되며 대체로 다음과 비슷한 문구를 보게 됩니다. +> +> `Yes, and switch to autopilot mode`. +> +> Copilot은 위 예시처럼 [autopilot mode](https://docs.github.com/copilot/concepts/agents/copilot-cli/autopilot)를 활성화하는 옵션을 제안할 수 있습니다. autopilot mode를 사용하면 Copilot CLI가 각 단계마다 입력을 기다리지 않고 작업을 진행합니다. 처음 지시를 주면 Copilot CLI가 작업이 완료되었다고 판단할 때까지 각 단계를 자율적으로 처리합니다. 현재는 격리된 환경에서 작업하므로 autopilot을 실행하고 모든 도구를 허용해도 괜찮습니다. + +6. Copilot이 파일 생성을 시작합니다. + +> [!NOTE] +> 이 작업은 몇 분 정도 걸릴 수 있습니다. Copilot이 파일을 수정하고 생성하며, 테스트를 업데이트 및 생성하고, 모든 테스트를 실행해 성공 여부를 확인하는 모습을 보게 됩니다. 지금까지 살펴본 내용을 되돌아보거나 잠시 음료를 즐기기 좋은 시간입니다. + +## 코드 검토하기 + +AI가 생성한 코드는 운영 환경에 병합하기 전에 반드시 검토해야 합니다. 이제 Copilot이 기능 구현 과정에서 생성하거나 수정한 파일을 살펴보겠습니다. + +1. Copilot CLI에서 다음 명령을 사용해 "diff" 또는 코드 변경 사항을 표시합니다. + + ``` + /diff + ``` + +2. 변경된 파일을 확인합니다. 화살표 키로 좌우 이동하면서 서로 다른 파일을 볼 수 있습니다. 새 필터 컨트롤과 클라이언트 측 필터링이 들어간 게임 목록 페이지, `src/lib/games.ts`, `games.test.ts` 같은 테스트 파일이 업데이트된 것을 확인할 수 있습니다. Copilot이 전체 구현에 맞춰 기존 helper를 조정했다면 `publishers.ts`가 수정된 경우도 있을 수 있습니다. + +## 요약 및 다음 단계 + +이제 Copilot CLI의 도움으로 웹 사이트에 필터링 기능을 추가했습니다. 구체적으로 다음을 수행했습니다. + +- plan mode를 사용해 필터링 기능 구현 계획을 생성했습니다. +- Copilot을 사용해 웹 사이트에 필터링을 추가하는 데 필요한 코드를 생성했습니다. + +물론 다음 단계는 실제로 동작하는지 확인하는 것입니다. pull request를 열기 전에 [Playwright MCP server로 기능 테스트하기][next-lesson]로 이동해 검증해 보겠습니다. + +## 리소스 + +- [Copilot CLI 사용하기][using-copilot-cli] +- [Copilot CLI 소개][about-copilot-cli] +- [Copilot CLI의 컨텍스트 관리][context-management] + +[previous-lesson]: ../2-custom-instructions/ +[next-lesson]: ../4-mcp/ +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[context-management]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#context-management diff --git a/docs/ko-kr/cli/4-mcp.md b/docs/ko-kr/cli/4-mcp.md new file mode 100644 index 0000000..b2b8728 --- /dev/null +++ b/docs/ko-kr/cli/4-mcp.md @@ -0,0 +1,158 @@ +--- +title: "연습 4 - Playwright MCP server로 기능 테스트하기" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +방금 Copilot CLI로 필터링 기능을 생성했습니다. pull request를 열기 전에 브라우저에서 실제로 동작하는지 확인해야 합니다. 직접 앱을 눌러 보며 확인하는 대신 **Playwright MCP server**를 연결해 Copilot이 실제 브라우저를 제어하면서 기능을 테스트하도록 해보겠습니다. + +이 연습에서는 다음을 수행합니다. + +- Model Context Protocol(MCP)이 무엇인지 이해하고, MCP server가 Copilot CLI를 어떻게 확장하는지 살펴봅니다. +- Playwright MCP server를 Copilot CLI에 추가합니다. +- 브라우저에서 필터링 기능을 수동 테스트하도록 Copilot에 요청합니다. + +## Model Context Protocol(MCP)이란 무엇인가요? + +[Model Context Protocol(MCP)](https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/)은 AI agent가 외부 도구 및 서비스와 통신할 수 있는 방법을 제공합니다. MCP를 사용하면 AI agent는 외부 도구와 서비스를 실시간으로 사용할 수 있습니다. 이를 통해 최신 정보에 접근하고(resources 사용), 작업을 대신 수행하도록(tools 사용) 할 수 있습니다. + +이러한 도구와 리소스는 MCP server를 통해 접근합니다. MCP server는 AI agent와 외부 도구 및 서비스 사이의 브리지 역할을 합니다. MCP server는 AI agent와 외부 도구(기존 API 또는 NPM package 같은 로컬 도구 등) 간의 통신을 관리합니다. 각 MCP server는 AI agent가 접근할 수 있는 서로 다른 도구와 리소스 집합을 나타냅니다. + +널리 사용되는 MCP server 예시는 다음과 같습니다. + +- **[GitHub MCP Server](https://github.com/github/github-mcp-server)**: GitHub 리포지토리를 관리하기 위한 API 집합에 접근할 수 있게 해줍니다. 새 리포지토리 생성, 기존 리포지토리 업데이트, issue 및 pull request 관리 같은 작업을 AI agent가 수행할 수 있습니다. +- **[Playwright MCP Server](https://github.com/microsoft/playwright-mcp)**: Playwright를 사용한 브라우저 자동화 기능을 제공합니다. 웹 페이지 탐색, 양식 입력, 버튼 선택 같은 작업을 AI agent가 수행할 수 있습니다. + +서로 다른 도구와 리소스에 접근할 수 있게 해주는 다른 MCP server도 많이 있습니다. GitHub는 검색성과 생태계 기여를 높이기 위해 [MCP registry](https://github.com/mcp)를 제공합니다. + +> [!CAUTION] +> 보안 측면에서 MCP server는 프로젝트의 다른 dependency와 동일하게 취급해야 합니다. MCP server를 사용하기 전에 소스 코드를 신중히 검토하고, 게시자를 확인하며, 보안 영향을 고려합니다. 신뢰할 수 있는 MCP server만 사용하고, 민감한 리소스나 작업에 대한 액세스를 부여할 때는 특히 주의합니다. + +> [!NOTE] +> [GitHub MCP server][github-mcp-server]는 Copilot CLI에 **기본 내장**되어 있습니다. 별도 설정 없이 바로 사용할 수 있으며, 워크숍 전반에서 Copilot이 리포지토리를 읽고 쓰고 있었던 것도 이 서버 덕분입니다. 이 연습에서는 Copilot에 브라우저를 제공하기 위해 두 번째 서버인 Playwright를 추가합니다. + +## Playwright MCP server 추가하기 + +서버를 추가하는 가장 빠른 방법은 대화형 `/mcp add` 명령입니다. Copilot이 제어할 수 있는 브라우저를 제공하는 [Playwright MCP server][playwright-mcp-server]를 등록합니다. + +> [!TIP] +> **Copilot CLI 세션 시작하기** +> +> 아래 연습을 시작하기 전에 코드스페이스로 돌아가 터미널을 엽니다(이미 열려 있지 않다면 Ctrl+`). 그런 다음 `--yolo`와 `--enable-all-github-mcp-tools`를 사용해 Copilot CLI를 시작합니다. +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 이 프로젝트의 가장 최근 세션을 새로 시작하지 않고 이어서 사용하려면 `copilot --yolo --enable-all-github-mcp-tools --continue`를 실행합니다. 이전 연습에서 Copilot CLI가 이미 실행 중이라면 `/clear`를 보내 새 대화를 시작합니다. +> +> `--enable-all-github-mcp-tools`는 현재 세션에서 읽기/쓰기 GitHub MCP 도구를 활성화하므로, 워크숍 흐름 중 Copilot이 백로그를 읽고 pull request를 열 수 있습니다. + +> [!CAUTION] +> `--yolo`는 전체 자동 권한(`--allow-all-tools`, `--allow-all-paths`, `--allow-all-urls`)을 활성화합니다. Codespace나 VM 같은 격리된 환경에서만 사용하고, 일상적인 개발을 위한 기본 별칭으로는 절대 설정하지 않습니다. 자세한 내용은 [Allowing and denying tool use][allow-all-warning]를 참고합니다. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools +1. Copilot CLI 세션에서 다음을 입력합니다. + + ```text + /mcp add + ``` + +2. 구성 양식이 나타나면 Tab으로 필드 사이를 이동하면서 다음과 같이 입력합니다. + + - **Server Name**: `playwright` + - **Server Type**: **Local**(또는 **STDIO**로 표시됨)을 선택합니다. + - **Command**: `npx @playwright/mcp@latest --headless` + - **Tools**: 서버의 모든 도구를 허용하기 위해 `*` 그대로 둡니다. + +3. Ctrl+S를 눌러 저장합니다. 서버가 추가되고 즉시 사용할 수 있습니다. 재시작은 필요하지 않습니다. + +`--headless` 플래그는 Playwright가 표시 창 없이 브라우저를 실행하도록 지정합니다. 데스크톱을 표시할 수 없는 코드스페이스 안에서는 이 설정이 필요합니다. 내부적으로는 다음 내용이 `~/.copilot/mcp-config.json` 파일에 기록됩니다. + +```json +{ + "mcpServers": { + "playwright": { + "type": "local", + "command": "npx", + "args": ["@playwright/mcp@latest", "--headless"], + "tools": ["*"] + } + } +} +``` + +4. MCP server 목록을 확인해 서버가 등록되어 활성 상태인지 검증합니다. + + ```text + /mcp show + ``` + +5. 기본 제공 `github` server와 함께 `playwright`가 표시되어야 합니다. + +> [!NOTE] +> Tailspin Toys 프로젝트는 이미 end-to-end 테스트에 Playwright를 사용하므로, Playwright에 필요한 브라우저가 대체로 이미 설치되어 있습니다. 나중에 Copilot이 브라우저가 없다고 보고하면 `npx playwright install chromium`를 실행하도록 요청한 뒤 다시 시도합니다. + +## 웹 사이트 시작하기 + +Playwright MCP server가 테스트를 수행하려면 실행 중인 앱이 필요합니다. Copilot CLI에서 작업하는 동안 계속 실행되도록 **별도의** 터미널에서 Astro dev server를 시작합니다. + +1. Ctrl+`를 선택해 코드스페이스에서 새 터미널을 엽니다. +2. 웹 사이트를 시작합니다. + + ```bash + npm run dev + ``` + +3. 이 터미널은 계속 실행된 상태로 둡니다. `Astro server: http://localhost:4321` 배너가 표시되면 앱이 준비된 것입니다. + +## 필터링 기능 테스트하기 + +Copilot CLI 세션으로 돌아가 Copilot에 기능 테스트를 요청합니다. + +[Playwright MCP server][playwright-mcp-server]는 Copilot이 실제 브라우저를 제어할 수 있게 해줍니다. 직접 앱을 눌러 보며 작업을 확인하는 대신, agent가 페이지를 열고, 탐색하고, 필터를 적용하고, 결과를 다시 읽어 준 다음, 본 내용을 요약할 수 있습니다. 대화를 벗어나지 않고 기능이 기대대로 동작하는지 확인하는 가장 빠른 방법입니다. + +내부적으로 Playwright MCP server는 스크린샷이 아니라 페이지의 [accessibility tree][playwright-mcp-server]를 기반으로 동작합니다. 즉, agent는 보조 기술이 처리하는 방식과 유사하게 구조화되고 레이블이 지정된 요소(버튼, 링크, 목록 항목)를 기준으로 추론합니다. 따라서 빠른 기능 점검이 가벼운 접근성 sanity check 역할도 함께 합니다. + +서버가 연결되고 앱이 실행 중인 상태에서 Copilot에게 방금 만든 필터링 기능을 검증해 달라고 요청합니다. + +```text +Using the Playwright MCP server, open a browser to the running app at http://localhost:4321 and verify the new game filtering feature: + +1. Go to the games page and note how many games are listed. +2. Apply a category filter and confirm the list updates to only show games in that category. +3. Clear it, then apply a publisher filter and confirm the list updates to that publisher. +4. Combine a category and a publisher filter and confirm the results respect both. + +Report what you observe at each step, and call out anything that does not behave as expected. +``` + +Copilot은 Playwright MCP server를 통해 브라우저를 실행하고, 각 단계를 수행한 뒤, 확인한 내용을 보고합니다. 요약 내용을 issue의 acceptance criteria와 비교해 보고, 어긋나는 부분이 있으면 후속 질문을 하거나 pull request를 열기 전에 코드를 수정하도록 다시 요청합니다. + +> [!NOTE] +> 이 테스트를 수행하려면 앱이 `http://localhost:4321`에서 실행 중이어야 합니다. dev server를 중지했다면 프롬프트를 보내기 전에 다시 시작합니다. Copilot이 처음으로 Playwright MCP server를 사용할 때 브라우저를 다운로드해야 할 수도 있습니다. 브라우저가 없다고 보고하면 `npx playwright install chromium`를 실행하도록 요청한 뒤 다시 시도합니다. + +[playwright-mcp-server]: https://github.com/microsoft/playwright-mcp +## 요약 및 다음 단계 + +축하합니다. Copilot CLI에서 Playwright MCP server를 사용해 기능을 수동으로 테스트했습니다. 정리하면 다음을 수행했습니다. + +- Model Context Protocol(MCP)이 무엇인지 학습하고, MCP server가 Copilot CLI를 어떻게 확장하는지 살펴보았습니다. +- `/mcp add`로 Playwright MCP server를 추가했습니다. +- 기능을 배포하기 전에 Copilot에게 브라우저를 제어해 필터링 기능을 검증하도록 요청했습니다. + +이제 기능이 동작함을 확인했으니, 다음 연습으로 이동해 [에이전트 스킬의 도움을 받아 pull request를 열 수 있습니다][next-lesson]. + +## 리소스 + +- [MCP가 대체 무엇이고 왜 모두가 이야기할까요?][mcp-blog-post] +- [Microsoft Playwright MCP Server][playwright-mcp-server] +- [Copilot CLI용 MCP server 추가하기][cli-add-mcp] +- [GitHub MCP Server][github-mcp-server] + +[previous-lesson]: ../3-generating-code/ +[next-lesson]: ../5-agent-skills/ +[mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/ +[github-mcp-server]: https://github.com/github/github-mcp-server +[cli-add-mcp]: https://docs.github.com/copilot/how-tos/copilot-cli/customize-copilot/add-mcp-servers diff --git a/docs/ko-kr/cli/5-agent-skills.md b/docs/ko-kr/cli/5-agent-skills.md new file mode 100644 index 0000000..b82d0d5 --- /dev/null +++ b/docs/ko-kr/cli/5-agent-skills.md @@ -0,0 +1,121 @@ +--- +title: "연습 5 - 에이전트 스킬 사용하기" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +앱 개발에는 빌드 생성, 테스트 실행, pull request 작성처럼 반복 가능한 작업이 자주 포함됩니다. **에이전트 스킬(Agent Skills)**을 사용하면 Copilot과 다른 AI agent에 이러한 작업을 수행하는 방법에 대한 가이드를 제공할 수 있습니다. 스킬은 agent가 필요할 때 불러올 수 있는 지침, 스크립트, 리소스 폴더입니다. [Agent Skills는 오픈 표준][agent-skills-repo]이며, 여러 agent에서 사용됩니다. 따라서 동일한 스킬을 Copilot Chat in agent mode, Copilot cloud agent, Copilot CLI, GitHub Copilot app 전반에서 사용할 수 있습니다. + +스킬은 프로젝트의 `.github/skills` 폴더 또는 전역 `~/.copilot/skills`에 저장됩니다. 각 스킬은 YAML frontmatter(`name`과 `description`)가 포함된 `SKILL.md` 파일과 그 뒤에 이어지는 markdown 지침으로 구성된 폴더입니다. + +```yaml +--- +name: make-contribution +description: All changes to code must follow the guidance documented in the repository. Before any issue is filed, branch is made, commits generated, or pull request (or PR) created, a search must be done to ensure the right steps are followed. Whenever asked to create an issue, commit messages, to push code, or create a PR, use this skill so everything is done correctly. +--- +``` + +스킬에는 스크립트, asset, 참고 자료를 담은 하위 폴더도 포함될 수 있습니다. 전체 구조는 [agent skills specification][agent-skills-spec]에서 다룹니다. + +> [!TIP] +> 스킬은 동적으로 로드됩니다. 어떤 스킬이 적용되는지는 agent가 `description` 필드를 기준으로 판단합니다. 시나리오별로 명확한 설명이 있어야 실제로 사용되는 스킬이 되고, 그렇지 않으면 무시될 수 있습니다. + +[agent-skills-repo]: https://github.com/agentskills/agentskills +[agent-skills-spec]: https://agentskills.io/specification +이제 스킬이 팀의 사양에 맞는 pull request를 보장하는 방법을 살펴보겠습니다. + +## 시나리오 + +팀에는 pull request(PR)에 대한 다음 요구 사항이 있습니다. + +- 명확한 커밋 메시지를 사용하고, 파일은 논리적으로 그룹화해야 합니다. +- PR을 만들기 전에 모든 테스트가 통과해야 합니다. +- 각 PR에는 다음 섹션이 포함되어야 합니다. + - 변경이 필요한 이유에 대한 설명 + - 변경된 파일 개요 + - 중요한 코드 블록 스니펫 + - 수행한 변경 사항을 묶어 설명하는 세부 내용 + +팀은 Copilot으로 코드와 PR을 생성하고 있으므로, AI 도구가 이러한 요구 사항을 따르도록 보장하고 싶어 합니다. + +이 연습에서는 다음을 수행합니다. + +- pull request 생성을 위한 기존 스킬을 살펴봅니다. +- AI agent가 스킬을 활용하는 방식을 학습합니다. +- 스킬의 도움으로 가이드라인에 맞는 PR을 만듭니다. + +## 스킬 실행하기 + +스킬은 agent가 필요하다고 판단할 때 동적으로 로드됩니다. 어떤 스킬을 사용할지는 `SKILL.md` 파일의 설명에 따라 결정됩니다. 따라서 스킬의 사용 사례를 정의하는 명확한 설명을 작성하는 것이 중요합니다. + +## PR 스킬 살펴보기 + +Tailspin Toys에는 PR 생성에 대한 요구 사항이 있으므로, AI 도구가 이러한 가이드라인을 따르는 PR을 생성할 수 있도록 도와주는 스킬을 만들었습니다. 이 스킬이 무엇을 하는지 이해하기 위해 내용을 살펴보겠습니다. + +1. `.github/skills/make-contribution/SKILL.md`를 엽니다. +2. 이름과 설명을 확인합니다. 설명이 pull request 생성 또는 코드 커밋 요청이 있을 때 사용해야 하는 시나리오를 어떻게 강조하는지 확인합니다. +3. 스킬 내용을 읽어 봅니다. 브랜치 생성 방식, 커밋 생성 방식, pull request 내용에 관한 규칙이 정의되어 있음을 확인합니다. + +## 스킬 사용하기 + +앞서 강조했듯이 스킬은 Copilot CLI가 자동으로 호출합니다. 따라서 Copilot에게 PR 생성을 요청하기만 하면 됩니다. + +> [!TIP] +> **Copilot CLI 세션 시작하기** +> +> 아래 연습을 시작하기 전에 코드스페이스로 돌아가 터미널을 엽니다(이미 열려 있지 않다면 Ctrl+`). 그런 다음 `--yolo`와 `--enable-all-github-mcp-tools`를 사용해 Copilot CLI를 시작합니다. +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 이 프로젝트의 가장 최근 세션을 새로 시작하지 않고 이어서 사용하려면 `copilot --yolo --enable-all-github-mcp-tools --continue`를 실행합니다. 이전 연습에서 Copilot CLI가 이미 실행 중이라면 `/clear`를 보내 새 대화를 시작합니다. +> +> `--enable-all-github-mcp-tools`는 현재 세션에서 읽기/쓰기 GitHub MCP 도구를 활성화하므로, 워크숍 흐름 중 Copilot이 백로그를 읽고 pull request를 열 수 있습니다. + +> [!CAUTION] +> `--yolo`는 전체 자동 권한(`--allow-all-tools`, `--allow-all-paths`, `--allow-all-urls`)을 활성화합니다. Codespace나 VM 같은 격리된 환경에서만 사용하고, 일상적인 개발을 위한 기본 별칭으로는 절대 설정하지 않습니다. 자세한 내용은 [Allowing and denying tool use][allow-all-warning]를 참고합니다. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools +1. 다음 프롬프트를 사용해 Copilot에게 PR 생성을 요청합니다. + + ``` + Can you please create a pull request for me! + ``` + +2. Copilot이 요청을 확인합니다. 잠시 후 Copilot이 **make-contribution** 스킬을 사용 중이라고 표시하는 것을 확인할 수 있습니다. + + ![Copilot CLI가 에이전트 스킬을 호출하는 화면](../../_images/cli-5-agent-skill.png) + +3. Copilot은 이어서 스킬의 지침을 따릅니다. 먼저 테스트를 실행한 뒤 브랜치, 커밋, 그리고 최종적으로 PR을 생성합니다. +4. PR이 생성되면 리포지토리로 돌아가 PR을 엽니다. 섹션이 스킬에 정의된 가이드라인을 따르고 있으며, 팀이 제시한 요구 사항과 일치하는지 확인합니다. +5. 다음 연습으로 넘어가기 전에 이 필터링 PR과 접근성 작업을 분리하기 위해 로컬 작업 공간을 `main`에서 새 브랜치로 초기화합니다. + + ```bash + git checkout main + git pull + git checkout -b accessibility-cli + ``` + +## 요약 및 다음 단계 + +에이전트 스킬의 도움으로 문서화된 요구 사항을 충족하는 새로운 PR을 만들었습니다. 다음을 수행했습니다. + +- pull request 생성을 위한 기존 스킬을 살펴보았습니다. +- AI agent가 스킬을 활용하는 방식을 학습했습니다. +- 스킬의 도움으로 가이드라인에 맞는 PR을 만들었습니다. + +스킬은 특정 작업에 적합하지만, 더 강력한 작업을 수행하려면 [custom agents][next-lesson]를 활용해야 합니다. 다음으로 이를 살펴보겠습니다. + +## 리소스 + +- [에이전트 스킬 소개][about-agent-skills] +- [Agent Skills Specification][agent-skills-spec] +- [Agent Skills Repository][agent-skills-repo] +- [awesome-copilot의 Agent Skills][awesome-copilot-skills] + +[previous-lesson]: ../4-mcp/ +[next-lesson]: ../6-custom-agents/ +[about-agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills +[awesome-copilot-skills]: https://github.com/github/awesome-copilot/tree/main/skills diff --git a/docs/ko-kr/cli/6-custom-agents.md b/docs/ko-kr/cli/6-custom-agents.md new file mode 100644 index 0000000..820d1b6 --- /dev/null +++ b/docs/ko-kr/cli/6-custom-agents.md @@ -0,0 +1,113 @@ +--- +title: "연습 6 - GitHub Copilot CLI로 커스텀 에이전트 사용하기" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +## 커스텀 에이전트란 무엇인가요? + +GitHub Copilot의 [커스텀 에이전트][custom-agents-concept]를 사용하면 개발 워크플로 안의 특정 작업이나 도메인에 맞춘 전문 AI 도우미를 만들 수 있습니다. 리포지토리의 `.github/agents` 폴더 안에 있는 markdown 파일로 agent를 정의하면, 특정 종류의 작업을 더 효과적으로 수행하도록 Copilot을 이끄는 집중된 지침, 모범 사례, 코딩 패턴, 도메인별 지식을 제공할 수 있습니다. 팀은 전문성을 재사용 가능한 agent로 체계화할 수 있습니다. 예를 들어 [WCAG][wcag] 준수를 강제하는 접근성 agent, 보안 코딩 관행을 따르는 보안 agent, 일관된 테스트 패턴을 유지하는 테스트 agent 등을 만들 수 있습니다. + +커스텀 에이전트는 프로젝트의 `.github/agents` 폴더 또는 전역 `~/.copilot/agents`의 markdown 파일로 정의합니다. 각 파일에는 최소한 `name`과 `description`이 포함된 YAML frontmatter가 있고, 그 뒤에 agent의 동작, 전문성, 지침을 정의하는 markdown 프롬프트가 이어집니다. + +### 커스텀 에이전트와 에이전트 스킬 비교하기 + +커스텀 에이전트와 [에이전트 스킬][agent-skills-concept] 사이에는 개념적으로 겹치는 부분이 있습니다. 둘 다 주로 markdown 파일로 정의되며 AI에게 작업 수행 방법을 알려 줍니다. 가장 깔끔하게 구분하면 **커스텀 에이전트**는 작업자이고, **스킬**은 도구입니다. + +커스텀 에이전트는 자체 컨텍스트 창을 가지며, 작업을 수행하는 과정에서 스킬(심지어 다른 agent까지도)을 오케스트레이션하도록 설계됩니다. 이 실습에서 접근성 커스텀 에이전트는 접근성 가이드라인을 기준으로 사이트를 검토하고 업데이트합니다. 이 과정에서 pull request 워크플로 스킬이나 테스트 실행 및 관리를 담당하는 스킬 같은 도구를 호출할 수도 있습니다. + +> [!NOTE] +> 커스텀 에이전트를 작성하는 유일한 "정답"은 없습니다. AI의 다른 작업과 마찬가지로, 환경과 시나리오에 가장 잘 맞는 방식을 찾기 위해 테스트하고 반복해 보아야 합니다. + +[custom-agents-concept]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-custom-agents +[agent-skills-concept]: https://docs.github.com/copilot/concepts/agents/about-agent-skills +[wcag]: https://www.w3.org/WAI/standards-guidelines/wcag/ +## 시나리오 + +많은 웹 애플리케이션이 모든 사용자에게 접근 가능하지 못하며, 지금 작업 중인 웹 사이트도 예외는 아닙니다. 커스텀 에이전트를 사용해 접근성 문제를 식별하고 해결해 보겠습니다. + +Tailspin Toys는 시각 능력이나 선호도와 관계없이 모든 사용자가 crowdfunding platform을 이용할 수 있도록 보장하는 데 전념하고 있습니다. 최근 사용자 피드백에 따르면 현재 dark theme는 텍스트와 배경색 사이의 대비가 충분하지 않아 일부 사용자가 읽기 어렵다고 느끼고 있습니다. 이 접근성 문제를 해결하기 위해 디자인 팀은 사용자가 켜고 끌 수 있는 high-contrast mode 구현을 요청했습니다. + +접근성은 매우 중요하므로 가능한 한 빠르게 구현하고 싶습니다. 커스텀 에이전트를 활용해 이 기능을 생성합니다. +이 연습에서는 다음을 수행합니다. + +- 커스텀 에이전트를 살펴봅니다. +- 커스텀 에이전트를 활성화하고 Copilot CLI를 사용해 작업을 할당합니다. + +## 접근성 커스텀 에이전트 검토하기 + +접근성을 위해 이미 커스텀 에이전트가 준비되어 있습니다. Copilot을 어떻게 안내하는지 이해하기 위해 내용을 검토해 보겠습니다. + +1. `.github/agents/accessibility.md`를 엽니다. +2. `name`과 `description` 필드가 포함된 YAML frontmatter를 확인합니다. + +> [!CAUTION] +> `name`과 `description`이 포함된 frontmatter는 커스텀 에이전트에 필수입니다. + +3. 이어지는 섹션을 훑어보며 다음 내용을 확인합니다. + - 접근 가능한 웹 사이트를 위한 코드를 생성할 때의 핵심 책임 + - 접근성 모범 사례 + - HTML, CSS, JavaScript용 코드 예시 + - 흔한 함정과 실수 목록 + +## Copilot CLI에서 커스텀 에이전트 사용하기 + +Copilot CLI에서는 `/agent` 명령으로 커스텀 에이전트를 시작할 수 있습니다. 이제 웹 사이트에 접근성 점검을 수행해 보겠습니다. + +> [!TIP] +> **Copilot CLI 세션 시작하기** +> +> 아래 연습을 시작하기 전에 코드스페이스로 돌아가 터미널을 엽니다(이미 열려 있지 않다면 Ctrl+`). 그런 다음 `--yolo`와 `--enable-all-github-mcp-tools`를 사용해 Copilot CLI를 시작합니다. +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 이 프로젝트의 가장 최근 세션을 새로 시작하지 않고 이어서 사용하려면 `copilot --yolo --enable-all-github-mcp-tools --continue`를 실행합니다. 이전 연습에서 Copilot CLI가 이미 실행 중이라면 `/clear`를 보내 새 대화를 시작합니다. +> +> `--enable-all-github-mcp-tools`는 현재 세션에서 읽기/쓰기 GitHub MCP 도구를 활성화하므로, 워크숍 흐름 중 Copilot이 백로그를 읽고 pull request를 열 수 있습니다. + +> [!CAUTION] +> `--yolo`는 전체 자동 권한(`--allow-all-tools`, `--allow-all-paths`, `--allow-all-urls`)을 활성화합니다. Codespace나 VM 같은 격리된 환경에서만 사용하고, 일상적인 개발을 위한 기본 별칭으로는 절대 설정하지 않습니다. 자세한 내용은 [Allowing and denying tool use][allow-all-warning]를 참고합니다. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools +1. Copilot CLI의 프롬프트 창에 `/agent`를 입력하고 Enter를 눌러 agent 목록을 엽니다. +2. 사용 가능한 agent 목록에서 **Accessibility agent**를 선택합니다. +3. 다음 프롬프트를 사용해 접근성 agent에게 접근성 백로그 항목을 검토하고 수정 사항을 생성해 달라고 요청합니다. + + ``` + Perform an accessibility review of the site. Pull the related issue down from the repository for details. Implement a high-contrast mode toggle that persists the user's preference across page reloads. Ensure there are e2e tests for any updates made to the project. Then create a PR with the updates. + ``` + +4. Copilot이 작업을 시작합니다. 먼저 issue를 가져오고, 검토를 수행하고, 업데이트를 생성하고, 마지막으로 PR을 만듭니다. PR을 만들 때 프로젝트의 PR 전용 스킬을 사용하는 점도 확인할 수 있습니다. + +> [!NOTE] +> 이 과정은 몇 분 정도 걸릴 수 있습니다. 지금까지 학습한 내용을 되돌아보거나, 음료를 즐기거나, Copilot CLI에서 사용할 수 있는 추가 명령을 다루는 다음 모듈을 미리 살펴보기에 좋은 시간입니다. + +## 요약 및 다음 단계 + +이 연습에서는 GitHub Copilot의 [커스텀 에이전트][custom-agents]를 살펴보았습니다. 커스텀 에이전트는 특정 작업과 도메인에 맞춘 전문 AI 도우미입니다. 커스텀 에이전트를 사용하면 팀의 전문성과 표준을 재사용 가능한 agent로 체계화해 Copilot이 특정 유형의 작업을 더 효과적으로 수행하도록 안내할 수 있습니다. + +다음 개념을 살펴보았습니다. + +- 커스텀 에이전트가 어떻게 정의되는지 +- Copilot CLI에서 커스텀 에이전트를 사용하는 방법 + +다음으로는 [몇 가지 slash commands][next-lesson]를 살펴보며 Copilot CLI의 추가 팁을 알아보겠습니다. + +## 리소스 + +- [커스텀 에이전트][custom-agents] +- [리포지토리용 커스텀 에이전트 만들기][creating-custom-agents] +- [awesome-copilot의 커스텀 에이전트][awesome-copilot-agents] +- [조직에서 커스텀 에이전트를 사용하기 위한 준비][org-custom-agents] +- [엔터프라이즈에서 커스텀 에이전트를 사용하기 위한 준비][enterprise-custom-agents] + +[previous-lesson]: ../5-agent-skills/ +[next-lesson]: ../7-slash-commands/ +[custom-agents]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#use-custom-agents +[creating-custom-agents]: https://docs.github.com/copilot/how-tos/use-copilot-agents/cloud-agent/create-custom-agents +[awesome-copilot-agents]: https://github.com/github/awesome-copilot/tree/main/agents +[org-custom-agents]: https://docs.github.com/copilot/how-tos/administer-copilot/manage-for-organization/prepare-for-custom-agents +[enterprise-custom-agents]: https://docs.github.com/copilot/how-tos/administer-copilot/manage-for-enterprise/manage-agents/prepare-for-custom-agents diff --git a/docs/ko-kr/cli/7-slash-commands.md b/docs/ko-kr/cli/7-slash-commands.md new file mode 100644 index 0000000..c8a8225 --- /dev/null +++ b/docs/ko-kr/cli/7-slash-commands.md @@ -0,0 +1,176 @@ +--- +title: "연습 7 - GitHub Copilot CLI의 슬래시 명령" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +좋은 CLI 도구라면 그렇듯 GitHub Copilot CLI에도 다양한 slash commands가 포함되어 있습니다. 이 명령은 고급 기능, "내부 동작" 정보, 추가 구성 옵션을 제공합니다. 이미 `/clear`로 컨텍스트를 지우고 `/mcp`로 MCP server를 검사하는 방법을 살펴보았습니다. 이제 `/context`, `/model`, `/share`, `/delegate`를 포함한 몇 가지 강력한 명령을 더 살펴보겠습니다. + +## 시나리오 + +이제 핵심 CLI 흐름은 모두 살펴보았습니다. 이번에는 세션 공유, 모델 전환, [Copilot cloud agent][about-cloud-agent]에 작업 위임 같은 추가 기능을 알아보겠습니다. + +이 연습에서는 다음을 사용합니다. + +- `/share`로 세션을 팀과 공유할 수 있도록 GitHub gist를 만듭니다. +- `/context`로 Copilot CLI가 현재 사용 중인 컨텍스트를 확인합니다. +- `/model`로 사용 가능한 모델 목록을 확인하고 원한다면 다른 모델을 선택합니다. +- `/delegate`로 선택적으로 작업을 cloud agent에 넘깁니다. 이 기능을 사용하려면 cloud agent가 필요하며, Copilot Student, Pro, Pro+, Business, Enterprise에서 사용할 수 있습니다. 즉 Copilot Free를 제외한 모든 플랜에서 사용할 수 있습니다. + +## 세션 공유하기 + +AI 도구를 포함해 어떤 도구든 잘 활용하는 것은 하나의 기술입니다. 팀으로 함께 작업하면서 서로의 학습 내용을 공유하는 것은 모두의 경험을 개선하고 더 높은 품질의 코드를 생성하는 가장 좋은 방법입니다. 이를 지원하기 위해 Copilot CLI는 `/share` 명령을 제공합니다. `/share` 명령은 세션에서 사용한 프롬프트와 Copilot이 따랐던 로직을 포함해 세션 세부 정보를 담은 markdown 파일이나 GitHub gist를 생성할 수 있습니다. + +이제 팀과 공유할 수 있는 GitHub gist를 만들어 보겠습니다. + +> [!TIP] +> **Copilot CLI 세션 시작하기** +> +> 아래 연습을 시작하기 전에 코드스페이스로 돌아가 터미널을 엽니다(이미 열려 있지 않다면 Ctrl+`). 그런 다음 `--yolo`와 `--enable-all-github-mcp-tools`를 사용해 Copilot CLI를 시작합니다. +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 이 프로젝트의 가장 최근 세션을 새로 시작하지 않고 이어서 사용하려면 `copilot --yolo --enable-all-github-mcp-tools --continue`를 실행합니다. 이전 연습에서 Copilot CLI가 이미 실행 중이라면 `/clear`를 보내 새 대화를 시작합니다. +> +> `--enable-all-github-mcp-tools`는 현재 세션에서 읽기/쓰기 GitHub MCP 도구를 활성화하므로, 워크숍 흐름 중 Copilot이 백로그를 읽고 pull request를 열 수 있습니다. + +> [!CAUTION] +> `--yolo`는 전체 자동 권한(`--allow-all-tools`, `--allow-all-paths`, `--allow-all-urls`)을 활성화합니다. Codespace나 VM 같은 격리된 환경에서만 사용하고, 일상적인 개발을 위한 기본 별칭으로는 절대 설정하지 않습니다. 자세한 내용은 [Allowing and denying tool use][allow-all-warning]를 참고합니다. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools +1. Copilot CLI 프롬프트 창에서 다음 명령을 보냅니다. + + ``` + /share gist + ``` + +2. 잠시 후 Copilot이 gist를 만들고 링크를 표시합니다. +3. 링크 텍스트를 복사합니다. +4. 새 브라우저 탭에 링크를 붙여 넣어 gist를 살펴봅니다. gist에 전송된 프롬프트, 사용한 스킬과 agent, Copilot의 사고 과정, 로컬에서 실행한 명령의 코드와 결과까지 강조되어 있는 점을 확인합니다. + +`/share`가 생성하는 gist와 markdown 파일은 코드가 어떻게 생성되었는지 문서화하거나, 원하는 결과를 얻기 위해 Copilot으로 어떤 작업을 수행했는지 팀과 공유하는 용도로 사용할 수 있습니다. + +## Copilot CLI의 컨텍스트 살펴보기 + +더 크거나 복잡한 작업을 수행할 때는 모델의 최대 context window에 도달할 수 있습니다. 창의 정확한 크기는 사용 중인 모델과 Copilot CLI 버전에 따라 달라집니다. context window가 가득 차면 Copilot CLI는 이를 자동으로 compact하여 정보를 요약하고 현재 작업과 관련이 없다고 판단한 항목을 제거합니다. slash commands를 사용하면 현재 컨텍스트 상태를 확인할 수도 있고 수동으로 compact할 수도 있습니다. 이제 context window를 살펴보겠습니다. + +1. Copilot CLI 프롬프트 창에서 다음 명령을 보냅니다. + + ``` + /context + ``` + +2. 잠시 후 Copilot CLI가 현재 컨텍스트를 시각적으로 표현한 결과를 생성합니다. + + ![Copilot CLI의 context window 화면](../../_images/cli-7-context-window.png) + +3. 표시된 모델(이미지와 다를 수 있음)과 현재 사용된 token 비율을 확인합니다. 나머지 정보는 다음을 보여 줍니다. + + | 제목 | 설명 | + | ------------ | ------------------------------------------------------ | + | System/Tools | 지침 파일, 파일 내용, 도구 정의 | + | Messages | 사용자와 Copilot 간의 대화 기록 | + | Buffer | 응답 생성을 위해 Copilot CLI가 예약한 공간 | + | Free space | 남아 있는 여유 공간 | + +4. 다음 slash command를 Copilot CLI에 보내 대화 기록을 compact합니다. + + ``` + /compact + ``` + +5. 완료되면 다음 명령을 보내 현재 컨텍스트 통계를 다시 표시합니다. + + ``` + /context + ``` + +6. 컨텍스트 변화에 주목합니다. 현재 context window가 상대적으로 작을 가능성이 높으므로 큰 차이가 없을 수도 있습니다. + +> [!NOTE] +> Copilot CLI는 컨텍스트가 가득 차면 자동으로 compact를 수행합니다. 용량이 100%에 가까워지면 프롬프트 창 바로 위에 비율을 표시합니다. 일반적으로는 비동기적으로 compact를 수행하므로, 작업 중에도 계속 Copilot과 상호 작용할 수 있습니다. 다만 작업을 수행하는 동안 몇 초간 실행 중인 작업을 차단할 수도 있습니다. + +### 컨텍스트 사용 모범 사례 + +대부분의 세션에서는 Copilot이 별도 지시 없이도 컨텍스트를 효율적으로 관리합니다. 하지만 다음과 같이 히스토리를 직접 지우거나 compact하도록 지시하고 싶어지는 상황도 있을 수 있습니다. + +- 애플리케이션의 다른 부분이나 관련 없는 작업으로 전환하는 경우, 오래되고 관련 없는 컨텍스트가 Copilot을 혼란스럽게 하지 않도록 `/clear`를 사용해 새로 시작할 수 있습니다. +- 최대 context window에 가까워지고 있다면 `/compact`로 수동으로 컨텍스트를 정리해 시점을 직접 제어할 수 있습니다. + +> [!CAUTION] +> 다시 말해 대부분의 시간에는 Copilot이 직접 컨텍스트를 관리합니다. 오래된 정보 때문에 Copilot이 약간 혼란스러워 보이거나 관련 없는 작업으로 전환하려는 경우에만 수동 명령 사용을 고려합니다. + +## 모델 선택하기 + +모델마다 강점이 다르고, 개발자마다 선호도도 다릅니다. Copilot CLI는 사용 가능한 모델을 나열하고 원하는 모델을 선택할 수 있게 해줍니다. + +1. Copilot CLI에 다음 slash command를 보내 모델 목록을 표시합니다. + + ``` + /model + ``` + +2. 모델 목록을 확인합니다. 각 모델 옆에는 이름과 요청당 비용 modifier가 함께 표시됩니다. +3. 원한다면 새 모델을 선택합니다. 아니면 Esc를 선택해 모델 목록을 종료합니다. + +> [!CAUTION] +> Copilot CLI의 모델 선택은 유지됩니다. + +## cloud agent에 위임하기(선택 사항) + +터미널에서 계속 작업하고 싶지만 더 오래 걸리는 작업은 Copilot cloud agent에 넘기고 싶을 때가 있습니다. `/delegate` 명령은 현재 Copilot CLI 세션을 GitHub.com으로 보내고, cloud agent가 이를 받아 비동기적으로 작업한 뒤 완료되면 pull request를 엽니다. + +> [!NOTE] +> `/delegate`에는 cloud agent가 필요합니다. Copilot Student, Pro, Pro+, Business, Enterprise에서 사용할 수 있으며, Copilot Free에서는 사용할 수 없습니다. 액세스 권한이 없다면 이 섹션을 읽고 실습 단계는 건너뜁니다. + +1. 워크숍에서 누적된 컨텍스트가 함께 위임되지 않도록 먼저 현재 세션을 지웁니다. + + ``` + /clear + ``` + +2. 범위가 작고 명확한 프롬프트를 보냅니다. 예를 들어 백로그에 있는 pagination stretch goal을 위임할 수 있습니다. + + ``` + Implement pagination on the game list page so it shows a fixed number of games per page with Previous and Next controls, and add tests. + ``` + +3. 다음 slash command를 보내 세션을 cloud agent에 넘기고, 위임할 프롬프트를 확인합니다. + + ``` + /delegate + ``` + +4. 브라우저에서 [Copilot agents](https://github.com/copilot/agents)를 열어 진행 상황을 모니터링합니다. +5. 이 harness에서는 pull request가 완료될 때까지 기다릴 필요는 없습니다. 나중에 다시 돌아와도 됩니다. 비동기 agent 작업 관리 방법을 더 깊이 알아보고 싶다면 [Cloud agent harness](../../cloud/)를 계속 진행합니다. + +## 요약 및 다음 단계 + +Copilot CLI의 slash commands를 사용하면 구성을 변경하고, 세션을 공유하고, Copilot이 내부적으로 어떻게 동작하는지에 대한 정보를 얻을 수 있습니다. 이 연습에서는 다음을 사용하거나 살펴보았습니다. + +- `/share`로 세션을 팀과 공유할 GitHub gist를 만들었습니다. +- `/context`로 Copilot CLI가 현재 사용 중인 컨텍스트를 확인했습니다. +- `/model`로 사용 가능한 모델 목록을 살펴보고 원한다면 새 모델을 선택할 수 있음을 확인했습니다. +- `/delegate`를 cloud agent로 연결하는 선택적 브리지로 학습했습니다. + +물론 더 많은 slash commands가 있으며, Copilot CLI로 탐색할 내용도 더 많습니다. 마지막으로 [학습한 내용을 검토하고][next-lesson] 학습을 계속하기 위한 다음 단계를 살펴보며 여정을 마무리하겠습니다. + +## 리소스 + +- [Copilot CLI 사용하기][using-copilot-cli] +- [Copilot CLI 소개][about-copilot-cli] +- [Copilot CLI의 컨텍스트 관리][context-management] +- [Copilot CLI로 세션 공유하기][share-sessions] +- [Copilot CLI에서 모델 선택하기][selecting-models] + +[previous-lesson]: ../6-custom-agents/ +[next-lesson]: ../8-review/ +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[about-cloud-agent]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-cloud-agent +[context-management]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#context-management +[share-sessions]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#share-sessions +[selecting-models]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#select-an-llm diff --git a/docs/ko-kr/cli/8-review.md b/docs/ko-kr/cli/8-review.md new file mode 100644 index 0000000..adb9cf9 --- /dev/null +++ b/docs/ko-kr/cli/8-review.md @@ -0,0 +1,70 @@ +--- +title: "연습 8 - 검토 및 다음 단계" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +지난 여러 연습에서 다음을 포함해 GitHub Copilot CLI의 가장 일반적인 사용 사례를 살펴보았습니다. + +- GitHub 및 다른 MCP server와 상호 작용하기 +- 지침 파일을 사용해 코드 생성을 안내하기 +- 스킬을 구현해 Copilot CLI 도구 상자에 새 도구를 추가하기 +- 고급 작업과 더 복잡한 작업을 위해 커스텀 agent 호출하기 +- slash commands를 사용해 세션을 관리하고, 선택적으로 `/delegate`를 통해 cloud agent로 다시 연결하기 + +이제 몇 가지 slash commands, 모범 사례, 다음 단계를 정리해 보겠습니다. + +## 슬래시 명령 + +Copilot CLI에는 이를 제어하거나 내부에서 무슨 일이 일어나고 있는지 확인할 수 있는 다양한 slash commands가 있습니다. 이미 현재 컨텍스트를 지우고 새 채팅을 시작하는 `/clear`, MCP server를 검사하고 관리하는 `/mcp`를 사용해 보았습니다. 추가로 유용할 수 있는 명령은 다음과 같습니다. + +| 명령 | 설명 | +| ------------------ | ------------------------------------------------------------- | +| `/add-dir` | Copilot의 신뢰 목록에 디렉터리를 추가합니다 | +| `/clear`, `/new` | 대화 기록을 지우고 새로 시작합니다 | +| `/compact` | 컨텍스트 창 사용량을 줄이기 위해 대화 기록을 요약합니다 | +| `/context` | 컨텍스트 창 token 사용량과 시각화를 보여 줍니다 | +| `/diff` | 현재 디렉터리에서 이루어진 변경 사항을 검토합니다 | +| `/model` | 사용할 AI 모델을 선택합니다(Claude Sonnet, GPT-5 등) | +| `/plan ` | 코딩 전에 구현 계획을 만듭니다 | +| `/review ` | 변경 사항을 분석하도록 코드 리뷰 agent를 실행합니다 | +| `/delegate` | 비동기 처리를 위해 작업을 Copilot cloud agent에 위임합니다 | +| `/session` | 세션 정보와 작업 공간 요약을 보여 줍니다 | +| `/share` | 세션을 markdown 파일 또는 GitHub gist로 공유합니다 | +| `/skills` | 향상된 기능을 위한 스킬을 관리합니다 | +| `/usage` | 세션 사용량 지표와 통계를 표시합니다 | + +> [!TIP] +> `/help`를 사용하면 전체 명령 목록과 keyboard shortcuts를 확인할 수 있습니다. + +## 모범 사례 + +어떤 AI 도구를 사용하든, 그 결과물의 품질은 기반 인프라에 크게 좌우됩니다. 강력한 지침 파일, 커스텀 에이전트, 에이전트 스킬은 모두 중요한 역할을 하며, 이 워크숍에서 각각을 살펴보았습니다. [awesome-copilot][awesome-copilot]은 템플릿을 찾기에 좋은 자료이며, Copilot 자체도 시작점을 마련할 수 있도록 이러한 요소를 스캐폴드해 줄 수 있습니다. + +인프라만큼이나 컨텍스트도 중요합니다. *무엇을* 만들고 싶은지, *왜* 필요한지, *어떻게* 만들고 싶은지를 명확하게 설명하면 결과가 크게 달라집니다. Copilot에 도움이 될 만한 정보라면 반드시 전달합니다. + +## 다음 단계 + +도구 사용 능력을 향상하는 가장 좋은 방법은 계속 사용하는 것입니다. 운영 코드에도, 취미 프로젝트에도, 오랫동안 마음속에 있었지만 아직 만들지 못한 작은 앱에도 사용해 봅니다. 학습한 내용을 팀과 공유하고, 팀으로부터도 배웁니다. 그리고 늘 그렇듯 문서를 계속 탐색합니다. + +GitHub Copilot 생태계를 더 살펴보고 싶다면 [VS Code harness](../../vscode/) 또는 [Cloud agent harness](../../cloud/)를 확인합니다. + +## 리소스 + +- [Copilot CLI 소개][about-copilot-cli] +- [Copilot CLI 사용하기][using-copilot-cli] +- [Awesome Copilot 리포지토리][awesome-copilot] +- [커스텀 지침 가이드][repo-instructions] +- [에이전트 스킬 문서][agent-skills] +- [커스텀 에이전트 문서][custom-agents] +- [MCP 사양][mcp-spec] + +[previous-lesson]: ../7-slash-commands/ +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli +[awesome-copilot]: https://github.com/github/awesome-copilot +[repo-instructions]: https://docs.github.com/copilot/how-tos/configure-custom-instructions/add-repository-instructions +[agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills +[custom-agents]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#use-custom-agents +[mcp-spec]: https://modelcontextprotocol.io/ diff --git a/docs/ko-kr/cli/README.md b/docs/ko-kr/cli/README.md new file mode 100644 index 0000000..82f069d --- /dev/null +++ b/docs/ko-kr/cli/README.md @@ -0,0 +1,55 @@ +--- +slug: ko-kr/cli +title: "GitHub Copilot CLI" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +[**GitHub Copilot CLI**](https://docs.github.com/copilot/concepts/agents/about-copilot-cli)는 터미널에서 GitHub Copilot을 에이전트형 코딩 도우미로 사용할 수 있게 해줍니다. 코드베이스를 탐색하고, 코드를 생성하고, 명령을 실행하고, 외부 도구에 연결하는 작업을 모두 명령줄에서 처리하므로 그래픽 편집기로 전환하지 않고도 작업 흐름을 유지할 수 있습니다. + +이 연습 전체에서 Copilot CLI를 설치하고 인증한 다음, 커스텀 지침으로 프로젝트 컨텍스트를 제공한 뒤 plan mode를 사용해 의도적으로 기능을 생성합니다. 이어서 Playwright MCP server를 연결해 실제 브라우저에서 해당 기능을 테스트하고, 재사용 가능한 agent skills와 custom agents로 Copilot을 확장합니다. 마지막으로 slash commands로 컨텍스트, 모델, 공유를 관리하는 방법을 살펴보고, 완성한 내용을 검토합니다. + +## 연습 + +| 연습 | 주제 | 설명 | +|----------|-------|-------------| +| [0. 사전 준비][ex0] | 설정 | 리포지토리(Repository)와 코드스페이스(Codespace)를 만듭니다 | +| [1. Copilot CLI 설치][ex1] | 설치 | Copilot CLI를 설치하고 인증합니다 | +| [2. 커스텀 지침][ex2] | 컨텍스트 | 지침을 추가하고 Copilot CLI가 이를 따르는 모습을 확인합니다 | +| [3. 코드 생성][ex3] | 코드 생성 | plan mode를 사용해 기능을 생성합니다 | +| [4. Playwright MCP로 테스트][ex4] | 외부 도구 | Playwright MCP server를 추가하고 브라우저에서 기능을 테스트합니다 | +| [5. 에이전트 스킬][ex5] | 스킬 | 특화된 스킬로 Copilot을 강화합니다 | +| [6. 커스텀 에이전트][ex6] | 에이전트 | 커스텀 에이전트를 검토하고 사용합니다 | +| [7. 슬래시 명령][ex7] | CLI 기능 | 컨텍스트, 모델, 공유, 그리고 선택적으로 cloud agent 위임을 살펴봅니다 | +| [8. 검토][ex8] | 요약 | 핵심 개념과 다음 단계를 검토합니다 | + +## 사전 준비 + +이 워크숍에 참여하기 전에 다음 사항을 준비합니다. + +- [ ] **Copilot Student, Pro, Pro+, Business 또는 Enterprise** 플랜이 활성화된 GitHub 계정 +- [ ] 터미널/명령줄 사용에 대한 기본 이해 +- [ ] 설치 및 구성된 Git + +> [!TIP] +> 유료 플랜이 없나요? 인증된 학생은 [GitHub Education][callout-student-plan-education]을 통해 GitHub Copilot을 무료로 사용할 수 있습니다. **Copilot Student** 플랜에는 이 워크숍에서 사용하는 agent, MCP, code review, Copilot CLI 기능이 모두 포함되어 있으므로 모든 harness를 완료할 수 있습니다. + +[callout-student-plan-education]: https://github.com/education/students + +> [!NOTE] +> Copilot Business 또는 Copilot Enterprise를 사용하는 경우, 관리자가 Copilot CLI 사용을 활성화했는지 확인합니다. + +## 시작하기 + +[**연습 0: 사전 준비부터 시작하기 →**][ex0] + +[ex0]: 0-prerequisites/ +[ex1]: 1-install-copilot-cli/ +[ex2]: 2-custom-instructions/ +[ex3]: 3-generating-code/ +[ex4]: 4-mcp/ +[ex5]: 5-agent-skills/ +[ex6]: 6-custom-agents/ +[ex7]: 7-slash-commands/ +[ex8]: 8-review/ diff --git a/docs/pt-br/README.md b/docs/pt-br/README.md index 56dd149..6e3709b 100644 --- a/docs/pt-br/README.md +++ b/docs/pt-br/README.md @@ -21,7 +21,7 @@ O GitHub Copilot acompanha você onde quer que trabalhe. Escolha o ambiente que GitHub Copilot no **Visual Studio Code** e no GitHub Codespaces. Trabalhe com o modo de agente do Copilot Chat, servidores MCP e agentes personalizados sem sair do editor que você já usa — ideal para integrar a assistência de IA diretamente ao seu IDE. -### 💻 [Copilot CLI](../cli/) +### 💻 [Copilot CLI](cli/) **GitHub Copilot CLI** — um assistente baseado em agentes que é executado no terminal. Instale-o, conecte servidores MCP, gere código com o modo de planejamento e crie suas próprias habilidades, agentes personalizados e comandos de barra, tudo pela linha de comando. diff --git a/docs/pt-br/app/8-review.md b/docs/pt-br/app/8-review.md index 704a178..384b625 100644 --- a/docs/pt-br/app/8-review.md +++ b/docs/pt-br/app/8-review.md @@ -60,7 +60,7 @@ Você percorreu o fluxo de trabalho principal. Veja outros recursos que valem a A melhor maneira de melhorar com qualquer ferramenta é continuar usando-a. Use-a em código de produção, em projetos pessoais ou naquele pequeno aplicativo que você planeja criar há anos. Compartilhe o que aprendeu com sua equipe e aprenda com as experiências dela. E, como sempre, explore a documentação. -Para conhecer melhor o ecossistema do GitHub Copilot, confira o [percurso do VS Code](../../vscode/), o [percurso do Copilot CLI](../../cli/) ou o [percurso do agente de nuvem](../../cloud/). +Para conhecer melhor o ecossistema do GitHub Copilot, confira o [percurso do VS Code](../../vscode/), o [percurso do Copilot CLI](../cli/) ou o [percurso do agente de nuvem](../../cloud/). ## Recursos diff --git a/docs/pt-br/cli/0-prerequisites.md b/docs/pt-br/cli/0-prerequisites.md new file mode 100644 index 0000000..a3ee88c --- /dev/null +++ b/docs/pt-br/cli/0-prerequisites.md @@ -0,0 +1,72 @@ +--- +title: "Lição 0: Pré-requisitos" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +Antes de começar as lições do Copilot CLI, você precisa deixar tudo pronto. Você criará sua própria cópia do repositório Tailspin Toys e iniciará um [codespace][codespaces], cujo terminal integrado será usado para instalar e executar o Copilot CLI na próxima lição. + +## Configurar o repositório do laboratório + +Para criar uma cópia do repositório para o código que você desenvolverá, crie uma instância a partir do [modelo][template-repository]. A nova instância conterá todos os arquivos necessários para o laboratório, e você a usará ao longo das lições. + +1. Em uma nova janela do navegador, acesse o repositório do GitHub deste laboratório: `https://github.com/github-samples/tailspin-toys`. +2. Crie sua própria cópia do repositório selecionando o botão **Use this template** na página do repositório do laboratório. Em seguida, selecione **Create a new repository**. + + ![Botão Use this template](../../_images/ex0-use-template.png) + +3. Se você estiver fazendo o workshop como parte de um evento conduzido pelo GitHub ou pela Microsoft, siga as instruções fornecidas pelas pessoas mentoras. Caso contrário, crie o novo repositório em uma organização na qual você tenha acesso ao GitHub Copilot. + + ![Preencha as configurações do repositório criado a partir do modelo](../../_images/ex0-repository-settings.png) + +4. Anote o caminho do repositório que você criou (**organization-or-user-name/repository-name**), pois você o usará mais adiante no laboratório. + +> [!NOTE] +> **Seu backlog já está pronto** +> +> Quando você cria o repositório a partir do modelo, um backlog de issues do GitHub é criado automaticamente. Você trabalhará com essas issues durante todo o workshop e não precisará criar nada por conta própria. + +## Criar um codespace + +Agora, você usará um codespace para concluir as lições do laboratório. + +O [GitHub Codespaces][codespaces] é um ambiente de desenvolvimento baseado em nuvem que permite escrever, executar e depurar código diretamente no navegador. Ele oferece um IDE completo com suporte a várias linguagens de programação, extensões e ferramentas. + +1. Acesse o repositório que você acabou de criar. +2. Selecione o botão verde **Code**. + + ![Selecione o botão Code](../../_images/ex0-code-button.png) + +3. Selecione a guia **Codespaces** e depois selecione o botão **+** para criar um novo codespace. + + ![Criar um novo codespace](../../_images/ex0-create-codespace.png) + +A criação do codespace levará alguns minutos, embora ainda seja muito mais rápida do que instalar todos os serviços manualmente. Enquanto isso, você pode explorar outros recursos do GitHub Copilot, que veremos a seguir. + +> [!CAUTION] +> Você voltará a esse codespace em uma lição futura. Por enquanto, mantenha-o aberto em uma guia do navegador. + +> [!NOTE] +> Este workshop foi criado para ser executado em um codespace ou em um [dev container][dev-containers] local. Ambos garantem que o ambiente tenha todos os pré-requisitos necessários instalados para uma experiência tranquila. Se preferir executar tudo localmente, abra o repositório clonado no VS Code e selecione **Reopen in Container** quando solicitado — o VS Code criará o mesmo dev container usado pelo codespace. + +[codespaces]: https://github.com/features/codespaces +[dev-containers]: https://code.visualstudio.com/docs/devcontainers/containers + +## Resumo + +Parabéns, você criou uma cópia do repositório do laboratório! Você também iniciou a criação do seu codespace, que será usado quando começar a trabalhar com o Copilot CLI. + +## Próxima etapa + +Vamos instalar o Copilot CLI e autenticá-lo com sua conta do GitHub. Continue para a [Lição 1 - Instalar o GitHub Copilot CLI][next-lesson]. + +## Recursos + +- [Visão geral do GitHub Codespaces][codespaces] +- [Criar um repositório a partir de um modelo][template-repository] +- [Introdução ao Codespaces][codespaces-quickstart] + +[template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository +[codespaces-quickstart]: https://docs.github.com/codespaces/getting-started/quickstart +[next-lesson]: ../1-install-copilot-cli/ diff --git a/docs/pt-br/cli/1-install-copilot-cli.md b/docs/pt-br/cli/1-install-copilot-cli.md new file mode 100644 index 0000000..65c00b3 --- /dev/null +++ b/docs/pt-br/cli/1-install-copilot-cli.md @@ -0,0 +1,129 @@ +--- +title: "Lição 1 - Instalar o GitHub Copilot CLI" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +O [GitHub Copilot CLI][about-copilot-cli] é um poderoso assistente de programação baseado em agentes que é executado no terminal, permitindo explorar bases de código, gerar código, executar comandos e interagir com ferramentas externas — tudo pela linha de comando. Ele permite delegar tarefas, solicitar alterações e manter o foco. Como você pode imaginar, o primeiro passo é instalar a ferramenta. Felizmente, isso pode ser feito com ferramentas que você já conhece. + +Nesta lição, você aprenderá a: + +- instalar o GitHub Copilot CLI com npm. +- autenticar com sua conta do GitHub. +- verificar a instalação. + +## Cenário + +Sua equipe está começando a usar agentes de IA para avançar em um backlog crescente. O Copilot CLI leva essa capacidade para o terminal, onde muitas pessoas desenvolvedoras já trabalham. Nesta lição, você fará a instalação, a autenticação e a configuração inicial para usá-lo no restante do workshop. + +## Abrir um terminal no codespace + +Antes de instalar o Copilot CLI, você precisa abrir uma janela de terminal no codespace. + +1. Volte ao codespace, caso ainda não esteja nele. +2. Abra uma janela de terminal pressionando Ctrl+`. +3. Você verá um painel de terminal aparecer na parte inferior da janela do VS Code. + +## Instalar o Copilot CLI + +Você pode instalar o Copilot CLI por [npm][install-npm], [WinGet][install-winget] e [Homebrew][install-homebrew]. Como o GitHub Codespaces já inclui o Node.js, você usará o npm para instalar o Copilot CLI. + +1. No terminal, confirme que o Node.js está instalado e atende ao requisito de versão: + + ```bash + node --version + ``` + + Você deve ver a versão 22 ou posterior, por exemplo `v22.x.x`. + +2. Instale o Copilot CLI globalmente no codespace com npm: + + ```bash + npm install -g @github/copilot + ``` + +3. Verifique a instalação consultando a versão: + + ```bash + copilot --version + ``` + + Você deve ver o número da versão exibido, por exemplo `v1.0.XX`. + +> [!TIP] +> Se você encontrar erros de permissão, talvez precise usar `sudo npm install -g @github/copilot` em alguns sistemas. No entanto, isso não deve ser necessário no GitHub Codespaces. + +## Autenticar com o GitHub + +Na primeira execução, o Copilot CLI solicitará que você autentique sua conta do GitHub. + +1. Inicie o Copilot CLI: + + ```bash + copilot + ``` + +2. Se você ainda não tiver feito login, verá um prompt de autenticação. O Copilot CLI exibirá um código de dispositivo e solicitará que você acesse uma URL. +3. Siga as instruções na tela: + - Abra a URL fornecida no navegador + - Insira o código do dispositivo quando solicitado + - Autorize o Copilot CLI a acessar sua conta do GitHub +4. Depois da autenticação, você verá o prompt do Copilot CLI, pronto para receber suas perguntas e comandos. + +> [!NOTE] +> Em um codespace, você talvez já esteja autenticado por meio da sua sessão do GitHub. Se o Copilot CLI iniciar sem pedir autenticação, está tudo certo. + +## Confiar no diretório e verificar se tudo funciona + +Agora que você está no prompt do Copilot CLI pela primeira vez, vamos confiar neste repositório do workshop e confirmar que o Copilot CLI está instalado e conectado corretamente. + +1. Quando o Copilot CLI pedir que você confirme que confia nos arquivos desta pasta, verá três opções: + - **Yes, proceed**: confiar apenas nesta sessão + - **Yes, and remember this folder for future sessions**: confiar permanentemente + - **No, exit (Esc)**: não permitir acesso aos arquivos +2. Neste workshop, selecione **Yes, and remember this folder for future sessions**, já que você trabalhará neste repositório ao longo de toda a atividade. +3. Faça uma pergunta simples ao Copilot para verificar se tudo funciona: + + ``` + What files are in this project? + ``` + +4. O Copilot deverá explorar o repositório e fornecer um resumo da estrutura do projeto. +5. Experimente o comando `/help` para ver os comandos de barra disponíveis: + + ``` + /help + ``` + +6. Saia do Copilot CLI digitando o comando a seguir no terminal. Voltaremos ao Copilot CLI em uma lição futura. + + ``` + exit + ``` + +## Resumo e próximos passos + +Parabéns! Você instalou e autenticou o GitHub Copilot CLI com sucesso. Você aprendeu a: + +- instalar o Copilot CLI com npm. +- autenticar com sua conta do GitHub. +- confiar em um diretório para o Copilot CLI trabalhar com ele. +- verificar se a instalação está funcionando corretamente. + +Agora que o Copilot CLI está instalado, vamos fornecer ao Copilot algum contexto sobre o projeto. Continue para a [Lição 2 - Instruções personalizadas com a CLI][next-lesson]. + +## Recursos + +- [Instalar o GitHub Copilot CLI][install-copilot-cli] +- [Sobre o Copilot CLI][about-copilot-cli] +- [Usar o Copilot CLI][using-copilot-cli] + +[previous-lesson]: ../0-prerequisites/ +[next-lesson]: ../2-custom-instructions/ +[install-copilot-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[install-npm]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-npm-all-platforms +[install-winget]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-winget-windows +[install-homebrew]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-homebrew-macos-and-linux +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli diff --git a/docs/pt-br/cli/2-custom-instructions.md b/docs/pt-br/cli/2-custom-instructions.md new file mode 100644 index 0000000..20837dc --- /dev/null +++ b/docs/pt-br/cli/2-custom-instructions.md @@ -0,0 +1,243 @@ +--- +title: "Lição 2 - Instruções personalizadas (Copilot CLI)" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +[Lição anterior: Instalar o Copilot CLI ←][previous-lesson] · [Próxima lição: Gerar código com a CLI →][next-lesson] + +O contexto é essencial ao trabalhar com IA generativa. Se uma tarefa precisar ser executada de uma maneira específica — ou se houver informações de contexto que o Copilot deva conhecer — você deve garantir que esse contexto esteja disponível. Há várias ferramentas para ajudar o Copilot, e você as explorará ao longo deste workshop. Vamos começar pelos [arquivos de instruções][instruction-files], que normalmente se concentram em como o próprio código deve ser estruturado. Isso ajuda o Copilot a entender não apenas *o que* você quer, mas também *como* o código deve ser organizado. + +Nesta lição, você irá: + +- explorar como o contexto específico do projeto, as diretrizes de programação e os padrões de documentação chegam ao Copilot por meio de instruções personalizadas do repositório e de arquivos de instrução com escopo por caminho, +- gerar a primeira parte dos dados de filtragem (um helper de editoras) com as instruções *atuais* em vigor, +- adicionar um novo padrão válido para todo o repositório em `.github/copilot-instructions.md`, +- executar um prompt de acompanhamento e observar o código regenerado adotar o novo padrão, +- fazer commit das atualizações de instruções e do helper para que a próxima lição possa se apoiar nelas. + +> [!CAUTION] +> O código gerado pode divergir de alguns dos padrões que você definir. O Copilot é não determinístico. O objetivo é observar a *tendência* de mudança de comportamento após atualizar as instruções, e não reproduzir a saída caractere por caractere. + +## Arquivos de instruções + +### Cenário + +Como toda boa equipe de desenvolvimento, a Tailspin Toys tem um conjunto de diretrizes e requisitos para as práticas de desenvolvimento. Entre eles: + +- A camada de dados sempre precisa de testes unitários. +- A interface do usuário deve usar modo escuro e ter um visual moderno. +- A documentação deve ser adicionada ao código na forma de comentários TSDoc. +- Um bloco de comentários deve ser adicionado ao início de cada arquivo para descrever o que ele faz. + +Com o uso de arquivos de instruções, você garantirá que o Copilot tenha as informações corretas para executar as tarefas de acordo com as práticas destacadas. + +### Instruções personalizadas + +As instruções personalizadas permitem fornecer contexto e preferências ao Copilot, para que ele entenda melhor seu estilo de programação e seus requisitos. Esse é um recurso poderoso para orientar o Copilot a gerar sugestões e trechos de código mais relevantes. Você pode especificar suas convenções de programação preferidas, bibliotecas e até os tipos de comentários que gosta de incluir no código. É possível criar instruções para todo o repositório ou para tipos específicos de arquivo, oferecendo contexto no nível da tarefa. + +Há dois tipos de arquivos de instruções: + +- `.github/copilot-instructions.md`, um único arquivo de instruções enviado ao Copilot em **toda** solicitação do repositório. Esse arquivo deve conter informações no nível do projeto — contexto relevante para a maioria das solicitações enviadas ao Copilot por chat ou pela CLI. Isso pode incluir a stack usada, uma visão geral do que está sendo criado, boas práticas e outras orientações globais. +- Arquivos `.github/instructions/*.instructions.md` podem ser criados para tarefas ou tipos de arquivo específicos. Você pode usá-los para fornecer orientações para determinadas linguagens, como TypeScript ou Astro, ou para tarefas como criar um componente de UI ou um novo conjunto de testes unitários. + +> [!NOTE] +> Ao trabalhar no IDE, os arquivos de instruções são usados apenas para geração de código no Copilot Chat — não para autocompletar nem para sugestões da próxima edição. +> +> O Copilot Chat, o Copilot CLI e o agente de nuvem do Copilot usam tanto os arquivos no nível do repositório quanto os arquivos `*.instructions.md` (com frontmatter `applyTo`) ao gerar código. +> +> Por fim, o Copilot [também oferece suporte a arquivos de instruções que seguem outros padrões][custom-instructions-support], incluindo arquivos `AGENTS.md` e `CLAUDE.md`. + +### Boas práticas para gerenciar arquivos de instruções + +Uma discussão completa sobre como criar arquivos de instruções está além do escopo deste workshop. Ainda assim, os exemplos fornecidos no projeto de exemplo mostram uma abordagem representativa. Em alto nível: + +- Mantenha as instruções em `copilot-instructions.md` focadas em orientações no nível do projeto, como uma descrição do que está sendo criado, a estrutura do projeto e padrões globais de programação. +- Use arquivos `*.instructions.md` para fornecer instruções específicas para tipos de arquivo (testes unitários, componentes Astro, a camada de dados) ou para tarefas específicas. +- Use linguagem natural. Mantenha as orientações claras. Forneça exemplos de como o código deve — e não deve — ser escrito. + +Não existe uma forma única de criar arquivos de instruções, assim como não existe uma forma única de usar IA. Com experimentação, você descobrirá o que funciona melhor para o seu projeto. + +> [!TIP] +> Todo projeto que usa o GitHub Copilot deveria ter uma coleção robusta de arquivos de instruções. Ao explorar os arquivos deste projeto, você pode notar que há instruções para vários tipos de tarefas, incluindo [atualizações de UI][ui-instructions] e [Astro][astro-instructions]. +> +> O Copilot também pode ajudar a gerar arquivos de instruções para você. Cada superfície expõe isso de uma forma diferente, por exemplo **Configure Chat → Generate Agent Instructions** no VS Code ou `/init` no Copilot CLI — a lição do ambiente em que você está destacará isso quando for relevante. +> +> Procura modelos ou um ponto de partida? Explore o [awesome-copilot][awesome-copilot], um repositório repleto de arquivos de instruções, agentes personalizados e outros recursos. + +[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md +[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md +[awesome-copilot]: https://github.com/github/awesome-copilot +[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support + +## Explorar os arquivos de instruções personalizadas deste projeto + +Reserve um momento para ler os arquivos de instruções incluídos neste repositório — há um `copilot-instructions.md` principal e uma coleção de arquivos `*.instructions.md` para várias tarefas. Abra-os no editor ou na interface web do GitHub. + +1. Abra `.github/copilot-instructions.md`. +2. Explore o arquivo e observe a breve descrição do projeto, além de seções como **Agent notes**, **Code standards**, **Scripts** e **Repository Structure**. Em **Code standards**, observe a orientação aninhada de **GitHub Actions Workflows**. Tudo isso se aplica a qualquer interação sua com o Copilot. +3. Abra a pasta `.github/instructions` e explore seu conteúdo. Observe que há instruções para arquivos Astro, para a camada de dados com Drizzle, para testes e muito mais. +4. Abra `.github/instructions/unit-tests.instructions.md`. Observe o campo `applyTo` no topo — ele define um glob (relativo à raiz do repositório) que determina a quais arquivos as instruções se aplicam. Aqui, qualquer arquivo de teste TypeScript, por exemplo um que corresponda a `**/*.test.ts`, será incluído. +5. Observe as instruções específicas para criar testes unitários neste projeto. +6. Por fim, abra `.github/instructions/drizzle.instructions.md` e role até o final. Observe os links para outros arquivos de instruções, como `unit-tests.instructions.md`, e para arquivos existentes no projeto. Isso permite dividir conjuntos maiores de instruções em arquivos menores e reutilizáveis, além de apontar o Copilot para exemplos a serem seguidos na geração de código. (Nesse caso, os caminhos são relativos ao arquivo de instruções, e não à raiz do repositório.) + +> [!NOTE] +> A seção **Code formatting requirements** em `copilot-instructions.md` documenta os padrões de programação do projeto, mas ainda não exige documentação no código. Nas próximas etapas, você adicionará regras para comentários TSDoc e cabeçalhos de comentário no nível do arquivo. + +## Criar uma branch + +Você fará alterações no código, então crie uma branch para trabalhar. + +1. No terminal do codespace, crie e troque para uma nova branch: + + ```bash + git checkout -b update-custom-instructions + ``` + +2. Confirme que o Copilot CLI está instalado e autenticado: + + ```bash + copilot --version + ``` + + Se o comando não for encontrado ou se você ainda não tiver feito login, volte para a [Lição 1 - Instalar o GitHub Copilot CLI](../1-install-copilot-cli/). + +## Usar o Copilot CLI *antes* de atualizar as instruções + +Para ver o impacto das instruções personalizadas, comece gerando código com as instruções atuais em vigor. Mais tarde, você atualizará o arquivo e executará um prompt de acompanhamento. + +> [!TIP] +> **Inicie uma sessão do Copilot CLI** +> +> Antes de iniciar os exercícios abaixo, volte ao codespace e abra um terminal (Ctrl+`, se ainda não houver um aberto). Em seguida, inicie o Copilot CLI com `--yolo` e `--enable-all-github-mcp-tools`: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> Para retomar a sessão mais recente deste projeto em vez de iniciar uma nova, execute `copilot --yolo --enable-all-github-mcp-tools --continue`. Se o Copilot CLI já estiver em execução por causa de uma lição anterior, envie `/clear` para começar uma conversa limpa. +> +> `--enable-all-github-mcp-tools` habilita as ferramentas GitHub MCP de leitura e escrita para a sessão atual, para que o Copilot possa ler seu backlog e abrir pull requests durante o fluxo do workshop. + +> [!CAUTION] +> `--yolo` habilita permissões automáticas completas (`--allow-all-tools`, `--allow-all-paths` e `--allow-all-urls`). Use-o apenas em um ambiente isolado, como um Codespace ou uma VM, e nunca o defina como alias padrão no seu desenvolvimento diário. Consulte [Allowing and denying tool use][allow-all-warning] para saber mais. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. Verifique se a sessão do Copilot CLI está em execução a partir da **raiz do repositório**, para que ela carregue `.github/copilot-instructions.md` automaticamente. +2. No prompt do Copilot CLI, peça que ele gere o helper de editoras que a UI de filtragem usará: + + ```plaintext + Create a new data-access helper at src/lib/publishers.ts to return a list of all publishers. It should return the name and id for all publishers. Do not run the tests yet. + ``` + +3. O Copilot CLI explorará o projeto, proporá um plano e escreverá o arquivo nesta sessão com `--yolo`. Acompanhe as alterações na saída do terminal e depois revise o resultado no editor. +4. Abra no editor o arquivo gerado `src/lib/publishers.ts`. +5. Observe que o helper é uma função tipada que recebe um cliente `db` como primeiro argumento e retorna um array tipado de editoras — isso vem das convenções da camada de dados em `.github/instructions/drizzle.instructions.md` (que se aplica a `src/lib/*.ts`). +6. Observe que no código gerado **faltam** comentários TSDoc e um cabeçalho de comentário no nível do arquivo. + +> [!CAUTION] +> O Copilot é probabilístico — há uma chance de ele adicionar comentários de documentação mesmo sem receber essa instrução. Se isso acontecer, tudo bem. O principal aprendizado continua sendo a melhora de *consistência* depois da atualização das instruções. + +## Adicionar um novo padrão ao repositório + +Como destacado anteriormente, `.github/copilot-instructions.md` foi criado para fornecer informações no nível do projeto ao Copilot. Vamos garantir que os padrões de programação do repositório estejam documentados para melhorar as sugestões de código. + +1. Abra novamente `.github/copilot-instructions.md`. +2. Localize a seção **Code formatting requirements**, que deve estar perto da linha 27. Observe como ela documenta os padrões de programação do projeto, mas ainda não traz nenhuma regra para documentação no código, e é por isso que o helper gerado não tinha comentários de documentação. +3. Adicione as linhas de markdown a seguir logo abaixo dos padrões existentes para instruir o Copilot a incluir cabeçalhos de comentário no arquivo e comentários TSDoc: + + ```markdown + - Every exported function should have a TSDoc comment describing its purpose, parameters, and return value. + - Before imports or any code, add a comment block to the file that explains its purpose. + ``` + +4. Salve `copilot-instructions.md`. + +> [!TIP] +> Como você viu na lição anterior, arquivos de instruções podem ser criados no nível do repositório (`.github/copilot-instructions.md`) para orientações globais, ou como arquivos `*.instructions.md` para linguagens, tipos de arquivo ou tarefas específicas. O arquivo do repositório é o local certo para padrões válidos em todo o projeto, como a regra de comentários de documentação que você acabou de adicionar. + +## Executar o prompt novamente e observar a mudança + +Agora que as instruções incluem uma regra para comentários de documentação, peça ao Copilot CLI para atualizar o arquivo de editoras que você acabou de gerar. A mesma diretriz de padrões orientará a reescrita. + +1. Envie `/clear` na sessão do Copilot CLI para começar com uma conversa limpa. +2. Envie o prompt a seguir: + + ```plaintext + Update src/lib/publishers.ts to follow the latest documentation conventions in .github/copilot-instructions.md. + ``` + +3. Aguarde a edição terminar e depois abra novamente `src/lib/publishers.ts`. +4. Observe que o arquivo agora começa com um bloco de comentários parecido com este: + + ```typescript + /** + * Helpers de acesso a dados de editoras para a plataforma de financiamento coletivo Tailspin Toys. + * Fornece funções para recuperar informações de editoras do banco de dados. + */ + ``` + +5. Observe que a função gerada agora inclui um comentário TSDoc parecido com este: + + ```typescript + /** + * Retorna uma lista de todas as editoras com id e nome. + * + * @param db - O cliente de banco de dados Drizzle. + * @returns Uma promessa que resolve para um array de objetos de editora. + */ + ``` + +6. Mantenha esse arquivo atualizado como está. Essa é a primeira parte dos dados em que você se apoiará na próxima lição. + +## Fazer commit e push desta primeira parte da filtragem + +1. No terminal, verifique os arquivos alterados: + + ```bash + git status + ``` + +2. Adicione a atualização das instruções e o helper à área de stage: + + ```bash + git add .github/copilot-instructions.md src/lib/publishers.ts + ``` + +3. Faça commit das alterações: + + ```bash + git commit -m "Add doc comment standards and publishers helper foundation" + ``` + +4. Envie a branch: + + ```bash + git push -u origin update-custom-instructions + ``` + +## Resumo e próximos passos + +Você explorou como o Copilot recebe contexto dos arquivos de instruções deste projeto e depois usou o Copilot CLI para: + +- gerar a base de um helper de acesso a dados de editoras para a filtragem com as instruções *existentes*, +- adicionar um novo padrão válido para todo o repositório em `.github/copilot-instructions.md`, +- executar um prompt de acompanhamento e observar o código regenerado adotar o novo padrão, +- fazer commit e push tanto da atualização das instruções quanto da base do helper. + +Em seguida, você aplicará essas instruções ao implementar trabalho do backlog na [lição de geração de código][next-lesson]. + +## Recursos + +- [Arquivos de instruções para personalização do GitHub Copilot][instruction-files] +- [Boas práticas para criar instruções personalizadas][instructions-best-practices] +- [5 dicas para escrever instruções personalizadas melhores para o Copilot][copilot-instructions-five-tips] +- [Awesome Copilot — uma coleção de arquivos de instruções e outros recursos][awesome-copilot] + +[previous-lesson]: ../1-install-copilot-cli/ +[next-lesson]: ../3-generating-code/ +[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses +[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository +[copilot-instructions-five-tips]: https://github.blog/ai-and-ml/github-copilot/5-tips-for-writing-better-custom-instructions-for-copilot/ diff --git a/docs/pt-br/cli/3-generating-code.md b/docs/pt-br/cli/3-generating-code.md new file mode 100644 index 0000000..a2427ac --- /dev/null +++ b/docs/pt-br/cli/3-generating-code.md @@ -0,0 +1,99 @@ +--- +title: "Lição 3 - Adicionar recursos ao projeto com o GitHub Copilot CLI" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +Como você pode imaginar, uma das principais tarefas realizadas com o GitHub Copilot CLI é adicionar recursos, funcionalidades e código a um projeto. Vamos pegar uma das issues do seu backlog e pedir ao Copilot que ajude a implementá-la. + +## Cenário + +Chegou a hora de concluir a filtragem no projeto. Você já tem a issue de filtragem no backlog e um helper de base da lição anterior. Vamos fazer o Copilot recuperar os detalhes da issue, considerar o trabalho existente e criar a funcionalidade restante. + +Nesta lição, você irá: + +- usar o modo plan para gerar um plano de implementação da funcionalidade de filtragem. +- gerar o código necessário para adicionar a filtragem ao site com o Copilot. + +Ao final desta lição, você terá adicionado uma nova funcionalidade ao projeto. + +## Usar o modo plan + +Um dos melhores usos da IA é o planejamento. Muitas vezes, você tem uma boa ideia do que quer criar, mas só precisa trocar algumas ideias. Ferramentas de IA podem ajudar a organizar melhor o raciocínio ao fazer perguntas de acompanhamento e analisar diferentes armadilhas ou componentes ausentes. Para apoiar esse processo, o Copilot CLI oferece um modo plan. Além disso, o tempo dedicado ao planejamento ajudará o Copilot a gerar um código que corresponda melhor aos requisitos definidos. + +Você iniciará o processo de criação da nova funcionalidade usando o modo plan no Copilot CLI. + +> [!TIP] +> **Inicie uma sessão do Copilot CLI** +> +> Antes de iniciar os exercícios abaixo, volte ao codespace e abra um terminal (Ctrl+`, se ainda não houver um aberto). Em seguida, inicie o Copilot CLI com `--yolo` e `--enable-all-github-mcp-tools`: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> Para retomar a sessão mais recente deste projeto em vez de iniciar uma nova, execute `copilot --yolo --enable-all-github-mcp-tools --continue`. Se o Copilot CLI já estiver em execução por causa de uma lição anterior, envie `/clear` para começar uma conversa limpa. +> +> `--enable-all-github-mcp-tools` habilita as ferramentas GitHub MCP de leitura e escrita para a sessão atual, para que o Copilot possa ler seu backlog e abrir pull requests durante o fluxo do workshop. + +> [!CAUTION] +> `--yolo` habilita permissões automáticas completas (`--allow-all-tools`, `--allow-all-paths` e `--allow-all-urls`). Use-o apenas em um ambiente isolado, como um Codespace ou uma VM, e nunca o defina como alias padrão no seu desenvolvimento diário. Consulte [Allowing and denying tool use][allow-all-warning] para saber mais. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. Digite o prompt a seguir no Copilot CLI para criar um plano com base na issue de filtragem: + + ``` + /plan Retrieve the issue on the repository related to adding filtering. We already added a publishers helper in src/lib/publishers.ts, so treat that as existing work and plan the remaining updates (games filtering logic, UI, and tests). + ``` + +2. O Copilot pode fazer perguntas de acompanhamento enquanto monta o plano. Quando isso acontecer, responda com base em como você implementaria a funcionalidade. +3. Quando o plano for gerado, revise o esboço. Você deverá notar que ele recomenda as mudanças restantes na camada de dados e na interface, além da geração de testes. +4. O Copilot CLI oferecerá a opção de fornecer feedback adicional sobre o plano. Você pode mover o cursor para baixo até a seção indicada e então digitar suas sugestões. O Copilot incorporará suas observações em uma nova versão do plano. +5. Quando estiver satisfeito, selecione a opção oferecida pelo Copilot para começar a criar o novo recurso. + +> [!NOTE] +> Como o Copilot é probabilístico, o texto exato e as opções apresentadas variam. Ainda assim, você verá uma opção para iniciar a implementação semelhante a: +> +> `Yes, and switch to autopilot mode`. +> +> O Copilot pode oferecer a opção de habilitar o [autopilot mode](https://docs.github.com/copilot/concepts/agents/copilot-cli/autopilot), como mostrado no exemplo acima. O modo autopilot permite que o Copilot CLI avance em uma tarefa sem esperar sua entrada após cada etapa. Depois que você fornece a instrução inicial, o Copilot CLI trabalha de forma autônoma em cada etapa até considerar a tarefa concluída. Como estamos em um ambiente isolado, não há problema em usar o autopilot e permitir todas as ferramentas. + +6. O Copilot começará a gerar os arquivos. + +> [!NOTE] +> Essa operação provavelmente levará vários minutos. Você verá o Copilot editar e criar arquivos, atualizar e gerar testes e executar todos os testes para garantir que tudo funcione. Este é um bom momento para refletir sobre o que você explorou até aqui ou aproveitar uma bebida. + +## Revisar o código + +Todo código gerado por IA deve ser revisado antes de ser enviado para produção. Vamos aproveitar este momento para explorar os arquivos que o Copilot criou e modificou ao implementar o novo recurso. + +1. Use o Copilot CLI para exibir o diff ou as alterações de código usando o comando a seguir no Copilot CLI: + + ``` + /diff + ``` + +2. Observe quais arquivos foram alterados. Use as setas do teclado para alternar entre eles. Você deverá ver atualizações em arquivos como a página de listagem de jogos, onde ficam os novos controles de filtro e a filtragem no cliente, além de `src/lib/games.ts` e testes como `games.test.ts`. Também pode haver atualizações em `publishers.ts` se o Copilot refinar o helper existente para alinhá-lo à implementação completa. + +## Resumo e próximos passos + +Agora você adicionou a funcionalidade de filtragem ao site com a ajuda do Copilot CLI. Em especial, você: + +- usou o modo plan para gerar um plano de implementação da funcionalidade de filtragem. +- gerou o código necessário para adicionar a filtragem ao site com o Copilot. + +Claro, o próximo passo é garantir que tudo funcione. Vamos [testar o recurso com o servidor MCP do Playwright][next-lesson] antes de abrir um pull request. + +## Recursos + +- [Usar o Copilot CLI][using-copilot-cli] +- [Sobre o Copilot CLI][about-copilot-cli] +- [Gerenciamento de contexto no Copilot CLI][context-management] + +[previous-lesson]: ../2-custom-instructions/ +[next-lesson]: ../4-mcp/ +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[context-management]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#context-management diff --git a/docs/pt-br/cli/4-mcp.md b/docs/pt-br/cli/4-mcp.md new file mode 100644 index 0000000..a644eec --- /dev/null +++ b/docs/pt-br/cli/4-mcp.md @@ -0,0 +1,160 @@ +--- +title: "Lição 4 - Testar seu recurso com o servidor MCP do Playwright" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +Você acabou de gerar o recurso de filtragem com o Copilot CLI. Antes de abrir um pull request, confirme que tudo funciona no navegador. Em vez de testar o aplicativo manualmente, você conectará o **servidor MCP do Playwright** e deixará o Copilot controlar um navegador real para testar o recurso. + +Nesta lição, você irá: + +- entender o que é o Model Context Protocol (MCP) e como os servidores MCP ampliam o Copilot CLI. +- adicionar o servidor MCP do Playwright ao Copilot CLI. +- pedir ao Copilot que o use para testar manualmente o recurso de filtragem em um navegador. + +## O que é o Model Context Protocol (MCP)? + +O [Model Context Protocol (MCP)](https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/) fornece aos agentes de IA uma maneira de se comunicar com ferramentas e serviços externos. Ao usar o MCP, agentes de IA podem se comunicar com ferramentas e serviços externos em tempo real. Isso permite acessar informações atualizadas, por meio de recursos, e executar ações em seu nome, por meio de ferramentas. + +Essas ferramentas e esses recursos são acessados por um servidor MCP, que atua como ponte entre o agente de IA e as ferramentas e serviços externos. O servidor MCP é responsável por gerenciar a comunicação entre o agente de IA e as ferramentas externas, como APIs existentes ou ferramentas locais, como pacotes NPM. Cada servidor MCP representa um conjunto diferente de ferramentas e recursos que o agente de IA pode acessar. + +Alguns servidores MCP populares são: + +- **[GitHub MCP Server](https://github.com/github/github-mcp-server)**: este servidor fornece acesso a um conjunto de APIs para gerenciar seus repositórios do GitHub. Ele permite que o agente de IA execute ações como criar novos repositórios, atualizar os existentes e gerenciar issues e pull requests. +- **[Playwright MCP Server](https://github.com/microsoft/playwright-mcp)**: este servidor fornece automação de navegador com Playwright. Ele permite que o agente de IA execute ações como navegar por páginas web, preencher formulários e selecionar botões. + +Há muitos outros servidores MCP disponíveis que fornecem acesso a diferentes ferramentas e recursos. O GitHub mantém um [registro MCP](https://github.com/mcp) para facilitar a descoberta e a contribuição para o ecossistema. + +> [!CAUTION] +> Em termos de segurança, trate servidores MCP como qualquer outra dependência do projeto. Antes de usar um servidor MCP, revise o código-fonte com cuidado, verifique quem o publicou e considere as implicações de segurança. Use apenas servidores MCP em que você confie e tenha cautela ao conceder acesso a recursos ou operações sensíveis. + +> [!NOTE] +> O [GitHub MCP server][github-mcp-server] já vem **integrado** ao Copilot CLI — ele já está disponível sem configuração, e é assim que o Copilot vem lendo e escrevendo no seu repositório ao longo do workshop. Nesta lição, você adicionará um *segundo* servidor, o Playwright, para dar ao Copilot acesso a um navegador. + +## Adicionar o servidor MCP do Playwright + +A forma mais rápida de adicionar um servidor é com o comando interativo `/mcp add`. Você registrará o [Playwright MCP server][playwright-mcp-server], que dá ao Copilot um navegador que ele pode controlar. + +> [!TIP] +> **Inicie uma sessão do Copilot CLI** +> +> Antes de iniciar os exercícios abaixo, volte ao codespace e abra um terminal (Ctrl+`, se ainda não houver um aberto). Em seguida, inicie o Copilot CLI com `--yolo` e `--enable-all-github-mcp-tools`: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> Para retomar a sessão mais recente deste projeto em vez de iniciar uma nova, execute `copilot --yolo --enable-all-github-mcp-tools --continue`. Se o Copilot CLI já estiver em execução por causa de uma lição anterior, envie `/clear` para começar uma conversa limpa. +> +> `--enable-all-github-mcp-tools` habilita as ferramentas GitHub MCP de leitura e escrita para a sessão atual, para que o Copilot possa ler seu backlog e abrir pull requests durante o fluxo do workshop. + +> [!CAUTION] +> `--yolo` habilita permissões automáticas completas (`--allow-all-tools`, `--allow-all-paths` e `--allow-all-urls`). Use-o apenas em um ambiente isolado, como um Codespace ou uma VM, e nunca o defina como alias padrão no seu desenvolvimento diário. Consulte [Allowing and denying tool use][allow-all-warning] para saber mais. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. Na sua sessão do Copilot CLI, digite: + + ```text + /mcp add + ``` + +2. Um formulário de configuração será exibido. Use Tab para mover entre os campos e preencha-o assim: + + - **Server Name**: `playwright` + - **Server Type**: selecione **Local** (também rotulado como **STDIO**) + - **Command**: `npx @playwright/mcp@latest --headless` + - **Tools**: deixe `*` para permitir todas as ferramentas do servidor + +3. Pressione Ctrl+S para salvar. O servidor será adicionado e ficará disponível imediatamente — não é necessário reiniciar. + +A flag `--headless` instrui o Playwright a executar o navegador sem janela visível, o que é necessário em um codespace, onde não existe uma área de trabalho para exibição. Nos bastidores, isso grava o servidor no arquivo `~/.copilot/mcp-config.json`: + +```json +{ + "mcpServers": { + "playwright": { + "type": "local", + "command": "npx", + "args": ["@playwright/mcp@latest", "--headless"], + "tools": ["*"] + } + } +} +``` + +4. Confirme que o servidor está registrado e ativo listando seus servidores MCP: + + ```text + /mcp show + ``` + +5. Você deverá ver `playwright` listado ao lado do servidor interno `github`. + +> [!NOTE] +> O projeto Tailspin Toys já usa o Playwright para testes de ponta a ponta, então o navegador de que o Playwright precisa normalmente já está instalado. Se mais tarde o Copilot informar que falta um navegador, peça que ele execute `npx playwright install chromium` e tente novamente. + +## Iniciar o site + +O servidor MCP do Playwright precisa de um aplicativo em execução para testar. Inicie o servidor de desenvolvimento do Astro em um **terminal separado** para que ele continue em execução enquanto você trabalha no Copilot CLI. + +1. Abra um novo terminal no codespace pressionando Ctrl+`. +2. Inicie o site: + + ```bash + npm run dev + ``` + +3. Deixe esse terminal em execução. Quando você vir o banner `Astro server: http://localhost:4321`, o aplicativo estará pronto. + +## Testar o recurso de filtragem + +Volte à sessão do Copilot CLI e peça ao Copilot para testar o recurso. + +O [Playwright MCP server][playwright-mcp-server] dá ao Copilot um navegador real para controlar. Em vez de você verificar manualmente o aplicativo, o agente pode abrir uma página, navegar, aplicar filtros e informar o resultado — depois resumir o que viu. Essa é a maneira mais rápida de confirmar que um recurso se comporta como esperado sem sair da conversa. + +Internamente, o servidor MCP do Playwright trabalha a partir da [árvore de acessibilidade][playwright-mcp-server] da página, em vez de usar capturas de tela. Isso significa que o agente raciocina sobre elementos estruturados e rotulados, como botões, links e itens de lista, da mesma forma que tecnologias assistivas fazem. Assim, uma verificação funcional rápida também funciona como uma checagem básica de acessibilidade. + +Com o servidor conectado e o aplicativo em execução, peça ao Copilot para exercitar o recurso de filtragem que você acabou de criar: + +```text +Using the Playwright MCP server, open a browser to the running app at http://localhost:4321 and verify the new game filtering feature: + +1. Go to the games page and note how many games are listed. +2. Apply a category filter and confirm the list updates to only show games in that category. +3. Clear it, then apply a publisher filter and confirm the list updates to that publisher. +4. Combine a category and a publisher filter and confirm the results respect both. + +Report what you observe at each step, and call out anything that does not behave as expected. +``` + +O Copilot iniciará um navegador por meio do servidor MCP do Playwright, executará cada etapa e informará o que encontrou. Leia o resumo em comparação com os critérios de aceitação da issue. Se algo parecer incorreto, faça perguntas de acompanhamento ou peça que ele corrija o código antes de abrir um pull request. + +> [!NOTE] +> O aplicativo precisa estar em execução em `http://localhost:4321` para este teste. Se você tiver parado o servidor de desenvolvimento, inicie-o novamente antes de enviar o prompt. Na primeira vez em que o Copilot usar o servidor MCP do Playwright, talvez seja necessário baixar um navegador. Se ele informar que falta um navegador, peça que execute `npx playwright install chromium` e tente novamente. + +[playwright-mcp-server]: https://github.com/microsoft/playwright-mcp + +## Resumo e próximos passos + +Parabéns, você usou o servidor MCP do Playwright para testar manualmente o recurso com o Copilot CLI. Para recapitular, você: + +- aprendeu o que é o Model Context Protocol (MCP) e como os servidores MCP ampliam o Copilot CLI. +- adicionou o servidor MCP do Playwright com `/mcp add`. +- pediu ao Copilot que controlasse um navegador e verificasse o recurso de filtragem antes da entrega. + +Agora que você confirmou que o recurso funciona, pode continuar para a próxima lição, na qual [abrirá um pull request com a ajuda de uma skill de agente][next-lesson]. + +## Recursos + +- [O que é MCP e por que todo mundo está falando sobre isso?][mcp-blog-post] +- [Servidor MCP do Microsoft Playwright][playwright-mcp-server] +- [Adicionar servidores MCP ao Copilot CLI][cli-add-mcp] +- [Servidor MCP do GitHub][github-mcp-server] + +[previous-lesson]: ../3-generating-code/ +[next-lesson]: ../5-agent-skills/ +[mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/ +[github-mcp-server]: https://github.com/github/github-mcp-server +[cli-add-mcp]: https://docs.github.com/copilot/how-tos/copilot-cli/customize-copilot/add-mcp-servers diff --git a/docs/pt-br/cli/5-agent-skills.md b/docs/pt-br/cli/5-agent-skills.md new file mode 100644 index 0000000..a6f558d --- /dev/null +++ b/docs/pt-br/cli/5-agent-skills.md @@ -0,0 +1,123 @@ +--- +title: "Lição 5 - Usar skills de agente" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +No desenvolvimento de aplicativos, é comum lidar com tarefas repetíveis, como gerar builds, executar testes ou criar pull requests. **Agent Skills** permitem orientar o Copilot — e outros agentes de IA — sobre como executar essas tarefas. Uma skill é uma pasta de instruções, scripts e recursos que o agente pode carregar sob demanda. O [Agent Skills][agent-skills-repo] é um padrão aberto usado por uma variedade de agentes, portanto a mesma skill pode funcionar no Copilot Chat em modo agente, no agente de nuvem do Copilot, no Copilot CLI e no aplicativo GitHub Copilot. + +As skills ficam na pasta `.github/skills` de um projeto, ou globalmente em `~/.copilot/skills`. Cada skill é uma pasta que contém um arquivo `SKILL.md` com frontmatter YAML, incluindo `name` e `description`, seguido das instruções em markdown: + +```yaml +--- +name: make-contribution +description: All changes to code must follow the guidance documented in the repository. Before any issue is filed, branch is made, commits generated, or pull request (or PR) created, a search must be done to ensure the right steps are followed. Whenever asked to create an issue, commit messages, to push code, or create a PR, use this skill so everything is done correctly. +--- +``` + +As skills também podem incluir subpastas com scripts, assets e material de referência. A estrutura completa é abordada na [especificação de Agent Skills][agent-skills-spec]. + +> [!TIP] +> As skills são carregadas dinamicamente. O agente decide qual skill se aplica com base no campo `description` — uma descrição clara e específica para o cenário é o que diferencia uma skill usada de uma skill ignorada. + +[agent-skills-repo]: https://github.com/agentskills/agentskills +[agent-skills-spec]: https://agentskills.io/specification + +Vamos explorar como uma skill pode garantir que pull requests sigam as especificações definidas pela equipe. + +## Cenário + +A equipe tem um conjunto de requisitos para pull requests (PR): + +- mensagens de commit claras, com arquivos agrupados de forma lógica. +- todos os testes devem passar antes da criação de um PR. +- cada PR deve conter as seções a seguir: + - uma descrição do motivo das alterações. + - uma visão geral dos arquivos alterados. + - trechos de blocos de código importantes. + - detalhes das alterações agrupados de forma coerente. + +Como a equipe está usando o Copilot para gerar código e PRs, ela quer garantir que as ferramentas de IA sigam esses requisitos. + +Nesta lição, você irá: + +- explorar uma skill existente para criar pull requests. +- aprender como as skills são usadas pelo agente de IA. +- criar um PR que siga as diretrizes com a ajuda da skill. + +## Executar skills + +As skills são carregadas dinamicamente quando o agente determina que elas são necessárias. A decisão sobre quais skills usar é guiada pela descrição no arquivo `SKILL.md`. Por isso, é importante ter descrições claras que definam o caso de uso da skill. + +## Explorar a skill de PR + +Como a Tailspin Toys tem um conjunto de requisitos para criar PRs, ela criou uma skill para ajudar ferramentas de IA a gerar PRs que sigam essas diretrizes. Vamos explorar a skill para entender o que ela fará. + +1. Abra `.github/skills/make-contribution/SKILL.md`. +2. Observe o nome e a descrição. Perceba como a descrição destaca o cenário em que a skill deve ser usada, isto é, sempre que houver uma solicitação para criar um pull request ou fazer commit de código. +3. Leia a skill inteira. Observe como as regras definem a criação de branches, a geração de commits e o conteúdo do pull request. + +## Usar a skill + +Como destacado anteriormente, as skills são invocadas automaticamente pelo Copilot CLI. Portanto, basta pedir que o Copilot crie um PR. + +> [!TIP] +> **Inicie uma sessão do Copilot CLI** +> +> Antes de iniciar os exercícios abaixo, volte ao codespace e abra um terminal (Ctrl+`, se ainda não houver um aberto). Em seguida, inicie o Copilot CLI com `--yolo` e `--enable-all-github-mcp-tools`: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> Para retomar a sessão mais recente deste projeto em vez de iniciar uma nova, execute `copilot --yolo --enable-all-github-mcp-tools --continue`. Se o Copilot CLI já estiver em execução por causa de uma lição anterior, envie `/clear` para começar uma conversa limpa. +> +> `--enable-all-github-mcp-tools` habilita as ferramentas GitHub MCP de leitura e escrita para a sessão atual, para que o Copilot possa ler seu backlog e abrir pull requests durante o fluxo do workshop. + +> [!CAUTION] +> `--yolo` habilita permissões automáticas completas (`--allow-all-tools`, `--allow-all-paths` e `--allow-all-urls`). Use-o apenas em um ambiente isolado, como um Codespace ou uma VM, e nunca o defina como alias padrão no seu desenvolvimento diário. Consulte [Allowing and denying tool use][allow-all-warning] para saber mais. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. Peça que o Copilot crie um PR usando o prompt a seguir: + + ``` + Can you please create a pull request for me! + ``` + +2. O Copilot reconhecerá a solicitação. Após alguns instantes, você verá o Copilot indicar que está usando a skill **make-contribution**. + + ![Captura de tela da skill de agente sendo chamada pelo Copilot CLI](../../_images/cli-5-agent-skill.png) + +3. O Copilot seguirá as instruções da skill. Ele começará executando os testes, depois criará uma branch, fará commits e, por fim, abrirá o PR. +4. Quando o PR for criado, volte ao repositório e abra-o. Observe como as seções seguem as diretrizes definidas na skill e atendem aos requisitos da equipe. +5. Antes de passar para a próxima lição, redefina seu workspace local para uma branch nova criada a partir de `main`, para manter o trabalho de acessibilidade separado deste PR de filtragem: + + ```bash + git checkout main + git pull + git checkout -b accessibility-cli + ``` + +## Resumo e próximos passos + +Com a ajuda de uma skill de agente, você criou um novo PR que segue requisitos documentados. Você: + +- explorou uma skill existente para criar pull requests. +- aprendeu como as skills são usadas pelo agente de IA. +- criou um PR que segue as diretrizes com a ajuda da skill. + +As skills são perfeitas para tarefas, mas, para operações mais robustas, vale aproveitar [agentes personalizados][next-lesson], que serão o próximo tópico. + +## Recursos + +- [Sobre Agent Skills][about-agent-skills] +- [Especificação de Agent Skills][agent-skills-spec] +- [Repositório Agent Skills][agent-skills-repo] +- [Agent Skills no awesome-copilot][awesome-copilot-skills] + +[previous-lesson]: ../4-mcp/ +[next-lesson]: ../6-custom-agents/ +[about-agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills +[awesome-copilot-skills]: https://github.com/github/awesome-copilot/tree/main/skills diff --git a/docs/pt-br/cli/6-custom-agents.md b/docs/pt-br/cli/6-custom-agents.md new file mode 100644 index 0000000..e4705cf --- /dev/null +++ b/docs/pt-br/cli/6-custom-agents.md @@ -0,0 +1,116 @@ +--- +title: "Lição 6 - Agentes personalizados com o GitHub Copilot CLI" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +## O que são agentes personalizados? + +[Agentes personalizados][custom-agents-concept] no GitHub Copilot permitem criar assistentes de IA especializados e adaptados a tarefas ou domínios específicos do seu fluxo de desenvolvimento. Ao definir agentes por meio de arquivos markdown na pasta `.github/agents` do repositório, você fornece ao Copilot instruções direcionadas, boas práticas, padrões de código e conhecimento específico do domínio para orientá-lo a executar determinados tipos de trabalho com mais eficácia. As equipes podem transformar sua experiência em agentes reutilizáveis — um agente de acessibilidade que aplica conformidade com a [WCAG][wcag], um agente de segurança que segue práticas de programação segura ou um agente de testes que mantém padrões consistentes. + +Agentes personalizados são definidos por arquivos markdown na pasta `.github/agents` do projeto, ou globalmente em `~/.copilot/agents`. Cada arquivo tem frontmatter YAML com pelo menos `name` e `description`, seguido de um prompt em markdown que define o comportamento, a especialização e as instruções do agente. + +### Agentes personalizados em comparação com skills de agente + +Há alguma sobreposição lógica entre agentes personalizados e [skills de agente][agent-skills-concept]. Ambos são definidos principalmente com arquivos markdown e dizem à IA como executar operações. A forma mais clara de diferenciá-los é: um **agente personalizado** é o executor, e as **skills** são ferramentas. + +Agentes personalizados têm sua própria janela de contexto e são criados para orquestrar skills, e até outros agentes, como parte do trabalho. Neste laboratório, o agente personalizado de acessibilidade revisa e atualiza o site com base em diretrizes de acessibilidade; como parte desse trabalho, ele poderia chamar skills como uma skill de fluxo de pull request ou outra que execute e gerencie testes. + +> [!NOTE] +> Não existe uma única forma "correta" de criar um agente personalizado. Como em qualquer coisa relacionada à IA, teste e itere para descobrir o que funciona melhor nos seus ambientes e cenários. + +[custom-agents-concept]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-custom-agents +[agent-skills-concept]: https://docs.github.com/copilot/concepts/agents/about-agent-skills +[wcag]: https://www.w3.org/WAI/standards-guidelines/wcag/ + +## Cenário + +Muitos aplicativos web ainda não são acessíveis para todas as pessoas usuárias, e o site em que você está trabalhando não é exceção. Você usará um agente personalizado para identificar e corrigir problemas de acessibilidade. + +A Tailspin Toys está comprometida em garantir que sua plataforma de financiamento coletivo seja acessível a todas as pessoas usuárias, independentemente de suas capacidades visuais ou preferências. Comentários recentes de usuários destacaram que algumas pessoas têm dificuldade para ler o tema escuro atual por causa do contraste insuficiente entre as cores de texto e de fundo. Para tratar essa preocupação de acessibilidade, a equipe de design solicitou a implementação de um modo de alto contraste que usuários possam ativar e desativar. + +Como a acessibilidade é crítica, você quer garantir que isso seja implementado o mais rápido possível. Você usará um agente personalizado para gerar essa funcionalidade. + +Nesta lição, você irá: + +- explorar agentes personalizados. +- habilitar um agente personalizado e atribuir uma tarefa a ele usando o Copilot CLI. + +## Revisar o agente personalizado de acessibilidade + +Um agente personalizado de acessibilidade já foi criado para você. Vamos revisar o conteúdo para entender como ele orientará o Copilot. + +1. Abra `.github/agents/accessibility.md`. +2. Observe o frontmatter YAML com os campos `name` e `description`. + +> [!CAUTION] +> O frontmatter com `name` e `description` é obrigatório para agentes personalizados. + +3. A partir daí, revise as seções seguintes, que destacam: + - responsabilidades principais ao gerar código para um site acessível. + - boas práticas de acessibilidade. + - exemplos de código em HTML, CSS e JavaScript. + - uma lista de armadilhas e erros comuns. + +## Usar um agente personalizado no Copilot CLI + +Você pode iniciar um agente personalizado no Copilot CLI com o comando `/agent`. Vamos fazer uma revisão de acessibilidade no site. + +> [!TIP] +> **Inicie uma sessão do Copilot CLI** +> +> Antes de iniciar os exercícios abaixo, volte ao codespace e abra um terminal (Ctrl+`, se ainda não houver um aberto). Em seguida, inicie o Copilot CLI com `--yolo` e `--enable-all-github-mcp-tools`: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> Para retomar a sessão mais recente deste projeto em vez de iniciar uma nova, execute `copilot --yolo --enable-all-github-mcp-tools --continue`. Se o Copilot CLI já estiver em execução por causa de uma lição anterior, envie `/clear` para começar uma conversa limpa. +> +> `--enable-all-github-mcp-tools` habilita as ferramentas GitHub MCP de leitura e escrita para a sessão atual, para que o Copilot possa ler seu backlog e abrir pull requests durante o fluxo do workshop. + +> [!CAUTION] +> `--yolo` habilita permissões automáticas completas (`--allow-all-tools`, `--allow-all-paths` e `--allow-all-urls`). Use-o apenas em um ambiente isolado, como um Codespace ou uma VM, e nunca o defina como alias padrão no seu desenvolvimento diário. Consulte [Allowing and denying tool use][allow-all-warning] para saber mais. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. Abra a lista de agentes digitando `/agent` na janela de prompt do Copilot CLI e pressionando Enter. +2. Selecione o **Accessibility agent** na lista de agentes disponíveis. +3. Use o prompt a seguir para pedir que o agente de acessibilidade faça uma revisão e gere correções para o item de backlog relacionado à acessibilidade: + + ``` + Perform an accessibility review of the site. Pull the related issue down from the repository for details. Implement a high-contrast mode toggle that persists the user's preference across page reloads. Ensure there are e2e tests for any updates made to the project. Then create a PR with the updates. + ``` + +4. O Copilot começará a trabalhar na tarefa. Ele recuperará a issue, fará a revisão, gerará as atualizações e, por fim, criará o PR. Você também deve notar que, ao criar o PR, ele usa a skill do projeto voltada a pull requests. + +> [!NOTE] +> Esse processo provavelmente levará alguns minutos. É um bom momento para refletir sobre tudo o que você aprendeu, aproveitar uma bebida ou adiantar a próxima lição, que apresenta alguns comandos adicionais disponíveis no Copilot CLI. + +## Resumo e próximos passos + +Esta lição explorou [agentes personalizados][custom-agents] no GitHub Copilot, assistentes de IA especializados e adaptados a tarefas e domínios específicos. Com agentes personalizados, você pode transformar a experiência e os padrões da sua equipe em agentes reutilizáveis que orientam o Copilot a executar determinados tipos de trabalho com mais eficácia. + +Você explorou estes conceitos: + +- como agentes personalizados são definidos. +- usar um agente personalizado no Copilot CLI. + +Em seguida, vamos explorar [alguns comandos de barra][next-lesson] para aprender outros truques do Copilot CLI. + +## Recursos + +- [Agentes personalizados][custom-agents] +- [Criar agentes personalizados para um repositório][creating-custom-agents] +- [Agentes personalizados no awesome-copilot][awesome-copilot-agents] +- [Preparar o uso de agentes personalizados na sua organização][org-custom-agents] +- [Preparar o uso de agentes personalizados na sua empresa][enterprise-custom-agents] + +[previous-lesson]: ../5-agent-skills/ +[next-lesson]: ../7-slash-commands/ +[custom-agents]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#use-custom-agents +[creating-custom-agents]: https://docs.github.com/copilot/how-tos/use-copilot-agents/cloud-agent/create-custom-agents +[awesome-copilot-agents]: https://github.com/github/awesome-copilot/tree/main/agents +[org-custom-agents]: https://docs.github.com/copilot/how-tos/administer-copilot/manage-for-organization/prepare-for-custom-agents +[enterprise-custom-agents]: https://docs.github.com/copilot/how-tos/administer-copilot/manage-for-enterprise/manage-agents/prepare-for-custom-agents diff --git a/docs/pt-br/cli/7-slash-commands.md b/docs/pt-br/cli/7-slash-commands.md new file mode 100644 index 0000000..b37b4de --- /dev/null +++ b/docs/pt-br/cli/7-slash-commands.md @@ -0,0 +1,177 @@ +--- +title: "Lição 7 - Comandos de barra no GitHub Copilot CLI" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +Como toda boa ferramenta de CLI, o GitHub Copilot CLI inclui vários comandos de barra para interação. Esses comandos expõem funcionalidades avançadas, informações de bastidores ou opções adicionais de configuração. Você já explorou alguns deles, como `/clear` para limpar o contexto e `/mcp` para inspecionar servidores MCP. Agora, vamos explorar outros comandos poderosos, incluindo `/context`, `/model`, `/share` e `/delegate`. + +## Cenário + +Você concluiu os fluxos centrais da CLI. Agora, vamos conhecer algumas capacidades adicionais — compartilhar sessões, trocar de modelo e delegar tarefas ao [agente de nuvem do Copilot][about-cloud-agent]. + +Nesta lição, você usará: + +- `/share` para criar uma GitHub gist e compartilhar sua sessão com a equipe. +- `/context` para ver o contexto que o Copilot CLI está usando no momento. +- `/model` para explorar a lista de modelos disponíveis e selecionar outro, se quiser. +- `/delegate` para, opcionalmente, encaminhar uma tarefa ao agente de nuvem. Isso requer o agente de nuvem, disponível nos planos Copilot Student, Pro, Pro+, Business ou Enterprise — todos, exceto Copilot Free. + +## Compartilhar uma sessão + +Usar qualquer ferramenta, inclusive uma ferramenta de IA, é uma habilidade. Trabalhar em equipe e compartilhar aprendizados é a melhor forma de melhorar a experiência de todas as pessoas e gerar código de maior qualidade. Para apoiar isso, o Copilot CLI oferece o comando `/share`. O comando `/share` pode gerar um arquivo markdown ou uma GitHub gist com os detalhes da sessão, incluindo os prompts usados e a lógica seguida pelo Copilot. + +Vamos criar uma GitHub gist que você poderia compartilhar com a equipe. + +> [!TIP] +> **Inicie uma sessão do Copilot CLI** +> +> Antes de iniciar os exercícios abaixo, volte ao codespace e abra um terminal (Ctrl+`, se ainda não houver um aberto). Em seguida, inicie o Copilot CLI com `--yolo` e `--enable-all-github-mcp-tools`: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> Para retomar a sessão mais recente deste projeto em vez de iniciar uma nova, execute `copilot --yolo --enable-all-github-mcp-tools --continue`. Se o Copilot CLI já estiver em execução por causa de uma lição anterior, envie `/clear` para começar uma conversa limpa. +> +> `--enable-all-github-mcp-tools` habilita as ferramentas GitHub MCP de leitura e escrita para a sessão atual, para que o Copilot possa ler seu backlog e abrir pull requests durante o fluxo do workshop. + +> [!CAUTION] +> `--yolo` habilita permissões automáticas completas (`--allow-all-tools`, `--allow-all-paths` e `--allow-all-urls`). Use-o apenas em um ambiente isolado, como um Codespace ou uma VM, e nunca o defina como alias padrão no seu desenvolvimento diário. Consulte [Allowing and denying tool use][allow-all-warning] para saber mais. + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. Na janela de prompt do Copilot CLI, envie o comando a seguir: + + ``` + /share gist + ``` + +2. Em poucos instantes, o Copilot criará uma gist e exibirá o link. +3. Copie o texto do link. +4. Em uma nova guia do navegador, cole o link para explorar a gist. Observe como a gist destaca os prompts enviados, as skills e os agentes usados, o processo de raciocínio do Copilot e até o código e os resultados de comandos executados localmente. + +As gists e os arquivos markdown gerados por `/share` podem ser usados para documentar como o código foi criado ou para compartilhar com a equipe como determinadas ações foram executadas para obter os resultados desejados com o Copilot. + +## Explorar o contexto do Copilot CLI + +Ao trabalhar em tarefas maiores ou mais complexas, você pode atingir o limite da janela de contexto do modelo. O tamanho exato dessa janela varia de acordo com o modelo usado e a versão do Copilot CLI. Quando a janela de contexto fica cheia, o Copilot CLI a compacta automaticamente, resumindo as informações e removendo tudo o que considerar irrelevante para a tarefa atual. Você pode ver o estado atual do contexto e também compactá-lo manualmente com comandos de barra. Vamos explorar a janela de contexto. + +1. Na janela de prompt do Copilot CLI, envie o comando a seguir: + + ``` + /context + ``` + +2. Em poucos instantes, o Copilot CLI gerará uma representação visual do contexto atual: + + ![Captura de tela da janela de contexto do Copilot CLI](../../_images/cli-7-context-window.png) + +3. Observe o modelo exibido, que pode ser diferente do mostrado na imagem, e a porcentagem atual de tokens usados. O restante das informações destaca: + + | Título | Descrição | + | ------------ | ------------------------------------------------------ | + | System/Tools | Arquivos de instruções, conteúdo de arquivos e definições de ferramentas | + | Messages | Histórico da conversa entre você e o Copilot | + | Buffer | Espaço reservado pelo Copilot CLI para gerar respostas | + | Free space | Espaço livre restante | + +4. Compacte o histórico da conversa enviando o seguinte comando de barra ao Copilot CLI: + + ``` + /compact + ``` + +5. Quando a operação terminar, envie o comando a seguir para exibir novamente as estatísticas atuais do contexto: + + ``` + /context + ``` + +6. Observe a mudança no contexto. Talvez ela não seja drástica, já que a janela de contexto provavelmente ainda está relativamente pequena neste momento. + +> [!NOTE] +> O Copilot CLI compactará o contexto automaticamente quando ele estiver cheio. Ao se aproximar de 100% da capacidade, ele exibirá a porcentagem logo acima da janela de prompt. Normalmente, a compactação acontece de forma assíncrona, permitindo que você continue interagindo com o Copilot enquanto ele faz esse trabalho. No entanto, em alguns casos ele pode bloquear uma operação em andamento por vários segundos durante o processo. + +### Boas práticas com contexto + +Na maioria das sessões, o contexto será gerenciado com eficiência pelo próprio Copilot sem orientações específicas. Mesmo assim, pode haver situações em que você decida instruir manualmente o Copilot a limpar ou compactar o histórico: + +- Se você for mudar para outra parte do aplicativo ou para uma tarefa não relacionada, pode usar `/clear` para começar de novo e evitar confundir o Copilot com contexto antigo e irrelevante. +- Se você estiver se aproximando do limite máximo da janela de contexto, pode usar `/compact` manualmente para controlar quando a compactação acontecerá. + +> [!CAUTION] +> Novamente, na maior parte do tempo, o Copilot gerenciará o contexto sem interação direta sua. Se você perceber que o Copilot está um pouco confuso por causa de informações antigas, ou estiver prestes a mudar para uma tarefa sem relação com a atual, considere usar os comandos manuais. + +## Escolher seu modelo + +Modelos diferentes têm pontos fortes diferentes, e pessoas desenvolvedoras diferentes têm preferências diferentes. O Copilot CLI permite listar e selecionar o modelo que você quer usar. + +1. Exiba a lista de modelos enviando o comando de barra a seguir ao Copilot CLI: + + ``` + /model + ``` + +2. Observe a lista de modelos. Cada modelo exibirá tanto seu nome quanto o modificador de custo por solicitação. +3. Se quiser, selecione um novo modelo. Ou pressione Esc para sair da lista. + +> [!CAUTION] +> A seleção de modelo persiste no Copilot CLI. + +## Delegar ao agente de nuvem (opcional) + +Há situações em que você quer continuar trabalhando no terminal, mas precisa delegar uma tarefa mais demorada ao agente de nuvem do Copilot. O comando `/delegate` envia a sessão atual do Copilot CLI para o GitHub.com, onde o agente de nuvem a assume, trabalha de forma assíncrona e abre um pull request quando termina. + +> [!NOTE] +> `/delegate` requer o agente de nuvem, disponível nos planos Copilot Student, Pro, Pro+, Business ou Enterprise — todos, exceto Copilot Free. Se você não tiver acesso, leia esta seção e pule a parte prática. + +1. Primeiro, limpe a sessão atual para evitar delegar o contexto acumulado do workshop: + + ``` + /clear + ``` + +2. Envie um prompt pequeno e bem delimitado. Por exemplo, você pode delegar a meta extra de paginação do seu backlog: + + ``` + Implement pagination on the game list page so it shows a fixed number of games per page with Previous and Next controls, and add tests. + ``` + +3. Envie o comando de barra a seguir para entregar a sessão ao agente de nuvem e confirme o prompt que deseja delegar: + + ``` + /delegate + ``` + +4. Abra [Copilot agents](https://github.com/copilot/agents) no navegador para acompanhar o progresso. +5. Você não precisa esperar a conclusão do pull request neste percurso. Pode voltar a ele mais tarde. Se quiser se aprofundar no gerenciamento de trabalho assíncrono com agentes, continue no [percurso do agente de nuvem](../../cloud/). + +## Resumo e próximos passos + +Usar comandos de barra no Copilot CLI permite configurá-lo, compartilhar sessões e obter informações internas sobre como o Copilot está trabalhando. Nesta lição, você usou ou explorou: + +- `/share` para criar uma GitHub gist e compartilhar sua sessão com a equipe. +- `/context` para ver o contexto que o Copilot CLI está usando no momento. +- `/model` para explorar a lista de modelos disponíveis e selecionar outro, se quiser. +- `/delegate` como uma ponte opcional para o agente de nuvem. + +É claro que há mais comandos de barra disponíveis e muito mais para explorar no Copilot CLI. Vamos encerrar essa jornada [revendo o que aprendemos][next-lesson] e vendo alguns próximos passos para continuar aprendendo. + +## Recursos + +- [Usar o Copilot CLI][using-copilot-cli] +- [Sobre o Copilot CLI][about-copilot-cli] +- [Gerenciamento de contexto no Copilot CLI][context-management] +- [Compartilhar sessões com o Copilot CLI][share-sessions] +- [Selecionar modelos no Copilot CLI][selecting-models] + +[previous-lesson]: ../6-custom-agents/ +[next-lesson]: ../8-review/ +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[about-cloud-agent]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-cloud-agent +[context-management]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#context-management +[share-sessions]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#share-sessions +[selecting-models]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#select-an-llm diff --git a/docs/pt-br/cli/8-review.md b/docs/pt-br/cli/8-review.md new file mode 100644 index 0000000..fe6450d --- /dev/null +++ b/docs/pt-br/cli/8-review.md @@ -0,0 +1,70 @@ +--- +title: "Lição 8 - Revisão e próximos passos" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +Ao longo das últimas lições, você explorou alguns dos casos de uso mais comuns do GitHub Copilot CLI, incluindo: + +- interagir com o GitHub e outros servidores MCP. +- usar arquivos de instruções para orientar a geração de código. +- implementar skills para adicionar ferramentas ao conjunto de recursos do Copilot CLI. +- chamar agentes personalizados para tarefas avançadas e mais complexas. +- usar comandos de barra para gerenciar sua sessão e, opcionalmente, voltar ao agente de nuvem por meio de `/delegate`. + +Vamos falar sobre alguns comandos de barra, boas práticas e próximos passos. + +## Comandos de barra + +O Copilot CLI oferece uma série de comandos de barra para interação, inclusive aqueles que permitem configurá-lo ou ver o que acontece nos bastidores. Você já usou `/clear` para iniciar um novo chat, limpando o contexto atual, e `/mcp` para inspecionar e gerenciar servidores MCP. Alguns outros que podem ser úteis são: + +| Comando | Descrição | +| ------------------ | ------------------------------------------------------------- | +| `/add-dir` | Adicionar um diretório à lista de confiança do Copilot | +| `/clear`, `/new` | Limpar o histórico da conversa e começar de novo | +| `/compact` | Resumir o histórico da conversa para reduzir o uso da janela de contexto | +| `/context` | Mostrar o uso de tokens da janela de contexto e sua visualização | +| `/diff` | Revisar as alterações feitas no diretório atual | +| `/model` | Selecionar o modelo de IA a usar (Claude Sonnet, GPT-5 etc.) | +| `/plan ` | Criar um plano de implementação antes de programar | +| `/review ` | Executar o agente de revisão de código para analisar alterações | +| `/delegate` | Delegar a tarefa ao agente de nuvem do Copilot para processamento assíncrono | +| `/session` | Mostrar informações da sessão e um resumo do workspace | +| `/share` | Compartilhar a sessão em um arquivo markdown ou em uma GitHub gist | +| `/skills` | Gerenciar skills para ampliar recursos | +| `/usage` | Exibir métricas e estatísticas de uso da sessão | + +> [!TIP] +> Use `/help` para ver a lista completa de comandos disponíveis e atalhos de teclado. + +## Boas práticas + +Ao usar qualquer ferramenta de IA, a infraestrutura por trás dela influencia a qualidade do que você recebe. Arquivos de instruções robustos, agentes personalizados e skills de agente fazem parte dessa base — e você explorou cada um deles neste workshop. O [awesome-copilot][awesome-copilot] é uma boa fonte de modelos, e o próprio Copilot pode gerar essas estruturas para você como ponto de partida. + +O contexto continua sendo tão importante quanto a infraestrutura. Descrever com clareza *o que* você quer criar, *por que* e *como* muda significativamente a saída. Se alguma informação puder ajudar o Copilot, forneça-a. + +## Próximos passos + +A melhor forma de melhorar suas habilidades com qualquer ferramenta é continuar usando essa ferramenta. Use-a em código de produção, em projetos pessoais, naquele pequeno aplicativo em que você pensa há anos mas nunca parou para criar. Compartilhe seus aprendizados com a equipe e aprenda com ela. E, como sempre, explore a documentação. + +Se quiser explorar mais do ecossistema do GitHub Copilot, confira o [percurso do VS Code](../../vscode/) ou o [percurso do agente de nuvem](../../cloud/). + +## Recursos + +- [Sobre o Copilot CLI][about-copilot-cli] +- [Usar o Copilot CLI][using-copilot-cli] +- [Repositório Awesome Copilot][awesome-copilot] +- [Guia de instruções personalizadas][repo-instructions] +- [Documentação de Agent Skills][agent-skills] +- [Documentação de agentes personalizados][custom-agents] +- [Especificação do MCP][mcp-spec] + +[previous-lesson]: ../7-slash-commands/ +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli +[awesome-copilot]: https://github.com/github/awesome-copilot +[repo-instructions]: https://docs.github.com/copilot/how-tos/configure-custom-instructions/add-repository-instructions +[agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills +[custom-agents]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#use-custom-agents +[mcp-spec]: https://modelcontextprotocol.io/ diff --git a/docs/pt-br/cli/README.md b/docs/pt-br/cli/README.md new file mode 100644 index 0000000..0844114 --- /dev/null +++ b/docs/pt-br/cli/README.md @@ -0,0 +1,54 @@ +--- +slug: pt-br/cli +title: "CLI do GitHub Copilot" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +O **[GitHub Copilot CLI](https://docs.github.com/copilot/concepts/agents/about-copilot-cli)** coloca o GitHub Copilot no seu terminal como um assistente de programação baseado em agentes. Ele explora bases de código, gera código, executa comandos e se conecta a ferramentas externas — tudo pela linha de comando, para que você mantenha o foco sem trocar para um editor gráfico. + +Ao longo destas lições, você instalará e autenticará o Copilot CLI, depois fornecerá contexto do projeto com instruções personalizadas antes de usar o modo plan para gerar um recurso de forma deliberada. Você conectará o servidor MCP do Playwright para testar esse recurso em um navegador real e, em seguida, ampliará o Copilot com skills de agente reutilizáveis e agentes personalizados. Por fim, você explorará comandos de barra para gerenciar contexto, modelos e compartilhamento, e concluirá com uma revisão do que criou. + +## Lições + +| Lição | Tópico | Descrição | +|----------|-------|-------------| +| [0. Pré-requisitos][ex0] | Configuração | Crie seu repositório e seu codespace | +| [1. Instalar o Copilot CLI][ex1] | Instalação | Instale e autentique o Copilot CLI | +| [2. Instruções personalizadas][ex2] | Contexto | Adicione uma instrução e veja como o Copilot CLI a segue | +| [3. Geração de código][ex3] | Geração de código | Use o modo plan e gere recursos | +| [4. Testar com o MCP do Playwright][ex4] | Ferramentas externas | Adicione o servidor MCP do Playwright e teste seu recurso em um navegador | +| [5. Skills de agente][ex5] | Skills | Aprimore o Copilot com skills especializadas | +| [6. Agentes personalizados][ex6] | Agentes | Revise e use agentes personalizados | +| [7. Comandos de barra][ex7] | Recursos da CLI | Explore contexto, modelos, compartilhamento e a delegação opcional para o agente de nuvem | +| [8. Revisão][ex8] | Resumo | Revise os principais conceitos e os próximos passos | + +## Pré-requisitos + +Antes de participar deste workshop, verifique se você tem: + +- [ ] Uma conta do GitHub com um plano ativo **Copilot Student, Pro, Pro+, Business ou Enterprise** +- [ ] Familiaridade básica com operações de terminal e linha de comando +- [ ] O Git instalado e configurado + +> [!TIP] +> Não tem um plano pago? Estudantes verificados podem obter o GitHub Copilot gratuitamente por meio do [GitHub Education][callout-student-plan-education]. O plano **Copilot Student** inclui os recursos de agente, MCP, revisão de código e Copilot CLI usados neste workshop. Portanto, você pode concluir todos os percursos com esse plano. + +> [!NOTE] +> Se você usa o Copilot Business ou o Copilot Enterprise, verifique se o administrador habilitou o Copilot CLI para uso. + +## Começar + +[**Comece pela Lição 0: Pré-requisitos →**][ex0] + +[ex0]: 0-prerequisites/ +[ex1]: 1-install-copilot-cli/ +[ex2]: 2-custom-instructions/ +[ex3]: 3-generating-code/ +[ex4]: 4-mcp/ +[ex5]: 5-agent-skills/ +[ex6]: 6-custom-agents/ +[ex7]: 7-slash-commands/ +[ex8]: 8-review/ +[callout-student-plan-education]: https://github.com/education/students diff --git a/docs/zh-cn/README.md b/docs/zh-cn/README.md index f4877d8..d3fc148 100644 --- a/docs/zh-cn/README.md +++ b/docs/zh-cn/README.md @@ -21,7 +21,7 @@ GitHub Copilot 最近新增的功能为开发人员提供了贯穿整个软件 在 **Visual Studio Code** 和 GitHub Codespaces 中使用 GitHub Copilot。无需离开熟悉的编辑器,即可使用 Copilot Chat 智能体模式、MCP 服务器和自定义智能体。如果希望将 AI 辅助直接融入 IDE,这是理想选择。 -### 💻 [Copilot CLI](../cli/) +### 💻 [Copilot CLI](cli/) **GitHub Copilot CLI** 是一款在终端中运行的智能体助手。安装后,可以连接 MCP 服务器、使用计划模式生成代码,还能完全通过命令行构建自己的技能、自定义智能体和斜杠命令。 diff --git a/docs/zh-cn/app/8-review.md b/docs/zh-cn/app/8-review.md index c00c5c7..4e52d6b 100644 --- a/docs/zh-cn/app/8-review.md +++ b/docs/zh-cn/app/8-review.md @@ -60,7 +60,7 @@ lastUpdated: 2026-07-09 熟练使用任何工具的最佳方式都是持续使用。可将它用于生产代码、业余项目,或那个构思多年却始终没有动手构建的小应用。与团队分享经验,也向团队学习。并且一如既往地探索文档。 -要探索 GitHub Copilot 生态系统的更多内容,请查看 [VS Code 学习路径](../../vscode/)、[Copilot CLI 学习路径](../../cli/)或 [Cloud agent 学习路径](../../cloud/)。 +要探索 GitHub Copilot 生态系统的更多内容,请查看 [VS Code 学习路径](../../vscode/)、[Copilot CLI 学习路径](../cli/)或 [Cloud agent 学习路径](../../cloud/)。 ## 资源 diff --git a/docs/zh-cn/cli/0-prerequisites.md b/docs/zh-cn/cli/0-prerequisites.md new file mode 100644 index 0000000..0bc2d6a --- /dev/null +++ b/docs/zh-cn/cli/0-prerequisites.md @@ -0,0 +1,72 @@ +--- +title: "练习 0:先决条件" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +开始 Copilot CLI 练习前,需要先完成环境准备。将先创建 Tailspin Toys 存储库的个人副本,再启动一个 [codespace][codespaces]。下一节练习会使用其中集成的终端来安装并运行 Copilot CLI。 + +## 设置实验存储库 + +为了给即将编写的代码创建一份存储库副本,需要基于 [模板][template-repository] 创建一个实例。这个新实例会包含实验所需的全部文件,后续练习都会在其中完成。 + +1. 在新的浏览器窗口中,访问本实验的 GitHub 存储库:`https://github.com/github-samples/tailspin-toys`。 +2. 在实验存储库页面上,选择 **Use this template** 按钮创建自己的存储库副本。然后选择 **Create a new repository**。 + + ![“Use this template”按钮](../../_images/ex0-use-template.png) + +3. 如果参加的是由 GitHub 或 Microsoft 主办的活动,请按照导师提供的说明操作。否则,可以在已启用 GitHub Copilot 访问权限的组织中创建这个新存储库。 + + ![输入存储库模板设置](../../_images/ex0-repository-settings.png) + +4. 记下创建的存储库路径(**organization-or-user-name/repository-name**),后续实验会用到它。 + +> [!NOTE] +> **积压工作已准备就绪** +> +> 通过模板创建存储库时,系统会自动创建一组 GitHub issue 作为积压工作。整个工作坊都会围绕这些 issue 展开,无需手动新建。 + +## 创建 codespace + +接下来,将使用 codespace 完成实验练习。 + +[GitHub Codespaces][codespaces] 是一个基于云的开发环境,可以直接在浏览器中编写、运行和调试代码。它提供功能完整的 IDE,并支持多种编程语言、扩展和工具。 + +1. 打开刚创建的存储库。 +2. 选择绿色的 **Code** 按钮。 + + ![选择 Code 按钮](../../_images/ex0-code-button.png) + +3. 选择 **Codespaces** 选项卡,再选择 **+** 按钮创建新的 Codespace。 + + ![创建新的 codespace](../../_images/ex0-create-codespace.png) + +codespace 的创建需要几分钟,但仍然比手动安装所有服务快得多。等待期间,可以先了解 GitHub Copilot 的其他功能,接下来就会用到。 + +> [!CAUTION] +> 后续练习还会回到这个 codespace。现在先将它保留在浏览器标签页中,不要关闭。 + +> [!NOTE] +> 本工作坊设计为在 codespace 或本地 [dev container][dev-containers] 中运行。这两种方式都能确保环境已安装顺畅体验所需的全部先决条件。如果更希望在本地运行,请在 VS Code 中打开克隆后的存储库,并在出现提示时选择 **Reopen in Container**——VS Code 会构建与 codespace 相同的 dev container。 + +[codespaces]: https://github.com/features/codespaces +[dev-containers]: https://code.visualstudio.com/docs/devcontainers/containers + +## 总结 + +恭喜,已经创建了实验存储库的副本,也开始了 codespace 的创建流程。后续开始使用 Copilot CLI 时,会在其中完成操作。 + +## 下一步 + +接下来安装 Copilot CLI,并使用 GitHub 账户完成验证。继续前往[练习 1 - 安装 GitHub Copilot CLI][next-lesson]。 + +## 资源 + +- [GitHub Codespaces 概览][codespaces] +- [从模板创建存储库][template-repository] +- [Codespaces 快速入门][codespaces-quickstart] + +[template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository +[codespaces-quickstart]: https://docs.github.com/codespaces/getting-started/quickstart +[next-lesson]: ../1-install-copilot-cli/ diff --git a/docs/zh-cn/cli/1-install-copilot-cli.md b/docs/zh-cn/cli/1-install-copilot-cli.md new file mode 100644 index 0000000..31795df --- /dev/null +++ b/docs/zh-cn/cli/1-install-copilot-cli.md @@ -0,0 +1,129 @@ +--- +title: "练习 1 - 安装 GitHub Copilot CLI" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +[GitHub Copilot CLI][about-copilot-cli] 是一个功能强大的代理式编码助手,可在终端中运行,让开发者通过命令行探索代码库、生成代码、运行命令并与外部工具交互。它可以帮助分担任务、请求变更,并保持专注。第一步自然是安装这个工具,好在可以使用已经熟悉的工具来完成。 + +在本练习中,将学习如何: + +- 使用 npm 安装 GitHub Copilot CLI。 +- 使用 GitHub 账户完成验证。 +- 验证安装结果。 + +## 场景 + +团队开始使用 AI agent 处理不断增长的积压工作。Copilot CLI 将这种能力带入终端,而终端本就是许多开发者的主要工作环境。本练习会完成安装和验证,为后续工作坊中的使用做好准备。 + +## 在 codespace 中打开终端 + +安装 Copilot CLI 前,需要先在 codespace 中打开终端窗口。 + +1. 如果当前不在 codespace 中,请先返回。 +2. 按 Ctrl+\` 打开终端窗口。 +3. 应该会在 VS Code 窗口底部看到终端面板。 + +## 安装 Copilot CLI + +可以通过 [npm][install-npm]、[WinGet][install-winget] 和 [Homebrew][install-homebrew] 安装 Copilot CLI。由于 GitHub Codespaces 已预装 Node.js,本练习使用 npm 安装 Copilot CLI。 + +1. 在终端中确认 Node.js 已安装,并满足版本要求: + + ```bash + node --version + ``` + + 应看到版本 22 或更高(例如 `v22.x.x`)。 + +2. 使用 npm 在 codespace 中全局安装 Copilot CLI: + + ```bash + npm install -g @github/copilot + ``` + +3. 通过查看版本验证安装: + + ```bash + copilot --version + ``` + + 应看到显示的版本号(例如 `v1.0.XX`)。 + +> [!TIP] +> 如果遇到权限错误,在某些系统中可能需要使用 `sudo npm install -g @github/copilot`。不过在 GitHub Codespaces 中通常不需要这样做。 + +## 使用 GitHub 完成验证 + +首次启动时,Copilot CLI 会提示使用 GitHub 账户完成验证。 + +1. 启动 Copilot CLI: + + ```bash + copilot + ``` + +2. 如果当前尚未登录,会看到验证提示。Copilot CLI 会显示一个设备代码,并要求访问一个 URL。 +3. 按照屏幕上的说明操作: + - 在浏览器中打开提供的 URL + - 在提示时输入设备代码 + - 授权 Copilot CLI 访问 GitHub 账户 +4. 验证完成后,会看到 Copilot CLI 提示符,可以开始输入问题和命令。 + +> [!NOTE] +> 在 codespace 中,可能已经通过 GitHub 会话完成验证。如果 Copilot CLI 启动时没有提示验证,就表示可以直接使用。 + +## 信任目录并确认一切正常 + +首次进入 Copilot CLI 提示符后,先信任这个工作坊存储库,并确认 Copilot CLI 已正确安装并连接成功。 + +1. 当 Copilot CLI 要求确认是否信任此文件夹中的文件时,会看到三个选项: + - **Yes, proceed**:仅信任当前会话 + - **Yes, and remember this folder for future sessions**:永久信任 + - **No, exit (Esc)**:不允许访问文件 +2. 对于本工作坊,请选择 **Yes, and remember this folder for future sessions**,因为后续会持续在这个存储库中工作。 +3. 向 Copilot 提一个简单问题,确认它运行正常: + + ``` + What files are in this project? + ``` + +4. Copilot 应该会探索存储库,并给出项目结构摘要。 +5. 试用 `/help` 命令查看可用的斜杠命令: + + ``` + /help + ``` + +6. 在终端中输入以下命令退出 Copilot CLI。后续练习还会回到 Copilot CLI。 + + ``` + exit + ``` + +## 总结和后续步骤 + +恭喜,已成功安装并验证 GitHub Copilot CLI。现在已经学会如何: + +- 使用 npm 安装 Copilot CLI。 +- 使用 GitHub 账户完成验证。 +- 信任一个目录,以便 Copilot CLI 可以处理其中内容。 +- 确认安装运行正常。 + +现在 Copilot CLI 已安装完成,接下来为 Copilot 提供一些项目上下文。继续前往[练习 2 - 通过 CLI 使用自定义说明][next-lesson]。 + +## 资源 + +- [安装 GitHub Copilot CLI][install-copilot-cli] +- [关于 Copilot CLI][about-copilot-cli] +- [使用 Copilot CLI][using-copilot-cli] + +[previous-lesson]: ../0-prerequisites/ +[next-lesson]: ../2-custom-instructions/ +[install-copilot-cli]: https://docs.github.com/copilot/how-tos/set-up/install-copilot-cli +[install-npm]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-npm-all-platforms +[install-winget]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-winget-windows +[install-homebrew]: https://docs.github.com/copilot/how-tos/copilot-cli/set-up-copilot-cli/install-copilot-cli#installing-with-homebrew-macos-and-linux +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli diff --git a/docs/zh-cn/cli/2-custom-instructions.md b/docs/zh-cn/cli/2-custom-instructions.md new file mode 100644 index 0000000..81464dd --- /dev/null +++ b/docs/zh-cn/cli/2-custom-instructions.md @@ -0,0 +1,243 @@ +--- +title: "练习 2 - 自定义说明(Copilot CLI)" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +[← 上一课:安装 Copilot CLI][previous-lesson] · [下一课:使用 CLI 生成代码 →][next-lesson] + +使用生成式 AI 时,上下文至关重要。如果某项任务需要按特定方式完成,或者存在 Copilot 应该知道的背景信息,就需要确保这些上下文可用。本工作坊会探索几种帮助 Copilot 的工具。这里先从[说明文件][instruction-files]开始,它们通常关注代码本身应如何组织。这能帮助 Copilot 不仅理解想要*什么*代码,也理解代码应当*如何*组织。 + +在本练习中,将: + +- 了解项目专属上下文、编码准则和文档标准如何通过存储库自定义说明及按路径限定范围的说明文件传递给 Copilot; +- 在当前说明已生效的前提下,生成过滤功能的第一块数据切片(publisher helper); +- 向 `.github/copilot-instructions.md` 添加一项新的全库标准; +- 运行后续提示,观察重新生成的代码如何采用这项新标准; +- 提交说明更新和 helper,为下一节练习做好准备。 + +> [!CAUTION] +> 生成的代码可能与设定的某些标准不完全一致。Copilot 是非确定性的。这里的目标是观察更新说明后行为变化的*趋势*,而不是逐字符匹配输出。 + +## 说明文件 + +### 场景 + +和优秀的开发团队一样,Tailspin Toys 也有一套开发实践准则和要求,包括: + +- 数据层始终需要单元测试。 +- UI 应使用深色模式,并具有现代感。 +- 应以 TSDoc 文档注释的形式为代码添加文档。 +- 每个文件顶部都应添加一段注释,说明该文件的作用。 + +通过使用说明文件,可以确保 Copilot 拥有正确的信息,从而按照这些实践要求完成任务。 + +### 自定义说明 + +自定义说明可用于向 Copilot 提供上下文和偏好,帮助它更好地理解编码风格和需求。这是一项非常强大的功能,能够引导 Copilot 给出更相关的建议和代码片段。可以指定偏好的编码约定、库,甚至希望包含的注释类型。既可以为整个存储库创建说明,也可以为特定文件类型创建说明,以提供任务级上下文。 + +说明文件分为两类: + +- `.github/copilot-instructions.md`:这是一个针对整个存储库**每次**请求都会发送给 Copilot 的单一说明文件。这个文件应包含项目级信息——也就是大多数发送给 Copilot 的聊天或 CLI 请求都会用到的上下文。可以包括所用技术栈、构建内容概览、最佳实践以及其他全局指导。 +- `.github/instructions/*.instructions.md`:可针对特定任务或文件类型创建。可以用来为特定语言(如 TypeScript 或 Astro)提供指导,也可以针对创建 UI 组件或新增一组单元测试等任务提供指导。 + +> [!NOTE] +> 在 IDE 中工作时,说明文件仅用于 Copilot Chat 的代码生成——不会用于代码补全或下一次编辑建议。 +> +> Copilot Chat、Copilot CLI 和 Copilot cloud agent 在生成代码时都会使用存储库级说明文件以及 `*.instructions.md` 文件(带 `applyTo` front matter)。 +> +> 此外,Copilot [还支持采用其他标准的说明文件][custom-instructions-support],包括 `AGENTS.md` 和 `CLAUDE.md` 文件。 + +### 管理说明文件的最佳实践 + +关于如何创建说明文件的完整讨论超出了本工作坊范围。不过,示例项目中的例子展示了一种具有代表性的做法。从高层来看: + +- 将 `copilot-instructions.md` 中的说明聚焦于项目级指导,例如构建内容说明、项目结构和全局编码标准。 +- 使用 `*.instructions.md` 文件为特定文件类型(单元测试、Astro 组件、数据层)或特定任务提供具体说明。 +- 使用自然语言。保持指导清晰。提供代码应该如何写以及不应该如何写的示例。 + +创建说明文件没有唯一正确的方法,就像使用 AI 也没有唯一正确的方法一样。通过不断实验,会逐渐找到最适合项目的方式。 + +> [!TIP] +> 每个使用 GitHub Copilot 的项目都应该具备一套完善的说明文件。查看本项目中的这些文件时,可能会注意到其中覆盖了许多任务类型,包括 [UI 更新][ui-instructions] 和 [Astro][astro-instructions]。 +> +> Copilot 也可以帮助生成说明文件。不同界面对这一功能的暴露方式不同(例如 VS Code 中的 **Configure Chat → Generate Agent Instructions**,或 Copilot CLI 中的 `/init`)——所在路径的课程会在相关位置指出。 +> +> 想找模板或起点?可以看看 [awesome-copilot][awesome-copilot],这是一个汇集说明文件、自定义智能体和其他资源的存储库。 + +[ui-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/ui.instructions.md +[astro-instructions]: https://github.com/github-samples/tailspin-toys/blob/main/.github/instructions/astro.instructions.md +[awesome-copilot]: https://github.com/github/awesome-copilot +[custom-instructions-support]: https://docs.github.com/copilot/reference/custom-instructions-support + +## 探索本项目中的自定义说明文件 + +花一点时间阅读此存储库随附的说明文件——其中包含一个核心 `copilot-instructions.md`,以及一组面向不同任务的 `*.instructions.md` 文件。可以在编辑器中打开它们,也可以在 GitHub Web UI 中查看。 + +1. 打开 `.github/copilot-instructions.md`。 +2. 浏览该文件,注意其中对项目的简要说明,以及 **Agent notes**、**Code standards**、**Scripts** 和 **Repository Structure** 等部分。在 **Code standards** 下,还要注意嵌套的 **GitHub Actions Workflows** 指导。这些内容适用于与 Copilot 的任何交互。 +3. 打开 `.github/instructions` 文件夹并浏览。可以看到其中包含针对 Astro 文件、Drizzle 数据层、测试等内容的说明。 +4. 打开 `.github/instructions/unit-tests.instructions.md`。注意顶部的 `applyTo` 字段——它设置了一个相对于存储库根目录的 glob,用于决定这些说明适用于哪些文件。在这里,任何 TypeScript 测试文件(例如匹配 `**/*.test.ts` 的文件)都会匹配。 +5. 注意其中针对为本项目创建单元测试的专门说明。 +6. 最后,打开 `.github/instructions/drizzle.instructions.md` 并滚动到底部。注意其中链接到了其他说明文件(如 `unit-tests.instructions.md`)以及项目中的现有文件。这样可以把较大的说明集拆分为更小、可复用的文件,并在生成代码时为 Copilot 指出可参考的示例。(其中路径是相对于说明文件本身,而不是存储库根目录。) + +> [!NOTE] +> `copilot-instructions.md` 中的 **Code formatting requirements** 部分记录了项目的编码标准,但目前还没有要求在代码中编写文档。接下来的步骤会添加 TSDoc 文档注释和文件注释头规则。 + +## 创建分支 + +接下来会修改代码,因此先创建一个分支来工作。 + +1. 在 codespace 终端中,创建并切换到新分支: + + ```bash + git checkout -b update-custom-instructions + ``` + +2. 确认 Copilot CLI 已安装并完成验证: + + ```bash + copilot --version + ``` + + 如果找不到该命令,或者尚未登录,请返回[练习 1 - 安装 GitHub Copilot CLI](../1-install-copilot-cli/)。 + +## 在更新说明*之前*使用 Copilot CLI + +为了看清自定义说明的影响,先在当前说明生效的情况下生成代码。稍后会更新该文件,并再次运行后续提示。 + +> [!TIP] +> **启动 Copilot CLI 会话** +> +> 开始下面的练习前,先返回 codespace 并打开一个终端(如果还没打开,可按 Ctrl+\`)。然后使用 `--yolo` 和 `--enable-all-github-mcp-tools` 启动 Copilot CLI: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 如果希望接续这个项目最近一次会话,而不是重新开始,请运行 `copilot --yolo --enable-all-github-mcp-tools --continue`。如果 Copilot CLI 仍在运行之前练习中的会话,请发送 `/clear` 开始一段新的对话。 +> +> `--enable-all-github-mcp-tools` 会为当前会话启用 GitHub MCP 读写工具,因此在工作坊流程中 Copilot 可以读取积压工作并打开 pull request。 + +> [!CAUTION] +> `--yolo` 会启用完整的自动权限(`--allow-all-tools`、`--allow-all-paths` 和 `--allow-all-urls`)。只能在 Codespace 或 VM 这类隔离环境中使用,绝不要把它设成日常开发的默认别名。详情见[允许和拒绝工具使用][allow-all-warning]。 + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. 确保 Copilot CLI 会话从**存储库根目录**启动,这样它才能自动读取 `.github/copilot-instructions.md`。 +2. 在 Copilot CLI 提示符中,请它生成过滤 UI 将要使用的 publishers helper: + + ```plaintext + Create a new data-access helper at src/lib/publishers.ts to return a list of all publishers. It should return the name and id for all publishers. Do not run the tests yet. + ``` + +3. Copilot CLI 会探索项目、提出计划,并在这个 `--yolo` 会话中写入文件。观察终端输出中的变更,然后在编辑器中查看结果。 +4. 在编辑器中打开生成的 `src/lib/publishers.ts`。 +5. 注意,这个 helper 是一个带类型的函数,第一参数接收 `db` 客户端,并返回一个带类型的 publishers 数组——这来自 `.github/instructions/drizzle.instructions.md` 中的数据层约定(该文件适用于 `src/lib/*.ts`)。 +6. 注意,生成的代码**缺少** TSDoc 文档注释和文件级注释头。 + +> [!CAUTION] +> Copilot 是概率性的——即使没有明确要求,它也有可能会添加文档注释。如果出现这种情况也没关系;更新说明后的*一致性*提升仍然是这里要观察的重点。 + +## 添加新的全库标准 + +如前所述,`.github/copilot-instructions.md` 旨在向 Copilot 提供项目级信息。现在为它补充存储库编码标准,以改善代码建议质量。 + +1. 重新打开 `.github/copilot-instructions.md`。 +2. 找到 **Code formatting requirements** 部分,应该在第 27 行附近。注意它已经记录了项目的编码标准——但尚未加入代码内文档规则,这就是生成的 helper 没有文档注释的原因。 +3. 在现有标准的正下方添加以下 markdown 行,指示 Copilot 添加文件注释头和 TSDoc 文档注释: + + ```markdown + - Every exported function should have a TSDoc comment describing its purpose, parameters, and return value. + - Before imports or any code, add a comment block to the file that explains its purpose. + ``` + +4. 保存 `copilot-instructions.md`。 + +> [!TIP] +> 正如上一课所示,说明文件既可以在存储库级别创建(`.github/copilot-instructions.md`)用于全局指导,也可以创建为 `*.instructions.md` 文件,用于特定语言、文件类型或任务。像刚刚添加的文档注释规则这类项目级标准,就应该放在存储库级文件中。 + +## 重新运行提示并观察变化 + +既然说明中已经加入文档注释规则,就请 Copilot CLI 更新刚刚生成的 publishers 文件。同一条标准指令会引导这次重写。 + +1. 在 Copilot CLI 会话中发送 `/clear`,以全新的对话开始。 +2. 发送以下提示: + + ```plaintext + Update src/lib/publishers.ts to follow the latest documentation conventions in .github/copilot-instructions.md. + ``` + +3. 等待编辑完成,然后重新打开 `src/lib/publishers.ts`。 +4. 注意,文件现在会以类似下面的注释块开头: + + ```typescript + /** + * Tailspin Toys Crowd Funding platform 的 publisher 数据访问辅助函数。 + * 提供从数据库检索 publisher 信息的函数。 + */ + ``` + +5. 注意,生成的函数现在会包含类似下面的 TSDoc 注释: + + ```typescript + /** + * 返回所有 publisher 的列表,包含其 id 和 name。 + * + * @param db - Drizzle 数据库客户端。 + * @returns 一个 Promise,解析为 publisher 对象数组。 + */ + ``` + +6. 保留这个更新后的文件。它是下一节练习将继续扩展的第一块数据切片。 + +## 提交并推送这第一块过滤功能 + +1. 在终端中确认已变更的文件: + + ```bash + git status + ``` + +2. 暂存说明更新和 helper: + + ```bash + git add .github/copilot-instructions.md src/lib/publishers.ts + ``` + +3. 提交变更: + + ```bash + git commit -m "Add doc comment standards and publishers helper foundation" + ``` + +4. 推送分支: + + ```bash + git push -u origin update-custom-instructions + ``` + +## 总结和后续步骤 + +已经了解了 Copilot 如何从本项目中的说明文件获取上下文,然后使用 Copilot CLI 完成了以下事项: + +- 在*现有*说明的基础上,生成了用于过滤功能的 publishers 数据访问 helper 基础; +- 向 `.github/copilot-instructions.md` 添加了一项新的全库标准; +- 运行后续提示,并观察重新生成的代码如何采用这项新标准; +- 提交并推送说明更新和 helper 基础。 + +下一步,将在[生成代码练习][next-lesson]中应用这些说明,实现积压工作中的功能。 + +## 资源 + +- [GitHub Copilot 自定义的说明文件][instruction-files] +- [创建自定义说明的最佳实践][instructions-best-practices] +- [为 Copilot 编写更好自定义说明的 5 个技巧][copilot-instructions-five-tips] +- [Awesome Copilot——说明文件及其他资源集合][awesome-copilot] + +[previous-lesson]: ../1-install-copilot-cli/ +[next-lesson]: ../3-generating-code/ +[instruction-files]: https://docs.github.com/copilot/customizing-copilot/about-customizing-github-copilot-chat-responses +[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository +[copilot-instructions-five-tips]: https://github.blog/ai-and-ml/github-copilot/5-tips-for-writing-better-custom-instructions-for-copilot/ diff --git a/docs/zh-cn/cli/3-generating-code.md b/docs/zh-cn/cli/3-generating-code.md new file mode 100644 index 0000000..f6e91d4 --- /dev/null +++ b/docs/zh-cn/cli/3-generating-code.md @@ -0,0 +1,99 @@ +--- +title: "练习 3 - 使用 GitHub Copilot CLI 添加项目功能" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +正如预期,使用 GitHub Copilot CLI 执行的核心任务之一,就是向项目添加功能、特性和代码。现在从积压工作中选取一个 issue,请 Copilot 帮助实现它。 + +## 场景 + +现在到了完成项目过滤功能的时候。积压工作中已经有这个过滤 issue,上一节练习还提供了一个基础 helper。接下来让 Copilot 获取 issue 详情,考虑现有工作,并补齐剩余功能。 + +在本练习中,将: + +- 使用计划模式生成实现过滤功能的计划。 +- 使用 Copilot 生成向网站添加过滤功能所需的代码。 + +完成本练习后,项目中将新增这项功能。 + +## 使用计划模式 + +AI 最适合做的事情之一就是规划。很多时候,对要构建的内容已经有大致想法,只是需要一个对象来帮助梳理思路。AI 工具可以通过追问和分析潜在问题或遗漏项,帮助把想法变得更清晰。为支持这一过程,Copilot CLI 提供了计划模式。此外,花在规划上的时间也会帮助 Copilot 生成更符合要求的代码。 + +接下来将通过 Copilot CLI 的计划模式,开始创建这项新功能。 + +> [!TIP] +> **启动 Copilot CLI 会话** +> +> 开始下面的练习前,先返回 codespace 并打开一个终端(如果还没打开,可按 Ctrl+\`)。然后使用 `--yolo` 和 `--enable-all-github-mcp-tools` 启动 Copilot CLI: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 如果希望接续这个项目最近一次会话,而不是重新开始,请运行 `copilot --yolo --enable-all-github-mcp-tools --continue`。如果 Copilot CLI 仍在运行之前练习中的会话,请发送 `/clear` 开始一段新的对话。 +> +> `--enable-all-github-mcp-tools` 会为当前会话启用 GitHub MCP 读写工具,因此在工作坊流程中 Copilot 可以读取积压工作并打开 pull request。 + +> [!CAUTION] +> `--yolo` 会启用完整的自动权限(`--allow-all-tools`、`--allow-all-paths` 和 `--allow-all-urls`)。只能在 Codespace 或 VM 这类隔离环境中使用,绝不要把它设成日常开发的默认别名。详情见[允许和拒绝工具使用][allow-all-warning]。 + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. 在 Copilot CLI 中输入以下提示,根据过滤 issue 创建计划: + + ``` + /plan Retrieve the issue on the repository related to adding filtering. We already added a publishers helper in src/lib/publishers.ts, so treat that as existing work and plan the remaining updates (games filtering logic, UI, and tests). + ``` + +2. Copilot 在生成计划时可能会提出后续问题。出现时,可根据希望实现功能的方式进行回答。 +3. 计划生成后,查看这份蓝图。应能看到它建议在数据层和 UI 中进行剩余变更,并生成测试。 +4. Copilot CLI 会提供继续反馈计划的能力。可将光标移到指定区域,然后输入建议。Copilot 会把这些建议整合进新版本计划。 +5. 满意后,选择 Copilot 提供的选项,开始构建这个新功能。 + +> [!NOTE] +> 由于 Copilot 是概率性的,提供的具体文本和选项会有所不同。但会看到一个开始构建的选项,内容大致类似: +> +> `Yes, and switch to autopilot mode`. +> +> Copilot 可能会像上面的示例一样,提供启用 [autopilot mode](https://docs.github.com/copilot/concepts/agents/copilot-cli/autopilot) 的选项。autopilot mode 允许 Copilot CLI 在每一步后无需等待输入,自主完成整个任务。给出初始指令后,Copilot CLI 会自动执行各个步骤,直到判断任务完成。由于当前运行在受控环境中,可以放心启用 autopilot 并允许所有工具。 + +6. Copilot 会开始生成文件。 + +> [!NOTE] +> 这个操作很可能需要几分钟。会看到 Copilot 编辑和创建文件、更新和生成测试,并运行全部测试以确保成功。此时可以顺便回顾前面学到的内容,或者喝点东西休息一下。 + +## 查看代码 + +所有 AI 生成的代码在合并到生产环境前都需要审查。现在就来查看 Copilot 为实现新功能而创建和修改的文件。 + +1. 在 Copilot CLI 中使用以下命令显示“diff”或代码变更: + + ``` + /diff + ``` + +2. 注意已更改的文件。使用方向键左右切换查看不同文件。应能看到游戏列表页面(新过滤控件和客户端过滤逻辑所在位置)、`src/lib/games.ts`,以及 `games.test.ts` 等测试文件的更新。如果 Copilot 为了与完整实现保持一致而优化了现有 helper,也可能会看到 `publishers.ts` 的更新。 + +## 总结和后续步骤 + +现在已经借助 Copilot CLI 为网站添加了过滤功能。具体来说,完成了以下事项: + +- 使用计划模式生成了实现过滤功能的计划。 +- 生成了向网站添加过滤功能所需的代码。 + +当然,下一步就是确认它确实可用。在打开 pull request 之前,先[使用 Playwright MCP 服务器测试这个功能][next-lesson]。 + +## 资源 + +- [使用 Copilot CLI][using-copilot-cli] +- [关于 Copilot CLI][about-copilot-cli] +- [Copilot CLI 中的上下文管理][context-management] + +[previous-lesson]: ../2-custom-instructions/ +[next-lesson]: ../4-mcp/ +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[context-management]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#context-management diff --git a/docs/zh-cn/cli/4-mcp.md b/docs/zh-cn/cli/4-mcp.md new file mode 100644 index 0000000..d266de4 --- /dev/null +++ b/docs/zh-cn/cli/4-mcp.md @@ -0,0 +1,160 @@ +--- +title: "练习 4 - 使用 Playwright MCP 服务器测试功能" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +刚刚已经使用 Copilot CLI 生成了过滤功能。在打开 pull request 之前,应该先确认它在浏览器中能够正常工作。与其手动点选应用,不如连接 **Playwright MCP 服务器**,让 Copilot 驱动真实浏览器代为测试。 + +在本练习中,将: + +- 了解什么是 Model Context Protocol (MCP),以及 MCP 服务器如何扩展 Copilot CLI。 +- 将 Playwright MCP 服务器添加到 Copilot CLI。 +- 要求 Copilot 使用它在浏览器中手动测试过滤功能。 + +## 什么是 Model Context Protocol (MCP)? + +[Model Context Protocol (MCP)](https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/) 为 AI 智能体提供了一种与外部工具和服务通信的方式。借助 MCP,AI 智能体可以实时连接外部工具和服务,从而获取最新信息(通过资源),并代表执行操作(通过工具)。 + +这些工具和资源通过 MCP 服务器访问,它充当 AI 智能体与外部工具和服务之间的桥梁。MCP 服务器负责管理 AI 智能体与外部工具之间的通信(例如现有 API 或 NPM package 这类本地工具)。每个 MCP 服务器都代表一组不同的工具和资源,供 AI 智能体访问。 + +几个常见的 MCP 服务器包括: + +- **[GitHub MCP Server](https://github.com/github/github-mcp-server)**:该服务器提供一组 API,用于管理 GitHub 存储库。它允许 AI 智能体执行创建新存储库、更新现有存储库、管理 issue 和 pull request 等操作。 +- **[Playwright MCP Server](https://github.com/microsoft/playwright-mcp)**:该服务器提供基于 Playwright 的浏览器自动化能力。它允许 AI 智能体执行导航到网页、填写表单和选择按钮等操作。 + +还有许多其他 MCP 服务器可提供对不同工具和资源的访问。GitHub 托管了一个 [MCP registry](https://github.com/mcp),以提升生态系统中的可发现性和协作贡献。 + +> [!CAUTION] +> 从安全角度看,应像对待项目中的其他依赖项一样对待 MCP 服务器。使用前,请仔细审查其源代码、验证发布者,并评估安全影响。只使用可信的 MCP 服务器,并谨慎授予对敏感资源或操作的访问权限。 + +> [!NOTE] +> [GitHub MCP 服务器][github-mcp-server] 是 Copilot CLI 的**内置**能力——无需任何设置即可使用,这也是为什么在整个工作坊中 Copilot 能持续读取和写入存储库。本练习将添加*第二个*服务器,即 Playwright,为 Copilot 提供浏览器能力。 + +## 添加 Playwright MCP 服务器 + +添加服务器最快的方法是使用交互式 `/mcp add` 命令。这里将注册 [Playwright MCP 服务器][playwright-mcp-server],让 Copilot 获得一个可控浏览器。 + +> [!TIP] +> **启动 Copilot CLI 会话** +> +> 开始下面的练习前,先返回 codespace 并打开一个终端(如果还没打开,可按 Ctrl+\`)。然后使用 `--yolo` 和 `--enable-all-github-mcp-tools` 启动 Copilot CLI: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 如果希望接续这个项目最近一次会话,而不是重新开始,请运行 `copilot --yolo --enable-all-github-mcp-tools --continue`。如果 Copilot CLI 仍在运行之前练习中的会话,请发送 `/clear` 开始一段新的对话。 +> +> `--enable-all-github-mcp-tools` 会为当前会话启用 GitHub MCP 读写工具,因此在工作坊流程中 Copilot 可以读取积压工作并打开 pull request。 + +> [!CAUTION] +> `--yolo` 会启用完整的自动权限(`--allow-all-tools`、`--allow-all-paths` 和 `--allow-all-urls`)。只能在 Codespace 或 VM 这类隔离环境中使用,绝不要把它设成日常开发的默认别名。详情见[允许和拒绝工具使用][allow-all-warning]。 + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. 在 Copilot CLI 会话中输入: + + ```text + /mcp add + ``` + +2. 此时会出现一个配置表单。使用 Tab 在字段之间切换,并按如下内容填写: + + - **Server Name**:`playwright` + - **Server Type**:选择 **Local**(也标记为 **STDIO**) + - **Command**:`npx @playwright/mcp@latest --headless` + - **Tools**:保持为 `*`,允许使用该服务器的全部工具 + +3. 按 Ctrl+S 保存。服务器会立即添加并可用——无需重启。 + +`--headless` 标志表示让 Playwright 在无可见窗口的模式下运行,这对于没有桌面界面的 codespace 是必需的。在后台,这会把服务器写入 `~/.copilot/mcp-config.json` 文件: + +```json +{ + "mcpServers": { + "playwright": { + "type": "local", + "command": "npx", + "args": ["@playwright/mcp@latest", "--headless"], + "tools": ["*"] + } + } +} +``` + +4. 通过列出 MCP 服务器,确认该服务器已注册并处于活动状态: + + ```text + /mcp show + ``` + +5. 应该会看到 `playwright` 与内置的 `github` 服务器一起列出。 + +> [!NOTE] +> Tailspin Toys 项目本身已经使用 Playwright 进行端到端测试,因此 Playwright 所需的浏览器通常已经安装好。如果之后 Copilot 提示缺少浏览器,让它运行 `npx playwright install chromium`,然后重试。 + +## 启动网站 + +Playwright MCP 服务器需要一个正在运行的应用作为测试目标。请在**单独**的终端中启动 Astro 开发服务器,这样在使用 Copilot CLI 时它才能持续运行。 + +1. 在 codespace 中选择 Ctrl+\` 打开一个新终端。 +2. 启动网站: + + ```bash + npm run dev + ``` + +3. 保持这个终端持续运行。看到 `Astro server: http://localhost:4321` 横幅后,说明应用已就绪。 + +## 测试过滤功能 + +返回 Copilot CLI 会话,并请 Copilot 测试这个功能。 + +[Playwright MCP 服务器][playwright-mcp-server] 会为 Copilot 提供一个可以驱动的真实浏览器。无需手动点选应用来检查结果,智能体可以打开页面、导航、应用过滤条件,并把结果读回给你——然后总结其观察结果。这是在不离开当前对话的情况下,快速确认功能是否符合预期的最佳方式。 + +在底层,Playwright MCP 服务器依赖页面的[无障碍树][playwright-mcp-server]而不是截图来工作。这意味着智能体会基于结构化、带标签的元素(按钮、链接、列表项)进行推理,方式与辅助技术类似——因此一次快速的功能检查,也兼具轻量级的无障碍合理性检查。 + +在服务器已连接且应用已运行的情况下,请 Copilot 演练刚刚构建的过滤功能: + +```text +Using the Playwright MCP server, open a browser to the running app at http://localhost:4321 and verify the new game filtering feature: + +1. Go to the games page and note how many games are listed. +2. Apply a category filter and confirm the list updates to only show games in that category. +3. Clear it, then apply a publisher filter and confirm the list updates to that publisher. +4. Combine a category and a publisher filter and confirm the results respect both. + +Report what you observe at each step, and call out anything that does not behave as expected. +``` + +Copilot 会通过 Playwright MCP 服务器启动浏览器,依次执行每一步,并反馈它发现的内容。将它的总结与 issue 中的验收标准对照——如果有任何异常,可以继续追问,或在打开 pull request 之前让它回头修复代码。 + +> [!NOTE] +> 本测试要求应用运行在 `http://localhost:4321`。如果已经停止开发服务器,请在发送提示前重新启动。Copilot 第一次使用 Playwright MCP 服务器时,可能需要下载浏览器——如果提示缺少浏览器,让它运行 `npx playwright install chromium` 后再试一次。 + +[playwright-mcp-server]: https://github.com/microsoft/playwright-mcp + +## 总结和后续步骤 + +恭喜,已经使用 Playwright MCP 服务器配合 Copilot CLI 手动测试了这个功能。回顾一下,完成了以下事项: + +- 了解了什么是 Model Context Protocol (MCP),以及 MCP 服务器如何扩展 Copilot CLI。 +- 使用 `/mcp add` 添加了 Playwright MCP 服务器。 +- 要求 Copilot 驱动浏览器,在发布前验证过滤功能。 + +现在既然已经确认功能正常,可以继续下一节练习,在那里将[借助智能体技能打开一个 pull request][next-lesson]。 + +## 资源 + +- [MCP 到底是什么,为什么大家都在讨论它?][mcp-blog-post] +- [Microsoft Playwright MCP Server][playwright-mcp-server] +- [为 Copilot CLI 添加 MCP 服务器][cli-add-mcp] +- [GitHub MCP Server][github-mcp-server] + +[previous-lesson]: ../3-generating-code/ +[next-lesson]: ../5-agent-skills/ +[mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/ +[github-mcp-server]: https://github.com/github/github-mcp-server +[cli-add-mcp]: https://docs.github.com/copilot/how-tos/copilot-cli/customize-copilot/add-mcp-servers diff --git a/docs/zh-cn/cli/5-agent-skills.md b/docs/zh-cn/cli/5-agent-skills.md new file mode 100644 index 0000000..9505fc3 --- /dev/null +++ b/docs/zh-cn/cli/5-agent-skills.md @@ -0,0 +1,123 @@ +--- +title: "练习 5 - 使用智能体技能" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +应用开发经常包含一些可重复的任务,例如生成构建、运行测试或创建 pull request。**智能体技能 (Agent skills)** 让你可以为 Copilot——以及其他 AI 智能体——提供执行这些任务的指导。一个技能是一个文件夹,其中包含说明、脚本和资源,智能体可以按需加载。[Agent Skills 是一项开放标准][agent-skills-repo],被多种智能体采用,因此同一个技能可以同时在 agent mode 的 Copilot Chat、Copilot cloud agent、Copilot CLI 和 GitHub Copilot app 中使用。 + +技能存放在项目的 `.github/skills` 文件夹中,也可以全局存放在 `~/.copilot/skills`。每个技能都是一个文件夹,其中包含一个 `SKILL.md` 文件。该文件具有 YAML frontmatter(至少包含 `name` 和 `description`),后面跟着 markdown 说明: + +```yaml +--- +name: make-contribution +description: All changes to code must follow the guidance documented in the repository. Before any issue is filed, branch is made, commits generated, or pull request (or PR) created, a search must be done to ensure the right steps are followed. Whenever asked to create an issue, commit messages, to push code, or create a PR, use this skill so everything is done correctly. +--- +``` + +技能还可以包含脚本、资源和参考资料等子文件夹。完整结构请参见[智能体技能规范][agent-skills-spec]。 + +> [!TIP] +> 技能是动态加载的。智能体会根据 `description` 字段判断应使用哪个技能——清晰、针对场景的描述,是一个技能会被使用还是被忽略的关键区别。 + +[agent-skills-repo]: https://github.com/agentskills/agentskills +[agent-skills-spec]: https://agentskills.io/specification + +接下来看看,一个技能如何确保 pull request 符合团队制定的规范。 + +## 场景 + +团队对 pull request(PR)有一组要求: + +- 提交消息要清晰,文件分组要合理。 +- 创建 PR 之前,所有测试都必须通过。 +- 每个 PR 都必须包含以下部分: + - 说明为什么要进行这些更改。 + - 概述已更改的文件。 + - 重要代码块的片段。 + - 按组整理的更改详情。 + +由于团队正在使用 Copilot 生成代码和 PR,因此希望确保 AI 工具也能遵循这些要求。 + +在本练习中,将: + +- 探索一个现有的用于创建 pull request 的技能。 +- 了解 AI 智能体如何使用技能。 +- 在技能的帮助下,创建一个符合准则的 PR。 + +## 执行技能 + +当智能体判断某个技能有必要时,会动态加载它。决定使用哪些技能的依据,就是 `SKILL.md` 文件中的描述。因此,使用场景清晰的描述非常重要。 + +## 探索 PR 技能 + +由于 Tailspin Toys 对创建 PR 有一套要求,因此他们创建了一个技能,帮助 AI 工具生成符合这些准则的 PR。现在来看看这个技能,了解它会执行什么。 + +1. 打开 `.github/skills/make-contribution/SKILL.md`。 +2. 注意其中的名称和描述。可以看到,描述中强调了它适用的场景,也就是当请求创建 pull request 或提交代码时。 +3. 通读这个技能。注意其中定义了分支应如何创建、提交应如何生成,以及 pull request 的内容应包含什么。 + +## 使用技能 + +如前所述,技能会由 Copilot CLI 自动调用。因此,只需请求 Copilot 创建一个 PR。 + +> [!TIP] +> **启动 Copilot CLI 会话** +> +> 开始下面的练习前,先返回 codespace 并打开一个终端(如果还没打开,可按 Ctrl+\`)。然后使用 `--yolo` 和 `--enable-all-github-mcp-tools` 启动 Copilot CLI: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 如果希望接续这个项目最近一次会话,而不是重新开始,请运行 `copilot --yolo --enable-all-github-mcp-tools --continue`。如果 Copilot CLI 仍在运行之前练习中的会话,请发送 `/clear` 开始一段新的对话。 +> +> `--enable-all-github-mcp-tools` 会为当前会话启用 GitHub MCP 读写工具,因此在工作坊流程中 Copilot 可以读取积压工作并打开 pull request。 + +> [!CAUTION] +> `--yolo` 会启用完整的自动权限(`--allow-all-tools`、`--allow-all-paths` 和 `--allow-all-urls`)。只能在 Codespace 或 VM 这类隔离环境中使用,绝不要把它设成日常开发的默认别名。详情见[允许和拒绝工具使用][allow-all-warning]。 + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. 使用以下提示,请 Copilot 创建一个 PR: + + ``` + Can you please create a pull request for me! + ``` + +2. Copilot 会确认这个请求。稍等片刻后,会看到 Copilot 显示它正在使用 **make-contribution** 技能。 + + ![Copilot CLI 调用智能体技能的截图](../../_images/cli-5-agent-skill.png) + +3. 然后 Copilot 会遵循该技能中的说明。它会先运行测试,然后创建分支、提交,最后创建 PR。 +4. 创建 PR 后,返回存储库并打开该 PR。注意其中各个部分遵循了技能中设定的准则,与团队提出的要求一致。 +5. 在进入下一节练习前,将本地工作区重置到从 `main` 创建的新分支,以便后续无障碍工作与这个过滤功能 PR 保持分离: + + ```bash + git checkout main + git pull + git checkout -b accessibility-cli + ``` + +## 总结和后续步骤 + +在智能体技能的帮助下,已经创建了一个符合文档要求的新 PR。完成了以下事项: + +- 探索了一个现有的 pull request 创建技能。 +- 了解了 AI 智能体如何使用技能。 +- 在技能的帮助下,创建了一个符合准则的 PR。 + +技能非常适合处理任务,但如果需要更强大的操作能力,就应该利用[自定义智能体][next-lesson],下一节就会探索这一点。 + +## 资源 + +- [关于 Agent Skills][about-agent-skills] +- [Agent Skills 规范][agent-skills-spec] +- [Agent Skills 存储库][agent-skills-repo] +- [awesome-copilot 上的 Agent Skills][awesome-copilot-skills] + +[previous-lesson]: ../4-mcp/ +[next-lesson]: ../6-custom-agents/ +[about-agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills +[awesome-copilot-skills]: https://github.com/github/awesome-copilot/tree/main/skills diff --git a/docs/zh-cn/cli/6-custom-agents.md b/docs/zh-cn/cli/6-custom-agents.md new file mode 100644 index 0000000..366d1f0 --- /dev/null +++ b/docs/zh-cn/cli/6-custom-agents.md @@ -0,0 +1,115 @@ +--- +title: "练习 6 - 在 GitHub Copilot CLI 中使用自定义智能体" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +## 什么是自定义智能体? + +GitHub Copilot 中的[自定义智能体][custom-agents-concept]允许创建适用于开发工作流中特定任务或领域的专用 AI 助手。通过在存储库的 `.github/agents` 文件夹中使用 markdown 文件定义智能体,可以为 Copilot 提供聚焦的说明、最佳实践、编码模式和领域知识,从而引导它更高效地完成特定类型的工作。团队可以把自身经验固化为可复用智能体——例如强制遵循 [WCAG][wcag] 的无障碍智能体、遵循安全编码实践的安全智能体,或保持一致测试模式的测试智能体。 + +自定义智能体通过项目 `.github/agents` 文件夹中的 markdown 文件定义,也可以全局定义在 `~/.copilot/agents` 中。每个文件都有 YAML frontmatter,至少包含 `name` 和 `description`,后面跟着一个 markdown prompt,用于定义智能体的行为、专长和说明。 + +### 自定义智能体与智能体技能的对比 + +自定义智能体与[智能体技能][agent-skills-concept]在逻辑上有一些重叠。两者主要都通过 markdown 文件定义,也都在告诉 AI 如何执行操作。最清晰的区分方式是:**自定义智能体**是执行工作的角色,而 **skills** 是工具。 + +自定义智能体拥有自己的上下文窗口,并且设计上就用于在工作过程中编排技能(甚至其他智能体)。在这个实验中,无障碍自定义智能体会根据无障碍准则审查并更新网站;在执行这项工作时,它可以调用诸如 pull request 工作流技能,或用于运行和管理测试的技能。 + +> [!NOTE] +> 编写自定义智能体并不存在唯一“正确”的方式。和 AI 中的大多数事情一样,需要测试并迭代,找到最适合环境和场景的做法。 + +[custom-agents-concept]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-custom-agents +[agent-skills-concept]: https://docs.github.com/copilot/concepts/agents/about-agent-skills +[wcag]: https://www.w3.org/WAI/standards-guidelines/wcag/ + +## 场景 + +许多 Web 应用在无障碍方面都做得不够,而正在使用的网站也不例外。接下来将使用一个自定义智能体来识别并解决无障碍缺陷。 + +Tailspin Toys 致力于确保其众筹平台对所有用户都可访问,无论其视觉能力或偏好如何。最近的用户反馈指出,由于文本与背景颜色之间的对比度不足,一些用户认为当前的深色主题难以阅读。为了解决这一无障碍问题,设计团队要求实现一种可开关的高对比度模式。 + +由于无障碍非常关键,希望尽快实现这项功能。因此将使用一个自定义智能体来生成功能。 +在本练习中,将: + +- 探索自定义智能体。 +- 启用一个自定义智能体,并通过 Copilot CLI 为其分配任务。 + +## 查看无障碍自定义智能体 + +项目中已经预先创建了一个用于无障碍的自定义智能体。先查看其内容,了解它将如何引导 Copilot。 + +1. 打开 `.github/agents/accessibility.md`。 +2. 注意其中带有 `name` 和 `description` 字段的 YAML frontmatter。 + +> [!CAUTION] +> 自定义智能体必须包含带 `name` 和 `description` 的 frontmatter。 + +3. 接着浏览后续部分,查看其中强调的内容: + - 为无障碍网站生成代码时的核心职责。 + - 无障碍最佳实践。 + - HTML、CSS 和 JavaScript 的代码示例。 + - 常见陷阱和错误列表。 + +## 在 Copilot CLI 中使用自定义智能体 + +可以通过 `/agent` 命令在 Copilot CLI 中启动自定义智能体。现在对网站执行一次无障碍检查。 + +> [!TIP] +> **启动 Copilot CLI 会话** +> +> 开始下面的练习前,先返回 codespace 并打开一个终端(如果还没打开,可按 Ctrl+\`)。然后使用 `--yolo` 和 `--enable-all-github-mcp-tools` 启动 Copilot CLI: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 如果希望接续这个项目最近一次会话,而不是重新开始,请运行 `copilot --yolo --enable-all-github-mcp-tools --continue`。如果 Copilot CLI 仍在运行之前练习中的会话,请发送 `/clear` 开始一段新的对话。 +> +> `--enable-all-github-mcp-tools` 会为当前会话启用 GitHub MCP 读写工具,因此在工作坊流程中 Copilot 可以读取积压工作并打开 pull request。 + +> [!CAUTION] +> `--yolo` 会启用完整的自动权限(`--allow-all-tools`、`--allow-all-paths` 和 `--allow-all-urls`)。只能在 Codespace 或 VM 这类隔离环境中使用,绝不要把它设成日常开发的默认别名。详情见[允许和拒绝工具使用][allow-all-warning]。 + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. 在 Copilot CLI 的提示窗口中输入 `/agent` 并选择 Enter,调出智能体列表。 +2. 从可用智能体列表中选择 **Accessibility agent**。 +3. 使用以下提示,请无障碍智能体执行审查,并为无障碍积压工作项生成修复: + + ``` + Perform an accessibility review of the site. Pull the related issue down from the repository for details. Implement a high-contrast mode toggle that persists the user's preference across page reloads. Ensure there are e2e tests for any updates made to the project. Then create a PR with the updates. + ``` + +4. Copilot 会开始处理这项任务。它会先检索 issue,然后执行审查、生成更新,最后创建 PR。创建 PR 时,还会注意到它使用了项目中专门处理 PR 的技能。 + +> [!NOTE] +> 这个过程可能需要几分钟。正好可以回顾一下到目前为止学到的所有内容、休息片刻,或者提前看一下下一模块——其中会介绍 Copilot CLI 中更多可用命令。 + +## 总结和后续步骤 + +本课探索了 GitHub Copilot 中的[自定义智能体][custom-agents]:它们是面向特定任务和领域定制的专用 AI 助手。通过自定义智能体,可以把团队的经验和标准固化为可复用智能体,引导 Copilot 更高效地完成特定类型的工作。 + +本课探索了以下概念: + +- 自定义智能体是如何定义的。 +- 如何在 Copilot CLI 中使用自定义智能体。 + +接下来将探索[一些斜杠命令][next-lesson],学习更多 Copilot CLI 的使用技巧。 + +## 资源 + +- [自定义智能体][custom-agents] +- [为存储库创建自定义智能体][creating-custom-agents] +- [awesome-copilot 上的自定义智能体][awesome-copilot-agents] +- [在组织中启用自定义智能体的准备工作][org-custom-agents] +- [在企业中启用自定义智能体的准备工作][enterprise-custom-agents] + +[previous-lesson]: ../5-agent-skills/ +[next-lesson]: ../7-slash-commands/ +[custom-agents]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#use-custom-agents +[creating-custom-agents]: https://docs.github.com/copilot/how-tos/use-copilot-agents/cloud-agent/create-custom-agents +[awesome-copilot-agents]: https://github.com/github/awesome-copilot/tree/main/agents +[org-custom-agents]: https://docs.github.com/copilot/how-tos/administer-copilot/manage-for-organization/prepare-for-custom-agents +[enterprise-custom-agents]: https://docs.github.com/copilot/how-tos/administer-copilot/manage-for-enterprise/manage-agents/prepare-for-custom-agents diff --git a/docs/zh-cn/cli/7-slash-commands.md b/docs/zh-cn/cli/7-slash-commands.md new file mode 100644 index 0000000..15262f2 --- /dev/null +++ b/docs/zh-cn/cli/7-slash-commands.md @@ -0,0 +1,177 @@ +--- +title: "练习 7 - GitHub Copilot CLI 中的斜杠命令" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +像其他优秀的 CLI 工具一样,GitHub Copilot CLI 也提供了许多斜杠命令供交互使用。这些命令会暴露高级功能、“幕后”信息或额外的配置选项。前面已经体验过 `/clear`(清理上下文)和 `/mcp`(查看 MCP 服务器)。接下来再探索几个强大的命令,包括 `/context`、`/model`、`/share` 和 `/delegate`。 + +## 场景 + +核心 CLI 流程已经体验完毕。现在再看看一些附加能力——共享会话、切换模型,以及把任务委托给 [Copilot cloud agent][about-cloud-agent]。 + +在本练习中,将使用: + +- `/share` 创建一个 GitHub gist,与团队共享会话。 +- `/context` 查看 Copilot CLI 当前使用的上下文。 +- `/model` 查看可用模型列表,并在需要时选择新的模型。 +- `/delegate` 可选地把任务移交给 cloud agent。这需要 cloud agent,Copilot Student、Pro、Pro+、Business 和 Enterprise 都支持——只有 Copilot Free 不支持。 + +## 共享会话 + +无论使用什么工具,包括 AI 工具,本身都是一种技能。与团队一起工作、彼此分享经验,是帮助所有人提升体验并生成更高质量代码的最佳方式。为此,Copilot CLI 提供了 `/share` 命令。`/share` 可以生成 markdown 文件或 GitHub gist,其中包含会话详情、使用过的提示以及 Copilot 采取的逻辑。 + +现在创建一个可以分享给团队的 GitHub gist。 + +> [!TIP] +> **启动 Copilot CLI 会话** +> +> 开始下面的练习前,先返回 codespace 并打开一个终端(如果还没打开,可按 Ctrl+\`)。然后使用 `--yolo` 和 `--enable-all-github-mcp-tools` 启动 Copilot CLI: +> +> ```bash +> copilot --yolo --enable-all-github-mcp-tools +> ``` +> +> 如果希望接续这个项目最近一次会话,而不是重新开始,请运行 `copilot --yolo --enable-all-github-mcp-tools --continue`。如果 Copilot CLI 仍在运行之前练习中的会话,请发送 `/clear` 开始一段新的对话。 +> +> `--enable-all-github-mcp-tools` 会为当前会话启用 GitHub MCP 读写工具,因此在工作坊流程中 Copilot 可以读取积压工作并打开 pull request。 + +> [!CAUTION] +> `--yolo` 会启用完整的自动权限(`--allow-all-tools`、`--allow-all-paths` 和 `--allow-all-urls`)。只能在 Codespace 或 VM 这类隔离环境中使用,绝不要把它设成日常开发的默认别名。详情见[允许和拒绝工具使用][allow-all-warning]。 + +[allow-all-warning]: https://docs.github.com/copilot/how-tos/copilot-cli/use-copilot-cli/allowing-tools + +1. 在 Copilot CLI 的提示窗口中发送以下命令: + + ``` + /share gist + ``` + +2. 稍等片刻后,Copilot 会创建一个 gist 并显示链接。 +3. 复制该链接文本。 +4. 在新的浏览器标签页中粘贴链接并查看 gist。注意其中如何突出显示已发送的提示、使用过的技能和智能体、Copilot 的思考过程,甚至包括本地运行命令的代码和结果。 + +`/share` 生成的 gist 和 markdown 文件,既可以作为代码生成过程的文档,也可以用于向团队分享某些操作是如何完成的,以及这些操作如何帮助 Copilot 生成期望结果。 + +## 探索 Copilot CLI 的上下文 + +处理较大或较复杂的任务时,可能会触及模型的最大上下文窗口。窗口的具体大小取决于所使用的模型和 Copilot CLI 版本。当上下文窗口达到上限时,Copilot CLI 会自动压缩上下文,总结信息并移除它认为与当前任务无关的内容。可以使用斜杠命令查看当前上下文状态,也可以手动压缩上下文。现在来看看上下文窗口。 + +1. 在 Copilot CLI 的提示窗口中发送以下命令: + + ``` + /context + ``` + +2. 稍等片刻后,Copilot CLI 会生成当前上下文的可视化表示: + + ![Copilot CLI 上下文窗口截图](../../_images/cli-7-context-window.png) + +3. 注意显示的模型(可能与图片中不同)以及当前已使用的 token 百分比。其余信息展示了以下内容: + + | 标题 | 说明 | + | ------------ | ------------------------------------------------------ | + | System/Tools | 说明文件、文件内容和工具定义 | + | Messages | 与 Copilot 的对话历史 | + | Buffer | Copilot CLI 为生成响应预留的空间 | + | Free space | 剩余可用空间 | + +4. 向 Copilot CLI 发送以下斜杠命令,压缩对话历史: + + ``` + /compact + ``` + +5. 完成后,再次发送以下命令,显示当前上下文统计: + + ``` + /context + ``` + +6. 注意上下文的变化。由于当前上下文窗口可能还比较小,变化未必十分明显。 + +> [!NOTE] +> 当上下文变满时,Copilot CLI 会自动压缩。接近 100% 容量时,它会在提示窗口上方显示百分比。通常它会异步压缩,因此在处理过程中仍可继续与 Copilot 交互。不过,它也可能在执行压缩时阻塞当前操作几秒钟。 + +### 上下文最佳实践 + +在大多数会话中,Copilot 本身就能高效管理上下文,通常不需要额外指导。不过,在某些情况下,可能会决定手动指示 Copilot 清空或压缩其历史记录: + +- 如果要切换到应用的其他部分,或转到无关任务,可以使用 `/clear` 重新开始,避免旧的无关上下文让 Copilot 混淆。 +- 如果即将接近最大上下文窗口,可以手动使用 `/compact`,自行控制压缩发生的时机。 + +> [!CAUTION] +> 再次强调,大多数时候 Copilot 都能在无需直接干预的情况下管理上下文。如果发现 Copilot 因较早的信息而有些混乱,或者即将切换到无关任务,再考虑使用这些手动命令即可。 + +## 选择模型 + +不同模型有不同的强项,不同开发者也会有不同偏好。Copilot CLI 允许列出并选择要使用的模型。 + +1. 向 Copilot CLI 发送以下斜杠命令,显示模型列表: + + ``` + /model + ``` + +2. 查看模型列表。每个模型旁边都会显示其名称及单次请求成本修正值。 +3. 如果需要,可以选择一个新模型;或者选择 Esc 退出模型列表。 + +> [!CAUTION] +> 在 Copilot CLI 中,模型选择会持久保留。 + +## 委托给 cloud agent(可选) + +有时希望继续在终端中工作,但把耗时较长的任务交给 Copilot cloud agent。`/delegate` 命令会把当前 Copilot CLI 会话发送到 GitHub.com,由 cloud agent 接手,异步处理,并在完成后打开 pull request。 + +> [!NOTE] +> `/delegate` 需要 cloud agent,Copilot Student、Pro、Pro+、Business 和 Enterprise 都支持——只有 Copilot Free 不支持。如果没有访问权限,可以阅读这一部分,然后跳过动手步骤。 + +1. 先清空当前会话,避免把整个工作坊累积的上下文一并委托出去: + + ``` + /clear + ``` + +2. 发送一个范围较小、定义清晰的提示。例如,可以委托积压工作中的延伸目标——分页功能: + + ``` + Implement pagination on the game list page so it shows a fixed number of games per page with Previous and Next controls, and add tests. + ``` + +3. 发送以下斜杠命令,把会话交给 cloud agent,并确认要委托的提示: + + ``` + /delegate + ``` + +4. 在浏览器中打开 [Copilot agents](https://github.com/copilot/agents) 以监控进度。 +5. 在这个路径中,无需等待 pull request 完成;稍后可以再回来查看。如果想更深入了解如何管理异步 agent 工作,可继续学习 [Cloud agent 路径](../../cloud/)。 + +## 总结和后续步骤 + +在 Copilot CLI 中使用斜杠命令,可以对它进行配置、共享会话,并查看 Copilot 工作方式的内部信息。本课中,已经使用或了解了以下内容: + +- 使用 `/share` 创建 GitHub gist,与团队共享会话。 +- 使用 `/context` 查看 Copilot CLI 当前使用的上下文。 +- 使用 `/model` 查看可用模型列表,并在需要时选择新的模型。 +- 了解了 `/delegate` 作为连接 cloud agent 的可选桥梁。 + +当然,还有更多斜杠命令可用,也还有更多 Copilot CLI 功能值得探索。最后通过[回顾已学内容][next-lesson]以及后续学习方向,为这段旅程收尾。 + +## 资源 + +- [使用 Copilot CLI][using-copilot-cli] +- [关于 Copilot CLI][about-copilot-cli] +- [Copilot CLI 中的上下文管理][context-management] +- [使用 Copilot CLI 共享会话][share-sessions] +- [在 Copilot CLI 中选择模型][selecting-models] + +[previous-lesson]: ../6-custom-agents/ +[next-lesson]: ../8-review/ +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[about-cloud-agent]: https://docs.github.com/copilot/concepts/agents/cloud-agent/about-cloud-agent +[context-management]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#context-management +[share-sessions]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#share-sessions +[selecting-models]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#select-an-llm diff --git a/docs/zh-cn/cli/8-review.md b/docs/zh-cn/cli/8-review.md new file mode 100644 index 0000000..5b1db08 --- /dev/null +++ b/docs/zh-cn/cli/8-review.md @@ -0,0 +1,70 @@ +--- +title: "练习 8 - 回顾与后续步骤" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +在前几节练习中,已经探索了 GitHub Copilot CLI 的一些最常见用例,包括: + +- 与 GitHub 和其他 MCP 服务器交互。 +- 使用说明文件指导代码生成。 +- 实现技能,为 Copilot CLI 工具箱添加工具。 +- 调用自定义智能体处理更高级、更复杂的任务。 +- 使用斜杠命令管理会话,并可选择通过 `/delegate` 衔接回 cloud agent。 + +下面再谈谈一些斜杠命令、最佳实践和后续步骤。 + +## 斜杠命令 + +Copilot CLI 提供了一系列斜杠命令用于交互,其中包括一些可用于配置它或查看幕后情况的命令。前面已经使用过 `/clear` 来开始新聊天并清除当前上下文,也使用过 `/mcp` 来查看和管理 MCP 服务器。以下是一些可能也很有用的命令: + +| 命令 | 说明 | +| ------------------ | ------------------------------------------------------------- | +| `/add-dir` | 将目录添加到 Copilot 的受信任列表 | +| `/clear`, `/new` | 清除对话历史并重新开始 | +| `/compact` | 总结对话历史,以减少上下文窗口占用 | +| `/context` | 显示上下文窗口 token 使用情况和可视化信息 | +| `/diff` | 查看当前目录中的变更 | +| `/model` | 选择要使用的 AI 模型(Claude Sonnet、GPT-5 等) | +| `/plan ` | 在编码前创建实现计划 | +| `/review ` | 运行代码审查代理分析变更 | +| `/delegate` | 将任务委托给 Copilot cloud agent 进行异步处理 | +| `/session` | 显示会话信息和工作区摘要 | +| `/share` | 将会话共享为 markdown 文件或 GitHub gist | +| `/skills` | 管理技能以增强能力 | +| `/usage` | 显示会话使用指标和统计信息 | + +> [!TIP] +> 使用 `/help` 查看完整的可用命令列表和键盘快捷键。 + +## 最佳实践 + +使用任何 AI 工具时,底层基础设施都会影响最终效果。完善的说明文件、自定义智能体和智能体技能都很重要——本工作坊已经逐一体验过。[awesome-copilot][awesome-copilot] 是一个很好的模板来源,而 Copilot 本身也可以为这些内容生成脚手架,作为起点。 + +和基础设施同样重要的,仍然是上下文。清楚描述想构建*什么*、*为什么*构建、以及*如何*构建,都会显著影响输出结果。凡是有助于 Copilot 的信息,都应该主动提供。 + +## 后续步骤 + +提升任何工具使用能力的最好方式,就是持续使用它。把它用在生产代码上、用在个人项目上,或者用在那个想了很多年却一直没开始实现的小应用上。把经验分享给团队,也从团队中学习。并且,一如既往地,多查阅文档。 + +如果想继续探索 GitHub Copilot 生态系统,可以查看 [VS Code 路径](../../vscode/) 或 [Cloud agent 路径](../../cloud/)。 + +## 资源 + +- [关于 Copilot CLI][about-copilot-cli] +- [使用 Copilot CLI][using-copilot-cli] +- [Awesome Copilot 存储库][awesome-copilot] +- [自定义说明指南][repo-instructions] +- [Agent Skills 文档][agent-skills] +- [自定义智能体文档][custom-agents] +- [MCP 规范][mcp-spec] + +[previous-lesson]: ../7-slash-commands/ +[about-copilot-cli]: https://docs.github.com/copilot/concepts/agents/about-copilot-cli +[using-copilot-cli]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli +[awesome-copilot]: https://github.com/github/awesome-copilot +[repo-instructions]: https://docs.github.com/copilot/how-tos/configure-custom-instructions/add-repository-instructions +[agent-skills]: https://docs.github.com/copilot/concepts/agents/about-agent-skills +[custom-agents]: https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#use-custom-agents +[mcp-spec]: https://modelcontextprotocol.io/ diff --git a/docs/zh-cn/cli/README.md b/docs/zh-cn/cli/README.md new file mode 100644 index 0000000..5d6513c --- /dev/null +++ b/docs/zh-cn/cli/README.md @@ -0,0 +1,55 @@ +--- +slug: zh-cn/cli +title: "GitHub Copilot CLI" +authors: + - geektrainer +lastUpdated: 2026-06-30 +--- + +**[GitHub Copilot CLI](https://docs.github.com/copilot/concepts/agents/about-copilot-cli)** 将 GitHub Copilot 作为代理式编码助手带入终端。它可以探索代码库、生成代码、运行命令,并连接外部工具——全部通过命令行完成,无需切换到图形化编辑器即可保持工作流畅。 + +在这些练习中,将先安装并验证 Copilot CLI,然后通过自定义说明为它提供项目上下文,再使用计划模式有目的地生成一个功能。接着连接 Playwright MCP 服务器,在真实浏览器中测试该功能;然后通过可复用的智能体技能和自定义智能体扩展 Copilot。最后,将探索用于管理上下文、模型和共享的斜杠命令,并回顾已完成的内容。 + +## 练习 + +| 练习 | 主题 | 说明 | +|----------|-------|-------------| +| [0. 先决条件][ex0] | 设置 | 创建存储库和 codespace | +| [1. 安装 Copilot CLI][ex1] | 安装 | 安装并验证 Copilot CLI | +| [2. 自定义说明][ex2] | 上下文 | 添加一条说明,并观察 Copilot CLI 如何遵循它 | +| [3. 生成代码][ex3] | 代码生成 | 使用计划模式生成功能 | +| [4. 使用 Playwright MCP 测试][ex4] | 外部工具 | 添加 Playwright MCP 服务器,并在浏览器中测试功能 | +| [5. 智能体技能][ex5] | 技能 | 用专门的技能增强 Copilot | +| [6. 自定义智能体][ex6] | 智能体 | 查看并使用自定义智能体 | +| [7. 斜杠命令][ex7] | CLI 功能 | 探索上下文、模型、共享,以及可选的委托给 cloud agent | +| [8. 回顾][ex8] | 总结 | 回顾关键概念和后续步骤 | + +## 先决条件 + +参加本工作坊前,请确保已具备以下条件: + +- [ ] 拥有 GitHub 账户,并已启用 **Copilot Student、Pro、Pro+、Business 或 Enterprise** 计划 +- [ ] 对终端/命令行操作有基本了解 +- [ ] 已安装并配置 Git + +> [!TIP] +> 没有付费计划?已验证学生可通过 [GitHub Education][callout-student-plan-education] 免费使用 GitHub Copilot。**Copilot Student** 计划包含本工作坊所用的智能体、MCP、代码审查和 Copilot CLI 功能,因此可以完整完成所有路径。 + +[callout-student-plan-education]: https://github.com/education/students + +> [!NOTE] +> 如果使用的是 Copilot Business 或 Copilot Enterprise,请确认管理员已启用 Copilot CLI。 + +## 开始 + +**[从练习 0:先决条件开始 →][ex0]** + +[ex0]: 0-prerequisites/ +[ex1]: 1-install-copilot-cli/ +[ex2]: 2-custom-instructions/ +[ex3]: 3-generating-code/ +[ex4]: 4-mcp/ +[ex5]: 5-agent-skills/ +[ex6]: 6-custom-agents/ +[ex7]: 7-slash-commands/ +[ex8]: 8-review/ diff --git a/website/package.json b/website/package.json index e07ca08..bd5edcc 100644 --- a/website/package.json +++ b/website/package.json @@ -23,5 +23,8 @@ "devDependencies": { "@typescript/native-preview": "^7.0.0-dev.20260707.2", "remark-github-admonitions-to-directives": "^2.1.0" + }, + "allowScripts": { + "esbuild@0.28.1": true } }