Cómo crear una extensión de GitHub Copilot: guía paso a paso

por | Oct 31, 2024 | Tecnologías

Comparte

GitHub Copilot, el asistente de programación basado en IA, ha presentado recientemente Copilot Extensions para mejorar su ecosistema. Esta función, que ahora se encuentra en versión beta pública , permite a los desarrolladores crear extensiones personalizadas que se integran con Copilot. En esta publicación del blog, analizaremos el proceso de creación de su primera extensión de GitHub Copilot.

Antes de comenzar, es importante tener en cuenta que debes tener una suscripción activa a GitHub Copilot para crear y usar extensiones de Copilot.

Creación del punto final para su extensión Copilot

Una extensión de Copilot es básicamente una aplicación de GitHub con un punto de conexión específico. Configuremos el proyecto y creemos este punto de conexión, que juntos formarán la extensión de Copilot.

Configuración de su proyecto

En esta guía, utilizamos Hono.js como nuestro marco web, pero puedes utilizar cualquier marco web o servidor web de tu elección.

La historia del framework web Hono, del creador de Hono

Hono es un marco web rápido, liviano y creado con la API de estándares web. Conozca la historia de Hono de la mano del creador de Hono.blog.cloudflare.com

Los conceptos básicos seguirán siendo los mismos independientemente del marco que elijas. Lo único que debes tener en cuenta sobre el SDK es que, por el momento, los únicos lenguajes compatibles son TypeScript y JavaScript.

  1. Cree un nuevo proyecto Hono utilizando la CLI de Hono:
    npm create hono@latest Sigue las instrucciones para configurar tu proyecto. Esto creará un nuevo proyecto TypeScript utilizando Hono.js , un framework web ligero y rápido.
  2. Instale la versión preliminar del SDK para las extensiones de Copilot y el paquete principal de Octokit:
    npm install @copilot-extensions/preview-sdk @octokit/core Logotipo de GitHub extensiones de copiloto / preview-sdk.jsUn SDK que optimiza el desarrollo de extensiones al automatizar la verificación de solicitudes, el formato de respuestas y las interacciones de API.@copilot-extensions/preview-sdkEste SDK simplifica el proceso de creación de extensiones de GitHub Copilot. Antes, la creación de extensiones de Copilot requería el manejo manual de la verificación de solicitudes, el formato de las respuestas y las interacciones con la API. Este SDK simplifica estas tareas, lo que le permite centrarse en la funcionalidad principal de su extensión en lugar de crear código repetitivo. Úselo para integrar sus herramientas, API o fuentes de datos directamente en Copilot Chat.Consideramos que este SDK es un software alfa en términos de estabilidad de API, pero nos adherimos al control de versiones semántico, por lo que es seguro usarlo hoy.Características principales
    • Solicitar verificación de carga útil
    • Análisis de carga útil
    • Edificio de respuesta
    Beneficios
    • Maneja los requisitos de seguridad y formato de respuesta.
    • Proporciona utilidades para tareas de extensión comunes.
    • Agiliza el proceso de desarrollo
    UsoVerificar una solicitudimport { verifyRequestByKeyId } from «@copilot-extensions/preview-sdk»; const { isValid, cache } = await verifyRequestByKeyId( request.body, signature, keyId, { token: process.env.GITHUB_TOKEN, }, ); //…Ver en GitHub
  3. Abra su archivo principal (por ejemplo, src/index.ts) y comencemos importando las dependencias necesarias:
    import { Hono } from 'hono' import { serve } from '@hono/node-server'; import { Octokit } from "@octokit/core"; import { createAckEvent, createDoneEvent, createErrorsEvent, createTextEvent, getUserMessage, verifyAndParseRequest, } from "@copilot-extensions/preview-sdk"; const app = new Hono();

Implementación del punto final

Ahora, implementemos el punto final que manejará las solicitudes de GitHub Copilot:

  1. Crea una ruta raíz que reciba una publicación de formulario. /Este es el punto final con el que interactuará Copilot:
    app.post("/", async (c) => { // ... (we'll fill this in next) });
  2. Cuando llega un mensaje, debes verificar la solicitud y analizar la carga útil:
    // Identify the user, using the GitHub API token provided in the request headers. const tokenForUser = c.req.header("X-GitHub-Token") ?? ""; const body = await c.req.text(); const signature = c.req.header("github-public-key-signature") ?? ""; const keyID = c.req.header("github-public-key-identifier") ?? ""; const { isValidRequest, payload } = await verifyAndParseRequest( body, signature, keyID, { token: tokenForUser, } ); if (!isValidRequest) { console.error("Request verification failed"); c.header("Content-Type", "text/plain"); c.status(401); c.text("Request could not be verified"); return; }
  3. Después de verificar la solicitud, procese el mensaje y cree una respuesta. A continuación, se muestra un ejemplo sencillo que saluda al usuario:
    const octokit = new Octokit({ auth: tokenForUser }); const user = await octokit.request("GET /user"); const prompt = getUserMessage(payload); return c.text( createAckEvent() + createTextEvent( `Welcome ${user.data.login}! It looks like you asked the following question, "${prompt}". This is a GitHub Copilot extension template, so it's up to you to decide what you want to implement to answer prompts.` ) + createDoneEvent() );

Este ejemplo utiliza el paquete Octokit de GitHub para obtener el nombre de inicio de sesión del usuario y lo saluda. La createTextEventfunción se utiliza para crear la respuesta que mostrará GitHub Copilot.

Exponiendo su extensión

Para probar su extensión Copilot, debe hacerla accesible públicamente:

  1. Si usa Visual Studio Code (VS Code), habilite el reenvío de puertos . Tenga en cuenta que el puerto es privado de manera predeterminada, lo cual es bueno, pero para nuestro caso de uso, debemos configurarlo como público.
  2. Alternativamente, utilice herramientas como Cloudflared o ngrok para exponer una URL pública.

En el código proporcionado, el servidor está configurado para ejecutarse en el puerto 3000:

const port = 3000;
console.log(`Server is running on port ${port}`);

serve({
  fetch: app.fetch,
  port,
});

Vale la pena mencionar que esta configuración es excelente para realizar pruebas, pero una vez que esté listo para hacer pública su extensión, deberá implementar la aplicación web (que actúa como la aplicación de GitHub) en una ubicación de acceso público.

Creación de una aplicación de GitHub

Crea una nueva aplicación de GitHub en tu cuenta personal para realizar pruebas. Dirígete a la página de configuración de GitHub y, en la parte inferior izquierda, haz clic en el enlace Configuración de desarrollador. Esto te llevará a tus aplicaciones de GitHub. También puedes navegar directamente a la página de tus aplicaciones de GitHub en https://github.com/settings/apps .

Configuración general

  1. Ingrese un nombre de aplicación de GitHub, por ejemplo, mi extensión de copiloto
  2. Introduzca una URL para la página de inicio. Puede ser la misma que la URL de prueba por ahora.
  3. Establezca la URL de devolución de llamada (actualmente es obligatoria). Puede ser la misma que la URL de prueba por ahora. Incluso si no está utilizando OAuth, deberá colocar una URL aquí. Me dijeron que en el futuro esto puede no ser necesario.
  4. Deshabilite los webhooks si están habilitados.
  5. Asegúrate de que la aplicación sea accesible inicialmente solo para ti. Puedes habilitarla para todos cuando estés listo para que tu extensión GitHub Copilot esté disponible públicamente.
  6. Haga clic en el botón Crear aplicación de GitHub para crear la aplicación de GitHub.

Configuración de permisos y eventos

A continuación, tendremos que configurar los permisos. Queremos proporcionar los permisos mínimos necesarios para que funcione una extensión de Copilot.

Configuración de permisos para una aplicación de GitHub
  1. Expande las secciones de Permisos de la cuenta y establece el permiso de Copilot Chat en Solo lectura . El valor predeterminado es Sin acceso .
  2. Haga clic en Guardar cambios . No se alarme por el mensaje ¿Está seguro de que desea actualizar los permisos?

Configuración del copiloto

  1. Establezca el tipo de aplicación en Agente . Está configurado como Deshabilitado de manera predeterminada.
  2. Establezca la URL en la raíz de la URL pública que expuso a través de tunelización/reenvío de puertos.
  3. Haga clic en Guardar.

¡Felicitaciones! ¡Has configurado tu primera extensión de Copilot!

Sección de aplicaciones de GitHub de la configuración del desarrollador en GitHub

Instalar la extensión Copilot

Antes de poder utilizar la extensión, es necesario instalarla.

  1. Navega a tus aplicaciones de GitHub en tu configuración de desarrollador .
  2. Haga clic en el botón Editar para editar la aplicación.
  3. Vaya a la sección Instalar aplicación de la configuración de la aplicación GitHub.
  4. Haga clic en el botón Instalar para instalar la aplicación.
  5. Se te llevará a una página intermedia para confirmar la instalación de la aplicación de GitHub. Haz clic en el botón Instalar .
  6. Su extensión Copilot está instalada para su cuenta de GitHub.

Probando su extensión

Puede probar su extensión Copilot en algunos entornos:

  1. Chat de Copilot en GitHub.com
  2. Chat de copiloto de VS Code
  3. Chat de Copilot de Visual Studio

Para estos entornos, siga estos pasos:

  1. En el chat de GitHub Copilot, escribe «@» para ver las extensiones disponibles.
  2. Su extensión debería aparecer, por ejemplo, como «@my-copilot-extension».
  3. Seleccione su extensión y haga una pregunta o realice una operación.
  4. La extensión Copilot devolverá una respuesta de ¡Bienvenido, tu_nombre_de_usuario_de_Github! Parece que hiciste la siguiente pregunta, «tu_pregunta». Esta es una plantilla de extensión Copilot de GitHub, por lo que depende de ti decidir qué quieres implementar para responder las solicitudes.

No responderá a tu pregunta específica porque esa función no se ha implementado. Aquí puedes explorar la versión preliminar del SDK o integrarlo con un servicio de terceros para brindar respuestas más significativas.

Un ejemplo del mundo real

He creado una extensión Copilot de prueba de concepto (POC) para OpenSauced, donde trabajo, que demuestra estos principios en acción.

Logotipo de GitHub nickytonline / copiloto-de-salsa-abierta-ext-poc

Prueba de concepto (POC) de la extensión Copilot de OpenSauced

Una prueba de concepto muy básica de una extensión de GitHub Copilot que utiliza OpenSauced y que aprovecha la versión preliminar del SDK de GitHub Copilot .

Con el tiempo habrá mejores instrucciones, pero por ahora:

npm install
npm run dev
open http://localhost:3000

Utilice la tunelización para exponer su host local a Internet a través del reenvío de puertos de VS Code , ngrok o similar.

Necesitará crear una aplicación de GitHub para que la extensión Copilot funcione y usar la URL del túnel anterior en la configuración de su aplicación de GitHub.

Consulte https://github.blog/news-insights/product-news/introducing-github-copilot-extensions/ para obtener más información.

Ver en GitHub

Esta extensión utiliza la función StarSearch de OpenSauced para proporcionar información de código abierto directamente dentro de Copilot.

¿Tienes curiosidad sobre StarSearch? 👇

StarSearch: Creando conexiones de código abierto

Descubra cómo StarSearch revoluciona la colaboración de código abierto al conectar proyectos con los mejores talentos utilizando información impulsada por IA sobre eventos de GitHub y actividades de los colaboradores.pizza con salsa abierta

Esta prueba de concepto muestra cómo aprovechar las API y los servicios externos para crear extensiones potentes y sensibles al contexto que mejoren la experiencia de Copilot.

Obtenga la plantilla de extensión GitHub Copilot

Si estás interesado en iniciar tu propia extensión GitHub Copilot, he creado una plantilla para ayudarte a comenzar rápidamente:

Logotipo de GitHub nickytonline / plantilla de extensión de copiloto

Una plantilla de extensión de GitHub Copilot

Una plantilla para su primera extensión de Copilot

Esta es una plantilla para crear tu primera extensión de Copilot. Es una aplicación Node.js sencilla que utiliza Hono.

Empezando

npm install
npm run dev
open http://localhost:3000

Utilice la tunelización para exponer su host local a Internet a través del reenvío de puertos de VS Code , ngrok o similar.

Necesitará crear una aplicación de GitHub para que la extensión Copilot funcione y usar la URL del túnel anterior en la configuración de su aplicación de GitHub.

Para obtener un desglose completo de cómo comenzar, consulte la publicación del blog de Nick, Creación de una extensión de GitHub Copilot: una guía paso a paso .

Ver en GitHub

Esta plantilla proporciona una base sólida para crear su extensión, incorporando las mejores prácticas y una estructura básica sobre la que construir. La plantilla utiliza el servidor Node.js de Hono.js, pero vale la pena señalar que Hono.js ofrece varios adaptadores para diferentes entornos de implementación. Puede utilizar adaptadores para plataformas como Netlify, Vercel, Cloudflare Workers y más. Para obtener más información sobre Hono.js y sus adaptadores, consulte su guía de introducción .

También te invito a que eches un vistazo a los ejemplos en la organización copilot-extensions en GitHub, incluidos algunos ejemplos en la versión preliminar del SDK:

Extensiones de Copilot · GitHub

Un kit de herramientas para crear integraciones en GitHub Copilot. Acceda a ejemplos de código, una herramienta de depuración, un SDK y un repositorio de comentarios de los usuarios. Documentación: https://gh.io/builder-docs – Extensiones de Copilotgithub.com

Estos ejemplos pueden servirle de inspiración y orientación a medida que desarrolla sus propias extensiones.

Profundice en las extensiones de Copilot y la versión preliminar del SDK

Para obtener más información sobre la versión preliminar del SDK y las extensiones de Copilot en general, consulte este video: «¡Construyamos una extensión de Copilot!» ¡Un agradecimiento a Gregor Martynus ( @gr2m ) y Francis Batac ( @francisfuzz ) por acompañarme!

Este video proporciona información valiosa sobre el proceso de desarrollo y puede ayudarlo a comprender los matices del trabajo con las extensiones de Copilot.

También te recomiendo que consultes la documentación oficial de GitHub Copilot .

Terminando

La creación de una extensión de GitHub Copilot abre nuevas posibilidades para mejorar el flujo de trabajo de desarrollo. Si sigue esta guía, podrá comenzar a crear extensiones personalizadas que aprovechen el poder de Copilot y, al mismo tiempo, agreguen su propia funcionalidad exclusiva.

Recuerda que la función Extensiones de Copilot todavía está en versión beta, así que estate atento a las actualizaciones y mejoras a medida que el ecosistema evoluciona. ¡Es un momento emocionante para participar y, potencialmente, dar forma al futuro de la codificación asistida por IA!

¡Hasta la próxima!

Abrir chat
Powered by Joinchat
Hola
¿En qué podemos ayudarte?