GitHub Copilot

Inline Completions, Chat & Workspace

GitHub Copilot

AI-Powered Code Completion in Your Editor

GitHub Copilot integrates directly into VS Code (and other editors), providing inline code suggestions as you type. It also includes Copilot Chat for conversational AI assistance and Copilot Workspace for multi-file task planning.

Key Features:

Inline completions: Real-time suggestions as you type — press Tab to accept
Copilot Chat: Conversational AI in a side panel for explanations, refactoring, and debugging
Slash commands: /explain, /fix, /tests, /doc for common tasks
Copilot Workspace: Plan and implement multi-file changes from GitHub Issues

# Copilot Project Instructions

This is a Next.js 16 App Router project.

## Conventions
- Use Server Components by default
- Add 'use client' only for interactive components
- Use TypeScript with strict types
- Style with Tailwind CSS v4
- Use next/image for all images
- Data fetching in Server Components, never useEffect

## Patterns
- Page components in app/[route]/page.tsx
- Shared components in src/components/
- Server Actions for mutations

Setup: Install the GitHub Copilot extension in VS Code, sign in with your GitHub account, and create a .github/copilot-instructions.md file in your repo root for project-specific instructions.

Copilot Chat

Conversational AI for Code Tasks

Copilot Chat lives in the VS Code sidebar and understands your open files, workspace, and terminal output. Use it for explanations, debugging, and generating code with natural language.

Copilot Chat slash commands
Command	What It Does	Example Use
`/explain`	Explains selected code	Select a complex function, run /explain
`/fix`	Suggests fixes for errors	Paste a TypeScript error, run /fix
`/tests`	Generates test cases	Select a component, run /tests
`/doc`	Adds documentation	Select a function, run /doc

// In Copilot Chat, you can ask:
//
// "Create a Server Component that fetches products
//  from the API and displays them in a grid.
//  Follow the patterns in src/app/page.tsx."
//
// Copilot reads your workspace context and generates
// code that matches your project's conventions.

Tip: Use #file:path/to/file.tsx in chat to reference specific files. Use @workspace to ask questions about your entire project.

Copilot Workflow for Next.js

Practical Patterns for Daily Development

Scaffolding pages: Start typing a page component and let Copilot complete the data fetching, layout, and metadata
Writing Server Actions: Describe what the action should do in a comment, Copilot generates the validation and logic
Debugging: Paste an error in Chat with /fix and your file context for targeted solutions
Refactoring: Select code, ask Chat to extract a component or convert to a Server Component
Tests: Select a function or component, use /tests to generate a test suite

// Fetch all products and render them in a responsive grid
// with image, title, price, and a link to the detail page
export default async function ProductsPage() {
  // Start typing here — Copilot completes the rest
  // based on your comment and project context
}

Key Insight: Copilot works best when you write clear comments describing intent. A well-written comment is essentially a prompt — the better the comment, the better the completion.