|
| 1 | +## Step 1: Install Copilot CLI and Use the Issue Template |
| 2 | + |
| 3 | +Duck prefers working in the terminal and wants to use AI from there. |
| 4 | +Duck is getting ready to develop a new Node.js CLI calculator app and plans to install the standalone Copilot CLI to build the application from the terminal. |
| 5 | + |
| 6 | +### 📖 Theory: GitHub Copilot CLI - A Standalone Terminal Application |
| 7 | + |
| 8 | +#### What is GitHub Copilot CLI? |
| 9 | + |
| 10 | +GitHub Copilot CLI is a **standalone terminal application** that brings the power of GitHub Copilot directly to your command line. It is installed via npm and provides a rich interactive experience for developers. |
| 11 | + |
| 12 | +<img width="60%" height="60%" alt="CopilotCLI" src="../images/copilot-cli.png" /> |
| 13 | + |
| 14 | +#### Key capabilities and options to be aware of include: |
| 15 | + |
| 16 | +- Providing intelligent command suggestions powered by the latest AI models from OpenAI and Google |
| 17 | +- Generating code snippets and scripts directly in your terminal |
| 18 | +- Assisting with Git operations and GitHub interactions |
| 19 | +- Supporting image inputs via paste and drag-and-drop for visual context |
| 20 | +- The `--enable-all-github-mcp-tools` flag enables all GitHub MCP (Model Context Protocol) tools, giving Copilot CLI access to GitHub features like creating issues, managing repositories, and more. |
| 21 | +- Depending on your Copilot CLI configuration (for example, if you don't use the `--allow-all` option), you may be prompted to enable certain features during the session. Respond **yes** to these prompts as well. |
| 22 | +- `/session`: Shows details about your current chat session. |
| 23 | +- `/context`: Provides a visual overview of your current token usage |
| 24 | +- `/usage`: Lets you view your session statistics, including: |
| 25 | + - The amount of premium requests used in the current session |
| 26 | + - The session duration |
| 27 | + - The total lines of code edited |
| 28 | + - A breakdown of token usage per model |
| 29 | +- `/share [file|gist] [path]` - Share session to markdown file or GitHub gist |
| 30 | +- Creating **custom agents** to encode specialized prompts and workflows |
| 31 | +- Delegating tasks to **Copilot coding agent** using the `/delegate` command |
| 32 | + |
| 33 | +#### Global shortcuts |
| 34 | + |
| 35 | +```text |
| 36 | + @ mention files, include contents in context |
| 37 | + Esc cancel the current operation |
| 38 | + ! execute command in your local shell (bypass Copilot) |
| 39 | + ctrl+c cancel operation / clear input / exit |
| 40 | + ctrl+d shutdown |
| 41 | + ctrl+l clear the screen |
| 42 | + shift+tab switch between plan mode and regular interactive mode |
| 43 | +``` |
| 44 | + |
| 45 | +#### Installation Requirements |
| 46 | + |
| 47 | +To install Copilot CLI, you need: |
| 48 | + |
| 49 | +- Node.js version 22 or later |
| 50 | +- npm version 10 or later |
| 51 | +- An active GitHub Copilot subscription (Pro, Pro+, Business, or Enterprise) |
| 52 | + |
| 53 | +#### Issue Templates |
| 54 | + |
| 55 | +Issue templates help maintain consistency when team members create issues. This repository already has a `feature_request.md` template that you'll use to create your calculator app issue. Templates ensure: |
| 56 | + |
| 57 | +- All necessary information is captured upfront |
| 58 | +- Issues follow a standard format |
| 59 | +- The team can triage and respond to issues more efficiently |
| 60 | + |
| 61 | +#### References |
| 62 | + |
| 63 | +- [Installing GitHub Copilot CLI](https://docs.github.com/en/copilot/how-tos/set-up/install-copilot-cli) |
| 64 | +- [Using GitHub Copilot CLI](https://docs.github.com/en/copilot/how-tos/use-copilot-agents/use-copilot-cli) |
| 65 | +- [GitHub Copilot CLI 101](https://github.blog/ai-and-ml/github-copilot-cli-101-how-to-use-github-copilot-from-the-command-line/) |
| 66 | + |
| 67 | +> [!IMPORTANT] |
| 68 | +> If you have restarted your codespace you may need to run `copilot --allow-all` and then authenticate with GitHub again by running `!gh auth login` in your terminal, |
| 69 | +> or use `!gh auth login` from within the Copilot CLI session. |
| 70 | +
|
| 71 | +### :keyboard: Activity 1: Getting to know your development environment |
| 72 | + |
| 73 | +1. Right-click the below button to open the **Create Codespace** page in a new tab. |
| 74 | + |
| 75 | + [](https://codespaces.new/{{full_repo_name}}?quickstart=1) |
| 76 | + - The free tier of Codespaces that comes with all GitHub accounts is fine, assuming you still have minutes available. |
| 77 | + - The default Codespace settings are fine. |
| 78 | + |
| 79 | +> [!IMPORTANT] |
| 80 | +> This Codespace VS Code environment has been simplified to focus on using the Copilot CLI in the terminal. You'll primarily be working with terminal commands rather than the full VS Code feature set. |
| 81 | +
|
| 82 | +1. Confirm the **Repository** field is your copy of the exercise, not the original, then click the green **Create Codespace** button. |
| 83 | + - ✅ Your copy: `/{{full_repo_name}}` |
| 84 | + - ❌ Original: `/arilivigni/create-applications-with-the-copilot-CLI` |
| 85 | + |
| 86 | +1. Wait a moment for Visual Studio Code to load. |
| 87 | + |
| 88 | +1. We will be focused on the full terminal window since this is all about the CLI. |
| 89 | + |
| 90 | +### ⌨️ Activity 2: Install the Standalone Copilot CLI |
| 91 | + |
| 92 | +1. Open your Codespace (if not already open) |
| 93 | + |
| 94 | +1. Install the standalone GitHub Copilot CLI by running in the terminal window: |
| 95 | + |
| 96 | + >  |
| 97 | +
|
| 98 | + > ```bash |
| 99 | + > npm install -g @github/copilot |
| 100 | + > ``` |
| 101 | +
|
| 102 | +1. Verify the installation by running: |
| 103 | +
|
| 104 | + >  |
| 105 | +
|
| 106 | + > ```bash |
| 107 | + > copilot --version |
| 108 | + > ``` |
| 109 | +
|
| 110 | +> [!TIP] |
| 111 | +> After installation, you can use the `copilot` command anywhere in your terminal to start an interactive session! |
| 112 | +
|
| 113 | +### ⌨️ Activity 3: Create an Issue Using Copilot CLI |
| 114 | +
|
| 115 | +1. Start an interactive Copilot CLI session: |
| 116 | +
|
| 117 | + >  |
| 118 | + > |
| 119 | + > ```bash |
| 120 | + > copilot --enable-all-github-mcp-tools |
| 121 | + > ``` |
| 122 | +
|
| 123 | +> [!NOTE] |
| 124 | +> When starting Copilot CLI, you may be prompted to add this folder to the trusted folder list and to key bindings. Respond **yes** to both prompts to continue. |
| 125 | +
|
| 126 | +<img width="60%" height="60%" alt="CopilotCLIAddDir" src="../images/copilot-cli-add-directory.png" /> |
| 127 | +<br /> |
| 128 | +<img width="60%" height="60%" alt="CopilotCLITerminalBindings" src="../images/copilot-cli-terminal-bindings.png" /> |
| 129 | +
|
| 130 | +
|
| 131 | +2. Authorize with GitHub (if not already authenticated) in the Copilot CLI: |
| 132 | +
|
| 133 | + >  |
| 134 | + > |
| 135 | + > ```prompt |
| 136 | + > /login |
| 137 | + > ``` |
| 138 | +
|
| 139 | +> [!NOTE] |
| 140 | +> After running `!gh auth login`, you will be provided with a link and an authentication code. Click the link to open GitHub in your browser, then enter the code to complete the authentication process. |
| 141 | +
|
| 142 | +3. Explore useful slash commands in Copilot CLI: |
| 143 | + - View your current session information: |
| 144 | +
|
| 145 | + >  |
| 146 | + > |
| 147 | + > ```prompt |
| 148 | + > /session |
| 149 | + > ``` |
| 150 | +
|
| 151 | + - View your current context information: |
| 152 | +
|
| 153 | + >  |
| 154 | + > |
| 155 | + > ```prompt |
| 156 | + > /context |
| 157 | + > ``` |
| 158 | +
|
| 159 | + - View your current usage information: |
| 160 | +
|
| 161 | + >  |
| 162 | + > |
| 163 | + > ```prompt |
| 164 | + > /usage |
| 165 | + > ``` |
| 166 | +
|
| 167 | +> [!NOTE] |
| 168 | +> |
| 169 | +> - `/session`: Command shows details about your current chat session. |
| 170 | +> - `/context`: Provides a visual overview of your current token usage |
| 171 | +> - `/usage`: Lets you view your session statistics, including: |
| 172 | +> - The amount of premium requests used in the current session |
| 173 | +> - The session duration |
| 174 | +> - The total lines of code edited |
| 175 | +> - A breakdown of token usage per model |
| 176 | +
|
| 177 | +4. Ask Copilot CLI to help you create a feature request issue for the calculator app: |
| 178 | +
|
| 179 | + >  |
| 180 | + > |
| 181 | + > ```prompt |
| 182 | + > Create a GitHub issue for a Node.js CLI calculator app using the following template |
| 183 | + > .github/ISSUE_TEMPLATE/feature_request.md template and make sure the issue is in a |
| 184 | + > markdown format that contains "calculator" in the title and follows the format of |
| 185 | + > the issue template. |
| 186 | + > I want to request a feature for basic arithmetic operations including |
| 187 | + > - addition |
| 188 | + > - subtraction |
| 189 | + > - multiplication |
| 190 | + > - division |
| 191 | + > The calculator should be implemented in calculator.js |
| 192 | + > Create the issue directly in the current owner in this session |
| 193 | + > and repository on github.com using the `gh` CLI commands. |
| 194 | + > List the issue link when complete |
| 195 | + > ``` |
| 196 | +
|
| 197 | +5. Mona should already be busy checking your work. Give her a moment and keep watch in the comments. You will see her respond with progress info and the next lesson. |
| 198 | +
|
| 199 | +> [!NOTE] |
| 200 | +> Copilot CLI may ask to confirm creating the issue and using `gh issue` and `git config`. |
| 201 | +> Respond **yes** to creating the issue and |
| 202 | +> **"Yes, and approve `gh issue` or `git config` for the rest of the running session"**. |
| 203 | +
|
| 204 | +<img width="60%" height="60%" alt="CopilotCLIPerms" src="../images/copilot-cli-permissions.png" /> |
| 205 | +
|
| 206 | +<details> |
| 207 | +<summary>Having trouble? 🤷</summary><br/> |
| 208 | +
|
| 209 | +- Make sure you have Node.js 22+ installed: `node --version` |
| 210 | +- If npm install fails, try: `sudo npm install -g @github/copilot` |
| 211 | +- Make sure you have GitHub Copilot access enabled for your account |
| 212 | +- If authentication fails, run `copilot` and run `!gh auth login` |
| 213 | +- You can also create the issue through the GitHub UI if needed |
| 214 | +
|
| 215 | +</details> |
0 commit comments