Github Copilot Basics Workshop

👉 Bitovi can help you integrate this into your own SDLC workflow: AI for Software Teams

Environment Setup (~20min)

There are several things that need to be configured on your computer in order to follow along with this training.

✏️ Git

Git is a version control system which will allow you to download the example app we’ll be using in the workshop.

Installation instructions here: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

✏️ Node.js 24 & npm 11

The example app is built using the latest version of node (v24) & npm (v11), so you’ll need those installed. It’s recommended to use a version manager like nvm. (Note the demo may work with other versions of node/npm but it hasn’t been tested on any.)

Installation instructions: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

✏️ Visual Studio Code & Github Copilot

You’ll need the Visual Studio Code editor installed along with GitHub Copilot.

Install Visual Studio Code here: https://code.visualstudio.com/download

Github Copilot is the AI agent that we’ll be using throughout this workshop, if you don’t have it already, you’ll need to sign up for a free trial on the copilot website https://github.com/features/copilot

Once you have copilot activated, head over to Visual Studio Code and install the Copilot extension: https://wiki.at.bitovi.com/wiki/spaces/AIEnabledDevelopment/pages/1455849479

✏️ Downloading the Project Source Code

Throughout the session we’ll be using an example app called TaskFlow, the code for it along with setup instructions is stored on GitHub:

https://github.com/bitovi/taskflow

Copilot Basics (~15min)

Before we dive into automating copilot to complete the Jira ticket, let’s first look at the basics of using Copilot.

Ghost Text

https://wiki.at.bitovi.com/wiki/spaces/AIEnabledDevelopment/pages/1455816734

Checkpoints & Editing Previous Messages

https://bitovi.atlassian.net/wiki/x/GQBJWQ

Chat Modes

https://wiki.at.bitovi.com/wiki/spaces/AIEnabledDevelopment/pages/1455849536

Context

https://wiki.at.bitovi.com/wiki/spaces/AIEnabledDevelopment/pages/1456767283

TaskFlow App (5min)

TaskFlow is a project management app which let’s you keep track of tasks with the help of team members. The app has 4 pages.

Open

 

Open

 

Open

 

Open

 

In this workshop, we’ll be modifying the /tasks page by adding a search bar and the ability to filter tasks by their priority (low, medium, high) and status (todo, in progress, in review, done).

This is all laid out in a Jira ticket: https://bitovi.atlassian.net/browse/PLAY-23

One thing to notice about this Jira ticket is that it has Figma links as well as an image attachment. We’ll be learning is how to set up Copilot to read both of these via MCP servers (more on that later!).

The final goal of this workshop is to have Copilot complete this ticket for us in one shot.

Generating Copilot Instructions (~20min)

Our final goal for this training is to have Copilot complete a Jira ticket in one shot. In order for this to happen we need the right context. Copilot needs to know how the code in our codebase is structured, what the tech-stack is, how files are organized, what types of architecture we’re using and any unique code styles.

All of this information can be placed inside a special file called copilot-instructions.md which is stored in the .github folder.

Bitovi has developed a custom prompt chain for generating this file, it prompts the AI to extract the following information in order:

1. Determine the tech stack

2. Categorize files

3. Identify Architecture

4. Domain Deep Dive

5. Style guide Generation

6. Build Instructions

All of this information is then compiled into .github/copilot-instructions.mdwhich is automatically picked up by Copilot and used as context.

Prompt Chaining

Prompt chaining is a technique for prompting an AI agent where you have it generate information from one prompt which then feeds into the next in a sort of chain. Each prompt spawns another which allows you to build context as you go and for more complex and comprehensive prompts.

Bitovi’s custom prompt chain for creating copilot-instructions.md builds up a knowledge base of information about the app step by step where each step informs the next. We can kick it off with one of our magic prompts in this repository:

https://github.com/bitovi/ai-enablement-prompts/tree/main/understanding-code/instruction-generation#usage

Generating the Feature (~30min)

The final goal of this workshop is to add searching and filtering to the /tasks page of our TaskFlow app. This feature has been outlined in detail here:

https://bitovi.atlassian.net/browse/PLAY-23

One of the things you’ll notice about this issue is that it has an image attached as well as links to Figma designs outlining what the feature should look like. In order for our AI Agent to fully understand what it needs to do it will have to:

1. Read the Jira ticket

2. Look through the Figma designs and understand how the feature should look

3. Parse the attached image and understand it’s contents

All of this is possible with the help of the Model Context Protocol (MCP). This is what allows AI Agents to integrate with third party services like Figma and Jira. MCP is the communication bridge that we’ll use to get this feature implemented.

On the official Visual Studio Code website you can install MCP services for Atlassian (Jira) https://code.visualstudio.com/mcp. Simply click the install button and you’ll be redirected to VS Code and a config will be added to your global mcp.json file. This will allow Copilot to read the Jira ticket.

You can also install an MCP for Figma on that same site. One of the limitations of the default Figma MCP is that it only runs locally, you need to have Figma running and open to the file you want Copilot to read from. Because this is a demo, we’ve set up a dedicated proxy server which automatically spawns a Figma instance and open it to whatever file you’re requesting. That way we can all participate and have the same access to the Figma documents.

We still need a way of reading the image attachment though as Atlassian’s MCP doesn’t support reading attachments. Bitovi has created an MCP of our own called the Jira MCP Auth Bridge. This can be added in that same settings.json file as well, and will parse any images from the Jira ticket.

Once all the MCP servers are configured and running we’re ready to have Copilot generate the feature. To kick this off we’ll be using another custom prompt developed at Bitovi:

https://github.com/bitovi/ai-enablement-prompts/tree/main/writing-code/generate-feature#usage

This prompt will guide Copilot through all the steps necessary to complete the Jira ticket:

1. Retrieve the ticket

2. Parse the ticket contents

3. Gather supplementary information

4. Synthesize and recreate the ticket context

5. Implement the ticket logic

By the end of this process we’ll have a discrete set of changes which we can validate and test by running the dev server npm run dev and looking at the /tasks page.

The feature should look like the designs and be capable of filtering the tasks just like it’s described in the Jira ticket.

With those changes we’ve successfully integrated Copilot into a normal development workflow. This approach can scale to both frontend and backend features and gives you an idea of what’s possible with these emerging technologies!