DEV Community

Cover image for Provide context to GitHub Copilot Chat
Christopher Harrison for GitHub

Posted on

Provide context to GitHub Copilot Chat

Context is key. This is true across all forms of communication, including with generative AI assistants like GitHub Copilot. When you're interacting with GitHub Copilot Chat, there's numerous features available to you to help point Copilot in the right direction, to help it understand what you're looking for. In turn, the suggestions you'll receive will improve! Let's walk through some of the most powerful techniques to help you get the most out of the tool.

Highlight the code

Let's say I'm trying to understand a block of code, improve its performance, or discover any security flaws. The first thing Copilot needs to know is the code I'm referring to. You can do this by highlighting the code in question. This will focus Copilot's attention on that block, and it will respond based on what it sees.

One thing you'll notice in the Chat window after you send a message is a references widget. If you expand this widget you'll be able to see what Copilot considered when crafting its answer. If you ever ask a question and the response doesn't relate to what you expected, check the references section.

Video of code being highlighted, asking GitHub Copilot Chat what the code does, then focusing on the references widget

Use slash commands for quick access to common questions

Copilot is great at tasks like explaining code, suggesting fixes, and generating tests. In fact, these are three of the most common workloads for Copilot, so much so that there's shortcuts to help you do these with minimal typing!

For frequently used pieces of functionality, Copilot Chat provides slash commands. These include /tests for generating unit tests or /fix to have Copilot determine a fix for buggy code. You can list all the commands available by using /help.

IMPORTANT After adding a / command, make sure you press Tab to activate it.

Expand beyond the current file with workspace

One thing you might notice about several of the slash commands is the addition of @workspace. In a nutshell, this allows Copilot to create an index of your workspace (or project), and build a response to your prompt holistically. This is rather powerful when considering multiple files is important to providing the correct code. In the example below, we have a code block which uses a service defined in a separate file. If we use /explain which includes the @workspace agent we can see the updated references widget includes not just the current file but also the source code for the service. This allows for a more robust answer.

Clip of using /explain with @workspace and how the references will now include additional files

Be specific about the important files

@workspace uses the entire workspace. But what if we know exactly what files are important to the question being asked? Let's say I'm adding some JavaScript where we need to find an element by its ID and use some CSS classes defined in a stylesheet? By using #file we can point Copilot at those specific files, which we can again see in the references widget, increasing the quality of code.

In my example I have an HTML file with an element with an ID of name-display. I have a CSS class named message-header. If I can't remember the exact names (which is pretty typical for me (and I think many developers)), I'd have to open up each file individually, explore to find the names, and then code. With #file I can point Copilot at the files, then just describe what I need. Copilot will intuit the rest for me!

Video showing if you use #file you can select specific files to add to context. The text explains that we need to use the name display from #file:index.html and the message class from #file:index.css

Iterate and build together

GitHub Copilot has the tagline of "Your AI pair programmer". This is the perfect description of how best to interact with Copilot. If we think about talking to a coworker, or really any other person, there's often some back and forth which takes place before we find the answer we're seeking. In the example below, I asked Copilot to generate a search function by distance, which it did. But what if we wanted this to be a range rather than equality. If we provide more information we'll get the code we're looking for.

Video demonstrating chat where we start by asking for a function to search races by distance. Copilot gives us a function based on equality. We then follow up by clarifying we want to search by a range, and Copilot updates its response based on the new context.

Final thoughts

As I highlighted at the top, context is key to communication. The better we help Copilot understand what we're looking for and what's important the better the responses will be. Using the techniques above to help focus Copilot's attention will allow you to move that much faster and stay in the zone.

Top comments (7)

Collapse
 
harryadney profile image
Martin Dimmock

Thanks for this. Even though I've got copilot installed in vscode I rarely use it, not because I don't need it, but I have that muscle memory of switching to Google and doing a search! 🤦‍♂️
Definitely time for me to ingrain a new habit.

Collapse
 
geektrainer profile image
Christopher Harrison

It took me a long time to make that adjustment, but once I did I found it made me so much faster.

Collapse
 
gaksayoshi profile image
Gaksayoshi • Edited

Much appreciated

Collapse
 
dror_wayne_fine profile image
Dror Wayne

Really helpful guide!
Fine can integrate with GitHub and builds a knowledge base based on your codebase (from GitHub) and other tech (such as issue management, Linear, Sentry etc) which can also help the AI perform advanced tasks successfully.

Collapse
 
dror_wayne_fine profile image
Dror Wayne

Nice. Context really is the key to better AI coding. That's what we found at Fine as well which is why we index your entire repository and other apps (such as linear, sentry etc) to give the AI all the information to be able to perform

Collapse
 
samyakkkk profile image
Samyak Jain

Hi! great article. I wrote something in a similar category and would love your thoughts on it:

dev.to/commanddash/how-to-really-u...

Collapse
 
frulow profile image
Frulow

So many reactions yet too less comments.