GitHub Copilot Interface Overview
GitHub Copilot has no separate application window. It lives inside your code editor and shows up in specific ways as you type. Learning to recognize and use the different parts of the Copilot interface makes you significantly faster from your first week of use.
The Three Main Ways Copilot Appears
┌──────────────────────────────────────────────────────────────┐ │ COPILOT INTERFACE COMPONENTS │ │ │ │ 1. INLINE SUGGESTION (Grey text in editor) │ │ Shows code suggestions right where your cursor is │ │ │ │ 2. COPILOT CHAT PANEL (Side panel or popup) │ │ A chat window where you ask Copilot questions │ │ │ │ 3. STATUS BAR ICON (Bottom of editor window) │ │ Shows whether Copilot is active or has an issue │ └──────────────────────────────────────────────────────────────┘
Inline Suggestions: The Core Experience
Inline suggestions appear directly in your editor as you type — shown in light grey text after your cursor. They represent Copilot's best guess at what you want to write next.
EXAMPLE — What you see in the editor:
function getDiscount(price, member) {
if (member) {|
↑ cursor here
After a moment, grey text appears:
if (member) { return price * 0.9; }
↗
Grey suggestion from Copilot
This grey text does not affect your code. It disappears if you keep typing. You only accept it by pressing Tab.
Accepting Part of a Suggestion
You do not have to accept an entire suggestion. You can accept one word at a time. Press Ctrl+Right Arrow (Windows/Linux) or Option+Right Arrow (Mac) to accept one word from the suggestion. This lets you take useful parts while skipping the rest.
SUGGESTION: return price * 0.9;
↑
Press Ctrl+→ once: accepts "return"
Press Ctrl+→ again: accepts "price"
Press Ctrl+→ again: accepts "* 0.9;"
The Copilot Completions Panel
When Copilot shows an inline suggestion, you can ask it to show more alternatives. Press Ctrl+Enter (or Ctrl+Return on Mac) to open the Completions Panel. This panel shows up to 10 different suggestions for the same point in your code.
┌────────────────────────────────────────────────┐ │ GITHUB COPILOT COMPLETIONS (10 suggestions) │ ├────────────────────────────────────────────────┤ │ Option 1: return price * 0.9; │ │ Option 2: return price - (price * 0.1); │ │ Option 3: const discount = 0.10; │ │ return price * (1 - discount); │ │ Option 4: if (price > 100) return price... │ │ ... │ │ [Accept] next to each option │ └────────────────────────────────────────────────┘
Click Accept next to whichever suggestion you prefer. This panel is most useful when the first suggestion is not quite what you need but you want to explore variations.
Copilot Chat: The Conversational Interface
Copilot Chat is a separate panel that works like a messaging app for your code. You can ask questions, request explanations, or give instructions in plain English.
┌───────────────────────────────────────────────┐ │ COPILOT CHAT [X] │ ├───────────────────────────────────────────────┤ │ │ │ You: What does this function do? │ │ │ │ Copilot: This function takes an array of │ │ orders and calculates the total revenue by │ │ summing the price × quantity for each item. │ │ │ │ You: How can I make it faster? │ │ │ │ Copilot: You can use Array.reduce() instead │ │ of a for loop to simplify this... │ │ │ ├───────────────────────────────────────────────┤ │ [ Ask Copilot... ] [Send] │ └───────────────────────────────────────────────┘
Open Copilot Chat in VS Code with Ctrl+Shift+I on Windows/Linux or Ctrl+Shift+I on Mac. You can also click the chat icon in the Activity Bar on the left side of the editor.
Asking About Selected Code
Highlight any block of code in your editor, then right-click and select Copilot from the context menu. Options include:
- Explain This — Copilot explains the selected code in plain English
- Fix This — Copilot attempts to fix errors in the selected code
- Generate Docs — Copilot writes documentation comments for the selection
- Generate Tests — Copilot writes test cases for the selected function
The Status Bar Icon
The small Copilot logo in the bottom-right corner of VS Code communicates Copilot's current state:
ICON STATE MEANING ────────────── ────────────────────────────────────────── Active (white) Copilot is running and ready Spinning Copilot is generating a suggestion Crossed out Copilot is disabled for this file type Warning (!) Authentication error or subscription issue
Click the icon to open a quick menu where you can enable or disable Copilot globally, or just for the current file type.
Inline Chat: Ask Without Leaving Your Code
VS Code includes an Inline Chat feature that lets you ask Copilot a question right inside the editor, without opening the side panel. Press Ctrl+I (Windows/Linux) or Cmd+I (Mac) while your cursor is in a code file. A small input box appears above your current line.
INLINE CHAT EXAMPLE:
function processPayment(amount) {
┌────────────────────────────────────────────┐
│> Add input validation for negative amounts │
└────────────────────────────────────────────┘
}
→ Copilot modifies the function inline:
function processPayment(amount) {
if (amount <= 0) {
throw new Error("Amount must be positive");
}
// ... rest of function
}
The Quick Fix Lightbulb
When your code has an error — marked with a red underline — a small lightbulb icon appears near the problem. Click it and select Fix using Copilot. Copilot reads the error message and the surrounding code, then suggests a fix.
const total = items.reduce((sum item) => ← red underline
↑
(missing comma is the error)
[💡]
Fix using Copilot
→ Copilot adds the missing comma
Editor Chat vs. Terminal Chat
Copilot Chat also works inside the VS Code terminal. Open the integrated terminal with Ctrl+`, then type @terminal in the chat to ask Copilot questions specifically about command-line tasks.
EDITOR CHAT: Best for code, functions, files, and explanations TERMINAL CHAT: Best for shell commands, npm scripts, git commands
Knowing which interface to use for each task saves time. Use inline suggestions for everyday code flow. Use Chat for explanations, bigger changes, and questions. Use Inline Chat for targeted edits. Use the Completions Panel when you want to compare options.