Demo Inline Chat

This lesson demonstrates GitHub Copilot’s Inline Chat feature, which lets developers interact with Copilot directly in their code editor to explain code, refactor, generate new snippets, scaffold tests, and produce documentation.

A minimalist presentation slide showing a dark blue curved shape on the right and the text "Inline Chat" (center) and "Demo" (on the dark shape). A small "© Copyright KodeKloud" appears in the bottom-left.

Quick access:

macOS: Command+I
Windows / Linux: Ctrl+I
Or: right-click the editor → “Copilot Editor → Inline Chat”

Invoke inline chat by selecting code and typing a prompt (for example, explain or /explain). Use “View in Chat” to open the same content in the sidebar chat if you prefer a larger workspace.

Why use Inline Chat

Get immediate explanations for selected code.
Request refactors or configuration changes in-place.
Generate helper functions, unit-test scaffolding, or documentation.
Keep context inside the editor — no context switching to a browser.

Short keyboard reference:

Platform	Shortcut
macOS	`Command+I`
Windows / Linux	`Ctrl+I`
Context menu	Right-click editor → `Copilot Editor → Inline Chat`

Explaining code with Inline Chat Select a code block and ask Copilot to explain it. The tool will break down intent, variables, and control flow, and provide a short summary. Example: logic that determines whether a car moving north should stop at a stop line, obey a traffic light, and maintain a safe gap.

if self.direction == 'north':
    # Car is moving downward.
    front = self.rect.bottom  # front of the car
    # If the car will reach the stop line next frame, obey the light.
    if front + CAR_SPEED >= STOP_LINE['north']:
        if light_state != 'green':
            move = False
    # Check car ahead: ensure safe gap.
    for other in cars_ahead:
        # Skip cars that are behind or not in front of us.
        if other.rect.bottom <= self.rect.top:
            continue
        if other.rect.top - self.rect.bottom < SAFE_GAP:
            move = False

Inline Chat typically explains what front represents, why the light state is checked, and how SAFE_GAP prevents collisions. Use /explain or a natural-language prompt like “Explain this logic” to get a line-by-line explanation plus a short summary. Inspecting a method or class Run inline chat against a method or an entire class to get more context. Example Car class with initialization and an update method that contains the above logic:

import pygame

class Car:
    def __init__(self, direction):
        self.direction = direction
        self.width, self.height = (20, 40) if direction in ('north', 'south') else (40, 20)

        if direction == 'north':
            self.x = CENTER_X - self.width // 2
            self.y = -self.height
        elif direction == 'south':
            self.x = CENTER_X - self.width // 2
            self.y = WINDOW_HEIGHT
        elif direction == 'east':
            self.x = WINDOW_WIDTH
            self.y = CENTER_Y - self.height // 2
        elif direction == 'west':
            self.x = -self.width
            self.y = CENTER_Y - self.height // 2

        # Simple rectangular representation.
        self.color = (200, 200, 200)
        self.rect = pygame.Rect(self.x, self.y, self.width, self.height)

    def update(self, light_state, cars_ahead):
        """
        Update the car's position.
        - Stop at the stop line if the light is not green.
        - Maintain a safe gap to the car ahead.
        """
        move = True  # assume car can move

        if self.direction == 'north':
            # Car moves downward (increasing y).
            front = self.rect.bottom
            if front + CAR_SPEED >= STOP_LINE['north'] and light_state != 'green':
                move = False

            for other in cars_ahead:
                if other.rect.bottom <= self.rect.top:
                    continue
                if other.rect.top - self.rect.bottom < SAFE_GAP:
                    move = False

        # Apply movement if allowed (example for north)
        if move:
            if self.direction == 'north':
                self.rect.y += CAR_SPEED
            # Add movement logic for other directions as needed.

Refactoring and configuration suggestions Inline Chat can recommend moving hard-coded values to configuration files (JSON, YAML), creating constants, or extracting helper functions. Example: moving colors and constants to a JSON config and loading them at runtime:

import json
import pygame

# Window and road dimensions
WINDOW_WIDTH, WINDOW_HEIGHT = 800, 800
ROAD_WIDTH = 100
CENTER_X, CENTER_Y = WINDOW_WIDTH // 2, WINDOW_HEIGHT // 2

# Stop lines for each direction (cars stop before entering the intersection)
STOP_LINE = {
    'north': CENTER_Y - ROAD_WIDTH // 2,
    'south': CENTER_Y + ROAD_WIDTH // 2,
    'east':  CENTER_X + ROAD_WIDTH // 2,
    'west':  CENTER_X - ROAD_WIDTH // 2,
}

# Car and traffic constants
CAR_SPEED = 3  # pixels per frame
SAFE_GAP = 10  # pixels

# Load configuration from a JSON file
def load_config(config_file):
    with open(config_file, 'r') as f:
        return json.load(f)

CONFIG_FILE = 'config.json'
config = load_config(CONFIG_FILE)

LIGHT_COLORS = config.get('light_colors', {
    'green': (0, 255, 0),
    'yellow': (255, 255, 0),
    'red': (255, 0, 0),
})

Generating helper functions Inline Chat can propose and write helper functions. Example: compute the current traffic light state for a direction given a cycle timer.

def get_light_state(direction, cycle_timer):
    """
    Returns the current light state for a given direction.
    There are two groups:
    - 'north' and 'south': NS group
    - 'east' and 'west': EW group
    The cycle_timer loops from 0 to CYCLE_LENGTH.
    """
    t = cycle_timer % CYCLE_LENGTH
    if direction in ['north', 'south']:
        # NS light: Green [0, NS_GREEN_DURATION),
        # Yellow [NS_GREEN_DURATION, NS_GREEN_DURATION+NS_YELLOW_DURATION),
        # Red [NS_GREEN_DURATION+NS_YELLOW_DURATION, CYCLE_LENGTH)
        if t < NS_GREEN_DURATION:
            return 'green'
        elif t < NS_GREEN_DURATION + NS_YELLOW_DURATION:
            return 'yellow'
        else:
            return 'red'
    # For 'east'/'west' you'd implement the analogous timing logic, shifted within the cycle.

Test generation and scaffolding Ask Copilot to produce unit tests for functions such as get_light_state. It can scaffold tests using pytest or unittest, including example assertions you can refine. Example terminal output when installing pytest:

$ pip install pytest
Collecting pytest
  Downloading pytest-8.3.5-py3-none-any.whl (316 kB)
Installing collected packages: iniconfig, packaging, pluggy, pytest
Successfully installed iniconfig-2.0.0 packaging-24.2 pluggy-1.5.0 pytest-8.3.5

[notice] A new release of pip is available: 24.2 -> 25.0.1
[notice] To update, run: /Users/jeremy/.pyenv/versions/3.13.0/bin/python -m pip install --upgrade pip

Summary of Inline Chat capabilities

Capability	What it helps with	Example prompt
Code explanation	Understand lines, variables, and control flow	`Explain this function`
Refactoring	Move constants to config, rename functions, extract helpers	`Refactor to use a config file`
Generate code	Create helper functions or features	`Create a light-timing helper`
Unit tests	Scaffold pytest or unittest tests	`Generate pytest tests for get_light_state`
Documentation	Add docstrings and comments	`Add a docstring to this class`

Be mindful of sensitive data. Do not paste secrets, private keys, or proprietary code into inline chat prompts. Review generated code for correctness, edge cases, and security implications before merging.

Best practices

Provide focused prompts (e.g., “simplify this loop” or “add edge-case tests for red light behavior”).
Use “View in Chat” to move longer interactions into the sidebar for a larger workspace and persistent context.
Review and run generated tests locally; treat suggestions as starting points, not final production code.

Links and references

This lesson showed how to use Copilot’s Inline Chat to inspect, refactor, and augment code directly inside your editor for faster iteration and clearer code understanding.

Introduction

GitHub Copilot Basics

Prompt Engineering with Copilot

Advanced Features

Management of GitHub Copilot

Using Copilot Efficiently

Watch Video