Exercise 6 - Custom agents with GitHub Copilot CLI

Esta página aún no está disponible en tu idioma.

What are custom agents?

Custom agents in GitHub Copilot allow you to create specialized AI assistants tailored to specific tasks or domains within your development workflow. By defining agents through markdown files in the .github/agents folder of your repository, you can provide Copilot with focused instructions, best practices, coding patterns, and domain-specific knowledge that guide it to perform particular types of work more effectively. Teams can codify their expertise into reusable agents — an accessibility agent that enforces WCAG compliance, a security agent that follows secure coding practices, or a testing agent that maintains consistent test patterns.

Custom agents are defined by markdown files in the .github/agents folder of your project, or globally in ~/.copilot/agents. Each file has YAML frontmatter with at least a name and description, followed by a markdown prompt that defines the agent’s behavior, expertise, and instructions.

Custom agents compared with agent skills

There’s some logical overlap between custom agents and agent skills. Both are primarily defined with markdown files and tell an AI how to perform operations. The cleanest way to separate them: a custom agent is the worker, and skills are tools.

Custom agents have their own context window and are built to orchestrate skills (and even other agents) as part of doing their work. In this lab, the accessibility custom agent reviews and updates the site against accessibility guidelines; as part of that work it could call skills such as a pull-request workflow skill or one that runs and manages tests.

There’s no single “right” way to author a custom agent. As with anything in AI, test and iterate to find what works for your environments and scenarios.

Scenario

Many web applications fall short of being accessible to all users, and the website you’re working in is no exception. You’ll use a custom agent to identify and resolve accessibility shortcomings.

Tailspin Toys is committed to ensuring their crowdfunding platform is accessible to all users, regardless of their visual abilities or preferences. Recent user feedback has highlighted that some users find the current dark theme difficult to read due to insufficient contrast between text and background colors. To address this accessibility concern, the design team has requested the implementation of a high-contrast mode that users can toggle on and off.

Because accessibility is critical, you want to ensure this is implemented as quickly as possible. You’re going to utilize a custom agent to generate the functionality. In this exercise, you will:

explore custom agents.
enable a custom agent and assign it a task using Copilot CLI.

Reviewing the accessibility custom agent

A custom agent has already been created for you for accessibility. Let’s review the contents to understand how it will guide Copilot.

Open .github/agents/accessibility.md.
Note the YAML frontmatter with the name and description fields.

The frontmatter with name and description is required for custom agents.

From there, scan and review the next sections which highlight:
- Core responsibilities when generating code for an accessible website.
- Best practices for accessibility.
- Code examples for HTML, CSS, and JavaScript.
- A list of common pitfalls and mistakes.

Using a custom agent in Copilot CLI

You can start a custom agent in Copilot CLI by using the /agent command. Let’s perform an accessibility pass on our website.

Start a Copilot CLI session

Before you start the exercises below, return to your codespace and open a terminal (Ctrl+` if one isn’t already open). Then start Copilot CLI with --yolo and --enable-all-github-mcp-tools:

copilot --yolo --enable-all-github-mcp-tools

To pick up your most recent session for this project instead of starting fresh, run copilot --yolo --enable-all-github-mcp-tools --continue. If Copilot CLI is already running from an earlier exercise, send /clear to start a clean conversation.

--enable-all-github-mcp-tools enables the read/write GitHub MCP tools for the current session, so Copilot can read your backlog and open pull requests during the workshop flow.

--yolo enables full automatic permissions (--allow-all-tools, --allow-all-paths, and --allow-all-urls). Use it only in an isolated environment like a Codespace or VM, and never alias it as your default for day-to-day development. See Allowing and denying tool use for details.

Bring up the list of agents by typing /agent in the prompt window in Copilot CLI and selecting Enter.
Select the Accessibility agent from the list of available agents.

Use the following prompt to ask the accessibility agent to perform a review and generate fixes for the accessibility backlog item:

Perform an accessibility review of the site. Pull the related issue down from the repository for details. Implement a high-contrast mode toggle that persists the user's preference across page reloads. Ensure there are e2e tests for any updates made to the project. Then create a PR with the updates.

Copilot gets to work on the task! It will start by retrieving the issue, then performing the review, generating updates, and finally creating the PR. You should also notice when it creates the PR it utilizes the skill focused on PRs for the project.

This process will likely take a few minutes. It’s a good time to reflect on everything you’ve learned, enjoy a beverage, or sneak ahead to the next module which talks about some additional commands available to you in Copilot CLI.

Summary and next steps

This lesson explored custom agents in GitHub Copilot, specialized AI assistants tailored to specific tasks and domains. With custom agents you can codify your team’s expertise and standards into reusable agents that guide Copilot to perform particular types of work more effectively.

You explored these concepts:

how custom agents are defined.
using a custom agent in Copilot CLI.

Next up, let’s explore some slash commands to learn some additional tricks with Copilot CLI.